creator-ui.qdoc 20.6 KB
Newer Older
1
2
/****************************************************************************
**
Eike Ziller's avatar
Eike Ziller committed
3
4
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing
5
**
hjk's avatar
hjk committed
6
** This file is part of Qt Creator
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
**
**
** 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.
// **********************************************************************

/*!
26
    \contentspage {Qt Creator Manual}
27
28
    \previouspage creator-overview.html
    \page creator-quick-tour.html
29
    \nextpage creator-configuring.html
30
31
32

    \title User Interface

33
    When you start \QC, it opens to the \uicontrol Welcome mode, where you can:
34
35
36

    \list

37
        \li Open recent sessions and projects
38

39
        \li Create and open projects
40

41
        \li Open tutorials and example projects
42

43
        \li Read news from the online community and Qt labs
44
45
46

    \endlist

47
    \image qtcreator-breakdown.png
48

49
    You can use the mode selector (1) to change to another \QC mode.
50

51
52
    You can use the kit selector (2) to select the
    \l{glossary-buildandrun-kit}{kit} for running (3), debugging (4), or
53
54
55
56
    building (5) the application. Output from these actions is displayed in the
    output panes (7).

    You can use the locator (6) to to browse through projects, files, classes,
57
    functions, documentation, and file systems.
58
59
60
61
62
63
64
65
66

    \section1 Modes

    The mode selector allows you to quickly switch between tasks such as editing
    project and source files, designing application UIs, configuring how
    projects are built and executed, and debugging your applications. To change
    modes, click the icons, or use the \l{keyboard-shortcuts}
    {corresponding keyboard shortcut}.

67
    To hide the mode selector and to save space on the display, select
68
    \uicontrol Window > \uicontrol {Show Mode Selector}.
69

70
71
    The following image displays an example application in \uicontrol Edit mode (1)
    and \uicontrol Design mode (2).
72
73
74

    \image qtcreator-qt-quick-editors.png "Edit mode and Design mode"

75
76
77
78
    You can use \QC in the following modes:

    \list

79
        \li \uicontrol Welcome mode for opening projects.
80

81
        \li \uicontrol{\l{Coding}{Edit}} mode for editing project and source
82
83
            files.

84
        \li \uicontrol{\l{Designing User Interfaces}{Design}} mode for designing and
85
86
87
            developing application user interfaces. This mode is available for
            UI files.

88
        \li \uicontrol{\l{Debugging}{Debug}} mode for inspecting the state of your
89
90
            application while debugging.

91
        \li \uicontrol{\l{Specifying Build Settings}{Projects}} mode for configuring
92
93
94
            project building and execution. This mode is available when a
            project is open.

95
        \li \uicontrol{\l{Analyzing Code}{Analyze}} mode for using code analysis tools
96
97
            to detect memory leaks and profile C++ or QML code.

98
        \li \uicontrol{\l{Getting Help}{Help}} mode for viewing Qt documentation.
99
100
101

    \endlist

102
103
104
    Certain actions in \QC trigger a mode change. Clicking on \uicontrol {Debug} >
    \uicontrol {Start Debugging} > \uicontrol {Start Debugging} automatically switches to
    \uicontrol {Debug} mode.
105
106
107

    \section1 Browsing Project Contents

108
109
    The sidebar is available in the \uicontrol Edit and \uicontrol Debug modes, and with a
    different set of views in the \uicontrol Design mode. Use the
110
111
112
113
114
    sidebar to browse projects, files, and bookmarks, and to view the class
    hierarchy.

    \image qtcreator-sidebar.png

115
    You can select the content of the sidebar in the sidebar menu (1):
116
117
118

    \list

119
        \li \uicontrol Projects shows a list of projects open in the current
120
121
            session.

122
        \li \uicontrol{Open Documents} shows currently open files.
123

124
        \li \uicontrol Bookmarks shows all bookmarks for the current session.
125

126
        \li \uicontrol{File System} shows all files in the currently selected
127
128
             directory.

129
        \li \uicontrol {Class View} shows the class hierarchy of the currently
130
131
            open projects.

132
        \li \uicontrol Outline shows the symbol hierarchy of a C++ file and the type
133
134
            hierarchy of a QML file.

135
136
137
        \li \uicontrol Tests lists autotests and Qt Quick tests in the project
            (commercial only).

138
        \li \uicontrol {Type Hierarchy} shows the base classes of a class.
139

140
        \li \uicontrol {Include Hierarchy} shows which files are included in the current file
141
142
            and which files include the current file.

143
144
    \endlist

145
146
147
    For more information about the sidebar views that are only available in
    \QMLD, see \l{Using Qt Quick Designer}.

148
149
150
151
    You can change the view of the sidebar in the following ways:

    \list

152
        \li To toggle the sidebar, click \inlineimage qtcreator-togglebutton.png
153
            (\uicontrol {Hide Sidebar/Show Sidebar}) or press \key Alt+0
154
            (\key Cmd+0 on OS X).
155

156
        \li To split the sidebar, click \inlineimage qtcreator-splitbar.png
157
            (\uicontrol {Split}). Select new content to view in the split view.
158

159
        \li To close a sidebar view, click
160
            \inlineimage qtcreator-remove-split-button.png
161
            (\uicontrol {Close}).
162
163
164
165
166
167

    \endlist

    The additional options in each view are described in the following
    sections.

168
169
170
    In some views, right-clicking opens a context menu that contains functions
    for managing the objects listed in the view.

171
172
173
174
175
176
    \section2 Viewing Project Files

    The sidebar displays projects in a project tree. The project tree contains
    a list of all projects open in the current session. The files for each
    project are grouped according to their file type.

177
178
179
    If the project is under version control, information from the version control system
    might be displayed in brackets after the project name. This is currently implemented for
    Git (the branch name or a tag is displayed) and ClearCase (the view name is displayed).
Leena Miettinen's avatar
Leena Miettinen committed
180

181
182
183
184
    You can use the project tree in the following ways:

    \list

185
        \li To open files that belong to a project, double-click them in the
Leena Miettinen's avatar
Leena Miettinen committed
186
187
188
189
            project tree. Files open in the appropriate editor, according to the
            file type. For example, code source files open in the code editor
            and image files in the \l{Viewing Images}{image viewer}.

190
        \li To bring up a context menu containing the actions most commonly
191
192
193
194
            needed right-click an item in the project tree. For example, through
            the menu of the project root directory you can, among other actions,
            build, re-build, clean and run the project.

195
        \li To hide the categories and sort project files alphabetically, click
196
            \inlineimage qtcreator-filter.png
197
            (\uicontrol {Filter Tree}) and select \uicontrol{Simplify Tree}.
198

199
        \li To hide source files which are automatically generated by the build
200
            system, select \uicontrol {Filter Tree > Hide Generated Files}.
201

202
        \li To keep the position in the project tree synchronized with the file
203
204
            currently opened in the editor, click
            \inlineimage qtcreator-synchronizefocus.png
205
            (\uicontrol {Synchronize with Editor}).
206

207
        \li To see the absolute path of a file, move the mouse pointer over the
208
209
210
211
            file name.

    \endlist

212
213
214
    Files that are not sources or data can be still included into a project's
    distribution tarball by adding their paths to the \c DISTFILES variable in
    the .pro file. This way they also become known to \QC, so that they are
215
    visible in the \uicontrol Projects view and are known to the locator and search.
Leena Miettinen's avatar
Leena Miettinen committed
216

217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
    The \uicontrol Projects view contains context menus for managing projects,
    subprojects, folders, and files. The following functions are available for
    managing projects and subprojects:

    \list

        \li Set a project as the active project.

        \li Execute the \uicontrol Build menu commands.

        \li Add subprojects, libraries, directories, and files.

        \li Remove subprojects.

        \li Search from the selected directory.

        \li Close projects.

    \endlist

    For managing files and directories, the same functions are available as in
    the \uicontrol {File System} view. In addition, you can remove and rename
    files.

241
242
    \section2 Viewing the File System

243
244
    If you cannot see a file in the \uicontrol Projects view, switch to the
    \uicontrol {File System} view, which shows all the files in the file system.
245

246
    To also show hidden files, select \uicontrol {Filter Files} > \uicontrol {Show Hidden Files}.
247

248
    To keep the position in the tree synchronized with the file
249
    opened in the editor, select \uicontrol {Synchronize with Editor}.
250

251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
    Use the context menu functions to:

    \list

        \li Open files with the default editor or some other editor.

        \li Show the file or directory in the file explorer.

        \li Open a terminal window in the selected directory or in the directory
            that contains the file.

        \li Search from the selected directory.

    \endlist

266
267
    \section2 Viewing the Class Hierarchy

268
    The \uicontrol {Class View} shows the class hierarchy of the currently
269
270
    open projects. To organize the view by subprojects, click
    \inlineimage qtcreator-show-subprojects.png
271
    (\uicontrol {Show Subprojects}).
272

273
274
275
    To visit all parts of a namespace, double-click on the namespace item
    multiple times.

276
    \section2 Viewing QML Types
277

278
    The \uicontrol Outline view shows the type hierarchy in a QML file.
279
280
281

    \list

282
        \li To see a complete list of all bindings, select \uicontrol {Filter Tree >
283
            Show All Bindings}.
284

285
        \li To keep the position in the view synchronized with the QML type
286
            selected in the editor, select \uicontrol {Synchronize with Editor}.
287
288
289

    \endlist

290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
    \section2 Viewing Tests

    The \uicontrol Tests view shows the autotests and Qt Quick tests in the
    current project (commercial only). Select the test cases to run. If a Qt
    Quick test case does not have a name, it is marked \uicontrol Unnamed in the
    list. Unnamed test cases are always executed when the application that
    contains them is run, and therefore you cannot select or deselect them.

    To show or hide init and cleanup or data functions, select
    \uicontrol {Filter Test Tree} > \uicontrol {Show Init and Cleanup Functions}
    or \uicontrol {Show Data Functions}. Double-click a function in the list
    to open its source code in the code editor.

    The test cases are listed in alphabetic order. To list them in the order in
    which they are defined in the source code, select
    \inlineimage qtcreator-autotests-sort-naturally.png
    (\uicontrol {Sort Naturally}).

    To run tests, select \uicontrol {Run All Tests} or
    \uicontrol {Run Selected Tests} in the context menu.

    To refresh the view, select \uicontrol {Rescan Tests} in the context menu.

313
314
315
    \section2 Viewing Type Hierarchy

    To view the base classes of a class, right-click the class and select
316
    \uicontrol {Open Type Hierarchy}  or press \key {Ctrl+Shift+T}.
317

318
319
320
    \section2 Viewing Include Hierarchy

    To view which files are included in the current file and which files include
321
    the current file, right-click in the editor and select \uicontrol {Open Include Hierarchy}
322
323
    or press \key {Ctrl+Shift+I}.

324
325
326
327
328
329
    \section1 Viewing Output

    The task pane in \QC can display one of the following panes:

    \list

330
       \li \uicontrol{Issues}
331

332
       \li \uicontrol{Search Results}
333

334
       \li \uicontrol{Application Output}
335

336
       \li \uicontrol{Compile Output}
337

338
       \li \uicontrol {QML/JS Console}
339

340
       \li \uicontrol {To-Do Entries}
341

342
       \li \uicontrol{Version Control}
343

344
       \li \uicontrol{General Messages}
345

346
347
       \li \uicontrol{Test Results} (commercial only)

348
349
350
351
    \endlist

    Output panes are available in all \l{Modes}{modes}. Click the name of an
    output pane to open the pane. To maximize an open output pane, click the
352
    \uicontrol {Maximize Output Pane} button or press \key {Alt+9}.
353

354
    To search within the \uicontrol{Application Output} and \uicontrol{Compile Output}
355
    panes, press \key {Ctrl+F} when the pane is active. Enter search criteria in
356
    the \uicontrol Find field and click the left and right arrows to search down and
357
358
    up in the pane.

359
    To open the \uicontrol{General Messages} and \l{Using Version Control Systems}
360
    {Version Control} panes, select
361
    \uicontrol {Window > Output Panes}. To display the \uicontrol {To-Do Entries} pane,
362
363
    enable the Todo plugin and to display the \l{Running Autotests}
    {Test Results} pane, enable the Auto Tests plugin.
364

Leena Miettinen's avatar
Leena Miettinen committed
365
    \section2 Issues
366

367
    The \uicontrol{Issues} pane provides lists of following types of issues:
368

Leena Miettinen's avatar
Leena Miettinen committed
369
    \list
370

371
        \li \uicontrol Analyzer - Errors encountered while running the
Leena Miettinen's avatar
Leena Miettinen committed
372
373
            \l{Analyzing Code}{Valgrind code analysis tools}.

374
        \li \uicontrol {Build System} - Errors and warnings encountered during a
Leena Miettinen's avatar
Leena Miettinen committed
375
376
            build.

377
378
        \li \uicontrol Compile - Selected output from the compiler. Open the
            \uicontrol {Compile Output} pane for more detailed information.
Leena Miettinen's avatar
Leena Miettinen committed
379

380
       \li \uicontrol{Debug Information} - Lists debug information packages that might
381
382
            be missing.

383
       \li \uicontrol{Debugger Runtime} - Errors encountered when starting \QC. For
384
385
            example, information about missing DLLs.

386
       \li \uicontrol Deployment - Errors encountered between building an application
387
388
            successfully and starting it on a device.

389
        \li \uicontrol {My Tasks} - Entries from a task list file (.tasks) generated
Leena Miettinen's avatar
Leena Miettinen committed
390
391
392
            by \l{Showing Task List Files in Issues Pane}
            {code scanning and analysis tools}.

393
        \li \uicontrol QML - Errors in QML syntax.
394

395
        \li \uicontrol {QML Analysis} - Results of the JavaScript
Leena Miettinen's avatar
Leena Miettinen committed
396
397
            \l{Checking JavaScript and QML Syntax}
            {code syntax and validation checks}
Leena Miettinen's avatar
Leena Miettinen committed
398
399
400
401
402

    \endlist

    The pane filters out irrelevant output from the build tools and presents the
    issues in an organized way. To further filter the output by type, select
403
    \uicontrol {Filter Tree}
Leena Miettinen's avatar
Leena Miettinen committed
404
405
406
407
    and then select a filter.

    \image qtcreator-build-issues.png

408
409
410
411
412
    Right-clicking on a line brings up a context menu with actions that you can
    apply to the contents of the line. You can remove a line, copy its contents
    to the clipboard, or search the Internet for a solution using the contents
    of the line as search criteria. In addition, you can show a version control
    annotation view of the line that causes the error message.
413

414
    To navigate to the corresponding source code, click an issue or
415
    select \uicontrol {Show in Editor} in the context menu. The entry must contain the
416
417
    name of the file where the issue was found.

418
419
    To view more information about an issue in the \uicontrol {Compile Output} pane,
    select \uicontrol {Show Output} in the context menu.
420

Leena Miettinen's avatar
Leena Miettinen committed
421
422
    To jump from one issue to the next or previous one, press \key F6 and
    \key Shift+F6.
423
424
425

    \section2 Search Results

426
    In the \uicontrol{Search Results} pane, you can search through projects, files on
427
428
429
430
431
432
    a file system or the currently open file:

    \image qtcreator-search-results.png "Search Results output pane"

    The search results are stored in the search history (1) from which you can
    select earlier searches.
433
434
435
436
437
438
439
440

    The figure below shows an example search result for all
    occurrences of \c textfinder within the \c "/TextFinder" directory.

    \image qtcreator-search-pane.png

    \section2 Application Output

441
    The \uicontrol{Application Output} pane displays the status of a program when
442
443
444
445
    it is executed, and the debug output.

    \image qtcreator-application-output.png

446
447
448
    Select toolbar buttons to run applications, to attach the debugger to the
    running application, and to stop running or debugging.

449
450
    \section2 Compile Output

451
452
453
    The \uicontrol{Compile Output} pane provides all output from the compiler.
    The \uicontrol{Compile Output} is a more detailed version of information
    displayed in the \uicontrol{Issues} pane.
454
455
456

    \image qtcreator-compile-pane.png

457
458
459
    Double-click on a file name in an error message to open the file in the
    code editor.

460
    Select the \uicontrol {Cancel Build} button to cancel the build.
461

462
463
    \section2 QML/JS Console

464
    In the \uicontrol {QML/JS Console}, you can type JavaScript expressions and use them to get
465
466
467
468
469
470
471
472
    information about the state of your application during debugging. You can change property
    values temporarily, without editing the source, and view the results in the running
    application.

    \image qml-script-console.png "QML/JS Console"

    You can change the property values permanently in the code editor.

473
474
    \section2 To-Do List

475
    The \uicontrol {To-Do List Entries} pane lists the BUG, FIXME, NOTE, TODO, and
476
477
478
479
480
    WARNING keywords from the current file or from all project files. The
    keywords are organized into information, warning, and error categories.

    \image qtcreator-todo-pane.png

481
482
    To add keywords, select \uicontrol Tools > \uicontrol Options >
    \uicontrol {To-Do} > \uicontrol Add.
483
    Set an icon and a line background color for the keyword. To change the icons
484
    and colors set for an existing keyword, select \uicontrol Edit.
485
486

    To determine whether the keywords in the whole project or in the current
487
    file are displayed by default, select \uicontrol {Scanning scope}.
488

489
490
491
492
493
    To exclude files from scanning, select \uicontrol {To-Do Settings} in the
    \uicontrol Projects mode. Select \uicontrol Add and enter a regular
    expression that matches the path to files to exclude. Use a forward slash
    (/) as a separator in the path also on Windows.

494
    The Todo plugin is disabled by default. To enable the plugin, select
495
496
    \uicontrol Help > \uicontrol {About Plugins} > \uicontrol Utilities >
    \uicontrol Todo and restart
497
498
499
    \QC.

    In addition, you can open task list files generated by code scanning and
500
    analysis tools in the \uicontrol Issues pane. For more information, see
501
502
    \l{Showing Task List Files in Issues Pane}.

503
504
505
506
    \section1 Changing Languages

    \QC has been localized into several languages. If the system language is one
    of the supported languages, it is automatically selected. To change the
507
508
    language, select \uicontrol {Tools > Options > Environment} and select a language
    in the \uicontrol Language field. The change takes effect after you restart \QC.
509

Leena Miettinen's avatar
Leena Miettinen committed
510
511
512
513
514
515
    \section1 Viewing Images

    \QC opens image files in the image viewer.

    \image qtcreator-image-viewer.png "Image viewer"

516
517
    Use the toolbar buttons (1) or \l{Keyboard Shortcuts}{keyboard shortcuts}
    to:
Leena Miettinen's avatar
Leena Miettinen committed
518
519
520

    \list

521
        \li Switch between background and outline modes
Leena Miettinen's avatar
Leena Miettinen committed
522

523
        \li Zoom in and out
Leena Miettinen's avatar
Leena Miettinen committed
524

525
        \li Fit images to screen
Leena Miettinen's avatar
Leena Miettinen committed
526

527
        \li Return to original size
Leena Miettinen's avatar
Leena Miettinen committed
528

529
        \li Play and pause animated GIF and MNG images
530

Leena Miettinen's avatar
Leena Miettinen committed
531
532
    \endlist

533
534
535
536
537
    \section1 Navigating with Keyboard

    \QC caters not only to developers who are used to using the mouse,
    but also to developers who are more comfortable with the keyboard. A wide
    range of \l{keyboard-shortcuts}{keyboard} and
538
    \l{Searching with the Locator}{navigation} shortcuts are available to help
539
540
    speed up the process of developing your application.

541
542
543
544
545
    \section1 Useful Features

    For a list of useful \QC features described in other parts of the
    documentation, see \l{Tips and Tricks}.

546
547
548
549
550
551
552
553
554
555
556
557
558
    \section1 Platform Notes

    \QC uses standard names and locations for standard features, such as
    \e options or \e preferences. In this manual, the names and locations on
    Windows and Linux are usually used to keep the instructions short. Here are
    some places to check if you cannot find a function, dialog, or keyboard
    shortcut on OS X when following the instructions:

    \table
        \header
            \li For
            \li Look In
        \row
559
560
            \li \uicontrol Tools > \uicontrol Options
            \li \uicontrol {Qt Creator} > \uicontrol Preferences
561
        \row
562
563
            \li \uicontrol Help > \uicontrol {About Plugins}
            \li \uicontrol {Qt Creator} > \uicontrol {About Plugins}
564
565
        \row
            \li Keyboard shortcuts
566
567
            \li \uicontrol {Qt Creator} > \uicontrol Preferences > \uicontrol Environment >
                \uicontrol Keyboard
568
569
    \endtable

570
*/