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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
..
---------------------------------------------------------------------------
Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
All rights reserved.
This work, unless otherwise expressly stated, is licensed under a
Creative Commons Attribution-ShareAlike 2.5.
The full license document is available from
http://creativecommons.org/licenses/by-sa/2.5/legalcode .
---------------------------------------------------------------------------
Anchoring QML Items and Implementing the QML Components
=======================================================
The :qt5:`Rectangle QML type <qtquick/qml-qtquick2-rectangle.html>` is the natural choice to build UI blocks and the initial QML Component in the prototype phase. It is a visual type that has properties, which you can tweak to make it easier to prototype and test.
.. note::
It is a good practice to always give default geometry values to your defined components as it helps in testing.
Let's have a closer look at the code of our QML Components. At first, we start by implementing the `Note` component.
Note and NoteToolbar Component
------------------------------
First, as seen in the previous step, we have created the new QML files that we can use to implement the required components.
To match the given wire-frame design, the code for `NoteToolbar` could look as follows:
.. code-block:: js
// NoteToolbar.qml
import QtQuick 2.0
// A Rectangle element with defined geometries and color.
Rectangle {
id: root
width: 100
height: 62
color: "#9e964a"
}
The `Note` component will have a toolbar UI element and the `NoteToolbar` component will be used for that. Additionally, there is a text input element for getting the input text from the user. We will use the :qt5:`TextEdit QML type <qtquick/qml-qtquick2-textedit.html>` for this. In order to place these UI elements within the `Note` component, the `anchor` property is used. This property is inherited from the :qt5:`Item type <qtquick/qml-qtquick2-item.html>`, which is the base class that every other QML component inherits by default.
Refer to the :qt5:`Anchor-based Layout in QML <qtquick/qtquick-positioning-anchors.html>` documentation for more details about anchoring and laying out QML components.
.. note:: Anchor-based layouts can not be mixed with absolute positioning
.. code-block:: js
// Note.qml
import QtQuick 2.0
Rectangle {
id: root
width: 200
height: 200
color: "#cabf1b"
// creating a NoteToolbar that will
// be anchored to its parent on the top, left and right
NoteToolbar {
id: toolbar
// height is required to be specified
// since there is no bottom anchoring.
height: 40
// anchoring it to the parent
// using just three anchors
anchors {
top: root.top
left: root.left
right: root.right
}
}
// creating a TextEdit used for the text input from user.
TextEdit {
anchors {
top: toolbar.bottom
bottom: root.bottom
right: root.right
left: root.left
}
wrapMode: TextEdit.WrapAnywhere
}
}
.. warning::
For performance reasons, you should only anchor a component to its siblings and direct parent.
Page
----
Once we have the `Note` component ready, let's work on getting the `Page` component with a couple of note items inside.
.. literalinclude:: src/notezapp/Page.qml
:language: js
:lines: 35-
In Qt Creator, you can simply run the file above, which in fact will simply use *qmlscene** to load the `Page.qml`. The output result should look like this:
.. image:: img/pagesnapshot.png
:scale: 50%
:align: center
Marker
------
Same as with the rest of the components, the `Marker` component will also use a Rectangle type with predefined geometries. Later on, as described in the next chapter, we will
show how the `Marker` component is used.
.. literalinclude:: src/notezapp/Marker.qml
:language: js
:lines: 35-
.. rubric:: What's Next?
In the next chapter, we will see how to use a Repeater QML type and a Column to manage a static list of markers.
|
