Download - Hello, QML
![Page 2: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/2.jpg)
Installation● http://www.qt.io/download-open-source/
● C++ Compiler (Win): Visual Studio 2013
express
![Page 3: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/3.jpg)
Why QML ?wxWidget, GTK+, MFC, .Net, etc.
![Page 4: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/4.jpg)
● Easy to learn
● Easy to customize
● Easy to extension
● Plentiful UI interaction, animation,
image processing
![Page 5: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/5.jpg)
What is QML ?Qt Meta/ Modeling/ Mockup Language
declarative
javascript control
![Page 6: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/6.jpg)
What is QtQuick ?Qt library provide type and functionality to QML
![Page 7: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/7.jpg)
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.
![Page 8: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/8.jpg)
QML Submodule
Local storage, Window, Dialogs, Controls,
Layouts, Particles, XML List Model
![Page 9: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/9.jpg)
Category of QML module
● https://qt-project.org/doc/qt-5-
snapshot/modules-qml.html
![Page 10: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/10.jpg)
QtCreator● IDE for QML/C++
● Kit (套件) for buildingo Qt version, compiler, device, other settings
● Set environmento path (C:\Qt\Qt5.3.2\5.3\msvc2013_64_opengl\bin)
o QTDIR (ex: C:\Qt\Qt5.3.2\5.3\msvc2013_64_opengl)
![Page 11: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/11.jpg)
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
![Page 12: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/12.jpg)
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
![Page 13: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/13.jpg)
QML Object attributeshttp://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html
![Page 14: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/14.jpg)
id, property, method, signal
![Page 15: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/15.jpg)
Custom define property● property <type> <name>
● signal handler: on<PropertyName>Changed
![Page 16: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/16.jpg)
Custom define signal
![Page 17: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/17.jpg)
Alias typeCar.qml
![Page 18: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/18.jpg)
Grouped property● font, anchors, border
![Page 19: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/19.jpg)
Attached property● Component
● Keys, KeyNavigation
![Page 20: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/20.jpg)
QML global object
● Qt QML typeo Qt.quit()
o Qt.binding(js func)
o Qt.fromDateTime(data, format)
o qsTr()
o ...
● XMLHttpRequest
● Math, JSON, Date, Array
![Page 21: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/21.jpg)
Property BindingProperty with JS expression
http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html
![Page 22: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/22.jpg)
![Page 23: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/23.jpg)
Property Binding● Lose binding if property is later assigned a static value
● Qt.binding
![Page 24: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/24.jpg)
Inline js function
![Page 25: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/25.jpg)
Javascript file import● import external js file
● include js in jsCommon.js
Extend.js
![Page 26: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/26.jpg)
Connection signal● signal “connect” to slot
![Page 27: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/27.jpg)
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
![Page 28: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/28.jpg)
Qt Enterprise Components
● Qt Chart
● Qt Virtual Keyboard
● Qt Data Visualization
● Qt Quick Enterprise Controls
● http://www.qt.io/qt-features/
![Page 29: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/29.jpg)
Positioning
● Row, Column, Grid, Flow
![Page 30: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/30.jpg)
TextField/TextInput● Mouse Selection
● Invalidator
● echo mode: password
![Page 31: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/31.jpg)
State● State is a set of batched changes from the default
configuration
![Page 32: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/32.jpg)
Transition● A Transition defines the animations to be applied when
a State change occurs
![Page 33: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/33.jpg)
Model / View / Delegate
![Page 34: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/34.jpg)
Model / View / Delegate● ListModel, ListElement
![Page 35: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/35.jpg)
Model / View / Delegate● ListView, GridView, PathView
![Page 36: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/36.jpg)
Model / View / Delegate● Visualize item in the model
MyContactDelegate.qml
![Page 37: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/37.jpg)
Model / View / Delegate● Deleage can get value from model item role, attach
property: index, attach property from viewer
![Page 38: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/38.jpg)
Demo
![Page 39: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/39.jpg)
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
![Page 40: Hello, QML](https://reader030.vdocument.in/reader030/viewer/2022013105/55a9320a1a28ab35368b4657/html5/thumbnails/40.jpg)
Q & A