== App Developer Week -- Qt Quick: QML the Language -- jryannel -- Wed, Apr 13th, 2011 ==
{{{#!irc
[17:01] <dpm> jryannel, from the makers of Qt knows all about it and will be thrilled to tell you
[17:01] <ClassBot> Logs for this session will be available at http://irclogs.ubuntu.com/2011/04/13/%23ubuntu-classroom.html following the conclusion of the session.
[17:02] <jryannel> Ok. Hi I'm jryannel from QtDF acting as Training Manager. This is my first irc training session so bear with me
[17:02] <jryannel> I want to give short intro to Qt Quick's QML language and how to use it
[17:02] <jryannel> First things first
[17:03] <jryannel> You need Qt + Qt Creator, easiest
[17:03] <jryannel> install - QtSDK (http://labs.qt.nokia.com/2011/04/06/qt-sdk-1-1-rc-released/)
[17:03] <jryannel> or on ubuntu search for apt-cache search qt4; apt-cache search creator
[17:04] <jryannel> To run QtQuick you need Qt 4.7.0 or better, latest is Qt 4.7.3
[17:04] <jryannel> or grab it from gitorious
[17:04] <jryannel> So what is Qt Quick?
[17:05] <jryannel> It's based on GraphicsView as 2.5d canvas API with graphics items
[17:05] <jryannel> the graphicsview was developed in c++ and creating rich ui takes a long time
[17:06] <jryannel> So our developers came up with a declarative way.
[17:06] <jryannel> It looks like CSS  or JSON
[17:06] <jryannel> import QtQuick 1.0
[17:06] <jryannel> Rectangle {
[17:06] <jryannel>     width: 360
[17:06] <jryannel>     height: 360
[17:06] <jryannel> }
[17:07] <jryannel> First you import QtQuick module with major and minor version than you define a root element.
[17:07] <jryannel> In this case a rectangle with a width of 360 and height of 360.
[17:08] <jryannel> But live is easier if I don't type a book here;
[17:08] <jryannel> Please visit: http://developer.qt.nokia.com/wiki/Qt_Quick_Tutorial_Basics
[17:08] <jryannel> I will walk you through this and then another example
[17:09] <jryannel> the qmlviewer is the declarative runner for developing purposes
[17:09] <jryannel> it has many options, which you can ask with --help
[17:09] <jryannel> It comes with Qt (in the bin folder)
[17:10] <jryannel> qmlviewer main.qml will interpret the qml file and show the ui
[17:10] <jryannel> The qmlviewer is made with the Qt Declarative module
[17:10] <jryannel> a C++ module. You can write your own declarative viewer
[17:11] <jryannel> see here how: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeview.html#details
[17:11] <jryannel> It's 3 lines of code
[17:11] <jryannel> QDeclarativeView *view = new QDeclarativeView;
[17:11] <jryannel>  view->setSource(QUrl::fromLocalFile("myqmlfile.qml"));
[17:11] <jryannel>  view->show();
[17:12] <jryannel> That's in essence it the qmlviewer, which interprets the qml file.
[17:12] <jryannel> But back to the qml side of coding
[17:13] <jryannel> width : 300 means a property binding
[17:14] <jryannel> It's different from assignment. It's kind of a contract.
[17:14] <jryannel> So you can write "width:  2 * height"
[17:14] <jryannel> with this width is always 2 times the height.
[17:15] <jryannel> When the height changes the right side will be re-evaluated and assigned to the left
[17:15] <jryannel> Another aspect width:  2 * height" shows:
[17:15] <jryannel> JavaScript. Every right side can contain any kind of javascript code
[17:16] <jryannel> A good javascript tutorial is at
[17:16] <jryannel> https://developer.mozilla.org/en/JavaScript
[17:17] <jryannel> Qt Quick is finally a declartive UI (QML) with C++ backend and JavaScript enhanced
[17:18] <jryannel> Let's jump to "Composition of Components" on the wiki page I posted earlier
[17:18] <jryannel> You can nest qml elements
[17:18] <jryannel> A element has a name and propertis and child elments, like HTMl has
[17:19] <jryannel> (I hope someone is correcting my spelling mistakes later :) )
[17:19] <jryannel> / File: BasicSteps_2.qml
[17:19] <jryannel> import Qt 4.7
[17:19] <jryannel> 
[17:19] <jryannel> Rectangle {
[17:19] <jryannel>         width: 300
[17:19] <jryannel>         height: 300
[17:19] <jryannel>         color: "#FFF8DC"        // cornsilk
[17:19] <jryannel> 
[17:19] <jryannel>         Image {
[17:19] <jryannel>                 x: 10; y: 45
[17:20] <jryannel>                 source: "voringsfossen1.jpg"
[17:20] <jryannel>         }
[17:20] <jryannel> 
[17:20] <jryannel>         Text {
[17:20] <jryannel>                 x: 10; y: 265
[17:20] <jryannel>                 text: "Voringsfossen"
[17:20] <jryannel>         }
[17:20] <jryannel> }
[17:20] <jryannel> ohh, sorry
[17:20] <jryannel> so we have a rectangle with an image and text child
[17:20] <jryannel> The child elements have a corrdinate system relative to the parents
[17:21] <jryannel> so a x:10, means 10 px relative to parent.
[17:22] <jryannel> E.g. all elements are derived from the Item element: http://doc.qt.nokia.com/4.7-snapshot/qml-item.html
[17:22] <jryannel> You find an overview about which items are available here: http://doc.qt.nokia.com/4.7-snapshot/qmlbasicelements.html
[17:23] <jryannel> so when you write "x:10" you actually overwrite the default property value (in this case "x:0").
[17:24] <jryannel> For example if you don't  specify a width or height to an element, it will be invisible!
[17:25] <jryannel> Let's come back to "http://developer.qt.nokia.com/wiki/Qt_Quick_Tutorial_Basics" -> Custom Properties
[17:26] <jryannel> besides the default properties you can add own properties.
[17:26] <jryannel> E.g. "property int frameSize: 300"
[17:27] <jryannel> which data types are supported? See here: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativebasictypes.html
[17:27] <jryannel> Can I add own data types. Sure. You can extend Qt Quick from the C++ side: http://doc.qt.nokia.com/4.7-snapshot/qml-extending.html
[17:28] <jryannel> Even you can write own elements. E.g. a chart type or everything what can be painted.
[17:29] <jryannel> Besides visual items you can also use non-visual items, e.g. timer (http://doc.qt.nokia.com/4.7-snapshot/qml-timer.html)
[17:30] <jryannel> And you can also push QObjects from the c++ world into Qt Quick, e.g. for example for a D-Bus binding, or...
[17:30] <jryannel> Now visit shortly http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial1.html for another start into qt quick
[17:31] <jryannel> It's just another hello world in qt quick
[17:32] <jryannel> In Qt Creator our ide you can create a qt quick project with "New Project" -> "Qt Quick UI"
[17:32] <jryannel> If you choose Qt Quick Application, it will generate a C++ qml viewer for you additional
[17:33] <jryannel> So just copy the helloworld from (http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial1.html) in your new project and run the project (no need for compilation)
[17:34] <jryannel> Qt Creator (http://doc.qt.nokia.com/qtcreator-snapshot/index.html) is very much keyboard driven
[17:34] <jryannel> It has also support got git, mercurial and I think svn and some other version control systems
[17:35] <jryannel> Also for pastebin. Which I need to remember to use more
[17:35] <jryannel> Here is a list of shortcuts: http://doc.qt.nokia.com/qtcreator-snapshot/creator-keyboard-shortcuts.html
[17:36] <jryannel> One of our partners has created a reference card: http://www.kdab.com/index.php?option=com_content&view=article&id=126
[17:36] <jryannel> for Qt Creator.
[17:36] <jryannel> But now back to qml...
[17:37] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial2.html shows how to create a custom qml component
[17:37] <jryannel> A component is a piece of qml code in a separate qml file
[17:38] <jryannel> E.g. if you want create your own button you write a "Button.qml" file
[17:38] <jryannel> Inside would be possible a Rectangle a Mousearea (which receives mouse clicks).
[17:39] <jryannel> In the example tutorial they create a Cell in a "Cell.qml" file
[17:39] <jryannel> The signal keyword allows to emit signal from a qml element. Just by calling the function name
[17:40] <jryannel> The id property is a special property. It allows to identify an element inside a qml file ...
[17:40] <jryannel> ... but also across other qml files.
[17:40] <jryannel> As a convention I always give my root element the "id: root"
[17:41] <jryannel> I give application wide used components a nice name so that I can reference them from other qml files.
[17:42] <jryannel> When referencing an id from another qml file you make yourself depending. So think about if you really want to be dependent on the other qml (component).
[17:42] <jryannel> Id's are only known to the qml runtime when the qml file is actually loaded
[17:42] <jryannel> Have a look at the "The main QML file" section
[17:43] <jryannel> There we use the "Cell.qml" component with a simple call to "Cell".
[17:43] <jryannel> Any qml file (with upper-camelcase" ) in the same folder can be used directly. (Others need to imported)
[17:44] <jryannel> "onClicked: helloText" - is a handler to the signal clicked() from Cell.qml
[17:44] <jryannel> Great. We can make some rectangles and text and place them somewhere so what?
[17:45] <jryannel> With a little bit of C++ and some motivated developers you can make something more ...
[17:45] <jryannel> ... see here http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/
[17:46] <jryannel> Jens presents the desktop components (a little bit more complicated Cell.qml with some C++ backend)
[17:48] <jryannel> It's a research project (that's why it's on labs). But I think they will be happy about feewdback
[17:48] <jryannel> But in general Qt Quick is a very much design driven easy to code ui language. Where the heavy lifting is done in C++
[17:49] <jryannel> It's very flexible. With flexibility also comes a price
[17:50] <jryannel> There are many solutions to the same problem. So you need a good practice to master the different elements and C++ extension possibilities to come to a good solution
[17:50] <jryannel> Not every solution is simple and beautiful
[17:51] <ClassBot> There are 10 minutes remaining in the current session.
[17:51] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeexamples.html here you find more examples
[17:52] <jryannel> Tomorrow we will go into the dynamic side of Qt Quick. Animations - States - Transitions
[17:53] <jryannel> You can find learning material (e.g. videos and whole courses) here: http://qt.nokia.com/developer/learning/elearning
[17:53] <jryannel> I hope I haven't confused you all to much. Qml is simple
[17:53] <jryannel> Elements, Properties, Child Elements,
[17:54] <jryannel> Property Binding
[17:54] <jryannel> and JavaScript + C++ for application logic.
[17:54] <jryannel> Take care.
[17:54] <jryannel> Python and Qt Quick. Yes
[17:55] <jryannel> There is PyQt and PySide
[17:55] <jryannel> checkout: http://developer.qt.nokia.com/wiki/Category:LanguageBindings::PySide
[17:56] <ClassBot> There are 5 minutes remaining in the current session.
[17:56] <jryannel> Sorry question was: Can I use Qt Quick with a python backend instead of C++?
}}}