Introduction of QML

1. Hello, QML
Jack Yang
jackyang5000@gmail.com

2. Installation
● http://www.qt.io/download-open-source/
● C++ Compiler (Win): Visual Studio 2013
express

3. Why QML ?
wxWidget, GTK+, MFC, .Net, etc.

4. ● Easy to learn
● Easy to customize
● Easy to extension
● Plentiful UI interaction, animation,
image processing

5. What is QML ?
Qt Meta/ Modeling/ Mockup Language
declarative
javascript control

6. What is QtQuick ?
Qt library provide type and functionality to QML

7. QtQuick for all QML types
o Visual - Item, Rectangle, Text, Image, …etc.
o Input - TextInput, MouseArea, IntValidator, ...etc.
o Positioning - Column, Row, Grid,...etc.
o Model/View - ListView, GridView, ListModel, ...etc.
o Convenience - Timer, Connections, ... etc.

8. QML Submodule
Local storage, Window, Dialogs, Controls,
Layouts, Particles, XML List Model

9. Category of QML module
● https://qt-project.org/doc/qt-5-
snapshot/modules-qml.html

10. QtCreator
● IDE for QML/C++
● Kit (套件) for building
o Qt version, compiler, device, other settings
● Set environment
o path (C:QtQt5.3.25.3msvc2013_64_openglbin)
o QTDIR (ex: C:QtQt5.3.25.3msvc2013_64_opengl)

11. QtCreator shortcuts
● ctrl + b: build
● ctrl + r: run
● ctrl + k: location
● ctrl + tab: switch file
● F1: go to document
● F2: go to symbol
● F4: switch between cpp & header

12. Basic type
● int, bool, real, double, string, url, variant, var
● color, font, date, point, size, rect
● https://qt-project.org/doc/qt-5-
snapshot/qtqml-typesystem-basictypes.html

13. QML Object attributes
http://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html

14. id, property, method, signal

15. Custom define property
● property <type> <name>
● signal handler: on<PropertyName>Changed

16. Custom define signal

17. Alias type
Car.qml

18. Grouped property
● font, anchors, border

19. Attached property
● Component
● Keys, KeyNavigation

20. QML global object
● Qt QML type
o Qt.quit()
o Qt.binding(js func)
o Qt.fromDateTime(data, format)
o qsTr()
o ...
● XMLHttpRequest
● Math, JSON, Date, Array

21. Property Binding
Property with JS expression
http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html

23. Property Binding
● Lose binding if property is later assigned a static value
● Qt.binding

24. Inline js function

25. Javascript file import
● import external js file
● include js in js Common.js
Extend.js

26. Connection signal
● signal “connect” to slot

27. Components
● Reusable element
● Inherited element
import QtQuick 2.3
Rectangle {
….
}
Wheel.qml
import QtQuick 2.3
Rectangle {
Wheel {
...
}
}
Car.qml
import QtQuick 2.3
Car {
….
}
Taxi.qml

28. Qt Enterprise Components
● Qt Chart
● Qt Virtual Keyboard
● Qt Data Visualization
● Qt Quick Enterprise Controls
● http://www.qt.io/qt-features/

29. Positioning
● Row, Column, Grid, Flow

30. TextField/TextInput
● Mouse Selection
● Invalidator
● echo mode: password

31. State
● State is a set of batched changes from the default
configuration

32. Transition
● A Transition defines the animations to be applied when
a State change occurs

33. Model / View / Delegate

34. Model / View / Delegate
● ListModel, ListElement

35. Model / View / Delegate
● ListView, GridView, PathView

36. Model / View / Delegate
● Visualize item in the modelMyContactDelegate.qml

37. Model / View / Delegate
● Deleage can get value from model item role, attach
property: index, attach property from viewer

38. Demo

39. Practice
● Flickr feed url:
o http://api.flickr.com/services/feeds/photos_public.gn
e?id=your_id&format=json&nojsoncallback=1
● XMLHttpRequest object
● JSON.parse

40. Q & A