Hello, QMLJack Yang

jackyang5000@gmail.com

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