Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites 
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

Chapter 1: Creating a New Type

Files:

A common task when extending QML is to provide a new QML type that supports some custom functionality beyond what is provided by the built-in QML Elements. For example, this could be done to implement particular data models, or provide elements with custom painting and drawing capabilities, or access system features like network programming that are not accessible through built-in QML features.

In this tutorial, we will show how to use the C++ classes in the Qt Declarative module to extend QML. The end result will be a simple Pie Chart display implemented by several custom QML types connected together through QML features like bindings and signals, and made available to the QML runtime through a plugin.

To begin with, let's create a new QML type called "PieChart" that has two properties: a name and a color. We will make it available in a module called "Charts", with a module version of 1.0.

We want this PieChart type to be usable from QML like this:

 import Charts 1.0

 PieChart {
     width: 100; height: 100
     name: "A simple pie chart"
     color: "red"
 }

To do this, we need a C++ class that encapsulates this PieChart type and its two properties. Since QML makes extensive use of Qt's meta object system, this new class must:

  • Inherit from QObject
  • Declare its properties using the Q_PROPERTY macro

Here is our PieChart class, defined in piechart.h:

 #include <QDeclarativeItem>
 #include <QColor>

 class PieChart : public QDeclarativeItem
 {
     Q_OBJECT
     Q_PROPERTY(QString name READ name WRITE setName)
     Q_PROPERTY(QColor color READ color WRITE setColor)

 public:
     PieChart(QDeclarativeItem *parent = 0);

     QString name() const;
     void setName(const QString &name);

     QColor color() const;
     void setColor(const QColor &color);

     void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);

 private:
     QString m_name;
     QColor m_color;
 };

The class inherits from QDeclarativeItem because we want to override QDeclarativeItem::paint() in order to draw. If the class just represented some data type and was not an item that actually needed to be displayed, it could simply inherit from QObject. Or, if we want to extend the functionality of an existing QObject-based class, it could inherit from that class instead.

The PieChart class defines the two properties, name and color, with the Q_PROPERTY macro, and overrides QDeclarativeItem::paint(). The class implementation in piechart.cpp simply sets and returns the m_name and m_color values as appropriate, and implements paint() to draw a simple pie chart. It also turns off the QGraphicsItem::ItemHasNoContents flag to enable painting:

 PieChart::PieChart(QDeclarativeItem *parent)
     : QDeclarativeItem(parent)
 {
     // need to disable this flag to draw inside a QDeclarativeItem
     setFlag(QGraphicsItem::ItemHasNoContents, false);
 }
 ...
 void PieChart::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
 {
     QPen pen(m_color, 2);
     painter->setPen(pen);
     painter->setRenderHints(QPainter::Antialiasing, true);
     painter->drawPie(boundingRect(), 90 * 16, 290 * 16);
 }

Now that we have defined the PieChart type, we will use it from QML. The app.qml file creates a PieChart item and display the pie chart's details using a standard QML Text item:

 import Charts 1.0
 import QtQuick 1.0

 Item {
     width: 300; height: 200

     PieChart {
         id: aPieChart
         anchors.centerIn: parent
         width: 100; height: 100
         name: "A simple pie chart"
         color: "red"
     }

     Text {
         anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
         text: aPieChart.name
     }
 }

Notice that although the color is specified as a string in QML, it is automatically converted to a QColor object for the PieChart color property. Automatic conversions are provided for various other basic types; for example, a string like "640x480" can be automatically converted to a QSize value.

We'll also create a C++ application that uses a QDeclarativeView to run and display app.qml. The application must register the PieChart type using the qmlRegisterType() function, to allow it to be used from QML. If you don't register the type, app.qml won't be able to create a PieChart.

Here is the application main.cpp:

 #include "piechart.h"
 #include <qdeclarative.h>
 #include <QDeclarativeView>
 #include <QApplication>

 int main(int argc, char *argv[])
 {
     QApplication app(argc, argv);

     qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart");

     QDeclarativeView view;
     view.setSource(QUrl::fromLocalFile("app.qml"));
     view.show();
     return app.exec();
 }

This call to qmlRegisterType() registers the PieChart type as a type called "PieChart", in a module named "Charts", with a module version of 1.0.

Lastly, we write a .pro project file that includes the files and the declarative library:

 QT += declarative

 HEADERS += piechart.h
 SOURCES += piechart.cpp \
            main.cpp

Now we can build and run the application:

Try it yourself with the code in Qt's examples/tutorials/extending/chapter1-basics directory.

At the moment, the app.qml is run from within a C++ application. This may seem odd if you're used to running QML files with the QML Viewer. Later on, we'll show how to create a plugin so that you can run app.qml using the QML Viewer instead.

Publicité

Best Of

Actualités les plus lues

Semaine
Mois
Année
  1. Microsoft ouvre aux autres compilateurs C++ AMP, la spécification pour la conception d'applications parallèles C++ utilisant le GPU 22
  2. Les développeurs ignorent-ils trop les failles découvertes dans leur code ? Prenez-vous en compte les remarques des autres ? 17
  3. RIM : « 13 % des développeurs ont gagné plus de 100 000 $ sur l'AppWord », Qt et open-source au menu du BlackBerry DevCon Europe 0
  4. « Quelque chose ne va vraiment pas avec les développeurs "modernes" », un développeur à "l'ancienne" critique la multiplication des bibliothèques 12
  5. BlackBerry 10 : premières images du prochain OS de RIM qui devrait intégrer des widgets et des tuiles inspirées de Windows Phone 0
  6. Adieu qmake, bienvenue qbs : Qt Building Suite, un outil déclaratif et extensible pour la compilation de projets Qt 17
  7. Quelles nouveautés de C++11 Visual C++ doit-il rapidement intégrer ? Donnez-nous votre avis 10
Page suivante

Le Qt Developer Network au hasard

Logo

Compiler l'add-in Qt de Visual Studio

Le Qt Developer Network est un réseau de développeurs Qt anglophone, où ils peuvent partager leur expérience sur le framework. Lire l'article.

Communauté

Ressources

Liens utiles

Contact

  • Vous souhaitez rejoindre la rédaction ou proposer un tutoriel, une traduction, une question... ? Postez dans le forum Contribuez ou contactez-nous par MP ou par email (voir en bas de page).

Qt dans le magazine

Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia. Qt 4.7-snapshot
Copyright © 2012 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon, vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.
Vous avez déniché une erreur ? Un bug ? Une redirection cassée ? Ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter ou par MP !
 
 
 
 
Partenaires

Hébergement Web