Découvrons DotNet sur différentes plateformes » Qml https://blog.developpez.com/insideqt Sun, 28 Dec 2014 15:50:37 +0000 fr-FR hourly 1 https://wordpress.org/?v=4.1.42 QML Cursor https://blog.developpez.com/insideqt/p9711/qml/qml_cursor https://blog.developpez.com/insideqt/p9711/qml/qml_cursor#comments Wed, 26 Jan 2011 09:45:26 +0000 Un petit billet pour vous montrer comment changer le curseur de la souris lors du survole d’un bouton dans une application Qt mixte C++/QML.

Il n’existe apparemment pas de fonction QML pour changer le curseur de l’application, je vous propose donc de le faire manuellement.

Résultat :

Bibliothèque C++ :

Je crée une classe de bibliothèque nommé Biblio.
Dans cette classe, je crée une méthode AfficheCurseur qui récupère le nom du curseur et qui affiche le curseur correspondant.

Biblio.h

#ifndef BIBLIO_H
#define BIBLIO_H
#include <QObject>
#include <qdeclarative.h>
 
class Biblio : public QObject
{
    Q_OBJECT
public:
    explicit Biblio(QObject *parent = 0);
    Q_INVOKABLE void AfficheCurseur(QString);
signals:
public slots:
 
};
#endif // BIBLIO_H

Biblio.cpp

#include "biblio.h"
#include <QtGui/QApplication>
#include <QCursor>
 
Biblio::Biblio(QObject *parent) :
    QObject(parent)
{
}
void Biblio::AfficheCurseur(QString typeCurseur)
{
    QCursor curseur;
    if(typeCurseur.toUpper() == "HAND")
        curseur = QCursor(Qt::PointingHandCursor);
    else
        curseur = QCursor(Qt::ArrowCursor);
    QApplication::setOverrideCursor(curseur);
}

Connexion C++ vers QML :

Pour rendre accessible la méthode AfficheCurseur en QML, il faut référencer un objet Biblio dans l’objet QDeclarativeView.

Dans le fichier MainWindow.h, je crée mon objet Biblio.

private:
    QDeclarativeView *ui;
    Biblio biblio;

Dans le fichier MainWindow.cpp j’ajoute la référence de mon objet Biblio sur le contexte du QDeclarativeView.
Dans mon code QML, il sera appelable par le nom donné dans la méthode setContextProperty

ui->rootContext()->setContextProperty("Biblio", &biblio);

Création du composant Bouton :

Je m’appuie sur les boutons de l’exemple fourni dans Qt sdk 4.7 disponible à cette adresse

Je crée un fichier QML nommé Bouton.qml.
Dans ce bouton, je crée une surface de capture d’événement de la souris MouseArea. Sur cette surface, je me connecte au signal onEntered et onExited qui respectivement capture l’entrée et la sortie du la souris sur la surface d’exposition.
Attention, la propriété hoverEnabled doit être active, sinon l’événement est appelé uniquement lors du clique de la souris.

Sur ces signaux, j’appelle la fonction AfficheCurseur de mon objet Biblio.

Ce qui donne :

import Qt 4.7
BorderImage {
     id: button
     property alias text: buttonText.text
     property alias font: buttonText.font
     property string color: ""
     property string hint: ""
     property int bordure: 8;
     property int tag: 0;
     signal boutonClick(int idBouton)
     source: "images/button-" + color + ".png"; clip: true
     border { left: 10; top: 10; right: 10; bottom: 10 }
     width: buttonText.width + bordure*2;
     Rectangle {
         id: shade
         anchors.fill: button; radius: 10; color: "black"; opacity: 0
     }
     Text {
         id: buttonText
         anchors.centerIn: parent; anchors.verticalCenterOffset: -1
         font.pixelSize: 20;
         style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
     }
     MouseArea {
         id: mouseArea
         anchors.fill: parent
         hoverEnabled: true
         onClicked: {
             button.boutonClick(button.tag)
         }
         onEntered: {
             Biblio.AfficheCurseur("hand")
         }
         onExited: {
             Biblio.AfficheCurseur("none")
         }
     }
     states: State {
         name: "pressed"; when: mouseArea.pressed == true
         PropertyChanges { target: shade; opacity: .4 }
     }
 }
]]> 0 Installation Qt / Qt Creator / Qt Quick https://blog.developpez.com/insideqt/p9693/qml/installation_qt_qt_creator_qt_quick https://blog.developpez.com/insideqt/p9693/qml/installation_qt_qt_creator_qt_quick#comments Fri, 21 Jan 2011 09:31:21 +0000 Le but de ce billet est de présenter l’installation de Qt, Qt creator et Qt Quick sur un environnement Windows XP.

Mes Pré requis :

Installation :

J’installe Qt 4.7.0 dans le répertoire C:\Qt\2010.05 puis je renseigne la variable d’environnement %PATH%= … ; C:\Qt\2010.05\bin;C:\Qt\2010.05\qt\bin

Je lance Qt Creator et j’obtiens ce résultat.

Pour activer le designer de fenêtre QML, il faut activer le plugin dans QtCreator.
Aller dans le menu « Aide/A propos des plugins » et dans la fenêtre « Plugins installés » il faut tout activer dans le sous menu « Qt Quick ».

Premier projet :

Pour tester la configuration, je crée un projet via la menu « Fichier/Nouveau Fichier ou projet » et sélectionner le type de projet « QML Application ».

Je nomme le projet « InstallQml » et Qt Creator crée le projet.

Le code Qml ressemble à ceci :

import Qt 4.7
Rectangle {
    width: 200
    height: 200
    Text {
        x: 66
        y: 93
        text: "Hello World"
    }
}

Si je clique sur le menu de gauche Design, j’obtiens le rendu de mon application :

Tout à l’air de bien fonctionner :)

———————————
Edit: Ajout du chemin C:\Qt\2010.05\qt\bin dans la variable d’environnement

]]> 0 Traduction interface QML https://blog.developpez.com/insideqt/p9696/qml/traduction_interface_qml https://blog.developpez.com/insideqt/p9696/qml/traduction_interface_qml#comments Fri, 21 Jan 2011 15:08:50 +0000 Le but de ce billet est de tester l’internationalisation des applications QML.

Je m’appuie sur la documentation Qt « QML Internationalization » disponible sur ce lien http://doc.qt.nokia.com/4.7-snapshot/qdeclarativei18n.html.

Mot clés :

L’internationalisation d’une application classique Qt passe par l’utilisation de la balise tr().
Exemple : tr(« bonjour »).

En QML, le mot clé « tr » a été remplacé par « qsTr« .
Exemple : qsTr(« bonjour »).

Le mot clé « qsTr » peut être remplacé d’après la documentation par « qsTranslate« , « QT_TR_NOOP » et « QT_TRANSLATE_NOOP« .

Dans le code C++, j’utiliserai toujours le mot clé « tr » et dans mes fichiers QML, j’utiliserai le mot clef « qsTr ».

Tests :
Je crée un projet de type QML Application.

Le fichier QML généré est le suivant.

import Qt 4.7
Rectangle {
    width: 200
    height: 200
    Text {
        x: 66
        y: 93
        text: "Hello World"
    }
}

Je modifie la chaîne HelloWorld par qsTr(« Bonjour »).

import Qt 4.7
Rectangle {
    width: 200
    height: 200
    Text {
        x: 66
        y: 93
        text: qsTr("Bonjour")
    }
}

Ce qui donne ceci en mode design :

Et cela en exécution:

Interrogation :

Je n’ai pas traduit mon application mais j’ai quand même la chaîne « Bonjour » affichée.
Pourquoi ?

Tout simplement car le module de traduction de Qt affiche par défaut le texte non traduit s’il ne trouve pas de traduction.

Traduction de l’application QML:

La traduction de l’application fonctionne grâce à plusieurs logiciels : lupdate.exe, lrelease.exe et linguist.exe

  • lupdate sert à générer un fichier xml d’extension « .ts » contenant les traductions de plusieurs fichiers QML.
    Exemple : lupdate fic1.qml fic2.qml –ts trad.ts
  • lrelease sert à compiler le fichier ts en un fichier binaire d’extension « *.qm »
    Exemple : lrelease trad.ts
  • linguist est une application graphique d’aide à la traduction.

Tests :

J’applique la traduction au projet ci-dessus :

Etape 1 : J’ouvre une ligne de commande dos et je me place dans le répertoire de mon application

Etape 2 : Je génère le fichier QtTraduction.ts

Le fichier ressemble à ceci :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS>
<TS version="2.0">
<context>
    <name>QtTraduction</name>
    <message>
        <location filename="QtTraduction.qml" line="9"/>
        <source>Bonjour</source>
        <translation type="unfinished"></translation>
    </message>
</context>
</TS>

Etape 3 : Qt linguist

Je lance la commande : liguist QmlTraduction.ts et je choisi la langue cible de ma traduction.

Ici je renseigne la traduction française par une autre traduction française pour l’exemple.

Ensuite je valide la traduction par le bouton entouré sur l’image.

J’enregistre et je quitte l’application.

Dès lors, le fichier QmlTraduction est complété par la traduction.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS>
<TS version="2.0" language="fr_FR" sourcelanguage="fr_FR">
<context>
    <name>QtTraduction</name>
    <message>
        <location filename="QtTraduction.qml" line="9"/>
        <source>Bonjour</source>
        <translation>Salut</translation>
    </message>
</context>
</TS>

Etape 4 : Génération du fichier de traduction compilé

Je lance la commande : lrelease QtTraduction et j’obtiens un fichier QtTraduction.qm.

Etape5 : Lancement de l’application traduite.
Pour appliquer la traduction via qmlviewer, il faut préciser les fichiers de traduction via la commande :
Qmlviewer –translation QtTraduction.qm QtTraduction.qml

Voilà, je n’ai plus qu’à appliquer ce principe pour mes traductions d’applications QML.

]]> 0