2.3. Anchoring QML Items and Implementing the QML Components

The Rectangle QML type [http://qt-project.org/doc/qt-5.0/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.

2.3.1. 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:

// 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 TextEdit QML type [http://qt-project.org/doc/qt-5.0/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 Item type [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-item.html], which is the base class that every other QML component inherits by default.

Refer to the Anchor-based Layout in QML [http://qt-project.org/doc/qt-5.0/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

// 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.

2.3.2. Page

Once we have the Note component ready, let’s work on getting the Page component with a couple of note items inside.

** $QT_END_LICENSE$
**
****************************************************************************/

// Page.qml

import QtQuick 2.0

Rectangle {
    id: root
    width: 600
    height: 400
    color: "#222525"

    // creating a Note item
    Note {
        id: note1
        // use x and y properties to specify
        // the absolute position relative to the parent
        x: 105; y: 144
    }

    Note {
        id: note2
        x: 344
        y: 83
    }
}

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:

2.3.3. 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.

** $QT_END_LICENSE$
**
****************************************************************************/

// Marker.qml

import QtQuick 2.0

Rectangle {
    id: root
    width: 50
    height: 90
    color: "#0a7bfb"

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.