desktop_devguide/chapter_02/index.rst


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

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

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 :ref:`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:

.. toctree::
  :maxdepth: 2
  :numbered:

  step_1
  step_2
  step_3
  step_4
  step_5