Hello, QML
-
Upload
jack-yang -
Category
Engineering
-
view
292 -
download
3
Transcript of Hello, QML
Hello, QMLJack Yang
Installation● http://www.qt.io/download-open-source/
● C++ Compiler (Win): Visual Studio 2013
express
Why QML ?wxWidget, GTK+, MFC, .Net, etc.
● Easy to learn
● Easy to customize
● Easy to extension
● Plentiful UI interaction, animation,
image processing
What is QML ?Qt Meta/ Modeling/ Mockup Language
declarative
javascript control
What is QtQuick ?Qt library provide type and functionality to QML
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.
QML Submodule
Local storage, Window, Dialogs, Controls,
Layouts, Particles, XML List Model
Category of QML module
● https://qt-project.org/doc/qt-5-
snapshot/modules-qml.html
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)
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
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
QML Object attributeshttp://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html
id, property, method, signal
Custom define property● property <type> <name>
● signal handler: on<PropertyName>Changed
Custom define signal
Alias typeCar.qml
Grouped property● font, anchors, border
Attached property● Component
● Keys, KeyNavigation
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
Property BindingProperty with JS expression
http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html
Property Binding● Lose binding if property is later assigned a static value
● Qt.binding
Inline js function
Javascript file import● import external js file
● include js in jsCommon.js
Extend.js
Connection signal● signal “connect” to slot
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
Qt Enterprise Components
● Qt Chart
● Qt Virtual Keyboard
● Qt Data Visualization
● Qt Quick Enterprise Controls
● http://www.qt.io/qt-features/
Positioning
● Row, Column, Grid, Flow
TextField/TextInput● Mouse Selection
● Invalidator
● echo mode: password
State● State is a set of batched changes from the default
configuration
Transition● A Transition defines the animations to be applied when
a State change occurs
Model / View / Delegate
Model / View / Delegate● ListModel, ListElement
Model / View / Delegate● ListView, GridView, PathView
Model / View / Delegate● Visualize item in the model
MyContactDelegate.qml
Model / View / Delegate● Deleage can get value from model item role, attach
property: index, attach property from viewer
Demo
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
Q & A