2.5. Finalize the Prototype

We now have our QML components in place and they’re ready to be used to build our prototype. Here is a list of the implemented components:

• Note
• NoteToolbar
• Marker
• MarkerPanel
• Page

It is very likely that more QML components might come up as we go along in later phases.

As previously mentioned, Qt Creator generates a main.qml file which is considered the main file to load in order to run NoteApp*. Therefore, we will start laying out our components inside the main.qml file to compose the prototype.

2.5.1. Composing the Prototype

Going back to the UI concepts and looking at the design provided, we start laying out the QML components. We have the panel of Maker, that is the MarkerPanel component placed on the right, and the Page component in the center. We haven’t yet covered the toolbar so let’s do that now.

The toolbar contains two tools: one for creating new note and one for clearing the page. For simplicity, we will not create a component for this, but rather define it inside the main.qml file.

The code could look something like this:

// using a Rectangle element to represent our toolbar
// it helps to align the column better with the rest of the components
Rectangle {
    id: toolbar

    // setting a width because there is no right anchoring
    width: 50

    color: "#444a4b"
    anchors {
        left: window.left
        top: window.top; bottom: window.bottom
        topMargin: 100; bottomMargin: 100
    }

    // using a Column type to place the tools
    Column {
        anchors { anchors.fill: parent; topMargin: 30  }
        spacing: 20

        // For the purpose of this prototype we simply use
        //a Repeater to generate two Rectangle items.
        Repeater {
            model: 2
            // using a Rectangle item to represent
            // our tools, just for prototype only.
            Rectangle { width: 50; height: 50;  color: "red" }
        }
    }
}

Now, we are ready to actually finalize our prototype. Here is how the main.qml file would look:

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

// main.qml

import QtQuick 2.0

Rectangle {
    // using window as the identifier for this item as
    // it will the only window of the NoteApp
    id: window
    width: 800
    height: 600

    // creating a MarkerPanel item
    MarkerPanel {
        id: markerPanel
        width: 50
        anchors.topMargin: 20
        anchors {
            right: window.right
            top: window.top
            bottom: window.bottom
        }
    }

    // the toolbar
    Rectangle {
        id: toolbar
        width: 50
        color: "#444a4b"
        anchors {
            left: window.left
            top: window.top
            bottom: window.bottom
            topMargin: 100
            bottomMargin: 100
        }

        Column {
            anchors { fill: parent; topMargin: 30  }
            spacing: 20

            Repeater {
                model: 2
                Rectangle { width: 50;
                    height: 50;
                    color: "red"
                }
            }
        }
    }

    // creating a Page item
    Page {
        id: page1
        anchors {
            top: window.top
            bottom: window.bottom
            right: markerPanel.left
            left: toolbar.right
        }
    }
}

The following screen shows how the prototype looks when either running it using Qt Creator or qmlscene*:

2.5.2. Making Note Components Draggable

So far we have managed to get a very basic prototype that will be our basis for the NoteApp UI. An interesting UI functionality we can quickly add during the prototype phase is to enable the user to drag note items within the page. To achieve this, the MouseArea QML Type [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html] has a grouped property called drag [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html#drag.target-prop]. We will use the drag.target* property by setting it to the id of our note component.

Considering that the user should use the NoteToolbar to drag a note, the MouseArea* type should be inside the NoteToolbar component. The NoteToolbar component handles the dragging operation by the user, so we should set the drag.target [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html#drag.target-prop] to the Note component.

To achieve this, we need to allow NoteToolbar used inside the Note component to bind the drag.target [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html#drag.target-prop] property of MouseArea with the Note component’s id*. QML provides Property Aliases [http://qt-project.org/doc/qt-5.0/qtqml/qtqml-syntax-objectattributes.html#property-aliases] to enable this.

Let’s take the NoteToolbar component and create a property alias for the drag* grouped property of MouseArea:

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

// NoteToolbar.qml

import QtQuick 2.0

Rectangle {
    id: root
    width: 100
    height: 62
    color: "#9e964a"

    // declaring a property alias to the drag
    // property of MouseArea type
    property alias drag: mousearea.drag

    // creating a MouseArea item
    MouseArea {
        id: mousearea
        anchors.fill: parent
    }

}

In the code shown above, we see the drag* property alias for NoteToolbar, which is bound to the drag property of MouseArea, and now we will see how to use that in our Note component.

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

// Note.qml

import QtQuick 2.0

Rectangle {
    id: root
    width: 200
    height: 200
    color: "#cabf1b"

    // creating a NoteToolbar item that
    // will be anchored to its parent
    NoteToolbar {
        id: toolbar
        height: 40
        anchors {
            top: root.top
            left: root.left
            right: root.right
        }

        // using the drag property alias to
        // set the drag.target to our Note item.
        drag.target: root
    }

    // creating a TextEdit item
    TextEdit {
        anchors {
            top: toolbar.bottom
            bottom: root.bottom
            right: root.right
            left: root.left
        }

        wrapMode: TextEdit.WrapAnywhere
    }
}

Detailed information on property bindings in QML can be found on the Property Binding [http://qt-project.org/doc/qt-5.0/qtqml/qtqml-syntax-propertybinding.html] documentation page.

What’s Next?

Next, we will start implementing the UI and basic functionality based on the prototype.