Hello, QML

40
Hello, QML Jack Yang [email protected]

Transcript of Hello, QML

Page 1: Hello, QML

Hello, QMLJack Yang

[email protected]

Page 2: Hello, QML

Installation● http://www.qt.io/download-open-source/

● C++ Compiler (Win): Visual Studio 2013

express

Page 3: Hello, QML

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

Page 4: Hello, QML

● Easy to learn

● Easy to customize

● Easy to extension

● Plentiful UI interaction, animation,

image processing

Page 5: Hello, QML

What is QML ?Qt Meta/ Modeling/ Mockup Language

declarative

javascript control

Page 6: Hello, QML

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

Page 7: Hello, 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.

Page 8: Hello, QML

QML Submodule

Local storage, Window, Dialogs, Controls,

Layouts, Particles, XML List Model

Page 9: Hello, QML

Category of QML module

● https://qt-project.org/doc/qt-5-

snapshot/modules-qml.html

Page 10: Hello, QML

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

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

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

QML Object attributeshttp://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html

Page 14: Hello, QML

id, property, method, signal

Page 15: Hello, QML

Custom define property● property <type> <name>

● signal handler: on<PropertyName>Changed

Page 16: Hello, QML

Custom define signal

Page 17: Hello, QML

Alias typeCar.qml

Page 18: Hello, QML

Grouped property● font, anchors, border

Page 19: Hello, QML

Attached property● Component

● Keys, KeyNavigation

Page 20: Hello, QML

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

Property BindingProperty with JS expression

http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html

Page 22: Hello, QML
Page 23: Hello, QML

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

● Qt.binding

Page 24: Hello, QML

Inline js function

Page 25: Hello, QML

Javascript file import● import external js file

● include js in jsCommon.js

Extend.js

Page 26: Hello, QML

Connection signal● signal “connect” to slot

Page 27: Hello, QML

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

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

Positioning

● Row, Column, Grid, Flow

Page 30: Hello, QML

TextField/TextInput● Mouse Selection

● Invalidator

● echo mode: password

Page 31: Hello, QML

State● State is a set of batched changes from the default

configuration

Page 32: Hello, QML

Transition● A Transition defines the animations to be applied when

a State change occurs

Page 33: Hello, QML

Model / View / Delegate

Page 34: Hello, QML

Model / View / Delegate● ListModel, ListElement

Page 35: Hello, QML

Model / View / Delegate● ListView, GridView, PathView

Page 36: Hello, QML

Model / View / Delegate● Visualize item in the model

MyContactDelegate.qml

Page 37: Hello, QML

Model / View / Delegate● Deleage can get value from model item role, attach

property: index, attach property from viewer

Page 38: Hello, QML

Demo

Page 40: Hello, QML

Q & A