CONTENTS
1 About this Guide 3
1.1 Why Would You Want to Read this Guide? . . . . . . . . . . . . . . . . . . . 3
1.2 Get the Source Code and the Guide in Different Formats . . . . . . . . . . . . 4
1.3 Help Us Help You . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 License . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2 Prototyping and Initial Design 7
2.1 Overview of the NoteApp Application . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Creating a QML Component for UI Elements . . . . . . . . . . . . . . . . . . 10
2.3 Anchoring QML Items and Implementing the QML Components . . . . . . . 11
2.4 Using Repeater and Delegate to Create List of Markers . . . . . . . . . . . . . 14
2.5 Finalize the Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3 Implementing the UI and Adding Functionality 23
3.1 Creating PagePanel Component for Managing Pages . . . . . . . . . . . . . . 23
3.2 Bind Marker Item with the Page Item in Repeater . . . . . . . . . . . . . . . . 27
3.3 Adding Graphics, Image vs BorderImage Element . . . . . . . . . . . . . . . 30
4 Managing Note Objects Dynamically and Store Notes Locally 37
4.1 Create and Manage Note Item Objects Dynamically . . . . . . . . . . . . . . 37
4.2 Store and Load Data from a Database Using Javascript . . . . . . . . . . . . . 42
5 Adding Animations and Enhancing the Look & Feel 51
5.1 Using the Behavior Element to Animate NoteToolbar . . . . . . . . . . . . . . 51
5.2 Using States and Transitions to Animate Pages and Page Markers . . . . . . . 54
6 Further Improvements of the Application 57
6.1 Using Javascript to Enhance the Note Item Functionality . . . . . . . . . . . . 57
6.2 Ordering Notes Upon User Interaction . . . . . . . . . . . . . . . . . . . . . . 59
6.3 Loading a Custom Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
7 Deploying the NoteApp Application 63
7.1 Creating the NoteApp Qt Application . . . . . . . . . . . . . . . . . . . . . . 63
8 Lesson Learned and Further Reading 71
i
