In this post, I want to make a clear framewok of QML language howerver, this post is far from completed, I will update this post when I have new things.

Overview of QML language

In this post, I want to make a clear framewok of QML language howerver, this post is far from completed, I will update this post when I have new things.

Qt QML module is provides the QML engine and language infrastructure. Qt QML provides two API:

QML API: for creating user interface
C++ API: for extending QML applications with c++ code.

Qt Quick module is the standard library for writing for QML applications,Providing all the basic types for creating user interfaces with QML.

Qt Quick Control module provides a set of controls can be used to build complete interface in Qt Quick.

Qt Quick1 vs Qt Quick2

Qt Quick1 use QGraphicsView and QPainter
Qt Quick1 use QWindow and QOpenGL which involves QSceneGraph

Debug tools

Test

qmlscene

Debugging QML Applications

syntax

Import

Import a directory
1. A local directoy, all qml files, no js files.
2. A local directoy with a qmldir file, types specified in the qmldir file, may have js files.
3. A remote directoy with a qmldir file, types specified in the qmldir file.
4. Import to a namespace, import a directory dont create a namespace by default, but you can create one with import dir as namespace
Import a module/plugin
1. Modules can be c++ plugins or QML documents.
2. Module is defined and exported by a qmldir file.
3. Module’s name is a namespace.
4. Module may contains QML types, js resources and c++ plugins, all thie file must in the same directory
5. Identified modules
6. A module requires at leat one type registered to be considered valid.
7. Provide type information to qtcretor with qmltypes file
Import path
1. Directories contain a module definition qmldir file.
2. QML2_IMPORT_PATH can be set to a list of import path which will be used by any QML application
3. QML_IMPORT_PATH qmake keyword, used in qtcreator
4. QML_IMPORT_TRACE environment variable, if set to 1, import path will be recoreded in log.

Scope and name resolution

Type system

Object Type
1. Made from c++
2. Made form qml

elements

// TODO create a online inherits diagram

Visual elements has a geometry on the screen, Item is the base.
non-visual elements provides some functionality.
Item
Component
- A seprate qml file
- A Component type in a qml file.
QtQuick
- Rectangle
- MouseArea
- Image
- Text
- Canvas
- Grid
- Column
- Row
QtQuick.layouts
- Layout
- GridLayout
- ColumnLayout
- RowLayout
- StackLayout
Note: A layout is responsible for its children’s geometry. You should therefore not specify width, height, x, y or any other properties that might influence those properties (such as anchors) on those items. Otherwise there would be a conflict of interest, and the result is undefined. This is also the case if the child item is a layout. Therefore, only layouts with no parent layout can have anchors.fill: parent.
QtQuick.Controls
- Action
- ActionGroup
- ApplicationWindow
- ButtonGroup
- Controls
  - AbstractButton
    - Button
      - RoundButton
      - ToolButton
    - CheckBox
    - DelayButton
    - ItemDelegate
      - CheckDelegate
      - RadioDelegate
      - SwipeDelegate
      - SwitchDelegate
    - MenuBarItem
    - RadioButton
    - Switch
    - TabButton
    - ScrollBar
    - ScrollIndicator
  - BusyIndicator
  - Combobox
  - Dial
  - MenuSeparator
  - Pane
    - Frame
      - GroupBox
    - Page
    - ScrollView
    - ToolBar
  - PageIndicator
  - ProgressBar
  - RangeSlider
  - Slider
  - SpinBox
  - SplitView
  - StackView
  - ToolSeparator
  - Tumbler
- Container
  - DialogButtonBox
  - MenuBar
  - SwipeView
  - TabBar
- Label
- Popup
  - Dialog
  - ToolTip
  - Menu
  - Drawer
- Splithandle
- TextArea
- TextField
QtQuick.Window
- Window

user defined elements

Component
C++?

layout

QtQuick.Layouts

Alignment
Resizable
Size constraints
Spacing

More about item size.

Item
- width
- height
- implicitWidth, will be used if width is not specified
- implicitHeight, will be used if height is not specified.
Layouts
- Layout.minimumWidth
- Layout.prefferedHeight
- Layout.MaxmumWidth
If Layout.fillWidth/Height set to false, Layout.prefferedWidth/Height will be used; if set to true, width/height is between [min, max]
The implicitWidth/Height depends on its contents.
Image and Text has readonly implicitWidth/Height.

Flow

Controls

Control is the base type of all items in QtQuick.Control.

Qml Control Type

Manual/Fixed position

Anchor

Positioners

Layout

State and transtision

Model and views

model is datas,delegate is responsible visualization for every data, view is like a container to put those UIs.

1
2
3
4


 for data : datas {
    element = delegate(data) // visualize data
    view.add(element)
 }

Qt has predefined views and models, you can create any UI to serve as a delegate.Most of the time, you may want to create your own delegates and use predefined models and views.

Model

role, can be accessed directly or through model.[role_name]
modelData role
index role

QML predefined model

ListModel

Use C++ Model

QList<QObject*>, access with model.model.ModelDta[.property]
QStringList, access with model.modelData

Using C++ Models with Qt Quick Views

Views

ListView
GridView
PathView

Repeater

Repeater can be seen as a very basic view, it creates elements according to model and delegate.However, a repeater does’t arrange elements it created, and ofen used with Layout/Positioner to do the arrange job.

delegate is the default property of repeater.
The parent of the created elements is the repeater’s parent.
Delegate of repeater must be a Item-based.
All items in repeater have an attached property index
model of repeater can be many types including Models in QML, different type expose different property to delegate.
1. model object
2. number

[Qt Widgets Model/View]

QAbstractItemModel is the interface of all models.

Interact with c++

C++ -> QML: c++ code serve as model and do heavy logic
1. Register c++ class/object to qml engine
2. Create a plugin with c++
QML -> C++: Load a qml file to c++ code.
1. Load with QQmlComponent->load a qml file as a c++ object.
2. Load with QQuickView/QQuickView.QQuickWidget is a convinient wrapper of QQuickWindow.

Overview of QML and C++ integration

Interacting with QML Objects from C++

Define QML types from c++

Creating c++ plugins for QML

Type conversion between QML and C++

Graphics View Framewok

Scene graph

Render flow

1
2
3
4
5
6
7


@startuml
: QML Components;
: QtQuickItems;
: QSGNodes;
: SceneGraph Renderer;
: OpenGL Commands;
@enduml

Important classes used

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


@startuml
class QSGNode
note left: base class of all scene graph
class QSGGeometryNode {
  QSGGeometry geometry
  QSGMaterial meterial
}
note right: Base clsss for all rendered content
class QSGClipNode
class QSGOpacityNode
class QSGTransformNode

QSGNode <-- QSGBasicGeometryNode
QSGNode <-- QSGOpacityNode
QSGNode <-- QSGRenderNode
QSGNode <-- QSGTransformNode
QSGBasicGeometryNode <-- QSGGeometryNode
QSGBasicGeometryNode <-- QSGClipNode

QSGGeometryNode <--- QSGImageNode
QSGGeometryNode <--- QSGRectangleNode
QSGGeometryNode <--- QSGSimpleRectNode
note bottom: deprecated, use QSGRectangleNode
QSGGeometryNode <--- QSGSimpleTextureNode
note bottom: deprecated, use QSGImageNode

QSGGeometryNode o-- QSGGeometry
QSGGeometryNode o-- QSGMaterial 
QSGMaterial <-- QSGFlatColorMaterial
QSGMaterial <-- QSGOpaqueTextureMaterial
QSGMaterial <-- QSGSimpleMaterial
QSGMaterial <-- QSGVertexColorMaterial
@enduml

How to add custom node to scene graph

Create a custom class subclassing QQuickItem
Set flag with setFlag(ItemHasContents)
Override QQuickItem::updatePaintNode(), use QSGNode::*ChildNode()

Frame graph

3D

Multi-threads

QML/Js engine is single thread? WorkerScript

Internals

QQuickItem(c++) Item(QML) QQmlEngine QQmlComponent QQmlContext Expose C++ OBject to to QML.

iterate qml in c++

Question to be answered

A c++ type registerd to QML engine can not be created in c++ code?(video_hub code)
How to know width and height of ListView?

QML overview

Contents