qtdesigner-app-tutorial.qdoc 10.9 KB
Newer Older
1
2
3
4
/****************************************************************************
**
** This file is part of Qt Creator
**
5
** Copyright (c) 2012 Nokia Corporation and/or its subsidiary(-ies).
6
**
Eike Ziller's avatar
Eike Ziller committed
7
** Contact: http://www.qt-project.org/
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
**
**
** GNU Free Documentation License
**
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of this
** file.
**
**
****************************************************************************/

// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************

/*!
    \contentspage index.html
28
    \previouspage creator-qml-application.html
29
    \page creator-writing-program.html
30
    \nextpage creator-project-managing.html
31
32
33
34
35

    \title Creating a Qt Widget Based Application

    This tutorial describes how to use \QC to create a small Qt application,
    Text Finder. It is a simplified version of the  QtUiTools
36
    \l{http://qt-project.org/doc/qt-4.8/uitools-textfinder.html}{Text Finder}
37
38
39
40
41
42
43
44
45
    example. The application user interface is constructed from Qt widgets by
    using \QD. The application logic is written in C++ by using the code editor.

    \image qtcreator-textfinder-screenshot.png

    \section1 Creating the Text Finder Project

    \list 1

46
        \o  Select \gui{File > New File or Project > Applications > Qt Gui
47
48
49
50
51
52
53
54
55
56
57
58
59
            Application > Choose}.

            \image qtcreator-new-qt-gui-application.png "New File or Project dialog"

            The \gui{Introduction and Project Location} dialog opens.

            \image qtcreator-intro-and-location-qt-gui.png "Introduction and Project Location dialog"

        \o  In the \gui{Name} field, type \bold {TextFinder}.

        \o  In the \gui {Create in} field, enter the path for the project files.
            For example, \c {C:\Qt\examples}, and then click \gui{Next}.

60
            The \gui {Kit Selection} dialog opens.
61

62
            \image qtcreator-new-project-qt-versions-qt-gui.png "Kit Selection dialog"
63

64
        \o  Select build and run \l{glossary-buildandrun-kit}{kits} for your project,
65
66
            and click \gui{Next}.

67
68
            \note If only one kit is specified in \gui Tools > \gui Options >
            \gui {Build & Run} > \gui Kits, this dialog is
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
            skipped.

            The \gui{Class Information} dialog opens.

            \image qtcreator-class-info-qt-gui.png "Class Information dialog"

        \o  In the \gui{Class name} field, type \bold {TextFinder} as the class
            name.

        \o  In the \gui{Base class} list, select \bold {QWidget} as the base
            class type.

           \note The \gui{Header file}, \gui{Source file} and \gui{Form file}
            fields are automatically updated to match the name of the class.

        \o  Click \gui{Next}.

            The \gui{Project Management} dialog opens.

            \image qtcreator-new-project-summary-qt-gui.png "Project Management dialog"

        \o  Review the project settings, and click \gui{Finish} to create the
            project.

    \endlist

95
96
97
    \note The project opens in the \gui Edit mode, and these instructions are
    hidden. To return to these instructions, open the \gui Help mode.

98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
    The TextFinder project now contains the following files:

    \list

        \o  textfinder.h
        \o  textfinder.cpp
        \o  main.cpp
        \o  textfinder.ui
        \o  textfinder.pro

    \endlist

    \image qtcreator-textfinder-contents.png "TextFinder project contents"

    The .h and .cpp files come with the necessary boiler plate code.
    The .pro file is complete.

    \section1 Filling in the Missing Pieces

    Begin by designing the user interface and then move on to filling
    in the missing code. Finally, add the find functionality.

    \section2 Designing the User Interface

    \image qtcreator-textfinder-ui.png "Text Finder UI"

    \list 1

        \o  In the \gui{Editor} mode, double-click the textfinder.ui file in the
            \gui{Projects} view to launch the integrated \QD.

        \o  Drag and drop the following widgets to the form:

        \list

            \o  \gui{Label} (QLabel)
            \o  \gui{Line Edit} (QLineEdit)
            \o  \gui{Push Button} (QPushButton)

        \endlist

        \image qtcreator-textfinder-ui-widgets.png "Adding widgets to Text Finder UI"

        \note To easily locate the widgets, use the search box at the top of the
        \gui Sidebar. For example, to find the \gui Label widget, start typing
        the word \bold label.

        \image qtcreator-texfinder-filter.png "Filter field"

        \o  Double-click the \gui{Label} widget and enter the text
            \bold{Keyword}.

        \o  Double-click the \gui{Push Button} widget and enter the text
            \bold{Find}.

        \o  In the \gui Properties pane, change the \gui objectName to
            \bold findButton.

            \image qtcreator-textfinder-objectname.png "Changing object names"

        \o  Press \key {Ctrl+A} to select the widgets and click
            \gui{Lay out Horizontally} (or press \gui{Ctrl+H}) to apply a
            horizontal layout (QHBoxLayout).

            \image qtcreator-texfinder-ui-horizontal-layout.png "Applying horizontal layout"

        \o  Drag and drop a \gui{Text Edit} widget (QTextEdit) to the form.

        \o  Select the screen area and click \gui{Lay out Vertically} (or press
            \gui{Ctrl+L}) to apply a vertical layout (QVBoxLayout).

            \image qtcreator-textfinder-ui.png "Text Finder UI"

            Applying the horizontal and vertical layouts ensures that the
            application UI scales to different screen sizes.

        \o  To call a find function when users press the \gui Find button, you
            use the Qt signals and slots mechanism. A signal is emitted when a
            particular event occurs and a slot is a function that is called in
            response to a particular signal. Qt widgets have predefined signals
            and slots that you can use directly from \QD. To add a slot for the
            find function:

            \list

                \o  Right-click the \gui Find button to open a context-menu.

                \o  Select \gui {Go to Slot > clicked()}, and then select
                    \gui OK.

                    A private slot, \c{on_findButton_clicked()}, is added to the
                    header file, textfinder.h and a private function,
                    \c{TextFinder::on_findButton_clicked()}, is added to the
                    source file, textfinder.cpp.

            \endlist

        \o  Press \gui{Ctrl+S} to save your changes.

    \endlist

    For more information about designing forms with \QD, see the
200
    \l{http://qt-project.org/doc/qt-4.8/designer-manual.html}{Qt Designer Manual}.
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

    \section2 Completing the Header File

    The textfinder.h file already has the necessary #includes, a constructor,
    a destructor, and the \c{Ui} object. You need to add a private function,
    \c{loadTextFile()}, to read and display the contents of the input text file
    in the QTextEdit.

    \list 1

        \o  In the \gui{Projects} pane in the \gui {Edit view}, double-click the
            \c{textfinder.h} file to open it for editing.

        \o  Add a private function to the \c{private} section, after the
            \c{Ui::TextFinder} pointer, as illustrated by the following code
            snippet:

            \snippet examples/textfinder/textfinder.h 0

    \endlist

    \section2 Completing the Source File

    Now that the header file is complete, move on to the source file,
    textfinder.cpp.

    \list 1

        \o  In the \gui{Projects} pane in the \gui Edit view, double-click the
            textfinder.cpp file to open it for editing.

        \o  Add code to load a text file using QFile, read it with QTextStream,
            and then display it on \c{textEdit} with
234
            \l{http://qt-project.org/doc/qt-4.8/qtextedit.html#plainText-prop}
235
236
237
238
239
240
241
242
243
244
245
246
            {setPlainText()}.
            This is illustrated by the following code snippet:

            \snippet examples/textfinder/textfinder.cpp 0

        \o  To use QFile and QTextStream, add the following #includes to
            textfinder.cpp:

            \snippet examples/textfinder/textfinder.cpp 1

        \o  For the \c{on_findButton_clicked()} slot, add code to extract the
            search string and use the
247
248
            \l{http://qt-project.org/doc/qt-4.8/qtextedit.html#find}{find()}
            function
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
            to look for the search string within the text file. This is
            illustrated by the following code snippet:

            \snippet examples/textfinder/textfinder.cpp 2

        \o  Once both of these functions are complete, add a line to call
            \c{loadTextFile()} in the constructor, as illustrated by the
            following code snippet:

            \snippet examples/textfinder/textfinder.cpp 3

    \endlist

    The \c{on_findButton_clicked()} slot is called automatically in
    the uic generated ui_textfinder.h file by this line of code:

    \code
    QMetaObject::connectSlotsByName(TextFinder);
    \endcode

    \section2 Creating a Resource File

    You need a resource file (.qrc) within which you embed the input
    text file. The input file can be any .txt file with a paragraph of text.
    Create a text file called input.txt and store it in the textfinder
    folder.

    To add a resource file:

    \list 1

        \o  Select \gui{File > New File or Project > Qt > Qt Resource File >
            Choose}.

            \image qtcreator-add-resource-wizard.png "New File or Project dialog"

            The \gui {Choose the Location} dialog opens.

            \image qtcreator-add-resource-wizard2.png "Choose the Location dialog"

        \o  In the \gui{Name} field, enter \bold{textfinder}.

        \o  In the \gui{Path} field, enter \c{C:\Qt\examples\TextFinder},
            and click \gui{Next}.

            The \gui{Project Management} dialog opens.

            \image qtcreator-add-resource-wizard3.png "Project Management dialog"


        \o  In the \gui{Add to project} field, select \bold{TextFinder.pro}
            and click \gui{Finish} to open the file in the code editor.

        \o  Select \gui{Add > Add Prefix}.

        \o  In the \gui{Prefix} field, replace the default prefix with a slash
            (/).

        \o  Select \gui{Add > Add Files}, to locate and add input.txt.

            \image qtcreator-add-resource.png "Editing resource files"

    \endlist

    \section1 Compiling and Running Your Program

    Now that you have all the necessary files, click the
    \inlineimage qtcreator-run.png
    button to compile and run your program.

*/