qtcreator.qdoc 268 KB
Newer Older
1 2 3 4 5 6
// **********************************************************************
// 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.
// **********************************************************************

7

con's avatar
con committed
8 9 10
/*!
    \contentspage{index.html}{Qt Creator}
    \page index.html
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
11
    \nextpage creator-overview.html
con's avatar
con committed
12 13 14

    \title Qt Creator Manual

15
    \section1 Version 2.1 (Draft)
con's avatar
con committed
16

17
    Qt Creator provides integrated tools for both application designers
18
    and developers to create applications for multiple desktop and mobile device
19 20
    platforms.

21 22
    For application designers, Qt Creator provides integrated
    visual editors, \QD
Robert Loehning's avatar
Robert Loehning committed
23
    \if defined(qtquick)
24
    and \QMLD,
Robert Loehning's avatar
Robert Loehning committed
25
    \endif
26
    that you can use to design and develop
27
    application user interfaces.
28 29

    For application developers,
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
30
    Qt Creator provides a cross-platform, complete integrated development
31 32
    environment (IDE) that is available for Linux,
    Mac OS X and Windows operating systems. For more information, see
33
    \l{Operating Systems and Supported Platforms}.
con's avatar
con committed
34

35
    \note Please report bugs and suggestions to the
con's avatar
con committed
36
    \l{http://bugreports.qt.nokia.com}{Qt Bug Tracker}.
37 38 39
    You can also join the Qt Creator mailing list. To subscribe,
    send a message with the word \e subscribe to
    \l{mailto:qt-creator-request@trolltech.com}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
40
    {qt-creator-request@trolltech.com}. For more information about Qt mailing
41
    lists, visit \l{http://lists.trolltech.com}{http://lists.trolltech.com}.
con's avatar
con committed
42

43 44
    \raw HTML
    <img border="0" style="float:right;" src="images/qtcreator-screenshots.png" />
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
45
    \endraw
46

con's avatar
con committed
47
    \list
Leena Miettinen's avatar
Leena Miettinen committed
48
       \o \l{Introducing Qt Creator}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
49
       \o \l{Operating Systems and Supported Platforms}
50
       \o \l{Qt Creator User Interface}
51 52
       \o \l{Getting Started}
           \list
53
               \o \l{Building and Running an Example Application}
54
               \o \l{Creating a Qt C++ Application}
55
               \o \l{Creating a Mobile Application with Nokia Qt SDK}
56
               \if defined(qtquick)
57
               \o \l{Creating a Qt Quick Application}
58
               \endif
59
           \endlist
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
60 61 62 63 64 65
       \o \l{Managing Projects}
            \list
                \o \l{Creating a Project}
                \o \l{Setting Up a qmake Project}
                \o \l{Setting Up a CMake Project}
                \o \l{Setting Up a Generic Project}
Leena Miettinen's avatar
Leena Miettinen committed
66 67
                \o \l{Setting Up Development Environment for Maemo}
                \o \l{Setting Up Development Environment for Symbian}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
68 69
                \o \l{Managing Sessions}
            \endlist
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 95 96 97 98 99
       \o \l{Using the Editor}
            \list
                \o \l{Finding and Replacing}
                \o \l{Refactoring}
                \o \l{Searching With the Locator}
                \o \l{Pasting and Fetching Code Snippets}
                \o \l{Configuring the Editor}
                \o \l{Using FakeVim Mode}
                \o \l{Using an External Editor}
            \endlist
       \o \l{Developing Application UI}
       \list
           \o \l{Optimizing Applications for Mobile Devices}
           \o \l{Adding Qt Designer Plugins}
           \if defined(qtquick)
           \o \l{Developing Qt Quick Applications}
                \list
                    \o \l {Creating Qt Quick Projects}
                    \o \l {Designing Application UI}
                    \o \l {Creating Components}
                    \o \l {Creating Buttons}
                    \o \l {Creating Scalable Buttons and Borders}
                    \o \l {Creating Screens}
                    \o \l {Creating List Views}
                    \o \l {Animating Screens}
                    \o \l {Adding User Interaction Methods}
                    \o \l {Implementing Application Logic}
                \endlist
           \endif
       \endlist
100 101 102 103 104 105 106 107
       \o \l{Building and Running Applications}
            \list
                \o \l{Building for Multiple Targets}
                \o \l{Specifying Build Settings}
                \o \l{Specifying Run Settings}
                \o \l{Specifying Editor Settings}
                \o \l{Specifying Dependencies}
            \endlist
108

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
109
       \o \l{Debugging}
110 111
            \list
            \o \l {Debugging Qt Applications}
112 113 114 115 116 117
            \list
                \o \l{Debugging the Example Application}
                \o \l{Interacting with the Debugger}
                \o \l{Setting Up Debugger}
                \o \l{Using Debugging Helpers}
            \endlist
118
            \if defined(qtquick)
119
            \o \l{Debugging Qt Quick Applications}
120 121
            \endif
            \if defined(qtquick)
122 123 124
                \list
                    \o \l{Using the QML Inspector}
                \endlist
125
            \endif
126
            \endlist
127
       \o \l{Using the Maemo Emulator}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
128
       \o \l{Using Version Control Systems}
129 130

       \o \l{Getting Help}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
131 132 133 134 135
       \o \l{Tips and Tricks}
       \o \l{Keyboard Shortcuts}
       \o \l{Known Issues}
       \o \l{Glossary}
       \o \l{Acknowledgements}
con's avatar
con committed
136 137 138
    \endlist
*/

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
139

con's avatar
con committed
140 141
/*!
    \contentspage index.html
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
142
    \previouspage index.html
Leena Miettinen's avatar
Leena Miettinen committed
143 144 145 146 147
    \page creator-overview.html
    \nextpage creator-os-supported-platforms.html

  \title Introducing Qt Creator

148 149
  Qt Creator provides you with tools to design and develop user interfaces and
  complex applications for multiple desktop and mobile
150 151
  platforms.

152 153
  \section1 Designing User Interfaces

154 155
  \if defined(qtquick)

156 157
  Qt Creator provides two integrated visual editors, \QD and \QMLD.

158 159
  \endif

160 161 162 163 164 165 166 167 168 169
  \QD is a tool for designing and building graphical user interfaces (GUIs) from
  Qt widgets. You can compose and customize your widgets or dialogs and test
  them using different styles and resolutions.

  Widgets and forms created with \QD are integrated seamlessly with programmed code,
  using the Qt signals and slots mechanism, that lets you easily assign behavior to
  graphical elements. All properties set in \QD can be changed dynamically within the code.
  Furthermore, features like widget promotion and custom plugins allow you to use your
  own widgets with \QD.

170 171
    \if defined(qtquick)

172 173 174 175 176
  UIs that use widgets are clearly structured and enforce a platform look and feel,
  which makes them useful for traditional applications. However, they are static, and
  do not fully make use of the large high-resolution screens, touch input, and significant
  graphics power that are becoming common in portable consumer devices, such as mobile
  phones, media players, set-top boxes, and netbooks.
177 178

  \QMLD allows you to easily develop animations by using a declarative programming
179
  language called \l {http://doc.qt.nokia.com/4.7-snapshot/declarativeui.html}{QML}.
180 181 182
  In QML, a user interface is specified as a tree of objects with properties.

  You use a visual editor to create items, screens, and applications, as well as define changes
183
  in their state. \QMLD generates the necessary code for you.
184 185 186 187 188

  \note The visual \QMLD editor is provided as an experimental plugin that you must
  enable to be able to edit QML files in the \gui Design mode. Enabling the
  visual editor can negatively affect the overall stability of Qt Creator.

189 190
  You can edit the code in the code editor to add transitions from one state to another,
  and interaction to specify user actions that change the states. You
191
  can use Qt or JavaScript to implement the application logic.
192

193 194
  \endif

195
  \section1 Coding Applications
196

Leena Miettinen's avatar
Leena Miettinen committed
197 198 199 200
  As an IDE, Qt Creator differs from a text editor in that it knows how to build and run
  applications. It understands the code as code, not just as plain text. This allows
  it to:
  \list
201 202 203 204 205
      \o Enable you to write well formatted code
      \o Anticipate what you are going to write and complete the code
      \o Display inline error and warning messages
      \o Enable you to semantically navigate to classes, functions, and symbols
      \o Provide you with context-sensitive help on classes, functions, and symbols
206
      \o Rename symbols in an intelligent way, so that other symbols with the same name
207 208
         that belong to other scopes are not renamed
      \o Show you the locations in code where a function is declared or called
Leena Miettinen's avatar
Leena Miettinen committed
209 210 211 212 213 214 215 216 217 218
   \endlist

      \section1 Why Do You Need Projects?

      To be able to build and run applications, Qt Creator needs the same
      information as a compiler would need. This information is specified in the
      project build and run settings.

      Creating a project allows you to:
      \list
219 220 221 222
      \o Group files together
      \o Add custom build steps
      \o Include forms and resource files
      \o Specify settings for running applications
Leena Miettinen's avatar
Leena Miettinen committed
223 224 225 226 227
      \endlist

      You can either create a project from scratch or import an existing
      project. Qt Creator generates all the necessary files, depending on the type of
      project you create. For example, if you choose to create a graphical user
228 229 230
      interface (GUI) application, Qt Creator generates an empty .ui file
      that you can modify with the integrated \QD.

231 232
      \if defined(qtquick)

233
      If you choose to create a Qt Quick application, Qt Creator generates a .qml file
234
      that you can modify with the \QMLD visual editor and the code editor.
235 236

      \endif
Leena Miettinen's avatar
Leena Miettinen committed
237 238 239 240 241
*/

/*!
    \contentspage index.html
    \previouspage creator-overview.html
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
242 243 244 245 246 247 248 249 250 251 252 253
    \page creator-os-supported-platforms.html
    \nextpage creator-quick-tour.html

    \title Operating Systems and Supported Platforms

    \section1 Operating Systems

    Qt Creator is available in binary packages for the following operating
    systems:
    \list
        \o Windows XP Service Pack 2
        \o Windows Vista
254
        \o (K)Ubuntu Linux 7.04 (32-bit and 64-bit) or later, with the following:
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
255 256 257 258 259 260 261 262 263 264 265 266 267 268 269
           \list
               \o g++
               \o make
               \o libglib2.0-dev
               \o libSM-dev
               \o libxrender-dev
               \o libfontconfig1-dev
               \o libxext-dev
               \o libfreetype6-dev
               \o libx11-dev
               \o libxcursor-dev
               \o libxfixes-dev
               \o libxft-dev
               \o libxi-dev
               \o libxrandr-dev
270
               \o If you are using QtOpenGL, libgl-dev and libglu-dev
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
271
           \endlist
272
        \o Mac OS 10.5 or later with the following:
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
273 274 275 276 277 278
           \list
               \o Xcode tools for your Mac OS X version available from your Mac
                  OS X installation DVDs or at \l http://developer.apple.com.
           \endlist
    \endlist

279 280 281
         \omit  ## Are the Xcode tools still needed separately? \endomit

    \section1 Build Environment
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
282 283 284

    To build Qt Creator itself from the source, you need:
    \list
285
        \o Qt 4.7 or later
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
286 287 288
        \o On Windows, MinGW 4.4 or Microsoft Visual Studio 2008
    \endlist

289 290 291 292 293 294 295 296 297 298 299 300 301 302
    \section1 Supported Mobile Device Platforms
    You can develop applications for the following mobile device
    platforms:

    \list

    \o Symbian

    \o Maemo and Maemo Application Development and Debugging Environment (MADDE)

    \endlist

    The following table summarizes operating system support for building
    applications for mobile device platforms.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
303 304 305

    \table
        \header
306 307
            \o {1,3} Operating system
            \o {3,1} Platform
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
308 309 310
        \header
            \o Desktop
            \o Symbian
311
            \o Maemo
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
312 313 314 315
        \row
            \o Windows
            \o Yes
            \o Yes
316
            \o Yes
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
317 318 319 320
        \row
            \o Linux
            \o Yes
            \o No
321
            \o Yes
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
322 323 324 325
        \row
            \o Mac OS X
            \o Yes
            \o No
Leena Miettinen's avatar
Leena Miettinen committed
326
            \o No
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
327 328 329 330 331 332 333
    \endtable
*/


/*!
    \contentspage index.html
    \previouspage creator-os-supported-platforms.html
con's avatar
con committed
334
    \page creator-quick-tour.html
335
    \nextpage creator-getting-started.html
con's avatar
con committed
336

337
    \title Qt Creator User Interface
con's avatar
con committed
338 339 340

    \image qtcreator-breakdown.png

341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362
    When you start Qt Creator, it opens to the \gui Welcome mode, where you can:

    \list

        \o Open tutorials and example projects

        \o View tips and hints on using Qt Creator

        \o Create and open projects

        \o Send feedback to the development team

        \o Open recent sessions and projects

        \o Read news from the Qt labs

        \o Ask for support

    \endlist

    You can use the mode selector to change to another Qt Creator mode.

363 364 365 366 367
    Qt Creator 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 Qt Creator.

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
368
    \section1 Qt Creator Modes
con's avatar
con committed
369

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
370
    The mode selector allows you to quickly switch between tasks such as
371 372
    editing project and source files, designing application UIs,
    configuring how projects are built and
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
373 374
    executed, and debugging your applications. To change modes, click the
    icons, or use the \l{keyboard-shortcuts}{corresponding keyboard shortcut}.
con's avatar
con committed
375

376 377
    You can use Qt Creator in the following modes:

con's avatar
con committed
378
    \list
379
        \o \gui{\l{Using the Editor}{Edit}} mode for editing project and source files.
380
        \if defined(qtquick)
381
        \o \gui{\l{Developing Application UI}{Design}} mode for designing and developing
382 383
           application user interfaces. This mode is available for UI files (.ui or
           .qml).
Robert Loehning's avatar
Robert Loehning committed
384 385
        \else
        \o \gui{\l{Using Qt Designer}{Design}} mode for designing and developing
386 387
           application user interfaces.
        \endif
388 389 390
        \o \gui{\l{Debugging}{Debug}} mode for inspecting the state of your program while
           debugging.
        \o \gui{\l{Managing Projects}{Projects}} mode for configuring project building and
391
           execution. This mode is available when a project is open.
392
        \o \gui{\l{Getting Help}{Help}} mode for viewing Qt documentation.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
393 394
    \endlist

395 396
    Certain actions in Qt Creator trigger a mode change. Clicking on
    \gui {Debug} > \gui {Start debugging} > \gui {Start debugging}
397
    automatically switches to \gui {Debug} mode.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
398 399


400
    \section1 Browsing Project Contents
con's avatar
con committed
401

402
    The sidebar is available in the \gui Edit and \gui Debug modes.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
403 404
    Use the sidebar to browse files, projects and bookmarks.
    \image qtcreator-sidebar.png
con's avatar
con committed
405

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
406 407 408 409 410 411 412 413 414
    You can select the content of the sidebar in the sidebar menu:
    \list
        \o \gui Projects shows a list of projects open in the current
           session.
        \o \gui{File System} shows the content of the currently selected
           directory.
        \o \gui Bookmarks shows all bookmarks for the current session.
        \o \gui{Open Documents} shows currently open files.
    \endlist
con's avatar
con committed
415

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
416 417 418 419 420
    You can change the view of the sidebar in the following ways:
    \list
        \o To toggle the sidebar, click \inlineimage qtcreator-togglebutton.png
           or press \key Alt+0 (\key Cmd+0 on Mac OS X).
        \o To split the sidebar, click \inlineimage qtcreator-splitbar.png
421
           . Select new content to view in the split view.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
422 423 424 425
        \o To close a sidebar view, click
           \inlineimage qtcreator-closesidebar.png
           .
    \endlist
con's avatar
con committed
426 427


428
    \section2 Viewing Project Files
con's avatar
con committed
429

430 431 432
    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.
con's avatar
con committed
433

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
434 435
    You can use the project tree in the following ways:
    \list
436 437
        \o To bring up a context menu containing the actions most commonly
           needed right-click an item in the project tree.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
438
           For example, through the menu of the project root directory you can,
439
           among other actions, build, re-build, clean and run the project.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
440 441
        \o To list all files in a project, click
           \inlineimage qtcreator-filter.png
442 443 444 445
           and select \gui{Simplify tree}.
        \o To hide source files which are automatically generated by the build
           system, during a build, click \inlineimage qtcreator-filter.png
           and select \gui{Hide generated files}.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
446 447 448 449 450 451
        \o To toggle the synchronization of your project tree with the file
           opened in the editor, click
           \inlineimage qtcreator-synchronizefocus.png
           .
        \o To see the absolute path of a file, move the mouse pointer over the
           file name.
con's avatar
con committed
452 453 454
    \endlist


455
    \section1 Viewing Output
con's avatar
con committed
456

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
457
    The task pane in Qt Creator can display one of the following panes:
458 459 460 461 462
    \list
       \o  \gui{Build Issues}
       \o  \gui{Search Results}
       \o  \gui{Application Output}
       \o  \gui{Compile Output}
463 464
       \o  \gui{General Messages}
       \o  \gui{Version Control}
465 466 467
    \endlist

    Output panes are available in all \l{Qt Creator modes}{modes}.
468 469 470
    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}.
con's avatar
con committed
471

472 473 474
    To open the \gui{General Messages} and \gui{Version Control}
    panes, select \gui {Window > Output Panes}.

475

476
    \section2 Build Issues
con's avatar
con committed
477

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
478
    The \gui{Build Issues} pane provides a list of errors and warnings
479
    encountered during a build. The pane filters out irrelevant output from
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
480
    the build tools and presents the issues in an organized way.
con's avatar
con committed
481

482 483 484 485
    Right-clicking on a line brings up a context menu with options to copy
    the contents and to show a version control annotation view of the
    line that causes the error message.

486
    \image qtcreator-build-issues.png
con's avatar
con committed
487

488

con's avatar
con committed
489 490
    \section2 Search Results

491 492 493 494 495
    The \gui{Search Results} pane displays the results for global searches,
    for example, searching within a current document, files on disk, or all
    projects.

    The figure below shows an example search result for all
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
496
    occurrences of \c textfinder within the \c "/TextFinder" directory.
con's avatar
con committed
497 498 499

    \image qtcreator-search-pane.png

500

con's avatar
con committed
501 502
    \section2 Application Output

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
503
    The \gui{Application Output} pane displays the status of a program when
504 505 506
    it is executed, and the debug output.

    The figure below shows an example output from qDebug().
con's avatar
con committed
507 508 509

    \image qtcreator-application-output.png

510

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
511
    \section2 Compile Output
con's avatar
con committed
512

513 514 515
    The \gui{Compile Output} pane provides all output from the compiler.
    The \gui{Compile Output} is a more detailed version of information
    displayed in the \gui{Build Issues} pane.
con's avatar
con committed
516 517 518

    \image qtcreator-compile-pane.png

519 520 521 522 523 524 525 526 527 528
    \section1 Navigating with Keyboard

    Qt Creator 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
    \l{Searching With the Locator}{navigation} shortcuts are available to help
    speed up the process of developing your application.

*/

529

530 531 532 533 534 535 536
/*!
    \contentspage index.html
    \previouspage creator-version-control.html
    \page creator-help.html
    \nextpage creator-tips.html

    \title Getting Help
con's avatar
con committed
537

538
    Qt Creator comes fully integrated with Qt documentation and
539
    examples using the Qt Help plugin.
540
    \list
541 542 543 544 545
        \o To view documentation, switch to \gui Help mode.
        \o To obtain context sensitive help, move the text cursor to a Qt class
           or function and press \key F1. The documentation is displayed in a
           pane next to the code editor, or, if there is not enough vertical
           space, in the fullscreen \gui Help mode.
con's avatar
con committed
546

547
           \image qtcreator-context-sensitive-help.png
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
548

549 550
        \o To select and configure how the documentation is displayed in the
           \gui Help mode, select \gui Tools > \gui Options... > \gui Help.
551 552
    \endlist

553
    \section1 Adding External Documentation
con's avatar
con committed
554

555 556
    You can display external documentation in the \gui Help mode.
    To augment or replace the documentation that ships with Qt Creator and Qt:
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
557 558 559 560 561
    \list 1
        \o Create a .qch file from your documentation.

           For information on how to prepare your documentation and create a
           .qch file, see
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
562
           \l{http://doc.qt.nokia.com/4.6/qthelp-framework.html}{The Qt Help Framework}.
563
        \o To add the .qch file to Qt Creator, select \gui Tools >
564
           \gui Options... > \gui Help > \gui Documentation > \gui Add.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
565
    \endlist
con's avatar
con committed
566

567
    \section1 Using Documentation Filters
568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606

    You can filter the documents displayed in the \gui Help mode to find
    relevant information faster. Select from a list of filters in the
    \gui {Filtered by} field. The contents of the \gui Index and \gui Contents
    pane in the sidebar change accordingly.

    \image qtcreator-help-filters.png "Help filters"

    You can modify the filters to include external documentation, for example,
    or you can define your own filters. To construct filters, you can use the
    filter attributes that are specified in the documentation. Each document
    contains at least one filter attribute. If several documents contain the
    same filter attribute, such as \c tools, you can use that attribute to
    include all those documents.

    To add filters:

    \list 1

        \o Select \gui {Tools > Options... > Help > Filters > Add}.

        \o Enter a name for the filter and press \gui {OK}.

        \o In \gui Attributes, select the documents that you want to include
        in the filter.

        \image qtcreator-help-filter-attributes.png "Help filter attributes"

        \o Click \gui OK.

        \o In the \gui Help mode, select the filter in the \gui {Filtered by}
        field to see the filtered documentation in the sidebar.

    \endlist

    To modify filters, select a filter in \gui Filters, select the attributes,
    and then click \gui Apply.

    To remove filters, select them in \gui Filters, and click \gui Remove.
con's avatar
con committed
607

608
*/
609

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
610

611 612 613 614 615
/*!
    \contentspage index.html
    \previouspage creator-editor-external.html
    \page creator-design-mode.html
    \nextpage creator-usability.html
616

617
    \title Developing Application UI
618 619 620 621 622 623 624 625

    To help you design the user interface of your application, two visual
    editors are integrated into Qt Creator:

    \list
    \o \QD
    \o \QMLD
    \endlist
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
626

627
    The integration includes project management and code completion.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
628

629
    \section1 Using Qt Designer
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
630

631
    Qt Creator automatically opens all .ui files in \QD.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
632 633 634

    \image qtcreator-formedit.png

635
    To change the layout of \QD user interface elements:
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
636
    \list 1
637
        \o Select \gui Tools > \gui{Form Editor} > \gui Views >
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
638 639 640 641 642 643 644
           \gui Locked.

           When this option is unchecked, you can change the layout.
        \o Click the header of an element and drag the element to a new
           position.
    \endlist

645
    To change \QD properties, select \gui Tools > \gui Options... >
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662
    \gui Designer.
    \list
        \o Set the class properties and code generation preferences in \gui
           {Class Generation}.
        \o Set an additional folder for saving templates in \gui{Template
           Paths}.
        \o Set the grid settings and preview preferences in \gui Forms. To
           preview your form with skins, enable \gui{Print/Preview
           Configuration} and select your skin. Otherwise default preview
           settings are used.

           To preview the settings, select \gui Tools > \gui{Form Editor} >
           \gui Preview, or press \key Ctrl+Alt+R.
        \o To specify embedded device profiles, such as style, font, and screen
           resolution, select \gui{Embedded Design}.
    \endlist

663
    For more information on \QD, see
664
    \l{http://doc.qt.nokia.com/4.7-snapshot/designer-manual.html}{Qt Designer Manual}.
665

666 667
    \if defined(qtquick)

668
    \section1 Using Qt Quick Designer
669

670
    You can edit .qml files in the visual \QMLD editor or in the
671 672
    code editor.

673
    In \gui Projects, double-click a .qml file to open it in the code
674 675 676
    editor. Then select the \gui {Design} mode to edit the file in the
    visual editor.

677 678 679 680 681 682 683 684
    \note The visual \QMLD editor is provided as an experimental plugin that you must
    enable to be able to edit QML files in the \gui Design mode. Enabling the
    visual editor can negatively affect the overall stability of Qt Creator.

    To enable or disable the \QMLD visual editor, select
    \gui {Help > About Plugins... > Qt Quick > QmlDesigner}. You must restart Qt Creator
    to enable or disable the visual editor.

685 686 687 688 689 690
    \image qmldesigner-visual-editor.png "Visual editor"

    Use the visual editor panes to manage your project:

    \list

691 692
    \o \gui {Navigator} pane displays the items in the scene. You can
    show and hide items to focus on specific parts of the application.
693 694 695 696 697 698

    \o \gui {Library} pane displays lists of predefined \gui {Items} and
    imported \gui {Resources} that you can use to design applications. The
    images and other files that you copy to the project folder appear in the
    \gui {Resources} pane.

699
    \o \gui {Properties} pane displays the properties of the selected component.
700 701
     You can also change the properties in the code editor.

702
    \o \gui {State} pane displays the different states of the component. To add
703 704 705 706 707 708
    states, click the empty slot. Then modify the new state in the editor.
    In the code editor, you can see the changes recorded as changes to
    the base state.

    \endlist

709 710
    \endif

con's avatar
con committed
711 712
*/

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
713

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
714 715
/*!
    \contentspage index.html
716
    \previouspage creator-qml-application.html
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
717 718
    \page creator-editor-using.html
    \nextpage creator-editor-finding.html
719

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
720
    \title Using the Editor
721

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
722
    Qt Creator's code editor is designed to aid you in creating, editing and
723 724 725
    navigating code.  Qt Creator's code editor is fully equipped with syntax
    checking, code completion, context sensitive help and in-line error
    indicators while you are typing.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
726

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
727 728
    \section1 Using the Editor Toolbar

729 730 731
    The editor toolbar is located at the top of the editor view. The editor
    toolbar is context sensitive and shows items relevant to the file currently
    open in the editor.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
732 733 734 735 736

    \image qtcreator-editortoolbar-symbols.png

    Use the toolbar to navigate between open files and symbols in use:
    \list
737
        \o To browse forward or backward through your location history, click
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
738 739 740 741 742 743 744 745 746
           \inlineimage qtcreator-back.png
           and \inlineimage qtcreator-forward.png
           .
        \o To go to any open file, select it from the \gui{Open files}
           drop-down menu.
        \o To jump to any symbol used in the current file, select it from the
           \gui Symbols drop-down menu.
    \endlist

747 748
    When you create or edit forms in a \c{.ui} file, the toolbar contains
    Qt Designer specific tools.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
749 750 751 752 753 754 755 756 757


    \section1 Splitting the Editor View

    Split the editor view when you want to work on and view multiple files on
    the same screen.

    \image qtcreator-spliteditorview.png

758
    You can split the editor view in the following ways:
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
759 760 761 762 763 764 765 766 767 768 769 770 771 772
    \list
        \o To split the editor view into a top and bottom view, select
           \gui Window > \gui Split or press \key{Ctrl+E, 2}.

           Split command creates views below the currently active editor view.
        \o To split the editor view into adjacent views, select
           \gui Window > \gui{Split Side by Side} or press
           \key{Ctrl+E, 3}.

           Side by side split command creates views to the right of the
           currently active editor view.
    \endlist

    To move between split views, select \gui Window >
773
    \gui{Go to Next Split} or press \key{Ctrl+E, O}.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
774 775 776 777 778 779 780 781 782 783 784 785 786 787 788

    To remove a split view, place the cursor within the view you want to
    remove and select \gui Window > \gui{Remove Current Split} or press
    \key{Ctrl+E, 0}. To remove all but the currently selected split view,
    select \gui Window > \gui{Remove All Splits} or press \key{Ctrl+E, 1}.


    \section1 Highlighting and Folding Blocks

    Use block highlighting to visually separate parts of the code that belong
    together. For example, when you place the cursor within the braces,
    the code enclosed in braces is highlighted.

    \image qtcreator-blockhighlighting.png

789
    To enable block highlighting, select \gui Tools > \gui{Options...} >
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
790 791 792 793 794 795 796
    \gui{Text Editor} > \gui Display > \gui{Highlight blocks}.

    Use the folding markers to collapse and expand blocks of code within
    braces. Click the folding marker to collapse or expand a block. In the
    figure above, the folding markers are located between the line number and
    the text pane.

797 798 799
    To show the folding markers, select \gui Tools > \gui{Options...} >
    \gui{Text Editor} > \gui Display > \gui{Display folding markers}. This
    option is enabled by default.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
800

801 802 803 804 805
    When the cursor is on a brace, the matching brace is animated
    by default. To turn off the animation and just highlight the block and
    the braces, select \gui {Tools > Options... > Text Editor > Display} and
    deselect \gui {Animate matching parentheses}.

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
806

807
    \section1 Checking Code Syntax
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
808

809 810 811
    As you write code Qt Creator checks code syntax. When Qt Creator spots a
    syntax error in your code it underlines it and shows error details when you
    move the mouse pointer over the error.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
812 813 814
    \list
        \o Syntax errors are underlined in red.

815 816
           In the following figure, a semicolon is missing at the end of the
           line.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
817 818 819 820 821 822 823 824

           \image qtcreator-syntaxerror.png
        \o Semantic errors and warnings are underlined in olive.

           In the following figure, the type is unknown.

           \image qtcreator-semanticerror.png
    \endlist
825 826


827 828 829 830
    \section1 Completing Code

    Qt Creator understands the code as code, not just as plain text. This
    allows it to help you to write well formatted code and to anticipate
831
    what you are going to write and complete the code.
Robert Loehning's avatar
Robert Loehning committed
832 833
    \if defined(qtquick)
    The code completion differs somewhat depending on whether you write Qt code or QML code.
834 835 836
    \endif

    \if defined(qtquick)
837 838

    \section2 Completing Qt Code
839

840 841
    \endif

842 843
    As you write code, Qt Creator provides a list of context-sensitive
    suggestions to the statement currently under your cursor.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
844 845 846

    \image qtcreator-codecompletion.png

847 848
    To open the list of suggestions at any time, press \key{Ctrl+Space}.
    If only one option is available, Qt Creator inserts it automatically.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
849

850 851 852 853
    When completion is invoked manually, Qt Creator completes the common prefix
    of the list of suggestions. This is especially useful for classes with
    several similarly named members. To disable this functionality, uncheck
    \gui{Autocomplete common prefix} in the code completion preferences.
854
    Select \gui Tools > \gui{Options...} > \gui{Text Editor} > \gui Completion.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
855

856 857 858 859
    By default, code completion considers only the first letter case-sensitive.
    To apply full or no case-sensitivity, select the option in the
    \gui {Case-sensitivity} field.

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
860 861
    The following table lists available types for code completion and icon
    used for each.
862 863

    \table
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
864 865 866
        \header
            \o Icon
            \o Description
867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915
        \row
            \i  \inlineimage completion/class.png
            \i  A class
        \row
            \i  \inlineimage completion/enum.png
            \i  An enum
        \row
            \i  \inlineimage completion/enumerator.png
            \i  An enumerator (value of an enum)
        \row
            \i  \inlineimage completion/func.png
            \i  A function
        \row
            \i  \inlineimage completion/func_priv.png
            \i  A private function
        \row
            \i  \inlineimage completion/func_prot.png
            \i  A protected function
        \row
            \i  \inlineimage completion/var.png
            \i  A variable
        \row
            \i  \inlineimage completion/var_priv.png
            \i  A private variable
        \row
            \i  \inlineimage completion/var_prot.png
            \i  A protected variable
        \row
            \i  \inlineimage completion/signal.png
            \i  A signal
        \row
            \i  \inlineimage completion/slot.png
            \i  A slot
        \row
            \i  \inlineimage completion/slot_priv.png
            \i  A private slot
        \row
            \i  \inlineimage completion/slot_prot.png
            \i  A protected slot
        \row
            \i  \inlineimage completion/keyword.png
            \i  A keyword
        \row
            \i  \inlineimage completion/macro.png
            \i  A macro
        \row
            \i  \inlineimage completion/namespace.png
            \i  A namespace
    \endtable
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
916

917 918
    \if defined(qtquick)

919 920 921 922 923 924 925 926 927
    \section2 Completing QML Code

    As you write QML code, Qt Creator suggests properties, IDs, and code
    snippets to complete the code. The snippets can consist of multiple
    fields that you specify values for. Select an item in the list and press
    \key Tab or \key Enter to complete the code. Press \key Tab to
    move between the fields and specify values for them.

    \image qmldesigner-code-completion.png "Completing QML code"
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
928

929 930
    \endif

931 932
    \section1 Using Bookmarks

933
    To insert or delete a bookmark right-click the line number and select