.. --------------------------------------------------------------------------- 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 . --------------------------------------------------------------------------- Creating a QML Component for UI Elements ======================================== Once we have properly defined the feature-set and UI concepts for the NoteApp* application and have identified basic UI elements, we can safely start to implement and prototype. The prototype will be a very basic UI with no functionality whatsoever, but it will provide an overview of how the application might look when finished, as we go through implementation iterations. In this step, you will find details about how to create your first Qt Quick UI using Qt Creator, but most importantly, how to identify and create a QML component. Creating a Qt Quick UI Project in QtCreator ------------------------------------------- When working on the prototype phase, it is important to understand that creating a Qt Quick UI project with Qt Creator is the most recommended and efficient approach. In this way, prototyping, especially developing and testing each individual QML component is easier. Testing each newly created component individually is very important as you are able to spot issues right away, and using a Qt Quick UI project makes it easier. Refer to the :creator:`Creating a Qt Quick UI ` with QtCreator for details on how to create a project. .. note:: There is always a single QML file that is identified as the the main file to load and run the application. For NoteApp*, we have the `main.qml` file, which has been generated by Qt Creator. Identifying QML Components as UI Elements ----------------------------------------- If you want to make an analogy with object-oriented programming, QML components could be considered as classes that are used to declare and instantiate objects. You could potentially write a simple application entirely in one big QML file, but that would certainly increase complexity and make code re-usability and maintenance quite difficult - sometimes even impossible. QML component can be identified as a group of common UI elements. More often, it represents a single UI element with its predefined actions and properties. Based on our UI Concept and Design, here is brief list of identified custom QML components that are obvious at first, but we may need more later on as we go to the next iteration. .. note:: Each QML component sits in its own QML file (.qml) that has the same name as the component. For instance, *Note** component would be in a file named **Note.qml** . * `Note` - that represents a note item * `Page` - this component contains note items * `Marker` - represents a page marker, enables users to switch between pages using makers * `NoteToolbar` - the toolbar used on a note item to enable drag functionality and layout tools Refer to :creator:`Creating QML Components with QtCreator ` for details on how to use QtCreator for creating the components mentioned above. We will go through each component in detail and learn how to implement them in the coming chapters and steps. .. rubric:: What's Next? Next, we will see how to further enhance our defined components and start implementing the prototype UI.