Ubuntu Wiki

Dev Week -- Developing with Qt Quick and QML -- JonathanRiddell -- Tue, Jul 13th, 2010

(02:02:03 PM) Riddell: Hi, anyone here for a session on Qt Quick?
(02:02:24 PM) Riddell: chat in #ubuntu-classroom-chat I believe
(02:02:39 PM) Riddell: for this session please install qt4-qmlviewer
(02:02:49 PM) Riddell: lucid users need to   sudo apt-add-repository ppa:kubuntu-ppa/beta; sudo apt-get update; sudo apt-get install qt4-qmlviewer
(02:03:25 PM) Riddell: I'm Jonathan Riddell, a Kubuntu developer
(02:03:46 PM) Riddell: as you know Qt is used in KDE.  it's also spreading out a lot now that Nokia have invested in it
(02:04:16 PM) Riddell: it's going to be on pretty much all Nokia phones soon, which will make it the most used UI toolkit on the planet
(02:05:12 PM) Riddell: up until now Qt has normally been programmed in the traditional way of making widgets and putting them places
(02:05:26 PM) Riddell: which is useful for coders but isn't how designers tend to think
(02:05:53 PM) Riddell: designers tend to start with items in places which move around and out the way depending on what's happening
(02:06:22 PM) Riddell: so Qt has come up with Qt Quick, a new way to make UIs
(02:06:39 PM) Riddell: it's declarative, so you say what you want it to look like and it'll sort out the bits inbetween
(02:06:50 PM) Riddell: this is very new stuff
(02:06:55 PM) Riddell: it hasn't been released yet
(02:07:02 PM) Riddell: it will be with Qt 4.7 which is due in August
(02:07:12 PM) Riddell: it's still in flux, the language has been changing and more changes might happen
(02:07:38 PM) Riddell: but already it's being used in interesting places like KDE PIM mobile http://dot.kde.org/2010/06/10/kde-pim-goes-mobile
(02:08:24 PM) Riddell: I'm not too familiar with other toolkits but I think flash and Mac already have declarative UI coding, I don't know of any free toolkits which support it
(02:08:36 PM) Riddell: so if you want to create bling interfaces then this will be the way to go
(02:08:48 PM) Riddell: Qt Quick is made up of a few thing
(02:08:51 PM) Riddell: QtDeclarative library, Qt Creator, qmlviewer app, the QML language and some plugins
(02:09:31 PM) Riddell: much of this talk was given by a Qt Quick developer last week at Kubuntu Tutorials day, you can see the logs here if I don't explain things too well (it's new to me too) https://wiki.kubuntu.org/KubuntuTutorialsDay
(02:09:47 PM) Riddell: you can use Qt Creator for this but the version in the archive doesn't support it
(02:09:57 PM) Riddell: you'd need to download the daily build ftp://ftp.qt.nokia.com/qtcreator/snapshots/latest
(02:10:06 PM) Riddell: but for now you can just use qmlviewer
(02:10:31 PM) Riddell: the QML language integrates well with c++ and signal/slots
(02:10:42 PM) Riddell: so if you like your old style of programming, it's not going anywhere
(02:10:53 PM) Riddell: right, let's see some code
(02:10:55 PM) Riddell: http://people.canonical.com/~jriddell/qml-tutorial/tutorial1.qml
(02:11:22 PM) Riddell: that's a hello world example
(02:11:32 PM) Riddell: it shows some text in a rectangle
(02:11:41 PM) Riddell: you can run it with   >qmlviewer tutorial1.qml
(02:12:08 PM) Riddell: 19:12 < maco> looks like CSS to me
(02:12:20 PM) Riddell: yes it's a similar syntax but there's plenty differences
(02:12:30 PM) Riddell: here you declaire the objects, not just add styles to them
(02:12:34 PM) Riddell: also it's not cascading
(02:12:59 PM) Riddell: the first line, import Qt 4.7, imports all the types in Qt 4.7
(02:13:08 PM) Riddell: so when we start using types later, like 'Rectangle', you now know where they are from
(02:13:15 PM) Riddell: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeelements.html  lists all the current types
(02:13:32 PM) Riddell: the Rectangle { line actually creates a Rectangle element
(02:13:39 PM) Riddell: between {} you can set the properties and children of the element
(02:14:11 PM) Riddell: next line sets an id so we can refer to this rectangle by that id "page" elsewhere
(02:14:25 PM) Riddell: some properties are set
(02:14:34 PM) Riddell: the next line, Text{, creates another element
(02:14:54 PM) Riddell: this element, as it's inside the Rectangle{}, will be a child of the Rectangle element
(02:15:02 PM) Riddell: and we set its properties over the next few lines
(02:15:13 PM) Riddell: the anchor properties are a way to position elements
(02:15:26 PM) Riddell: and that line binds the horizontal centre anchor of the Text to the horizontal center of the element called 'page'
(02:15:34 PM) Riddell: anyone got it running?
(02:15:54 PM) Riddell: 19:15 < ean5533> QUESTION: Do QML elements have required attributes?
(02:16:12 PM) Riddell: ean5533: not as far as I know, they will default to sensible defaults
(02:16:31 PM) Riddell: although for text that will be a blank string so it's not much use unless you want to use the item later
(02:16:39 PM) Riddell: 19:16 < maco> QUESTION: how do we execute it?
(02:16:48 PM) Riddell: with  >qmlviewer tutorial1.qml
(02:16:58 PM) Riddell: you need to install qt4-qmlviewer
(02:17:11 PM) Riddell: 19:15 < simar> QUESTION: Is this work on GNOME also ie on ubuntu?
(02:17:37 PM) Riddell: of course, it's all X so it'll run on any desktop environment
(02:17:56 PM) Riddell: just because you use Gnome doesn't mean you can't use non-Gnome apps
(02:18:25 PM) Riddell: 19:18 < Neo---> no problems with running it
(02:18:28 PM) Riddell: success!
(02:18:54 PM) Riddell: resizing the window will move the text so it stays centred, that's the anchor in use
(02:19:03 PM) Riddell: so onto tutorial2.qml, which uses multiple files
(02:19:07 PM) Riddell: http://people.canonical.com/~jriddell/qml-tutorial/tutorial2.qml
(02:19:14 PM) Riddell: The change here, is a grid containing a lot of cells that are all very similar
(02:19:20 PM) Riddell: so we want to write the code for the Cell once, and reuse it
(02:19:25 PM) Riddell: it will load the file Cell.qml to create the Cell type
(02:19:30 PM) Riddell: http://people.canonical.com/~jriddell/qml-tutorial/Cell.qml
(02:20:07 PM) Riddell: so looking at Cell.qml
(02:20:09 PM) Riddell: Item is just a simple type in QML, which is pretty much nothing but a bounding box.
(02:20:31 PM) Riddell: the id is set, we'll call it container
(02:20:38 PM) Riddell: next some new stuff
(02:20:42 PM) Riddell: the line 'property alias cellColor: rectangle.color' creates a new property on this item, and calls it cellColor
(02:20:48 PM) Riddell: 'property' starts the property declaration, 'alias' is the type of property, and 'cellColor' is the name
(02:21:01 PM) Riddell: because it is an alias type, it's value is another property. And it just forwards everything to that property
(02:22:34 PM) Riddell: 19:22 < maco> QUESTION: so cellColor is like a variable name then?
(02:22:56 PM) Riddell: a property can be a variable, in this case it's an alias so it's just the same as another variable
(02:23:07 PM) Riddell: in this case rectangle.color
(02:24:12 PM) Riddell: back in tutorial2.qml we only have a 'Cell'. And the interface for that is whatever is declared in the root item of Cell.qml (we can't access the inner Rectangle item)
(02:24:25 PM) Riddell: "rectangle" is the item declaired next in Cell.qml, to expose rectangle.color, we add an alias property
(02:24:50 PM) Riddell: the 'signal clicked(color cellColor)' line is similar. We add a signal to the item so that it can be used in the tutorial2.qml file
(02:25:23 PM) Riddell: Another new element in this file is 'MouseArea'. This is a user input primitive
(02:25:27 PM) Riddell: despite the name, it works equally well for touch
(02:25:36 PM) Riddell: QML can be the entire UI layer, including user interaction
(02:25:45 PM) Riddell: And MouseArea is a separate element so that you can place it whereever you want. You can make it bigger than the buttons for finger touch interfaces, for example
(02:25:55 PM) Riddell: to make it the exact size of the Item, we use 'anchors.fill: parent'
(02:26:00 PM) Riddell: which anchors it to fill its parent
(02:26:36 PM) Riddell: less obvious is the 'onClicked' line after that
(02:26:49 PM) Riddell: MouseArea has a signal called 'clicked', and that gives us a signal handler called 'onClicked'
(02:27:06 PM) Riddell: you can put a script (QtScript) snippet in 'onClicked', like in Cell.qml, and that snippet is executed when the signal is emitted
(02:27:16 PM) Riddell: so when you click on the MouseArea, the clicked signal is emitted, and the script snippet is emitted
(02:27:26 PM) Riddell: and the script snippet says to emit the clicked signal of the parent item, with container.cellColor as the argument
(02:27:35 PM) Riddell: 19:24 < sladen> can these QML files have (semi-)executable code
(02:27:52 PM) Riddell: so that answers Paul's question, you can include QtScript (which is Javascript inside Qt)
(02:28:03 PM) Riddell: to create UIs that do something
(02:28:47 PM) Riddell: so Cell is a rectangle which lets us set the colour and emits a signal with that colour when it's clicked on
(02:28:50 PM) Riddell: Back to tutorial2.qml, we can see this interface in use
(02:28:57 PM) Riddell: In each Cell instance, we set the cellColor property
(02:29:07 PM) zkriesse is now known as Guest97205
(02:29:10 PM) Riddell: and use the onClicked handler
(02:29:20 PM) Riddell: The Grid element positions the Cell elements in a grid
(02:29:37 PM) Riddell: who's got it working?
(02:31:47 PM) Riddell: 19:30 < sladen> Riddell: how does tutorial2.qml know that 'Cell{}' refers to the Cell.qml file?
(02:31:51 PM) Riddell: 19:31 <+Riddell> sladen: any .qml files in the same directory as the one being run are loaded automatically
(02:31:54 PM) Riddell: 19:31 <+Riddell> and the item name comes from the file name
(02:32:32 PM) Riddell: if you rename the Cell.qml file then it stops working
(02:32:58 PM) Riddell: ok, who wants some animation?
(02:33:28 PM) Riddell: tutorial3.qml does animations using states and transitions
(02:33:42 PM) Riddell: http://people.canonical.com/~jriddell/qml-tutorial/tutorial3.qml
(02:33:59 PM) Riddell: a State is just a set of property changes from the base state (called "")
(02:34:06 PM) Riddell: and a Transition is just telling it how to animate those property changes
(02:34:22 PM) Riddell: in this file, in the Text element, we add a MouseArea, states, and transitions
(02:34:32 PM) Riddell: compared to tutorial2.qml that is
(02:34:40 PM) Riddell: We have a State, which we name "down", and the way we are entering it is through the when property.
(02:35:04 PM) Riddell: When 'mouseArea.pressed' changes, that property binding gets revaluated
(02:35:26 PM) Riddell: when mouseArea.pressed changes to true, it makes 'when' true. And so the state activates itself
(02:35:34 PM) Riddell: and this applies the property changes in the PropertyChanges element
(02:35:44 PM) Riddell: PropertyChanges has a similar syntax to the rest of QML. Once you set the target, it is just like you are in that item
(02:36:12 PM) Riddell: So the 'y: 160' and 'rotation: 180' will be applied as if they were written inside the Text item
(02:36:54 PM) Riddell: the transition adds the animation, without it the text just jumps between the two states
(02:37:01 PM) Riddell: the from and to properties on the element say which state you are going from and to
(02:37:15 PM) Andre_Gondim is now known as Andre_Gondim-afk
(02:37:16 PM) Riddell: The ParallelAnimation element just groups animations
(02:37:20 PM) Riddell: and when it runs, the animations in it are run in Parallel
(02:37:35 PM) Riddell: The first animation in it is a NumberAnimation, which animates numbers
(02:37:47 PM) Riddell: 'properties: "y, rotation"' means that it will animate the y and rotation properties
(02:37:55 PM) Riddell: so if these properties changed in this state, on any items, they will be animated in this way
(02:38:16 PM) Riddell: the rest of the properites in the NumberAnimation will define this exact way
(02:38:21 PM) Riddell: duration: 500 means the animation will take 500ms
(02:38:34 PM) Riddell: easing.type: Easing.InOutQuad means that it will use an interpolation function that has quadratics on both the in and out parts
(02:38:37 PM) Riddell: or something like that. The documentation has pretty pictures
(02:38:49 PM) Riddell: who's got it running?
(02:39:17 PM) Riddell: if you click on the text the transition will start until it reaches the new state
(02:39:46 PM) zehrique is now known as zehrique-brb
(02:39:51 PM) Riddell: the position, rotation and colour all change, unless you let go of your mouse button in which case they change back
(02:40:13 PM) Riddell: if you comment out the    transitions: Transition { ... }   block then the animation doesn't happen
(02:40:18 PM) Riddell: it just jumps between the two states
(02:40:24 PM) Riddell:  /*  */  and // comments work
(02:40:56 PM) Riddell: and that is how you get pretty animations without having to code them
(02:41:40 PM) Riddell: since animations are going to be important in applications in future, this is an important new tool to make sure free software remains at the lead and the world isn't dominated by iPhone software
(02:42:11 PM) Riddell: 19:41 < mgamal> QUESTION: Can you integrate qml code within normal Qt C++ code?
(02:42:18 PM) Riddell: yes, and actually you will have to with qt 4.7
(02:42:31 PM) Riddell: qmlviewer won't be installed by distros by default in general
(02:42:45 PM) Riddell: you need to load it with QDeclarativeView in your c++ (or python or whatever) code)
(02:43:26 PM) Riddell: as I said before, this is so new it hasn't been released yet, so consider this a heads up for the future
(02:43:47 PM) Riddell: also this code still isn't much use for most designers, so Qt Creator integration is planned
(02:44:17 PM) Riddell: then you can just lay your elements out like in Qt Designer and enter the properties through the UI and pick your preferred transition style
(02:44:37 PM) Riddell: with any luck it'll get rid of the need for anyone to use Flash
(02:44:53 PM) Riddell: I think there's even been experimental browser plugins with it
(02:45:46 PM) Riddell: 19:44 < Neo---> QUESTION: are interfaces supposed to be written by coding or is there a graphical editor (possibly in-the-making)?
(02:46:11 PM) Riddell: the graphical editor is actually Qt Designer, the IDE you can use is Qt Creator and it integrates Designer very well
(02:47:08 PM) Riddell: any questions?  comments?  heckles?
(02:48:30 PM) Riddell: missed your chance sladen :)
(02:48:33 PM) Riddell: thanks for coming all
(02:48:50 PM) Riddell: as ever #kubuntu-devel is open to anyone wanting to help with Kubuntu
(02:49:09 PM) Riddell: #kde-devel is a good place to get into KDE development, #qt for Qt development and #qt-qml for Qt Quick
(02:50:21 PM) Riddell: 19:48 < sladen> Riddell: what's the latest terminiology re: "signals" "slots" and the like (eg. you've used "signal handler")
(02:50:59 PM) Riddell: a signal handler is a property in a QML item which can handle a signal
(02:51:11 PM) Riddell: unlike a slot it's in the same item, a slot can be in any object
(02:51:38 PM) Riddell: and you don't need to connect it, it's connected by just having something in the property
(02:53:25 PM) Riddell: 19:53 < sladen> Riddell: "something" ?
(02:53:34 PM) Riddell: yes, where the something is probably a QtScript snippit
(02:53:42 PM) Riddell: e.g.          Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
(02:54:10 PM) Riddell: signal is "clicked" signal handler is the property "onClicked" which we set to the QtScript snippit "helloText.color = cellColor"
(02:55:09 PM) Riddell: 19:54 < James147> Riddell: how does scope work with QML? Can child elements see their parents properties?
(02:55:18 PM) Riddell: I believe there's a "parent" keyword yes
(02:55:34 PM) Riddell: generally you just use the id for each object within that file
(02:56:36 PM) Riddell: and files are used for items with interfaces so you can't (easily) access items within the top level item in a file
(02:56:49 PM) Riddell: but you make sure that top level item has the interface you need, like we did with Cell
(02:57:05 PM) Riddell: 19:55 < sladen> Riddell: so the relationship between 'clicked' and 'onClick' is implicit
(02:57:09 PM) Riddell: correct
(02:58:26 PM) Riddell: thanks for coming all, hope it was interesting