Update copyright headers
[qt:qt.git] / doc / src / howtos / developmentsteps.qdoc
1 /****************************************************************************
2 **
3 ** Copyright (C) 2015 The Qt Company Ltd.
4 ** Contact: http://www.qt.io/licensing/
5 **
6 ** This file is part of the documentation of the Qt Toolkit.
7 **
8 ** $QT_BEGIN_LICENSE:FDL$
9 ** Commercial License Usage
10 ** Licensees holding valid commercial Qt licenses may use this file in
11 ** accordance with the commercial license agreement provided with the
12 ** Software or, alternatively, in accordance with the terms contained in
13 ** a written agreement between you and The Qt Company. For licensing terms
14 ** and conditions see http://www.qt.io/terms-conditions. For further
15 ** information use the contact form at http://www.qt.io/contact-us.
16 **
17 ** GNU Free Documentation License Usage
18 ** Alternatively, this file may be used under the terms of the GNU Free
19 ** Documentation License version 1.3 as published by the Free Software
20 ** Foundation and appearing in the file included in the packaging of
21 ** this file.  Please review the following information to ensure
22 ** the GNU Free Documentation License version 1.3 requirements
23 ** will be met: http://www.gnu.org/copyleft/fdl.html.
24 ** $QT_END_LICENSE$
25 **
26 ****************************************************************************/
27 /*!
28 \page qtdevelopment-steps.html
29 \title Qt Development: The Steps from Challenge to Achievement
30
31 \section1 The Challenge
32
33 One day, your boss runs into your cubicle and exclaims to you, "The board blew
34 millions on a new enterprise HelloWorld application. The new one does not work
35 and we need a solution quickly before this disaster brings down the company! I'm
36 putting you in charge of the whole project while I go on vacation -- see you in
37 2 weeks."
38
39 \section1 Brainstorming Ideas - It is time to play!
40
41 Never one to shy away from a challenge (especially when your job might be on the
42 line), you first set out try come up with an idea about what your options are.
43
44 You ask around a bit and discover that the broken application was intended to
45 replace one that has been living on a dusty mainframe for the past 25 years. The
46 machine is nearing end of life and, rather than invest in replacement hardware
47 to run a legacy HelloWorld program, the board decided to invest in new software
48 that could be run on desktops, web, mobile devices and embedded into the
49 company's main product line -- a pocket size device with a small LCD screen,
50 which flashes the message "Hello World" every full moon.
51
52 The vendor that was chosen to handle this task was a well known multinational
53 company that specialized in enterprise CRM/ERP systems. The project missed
54 several delivery deadlines over a 2 year period, and was 500% over budget. There
55 was not going to be much margin for error trying to fix the problem, and there
56 would likely be no budget either.
57
58 You begin researching dozens of possible possible approaches to the problem. One
59 of the biggest challenges is that there are very few options that will allow you
60 to create native applications that use the same framework for targeting
61 \l{qt-creator-configure-target}{multiple platforms}.
62
63 Some years ago you had coded a small desktop application using the Qt framework,
64 without realizing that it also can be used for targeting the web, mobile devices
65 and embedded devices. Since that time, Qt has added a new feature called \l{Qt
66 Quick}, which provides the ability to easily design applications with intuitive,
67 modern-looking, fluid user interfaces.
68
69 \section1 Creating an Objective
70
71 You quickly realize that you might need two, three, or more interfaces for your
72 application -- one for each of the target platforms you are aiming for.
73 Thankfully Qt has options well suited for each of them.
74
75 For your mobile application the choice seems obvious enough. The new Qt Quick
76 technology looks very promising, but you do not know QML; the declarative
77 language that helps define the interface in a Qt Quick program. You still want
78 to give it a try, but worry that you might not have something complete before
79 your boss returns from vacation in two weeks. You also wonder if Qt Quick is
80 applicable to desktop and embedded targets -- and then of course there is the
81 need for something targeting the web. You decide to give Qt Quick a try first
82 and \l{QML Examples and Demos}{see where it takes you}.
83
84 \section1 Developing Plans
85
86 One thing you realize after reading up on \l{Qt Quick} is that things are very
87 different from the desktop when designing an interface. Qt Quick doesn't contain
88 ready made UI 'chrome'; the widgets and other design elements that define the
89 application interface. A new technology, called Qt Quick Components, looks like
90 a promising solution, but the components will only be available at a later date.
91 For now you'll have to come up with something on your own -- but you are keen to
92 give your design skills a work out, and learning to use Qt Quick seems to be a
93 great way to do it.
94
95 Not knowing a better place to start, you begin by taking a cue from web design
96 and plan a wireframe, which helps
97 \l{external: Developing Qt Quick Applications}{define the application layout},
98 content and user interaction. You decide on breaking the field of the screen
99 space into three roughly equal size parts. There will be one section across the
100 top, which will span the width of the screen, and two sections in the lower
101 have, which will be approximately as tall as the top section is wide (when in
102 portrait mode).
103
104 The top section will be a simple text representation of the phrase "Hello World"
105 in English. In the lower left you would like to place some kind of audio
106 playback feature that repeats back the phrase in the top section of the screen.
107 Finally, in the lower right hand side of the screen will be four links to
108 similar views for additional languages -- Mandarin Chinese, Brazilian
109 Portuguese, Arabic, and Russian. When the user clicks one of the links the text
110 at the top is then translated, and the playback corresponds to the appropriate
111 language.
112
113 While the wireframe is effective in dealing with one part of the design
114 challenge, it does not cover visual aspects other than layout and content. This
115 means that you still need to define colours, white space, and typography (among
116 other things). This is where a style guide would come in handy, if your company
117 already had one that is. In the absence of one you decide to again get some
118 inspiration from the web, and you mimic some of the company's website design
119 into your application -- a sans-serif font for white text on a blue field across
120 the top, black text on white for the bottom two sections, and a small company
121 logo to the left of the "Hello World" message.
122
123
124 \section1 Execution: The Coding Begins!
125
126 At long last you sit down to \l{qt-technologies}{implement} your plans and
127 designs. The first few steps go according to plan, and creating the basic layout
128 and text goes fairly smoothly -- but you run into a few challenges quite
129 quickly:
130
131 Devising a user friendly interface to audio playback is not as intuitive as you
132 first thought. Since there exist a ready made component for
133 \l{external: Mobility Multimedia}{multimedia},
134 you remove the bottom left field and now have the screen split in two. You add
135 textual links for each of the five target languages, and when the user clicks
136 one of them the message text changes and the appropriate audio plays back. It is
137 a small sacrifice to make for now, and you are sure there is a solution to be
138 found once you have become more proficient with QML.
139
140 The next challenge you run into is that \l{qt-deployment}{deploying} the
141 application to a Symbian phone is not as clearly understood as you expected.
142 Again you are sure there is something you are missing, but for the time being
143 you manually copy the .sis file to the "Installs" directory on the phone
144 (connected to the development machine by USB) and then install it through the
145 Application Manager.
146
147 When you finally manage to install the application on the device you notice
148 something that looks rather peculiar, and something you had not thought of. When
149 the phone is turned into landscape mode, your text remains at the same absolute
150 coordinates as when it was in portrait mode. You had not realized you needed to
151 anchor it in order to achieve the centering you wanted. There was an
152 \l{qt-testing}{easy fix} for this, but you were glad you saw this earlier rather
153 than later.
154
155
156 \section1 Innovating
157
158 After the ups and downs of learning to develop a basic application
159 using Qt Quick, you start to see greater possibilities for using Qt technologies
160 for your current and future projects:
161
162 \list
163 \o Extending HTML5 based applications that tie Javascript to a Qt C++ back end
164 using \l{Qt WebKit}
165 \o An \l{qt-rendering-painting-system}{OpenGL} based UI for embedded platforms
166 \o \l{Gestures Programming}{Touch} screen support
167 \o \l{external: Mobility Location}{Location} based applications
168 \o \l{qt-technologies}{Much, much more}
169 \endlist
170
171
172 \section1 The Achievement
173
174 After your boss returned from vacation you presented him with the finished Qt
175 Quick application, demonstrating it on both a mobile device as well as desktop
176 (it happened to work well on both with little modification). You also provided
177 him a presentation that detailed your road map for taking things to the next
178 level -- targeting other platforms, such as the web, as well as improving on the
179 existing application you just completed.
180
181 Even though the final product did not turn out the way you originally planned,
182 your boss was still sufficiently impressed. Not only was the go ahead given for
183 future projects, but ramping up a small team of developers and designers was
184 also suggested to help support your efforts.
185
186 */