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