QML

App Developer Week -- Qt Quick: QML the Language -- jryannel -- Wed, Apr 13th, 2011

   1 [17:01] <dpm> jryannel, from the makers of Qt knows all about it and will be thrilled to tell you
   2 [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.
   3 [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
   4 [17:02] <jryannel> I want to give short intro to Qt Quick's QML language and how to use it
   5 [17:02] <jryannel> First things first
   6 [17:03] <jryannel> You need Qt + Qt Creator, easiest
   7 [17:03] <jryannel> install - QtSDK (http://labs.qt.nokia.com/2011/04/06/qt-sdk-1-1-rc-released/)
   8 [17:03] <jryannel> or on ubuntu search for apt-cache search qt4; apt-cache search creator
   9 [17:04] <jryannel> To run QtQuick you need Qt 4.7.0 or better, latest is Qt 4.7.3
  10 [17:04] <jryannel> or grab it from gitorious
  11 [17:04] <jryannel> So what is Qt Quick?
  12 [17:05] <jryannel> It's based on GraphicsView as 2.5d canvas API with graphics items
  13 [17:05] <jryannel> the graphicsview was developed in c++ and creating rich ui takes a long time
  14 [17:06] <jryannel> So our developers came up with a declarative way.
  15 [17:06] <jryannel> It looks like CSS  or JSON
  16 [17:06] <jryannel> import QtQuick 1.0
  17 [17:06] <jryannel> Rectangle {
  18 [17:06] <jryannel>     width: 360
  19 [17:06] <jryannel>     height: 360
  20 [17:06] <jryannel> }
  21 [17:07] <jryannel> First you import QtQuick module with major and minor version than you define a root element.
  22 [17:07] <jryannel> In this case a rectangle with a width of 360 and height of 360.
  23 [17:08] <jryannel> But live is easier if I don't type a book here;
  24 [17:08] <jryannel> Please visit: http://developer.qt.nokia.com/wiki/Qt_Quick_Tutorial_Basics
  25 [17:08] <jryannel> I will walk you through this and then another example
  26 [17:09] <jryannel> the qmlviewer is the declarative runner for developing purposes
  27 [17:09] <jryannel> it has many options, which you can ask with --help
  28 [17:09] <jryannel> It comes with Qt (in the bin folder)
  29 [17:10] <jryannel> qmlviewer main.qml will interpret the qml file and show the ui
  30 [17:10] <jryannel> The qmlviewer is made with the Qt Declarative module
  31 [17:10] <jryannel> a C++ module. You can write your own declarative viewer
  32 [17:11] <jryannel> see here how: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeview.html#details
  33 [17:11] <jryannel> It's 3 lines of code
  34 [17:11] <jryannel> QDeclarativeView *view = new QDeclarativeView;
  35 [17:11] <jryannel>  view->setSource(QUrl::fromLocalFile("myqmlfile.qml"));
  36 [17:11] <jryannel>  view->show();
  37 [17:12] <jryannel> That's in essence it the qmlviewer, which interprets the qml file.
  38 [17:12] <jryannel> But back to the qml side of coding
  39 [17:13] <jryannel> width : 300 means a property binding
  40 [17:14] <jryannel> It's different from assignment. It's kind of a contract.
  41 [17:14] <jryannel> So you can write "width:  2 * height"
  42 [17:14] <jryannel> with this width is always 2 times the height.
  43 [17:15] <jryannel> When the height changes the right side will be re-evaluated and assigned to the left
  44 [17:15] <jryannel> Another aspect width:  2 * height" shows:
  45 [17:15] <jryannel> JavaScript. Every right side can contain any kind of javascript code
  46 [17:16] <jryannel> A good javascript tutorial is at
  47 [17:16] <jryannel> https://developer.mozilla.org/en/JavaScript
  48 [17:17] <jryannel> Qt Quick is finally a declartive UI (QML) with C++ backend and JavaScript enhanced
  49 [17:18] <jryannel> Let's jump to "Composition of Components" on the wiki page I posted earlier
  50 [17:18] <jryannel> You can nest qml elements
  51 [17:18] <jryannel> A element has a name and propertis and child elments, like HTMl has
  52 [17:19] <jryannel> (I hope someone is correcting my spelling mistakes later :) )
  53 [17:19] <jryannel> / File: BasicSteps_2.qml
  54 [17:19] <jryannel> import Qt 4.7
  55 [17:19] <jryannel> 
  56 [17:19] <jryannel> Rectangle {
  57 [17:19] <jryannel>         width: 300
  58 [17:19] <jryannel>         height: 300
  59 [17:19] <jryannel>         color: "#FFF8DC"        // cornsilk
  60 [17:19] <jryannel> 
  61 [17:19] <jryannel>         Image {
  62 [17:19] <jryannel>                 x: 10; y: 45
  63 [17:20] <jryannel>                 source: "voringsfossen1.jpg"
  64 [17:20] <jryannel>         }
  65 [17:20] <jryannel> 
  66 [17:20] <jryannel>         Text {
  67 [17:20] <jryannel>                 x: 10; y: 265
  68 [17:20] <jryannel>                 text: "Voringsfossen"
  69 [17:20] <jryannel>         }
  70 [17:20] <jryannel> }
  71 [17:20] <jryannel> ohh, sorry
  72 [17:20] <jryannel> so we have a rectangle with an image and text child
  73 [17:20] <jryannel> The child elements have a corrdinate system relative to the parents
  74 [17:21] <jryannel> so a x:10, means 10 px relative to parent.
  75 [17:22] <jryannel> E.g. all elements are derived from the Item element: http://doc.qt.nokia.com/4.7-snapshot/qml-item.html
  76 [17:22] <jryannel> You find an overview about which items are available here: http://doc.qt.nokia.com/4.7-snapshot/qmlbasicelements.html
  77 [17:23] <jryannel> so when you write "x:10" you actually overwrite the default property value (in this case "x:0").
  78 [17:24] <jryannel> For example if you don't  specify a width or height to an element, it will be invisible!
  79 [17:25] <jryannel> Let's come back to "http://developer.qt.nokia.com/wiki/Qt_Quick_Tutorial_Basics" -> Custom Properties
  80 [17:26] <jryannel> besides the default properties you can add own properties.
  81 [17:26] <jryannel> E.g. "property int frameSize: 300"
  82 [17:27] <jryannel> which data types are supported? See here: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativebasictypes.html
  83 [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
  84 [17:28] <jryannel> Even you can write own elements. E.g. a chart type or everything what can be painted.
  85 [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)
  86 [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...
  87 [17:30] <jryannel> Now visit shortly http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial1.html for another start into qt quick
  88 [17:31] <jryannel> It's just another hello world in qt quick
  89 [17:32] <jryannel> In Qt Creator our ide you can create a qt quick project with "New Project" -> "Qt Quick UI"
  90 [17:32] <jryannel> If you choose Qt Quick Application, it will generate a C++ qml viewer for you additional
  91 [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)
  92 [17:34] <jryannel> Qt Creator (http://doc.qt.nokia.com/qtcreator-snapshot/index.html) is very much keyboard driven
  93 [17:34] <jryannel> It has also support got git, mercurial and I think svn and some other version control systems
  94 [17:35] <jryannel> Also for pastebin. Which I need to remember to use more
  95 [17:35] <jryannel> Here is a list of shortcuts: http://doc.qt.nokia.com/qtcreator-snapshot/creator-keyboard-shortcuts.html
  96 [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
  97 [17:36] <jryannel> for Qt Creator.
  98 [17:36] <jryannel> But now back to qml...
  99 [17:37] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial2.html shows how to create a custom qml component
 100 [17:37] <jryannel> A component is a piece of qml code in a separate qml file
 101 [17:38] <jryannel> E.g. if you want create your own button you write a "Button.qml" file
 102 [17:38] <jryannel> Inside would be possible a Rectangle a Mousearea (which receives mouse clicks).
 103 [17:39] <jryannel> In the example tutorial they create a Cell in a "Cell.qml" file
 104 [17:39] <jryannel> The signal keyword allows to emit signal from a qml element. Just by calling the function name
 105 [17:40] <jryannel> The id property is a special property. It allows to identify an element inside a qml file ...
 106 [17:40] <jryannel> ... but also across other qml files.
 107 [17:40] <jryannel> As a convention I always give my root element the "id: root"
 108 [17:41] <jryannel> I give application wide used components a nice name so that I can reference them from other qml files.
 109 [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).
 110 [17:42] <jryannel> Id's are only known to the qml runtime when the qml file is actually loaded
 111 [17:42] <jryannel> Have a look at the "The main QML file" section
 112 [17:43] <jryannel> There we use the "Cell.qml" component with a simple call to "Cell".
 113 [17:43] <jryannel> Any qml file (with upper-camelcase" ) in the same folder can be used directly. (Others need to imported)
 114 [17:44] <jryannel> "onClicked: helloText" - is a handler to the signal clicked() from Cell.qml
 115 [17:44] <jryannel> Great. We can make some rectangles and text and place them somewhere so what?
 116 [17:45] <jryannel> With a little bit of C++ and some motivated developers you can make something more ...
 117 [17:45] <jryannel> ... see here http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/
 118 [17:46] <jryannel> Jens presents the desktop components (a little bit more complicated Cell.qml with some C++ backend)
 119 [17:48] <jryannel> It's a research project (that's why it's on labs). But I think they will be happy about feewdback
 120 [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++
 121 [17:49] <jryannel> It's very flexible. With flexibility also comes a price
 122 [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
 123 [17:50] <jryannel> Not every solution is simple and beautiful
 124 [17:51] <ClassBot> There are 10 minutes remaining in the current session.
 125 [17:51] <jryannel> http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeexamples.html here you find more examples
 126 [17:52] <jryannel> Tomorrow we will go into the dynamic side of Qt Quick. Animations - States - Transitions
 127 [17:53] <jryannel> You can find learning material (e.g. videos and whole courses) here: http://qt.nokia.com/developer/learning/elearning
 128 [17:53] <jryannel> I hope I haven't confused you all to much. Qml is simple
 129 [17:53] <jryannel> Elements, Properties, Child Elements,
 130 [17:54] <jryannel> Property Binding
 131 [17:54] <jryannel> and JavaScript + C++ for application logic.
 132 [17:54] <jryannel> Take care.
 133 [17:54] <jryannel> Python and Qt Quick. Yes
 134 [17:55] <jryannel> There is PyQt and PySide
 135 [17:55] <jryannel> checkout: http://developer.qt.nokia.com/wiki/Category:LanguageBindings::PySide
 136 [17:56] <ClassBot> There are 5 minutes remaining in the current session.
 137 [17:56] <jryannel> Sorry question was: Can I use Qt Quick with a python backend instead of C++?
 138 

MeetingLogs/appdevweek1104/QML (last edited 2011-04-14 07:07:51 by dpm)