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!