This document provides an overview of QML (Qt Meta/Modeling/Mockup Language) and QtQuick. It discusses installing Qt, why to use QML, what QML and QtQuick are, basic QML types, object attributes in QML, custom properties, signals, alias types, grouped properties, attached properties, global QML objects, property binding, inline JavaScript, importing JavaScript files, connections between signals and slots, components, positioning with Row, Column etc, text fields, states, transitions, models and views, and delegates. It also lists Qt Enterprise components and provides a demo and practice example using Flickr API.

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