2. Prototyping and Initial Design

One of the major advantages of Qt Quick and QML is that it enables you to prototype quickly. We are considering the Prototyping* phase as our first step for developing the NoteApp application for two reasons. First, as mentioned in the previous chapter, QML gives us the power to prototype quickly so UI designers can sketch up initial UI screens to be evaluated in no time. Second, prototyping allows you to work closely with designers, so the UI concepts are implemented in several short iterative processes.

Later on, this prototype will be used as our basis for further development of the application. In this chapter, we will guide you through the application development phase, including some UI concepts, the feature-set, UI interaction flows, and some initial QML screens as part of our prototyping.

There will be an introduction to a few main QML concepts such as creating a QML Component and how to layout QML items.

Note

You will find the implementation related to this chapter in the zip file provided in the get-source-code section.

Here is a brief list of the main discussion points of this chapter:

• UI Concepts and the feature-set for the NoteApp
• Creating QML Component using Qt Creator
• Use of Anchor and Repeater QML types for laying out UI elements

This chapter has the following steps:

• 2.1. Overview of the NoteApp Application
  • 2.1.1. UI Elements
  • 2.1.2. UI Flows
• 2.2. Creating a QML Component for UI Elements
  • 2.2.1. Creating a Qt Quick UI Project in QtCreator
  • 2.2.2. Identifying QML Components as UI Elements
• 2.3. Anchoring QML Items and Implementing the QML Components
  • 2.3.1. Note and NoteToolbar Component
  • 2.3.2. Page
  • 2.3.3. Marker
• 2.4. Using Repeater and Delegate to Create List of Markers
• 2.5. Finalize the Prototype
  • 2.5.1. Composing the Prototype
  • 2.5.2. Making Note Components Draggable