Ubuntu Wiki

   1 [17:00] <dpm> Ok everyone, welcome to the last day of an Ubuntu App Developer Week packed with interesting content and speakers!
   2 [17:00] <dpm> Let's welcome jryannel once more, who is going to talk about how to extend Qt Quick with C++
   3 === ChanServ changed the topic of #ubuntu-classroom to: Welcome to the Ubuntu Classroom - https://wiki.ubuntu.com/Classroom || Support in #ubuntu || Upcoming Schedule: http://is.gd/8rtIi || Questions in #ubuntu-classroom-chat || Event: Ubuntu App Developer Week - Current Session: Qt Quick: Extend with C++ - Instructors: jryannel
   4 [17:01] <ClassBot> Logs for this session will be available at http://irclogs.ubuntu.com/2011/04/15/%23ubuntu-classroom.html following the conclusion of the session.
   5 [17:01] <jryannel> Hi, I'm from QtDF my name is Juergen Bocklage-Ryannel
   6 [17:02] <jryannel> I'm mainly doing training and training material
   7 [17:02] <jryannel> today I would like to talk about Qt Quick and how you can extend it with c++
   8 [17:02] <jryannel> For all of you who don't know Qt Quick...
   9 [17:03] <jryannel> it's a declarative language build on top of Qt C++ to create great user interfaces
  10 [17:03] <jryannel> I prepared a small project for today
  11 [17:03] <jryannel> please download it from: https://github.com/jryannel/ubuntu-qtquick-webinar
  12 [17:04] <jryannel> I will try to guide you through the project. While you are downloading I will tell you something about Qt Quick and C++
  13 [17:04] <jryannel> Don't worry if you can't download you will also understand without
  14 [17:05] <jryannel> Qt Quick is based on a Qt module called QtDeclarative
  15 [17:05] <ClassBot> saimanoj asked: how to download the project?
  16 [17:05] <jryannel> Please go to: https://github.com/jryannel/ubuntu-qtquick-webinar
  17 [17:05] <jryannel> you need to have git installed
  18 [17:06] <jryannel> or grab the zip file under downloads
  19 [17:06] <jryannel> QtDeclarative uses our graphicsview (a 2.5d canvas based on graphics items)
  20 [17:08] <jryannel> QtDeclarative is a ui runtime
  21 [17:08] <jryannel> it contains an QtDeclarativeEngine which will interpret your qml file
  22 [17:08] <jryannel> and a QtDeclarativeView which will paint the items
  23 [17:09] <jryannel> If you open the project (QtCreator ->Open Project) QmlCppExample.pro in
  24 [17:09] <jryannel> ubuntu-qtquick-webinar/QmlCppExample source tree
  25 [17:10] <jryannel> You will see the project files.
  26 [17:10] <jryannel> Please open the QmlCppExample.pro file
  27 [17:10] <jryannel> in the .pro file I added "QT += gui declarative"
  28 [17:11] <jryannel> This is to make the project aware we want to use the QtDeclarative modue
  29 [17:12] <jryannel> Now we can use the module in the main.cpp
  30 [17:12] <jryannel> Please open the main.cpp file
  31 [17:12] <jryannel> There we create a view "QDeclarativeView view;" and set the
  32 [17:12] <jryannel> qml source with "view.setSource(QUrl::fromLocalFile("main.qml"));"
  33 [17:13] <jryannel> As usual in qt you need also call show " view.show();"
  34 [17:13] <jryannel> You will find the main.qml file in "Other Files" in Qt Creator
  35 [17:14] <jryannel> It's a simple Rectangle with a blue color and a MoouseArea, which doesn't do anything currently
  36 [17:14] <jryannel> Just try to run the project
  37 [17:14] <jryannel> for people which don't use qt creator...
  38 [17:15] <jryannel> qmake; make; ./QmlExampleCpp
  39 [17:15] <jryannel> You need to have Qt 4.7 installed and in you rpath
  40 [17:15] <jryannel> If you get an error running the project in creator, you need to uncheck the shadow build
  41 [17:16] <jryannel> This is on the side-bar under the Projects tab
  42 [17:16] <jryannel> Just uncheck there "Shadow build"
  43 [17:16] <jryannel> If you run the project, you see a blue window, which is our blue Rectangle
  44 [17:17] <jryannel> In our project we would like now to change the color from c++ side
  45 [17:18] <jryannel> You need to uncomment the code between  //1{ ... //1} markers
  46 [17:18] <jryannel> in main.cpp and main.qml
  47 [17:18] <jryannel> Also comment the code between //{0 markers in qml
  48 [17:18] <jryannel> in main.cpp the line "view.rootContext()->setContextProperty("value", QColor("green"));"
  49 [17:19] <jryannel> pushes a property "value" into our rectangle with the value of the color green
  50 [17:20] <jryannel> We access the value in our qml file with "color: value"
  51 [17:20] <jryannel> This right side value actually comes form the c++ side.
  52 [17:20] <jryannel> So far so easy
  53 [17:21] <jryannel> Now we want to push something more complicated into our declarative environment,
  54 [17:21] <jryannel> a QObject which has a value, which again is a color.
  55 [17:22] <jryannel> Please comment the code between //{1 markers and uncomment the //{2 markers
  56 [17:22] <jryannel> in main.cpp and main.qml
  57 [17:22] <jryannel> We have a class derived from QObject called ValueObject which contains a value property
  58 [17:23] <jryannel> If you look up the valueobject.h file you can see how you declare properties for qml
  59 [17:23] <jryannel> You have a setValue(...) a value() method and
  60 [17:24] <jryannel> a valueChanged() signal
  61 [17:24] <jryannel> all 3 are required for a read/write property
  62 [17:24] <jryannel> We make them aware to the object as property with...
  63 [17:24] <jryannel> Q_PROPERTY(QColor value READ value WRITE setValue NOTIFY valueChanged)
  64 [17:24] <jryannel> This says, make a property of type QColor named color ...
  65 [17:25] <jryannel> the read method is the value() method,
  66 [17:25] <jryannel> the write method is the setValue(...) method
  67 [17:25] <jryannel> and to notify qml about changes use the valueChanged() signal
  68 [17:26] <jryannel> All methods are pretty simple, the only one worth mentioning is... setValue(...)
  69 [17:26] <jryannel> Please have a look in the valueobject.cpp file for the setValue implementation
  70 [17:26] <jryannel>     if(_value != value) {
  71 [17:26] <jryannel>         _value = value;
  72 [17:26] <jryannel>         emit valueChanged();
  73 [17:26] <jryannel>     }
  74 [17:27] <jryannel> The if ( ... ) is a guard to avoid loops.
  75 [17:28] <jryannel> Only if the value has really changed you should emit the changed signal. You need to obey this rule, otherwise you can get infinite change loops
  76 [17:28] <jryannel> So now we have q ValueObject with a value property ready to be used in qml
  77 [17:28] <jryannel> In main.cpp we create a object of this value with: "ValueObject* value = new ValueObject(QApplication::instance());"
  78 [17:29] <jryannel> and push it into qml with "view.rootContext()->setContextProperty("valueObject", value);"
  79 [17:29] <jryannel> This says, make our value object known to qml as "valueObject"
  80 [17:30] <jryannel> So we can use it now in our main.qml file
  81 [17:30] <jryannel> "color: valueObject.value"
  82 [17:31] <jryannel> You should see a blue rectangle. You can change the color simple by changing the color in valueobject.cpp (look for  _value(Qt::blue)
  83 [17:31] <jryannel> Another way to change it is inside qml. Here we use the mouse area
  84 [17:32] <jryannel> "onClicked: valueObject.value = "yellow"" will make our valueObject color property change to yellow
  85 [17:32] <jryannel> This change is cascaded to our rectangle
  86 [17:32] <jryannel> remember we have our rectangles color bound to "color: valueObject.value"
  87 [17:33] <jryannel> So when you click on the rectangle the onClicked handler is called and the color should change to yellow
  88 [17:33] <jryannel> I hope you can still follow me :)
  89 [17:33] <jryannel> Next case would be we would instead of a simple property, we want to create a new qml element.
  90 [17:34] <jryannel> We want to have a ValueObject element in qml, where we can get the color value from.
  91 [17:34] <jryannel> For this please comment the //{2 marker code and uncomment the //3{ markers code
  92 [17:35] <jryannel> So instead to push an object, we want to register a new type to qml.
  93 [17:35] <jryannel> Look in the main.cpp file...
  94 [17:35] <jryannel> Here we find: "qmlRegisterType<ValueObject>("Application", 1, 0, "ValueElement");"
  95 [17:36] <jryannel> This line says, register the type ValueObject under the module name "Application" in version 1.0 as ValueElement element
  96 [17:37] <jryannel> So now we have in a module Application a new qml element calles ValueElement
  97 [17:37] <jryannel> Let's see how we can use it: open the main.qml file
  98 [17:37] <jryannel> The line "import Application 1.0" imports our new module
  99 [17:38] <jryannel> which we registered with the qmlRegisterType from c++ code
 100 [17:38] <jryannel> Sure you can have many elements inside one module.
 101 [17:38] <jryannel> We use the new element with "ValueElement { id: valueElement }"
 102 [17:39] <jryannel> Our new element is now accessible under the id: valueElement.
 103 [17:39] <jryannel> As this is a new element you can create as many of them as you want
 104 [17:39] <jryannel> with "color: valueElement.value" we access the color of our new element, by the id
 105 [17:40] <jryannel> and in our mouse area we can change the color using "onClicked: valueElement.value = "red""
 106 [17:40] <jryannel> I hope you get the idea
 107 [17:40] <jryannel> Jus to recap...
 108 [17:41] <jryannel> You can push simple properties into qml, complex properties (e.g. objects)
 109 [17:41] <jryannel> and also new elements.
 110 [17:41] <jryannel> But this is just the start...
 111 [17:42] <jryannel> You can create own elements which can paint, for example an ellipse
 112 [17:43] <jryannel> For this you would need to derive a class from QDeclarativeItem
 113 [17:44] <jryannel> But I think we are running out of time to show this here...
 114 [17:44] <jryannel> So I post some links with comments
 115 [17:44] <jryannel> have a look at :http://qt.nokia.com/developer/learning/online/training/materials/qt-essentials-qt-quick-edition for the "Training Module Integrating QML with C++ from"
 116 [17:45] <jryannel> This explains how to create a simple ellipse item and adds on this more complicated stuff, e.g creating other types, using enums, ...
 117 [17:45] <jryannel> You you want to learn more about what we did currently please read: Qt Declarative Binding
 118 [17:45] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/qtbinding.html
 119 [17:45] <jryannel> and Extending QML Functionalities using C++
 120 [17:45] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/qml-extending.html
 121 [17:46] <jryannel> You can also create qml modules as plugins
 122 [17:46] <jryannel> This is explained in the training module, but also in QDeclarativeExtensionPlugin Class Reference
 123 [17:46] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeextensionplugin.html#details
 124 [17:46] <jryannel> If you want to mix traditional widget code and qml please look at: Integrating QML Code with Existing Qt UI Code
 125 [17:47] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/qml-integration.html
 126 [17:47] <jryannel> If you want to see how the Qt developers have written their declarative items, checkout the qt source code and navigate to: /src/declarative/graphicsitems/
 127 [17:48] <jryannel> There you find the code for the Item qml element in "qdeclarativeitem.h"
 128 [17:48] <jryannel> And for the Rectangle element in "qdeclarativerectangle_p.h"
 129 [17:49] <jryannel> Please note the rectangle has a _p in the name, which declares it as private. So you can't derive from it in c++.
 130 [17:49] <jryannel> Only the QDeclarativeItem class is meant to be derived
 131 [17:49] <jryannel> I would recommend you checkout the Example: Minehunt
 132 [17:49] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/demos-declarative-minehunt.html
 133 [17:50] <jryannel> This shows how to make a minehunt game in qml, where the game logic is in C++
 134 [17:50] <jryannel> You find other examples at: More Examples:
 135 [17:50] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeexamples.html
 136 [17:51] <jryannel> From the DevDays 2010 in Munich we have also a video, which explains QtQuick and C++ very nicely: TechTalk Developer Days 2010
 137 [17:51] <jryannel> http://qt.nokia.com/developer/learning/online/talks/developerdays2010/tech-talks/qt-quick-for-c-developers
 138 [17:51] <jryannel> This closes my talk on Extending Qt Quick with C++.
 139 [17:52] <jryannel> I hope some of you where able to compile the example and get an idea about how qml and C++ can work together.
 140 [17:52] <jryannel> Remember you can use JavaScript in QML, but you should not make to much use of it for performance reasons.
 141 [17:53] <jryannel> But this truly depends where you run your code.
 142 [17:53] <jryannel> A tip at the end, you can also embed qml files as resource files in your executable.
 143 [17:53] <jryannel> By this deployment get's much easier
 144 [17:54] <jryannel> I would like to see how someone uses Qt Quick with a WebFramework like Rails or Django
 145 [17:55] <jryannel> QtQuick is network transparent so you can load qml files form a server or let them dynamically generate by a webframework :)
 146 [17:55] <jryannel> Okay take care and I leave the stage for the next session. Bye!