creator-ui.qdoc 15.3 KB
Newer Older
1 2
/****************************************************************************
**
3
** Copyright (c) 2013 Digia Plc and/or its subsidiary(-ies).
hjk's avatar
hjk committed
4
** Contact: http://www.qt-project.org/legal
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 26 27 28
**
**
** 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
    \previouspage creator-overview.html
    \page creator-quick-tour.html
29
    \nextpage creator-configuring.html
30 31 32 33 34 35 36

    \title User Interface

    When you start \QC, it opens to the \gui Welcome mode, where you can:

    \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
        \li Send feedback to the development team
46 47 48

    \endlist

49
    \image qtcreator-breakdown.png
50

51
    You can use the mode selector (1) to change to another \QC mode.
52

53 54
    You can use the kit selector (2) to select the
    \l{glossary-buildandrun-kit}{kit} for running (3), debugging (4), or
55 56 57 58 59
    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,
    methods, documentation, and file systems.
60 61 62 63 64 65 66 67 68

    \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}.

69 70 71
    To hide the mode selector and to save space on the display, select
    \gui Window > \gui {Show Mode Selector}.

72 73 74 75 76
    The following image displays an example application in \gui Edit mode (1)
    and \gui Design mode (2).

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

77 78 79 80
    You can use \QC in the following modes:

    \list

81
        \li \gui Welcome mode for opening projects.
82

83
        \li \gui{\l{Coding}{Edit}} mode for editing project and source
84 85
            files.

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

90
        \li \gui{\l{Debugging}{Debug}} mode for inspecting the state of your
91 92
            application while debugging.

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

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

100
        \li \gui{\l{Getting Help}{Help}} mode for viewing Qt documentation.
101 102 103 104 105 106 107 108 109 110 111 112 113 114 115

    \endlist

    Certain actions in \QC trigger a mode change. Clicking on \gui {Debug} >
    \gui {Start Debugging} > \gui {Start Debugging} automatically switches to
    \gui {Debug} mode.

    \section1 Browsing Project Contents

    The sidebar is available in the \gui Edit and \gui Debug modes. Use the
    sidebar to browse projects, files, and bookmarks, and to view the class
    hierarchy.

    \image qtcreator-sidebar.png

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

    \list

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

123
        \li \gui{Open Documents} shows currently open files.
124

125
        \li \gui Bookmarks shows all bookmarks for the current session.
126

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

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

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

136
        \li \gui {Type Hierarchy} shows the base classes of a class.
137

138 139 140
        \li \gui {Include Hierarchy} shows which files are included in the current file
            and which files include the current file.

141 142 143 144 145 146
    \endlist

    You can change the view of the sidebar in the following ways:

    \list

147
        \li To toggle the sidebar, click \inlineimage qtcreator-togglebutton.png
148 149
            (\gui {Hide Sidebar/Show Sidebar}) or press \key Alt+0
            (\key Cmd+0 on Mac OS X).
150

151
        \li To split the sidebar, click \inlineimage qtcreator-splitbar.png
152
            (\gui {Split}). Select new content to view in the split view.
153

154
        \li To close a sidebar view, click
155
            \inlineimage qtcreator-closesidebar.png
156
            (\gui {Close}).
157 158 159 160 161 162 163 164 165 166 167 168

    \endlist

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

    \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.

169 170 171
    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
172

173 174 175 176
    You can use the project tree in the following ways:

    \list

177
        \li To open files that belong to a project, double-click them in the
Leena Miettinen's avatar
Leena Miettinen committed
178 179 180 181
            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}.

182
        \li To bring up a context menu containing the actions most commonly
183 184 185 186
            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.

187
        \li To hide the categories and sort project files alphabetically, click
188
            \inlineimage qtcreator-filter.png
189
            (\gui {Filter Tree}) and select \gui{Simplify Tree}.
190

191
        \li To hide source files which are automatically generated by the build
192
            system, select \gui {Filter Tree > Hide Generated Files}.
193

194
        \li To keep the position in the project tree synchronized with the file
195 196
            currently opened in the editor, click
            \inlineimage qtcreator-synchronizefocus.png
197
            (\gui {Synchronize with Editor}).
198

199
        \li To see the absolute path of a file, move the mouse pointer over the
200 201 202 203 204 205 206 207 208
            file name.

    \endlist

    \section2 Viewing the File System

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

209
    To also show hidden files, select \gui {Filter Files} > \gui {Show Hidden Files}.
210

211
    To keep the position in the tree synchronized with the file
212
    opened in the editor, select \gui {Synchronize with Editor}.
213 214 215 216 217 218

    \section2 Viewing the Class Hierarchy

    The \gui {Class View} shows the class hierarchy of the currently
    open projects. To organize the view by subprojects, click
    \inlineimage qtcreator-show-subprojects.png
219
    (\gui {Show Subprojects}).
220

221
    \section2 Viewing QML Types
222

223
    The \gui Outline view shows the type hierarchy in a QML file.
224 225 226

    \list

227
        \li To see a complete list of all bindings, select \gui {Filter Tree >
228
            Show All Bindings}.
229

230
        \li To keep the position in the view synchronized with the QML type
231
            selected in the editor, select \gui {Synchronize with Editor}.
232 233 234 235 236 237 238 239

    \endlist

    \section2 Viewing Type Hierarchy

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

240 241 242 243 244 245
    \section2 Viewing Include Hierarchy

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

246 247 248 249 250 251
    \section1 Viewing Output

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

    \list

252
       \li \gui{Issues}
253

254
       \li \gui{Search Results}
255

256
       \li \gui{Application Output}
257

258
       \li \gui{Compile Output}
259

260 261
       \li \gui {QML/JS Console}

262
       \li \gui {To-Do Entries}
263

264
       \li \gui{Version Control}
265

266
       \li \gui{General Messages}
267

268 269 270 271 272 273 274 275 276 277 278
    \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
    \gui {Maximize Output Pane} button or press \key {Alt+9}.

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

279 280
    To open the \gui{General Messages} and \l{Using Version Control Systems}
    {Version Control} panes, select
281 282
    \gui {Window > Output Panes}. To display the \gui {To-Do Entries} pane,
    enable the Todo plugin.
283

Leena Miettinen's avatar
Leena Miettinen committed
284
    \section2 Issues
285

Leena Miettinen's avatar
Leena Miettinen committed
286
    The \gui{Issues} pane provides lists of following types of issues:
287

Leena Miettinen's avatar
Leena Miettinen committed
288
    \list
289

290
        \li \gui Analyzer - Errors encountered while running the
Leena Miettinen's avatar
Leena Miettinen committed
291 292
            \l{Analyzing Code}{Valgrind code analysis tools}.

293 294 295 296
        \li \gui {Bar Descriptor} - Errors and warnings encountered when using
            the BlackBerry 10 BAR descriptor editor to customize the appearance
            and behavior of an application.

297
        \li \gui {Build System} - Errors and warnings encountered during a
Leena Miettinen's avatar
Leena Miettinen committed
298 299
            build.

300
        \li \gui Compile - Selected output from the compiler. Open the
Leena Miettinen's avatar
Leena Miettinen committed
301 302
            \gui {Compile Output} pane for more detailed information.

303
        \li \gui {My Tasks} - Entries from a task list file (.tasks) generated
Leena Miettinen's avatar
Leena Miettinen committed
304 305 306
            by \l{Showing Task List Files in Issues Pane}
            {code scanning and analysis tools}.

307
        \li \gui QML - Errors in QML syntax.
308

309
        \li \gui {QML Analysis} - Results of the JavaScript
Leena Miettinen's avatar
Leena Miettinen committed
310 311
            \l{Checking JavaScript and QML Syntax}
            {code syntax and validation checks}
Leena Miettinen's avatar
Leena Miettinen committed
312 313 314 315 316

    \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
317
    \gui {Filter Tree}
Leena Miettinen's avatar
Leena Miettinen committed
318 319 320 321
    and then select a filter.

    \image qtcreator-build-issues.png

322 323
    Right-clicking on a line brings up a context menu with options to remove a line, copy
    its contents, or to show a version control annotation view of the line
Leena Miettinen's avatar
Leena Miettinen committed
324
    that causes the error message.
325

326 327 328 329
    To navigate to the corresponding source code, click an issue or
    select \gui {Show in Editor} in the context menu. The entry must contain the
    name of the file where the issue was found.

Leena Miettinen's avatar
Leena Miettinen committed
330 331
    To jump from one issue to the next or previous one, press \key F6 and
    \key Shift+F6.
332 333 334

    \section2 Search Results

335 336 337 338 339 340 341
    In the \gui{Search Results} pane, you can search through projects, files on
    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.
342 343 344 345 346 347 348 349 350 351 352 353 354

    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

    The \gui{Application Output} pane displays the status of a program when
    it is executed, and the debug output.

    \image qtcreator-application-output.png

355 356 357
    Select toolbar buttons to run applications, to attach the debugger to the
    running application, and to stop running or debugging.

358 359 360 361
    \section2 Compile Output

    The \gui{Compile Output} pane provides all output from the compiler.
    The \gui{Compile Output} is a more detailed version of information
Leena Miettinen's avatar
Leena Miettinen committed
362
    displayed in the \gui{Issues} pane.
363 364 365

    \image qtcreator-compile-pane.png

366 367 368 369 370
    Double-click on a file name in an error message to open the file in the
    code editor.

    Select the \gui {Cancel Build} button to cancel the build.

371 372 373 374 375 376 377 378 379 380 381
    \section2 QML/JS Console

    In the \gui {QML/JS Console}, you can type JavaScript expressions and use them to get
    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.

382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404
    \section2 To-Do List

    The \gui {To-Do List Entries} pane lists the BUG, FIXME, NOTE, TODO, and
    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

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

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

    The Todo plugin is disabled by default. To enable the plugin, select
    \gui Help > \gui {About Plugins} > \gui Utilities > \gui Todo and restart
    \QC.

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

405 406 407 408 409 410 411
    \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
    language, select \gui {Tools > Options > Environment} and select a language
    in the \gui Language field. The change takes effect after you restart \QC.

Leena Miettinen's avatar
Leena Miettinen committed
412 413 414 415 416 417
    \section1 Viewing Images

    \QC opens image files in the image viewer.

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

418 419
    Use the toolbar buttons (1) or \l{Keyboard Shortcuts}{keyboard shortcuts}
    to:
Leena Miettinen's avatar
Leena Miettinen committed
420 421 422

    \list

423
        \li Switch between background and outline modes
Leena Miettinen's avatar
Leena Miettinen committed
424

425
        \li Zoom in and out
Leena Miettinen's avatar
Leena Miettinen committed
426

427
        \li Fit images to screen
Leena Miettinen's avatar
Leena Miettinen committed
428

429
        \li Return to original size
Leena Miettinen's avatar
Leena Miettinen committed
430

431
        \li Play and pause animated GIF and MNG images
432

Leena Miettinen's avatar
Leena Miettinen committed
433 434
    \endlist

435 436 437 438 439
    \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
440
    \l{Searching with the Locator}{navigation} shortcuts are available to help
441 442
    speed up the process of developing your application.

443 444 445 446 447
    \section1 Useful Features

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

448
*/