qtcreator.qdoc 345 KB
Newer Older
Leena Miettinen's avatar
Leena Miettinen committed
1 2
/****************************************************************************
**
Leena Miettinen's avatar
Leena Miettinen committed
3 4 5 6
** This file is part of Qt Creator
**
** Copyright (c) 2010 Nokia Corporation and/or its subsidiary(-ies).
**
Leena Miettinen's avatar
Leena Miettinen committed
7 8
** Contact: Nokia Corporation (qt-info@nokia.com)
**
Leena Miettinen's avatar
Leena Miettinen committed
9
** No Commercial Usage
Leena Miettinen's avatar
Leena Miettinen committed
10
**
Leena Miettinen's avatar
Leena Miettinen committed
11 12 13 14
** This file contains pre-release code and may not be distributed.
** You may use this file in accordance with the terms and conditions
** contained in the Technology Preview License Agreement accompanying
** this package.
Leena Miettinen's avatar
Leena Miettinen committed
15 16
**
** GNU Free Documentation License
Leena Miettinen's avatar
Leena Miettinen committed
17
**
Leena Miettinen's avatar
Leena Miettinen committed
18 19 20 21 22 23 24 25 26 27
** 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.
**
** If you have questions regarding the use of this file, please contact
** Nokia at qt-info@nokia.com.
**
****************************************************************************/

28 29 30 31 32 33
// **********************************************************************
// 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.
// **********************************************************************

34

con's avatar
con committed
35 36 37
/*!
    \contentspage{index.html}{Qt Creator}
    \page index.html
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
38
    \nextpage creator-overview.html
con's avatar
con committed
39 40 41

    \title Qt Creator Manual

con's avatar
con committed
42
    \section1 Version 2.0.95
con's avatar
con committed
43

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
44
    Qt Creator provides a cross-platform, complete integrated development
45 46
    environment (IDE) for application developers to create applications for
    multiple desktop and mobile device platforms. It is available for Linux,
47
    Mac OS X and Windows operating systems. For more information, see
48
    \l{Operating Systems and Supported Platforms}.
con's avatar
con committed
49

50
    \note Please report bugs and suggestions to the
con's avatar
con committed
51
    \l{http://bugreports.qt.nokia.com}{Qt Bug Tracker}.
52 53
    You can also join the Qt Creator mailing list. To subscribe,
    send a message with the word \e subscribe to
Leena Miettinen's avatar
Leena Miettinen committed
54
    \l{mailto:qt-creator-request@qt.nokia.com}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
55
    {qt-creator-request@trolltech.com}. For more information about Qt mailing
Leena Miettinen's avatar
Leena Miettinen committed
56
    lists, visit \l{http://lists.qt.nokia.com}{http://lists.qt.nokia.com}.
con's avatar
con committed
57

58 59
    \raw HTML
    <img border="0" style="float:right;" src="images/qtcreator-screenshots.png" />
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
60
    \endraw
61

con's avatar
con committed
62
    \list
Leena Miettinen's avatar
Leena Miettinen committed
63
       \o \l{Introducing Qt Creator}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
64
       \o \l{Operating Systems and Supported Platforms}
65
       \o \l{Qt Creator User Interface}
66 67
       \o \l{Getting Started}
           \list
68
               \o \l{Building and Running an Example Application}
69
               \o \l{Creating a Qt C++ Application}
70
               \o \l{Creating a Mobile Application with Nokia Qt SDK}
71
               \o \l{Creating a Qt Quick Application}
72
           \endlist
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
73 74 75
       \o \l{Managing Projects}
            \list
                \o \l{Creating a Project}
Leena Miettinen's avatar
Leena Miettinen committed
76
                \o \l{Opening a Project}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
77
                \o \l{Setting Up a qmake Project}
78
                \o \l{Adding Libraries to qmake Projects}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
79 80
                \o \l{Setting Up a CMake Project}
                \o \l{Setting Up a Generic Project}
Leena Miettinen's avatar
Leena Miettinen committed
81 82
                \o \l{Setting Up Development Environment for Maemo}
                \o \l{Setting Up Development Environment for Symbian}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
83
                \o \l{Managing Sessions}
84
                \o \l{Adding New Custom Wizards}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
85
            \endlist
86 87 88 89
       \o \l{Using the Editor}
            \list
                \o \l{Finding and Replacing}
                \o \l{Refactoring}
90
                \o \l{Using Qt Quick Toolbars}
91 92 93 94 95 96 97 98 99
                \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}
100
           \o \l{Using Qt Designer}
101 102 103 104 105
           \o \l{Adding Qt Designer Plugins}
           \if defined(qtquick)
           \o \l{Developing Qt Quick Applications}
                \list
                    \o \l {Creating Qt Quick Projects}
106
                    \o \l {Using Qt Quick Designer}
107
                    \o \l {Creating Components}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
108 109
                    \o \l {Creating Buttons}
                    \o \l {Creating Scalable Buttons and Borders}
110 111 112 113 114 115 116
                    \o \l {Creating Screens}
                    \o \l {Animating Screens}
                    \o \l {Adding User Interaction Methods}
                    \o \l {Implementing Application Logic}
                \endlist
           \endif
       \endlist
117 118
       \o \l{Building and Running Applications}
            \list
119 120
                \o \l{Building Applications for Multiple Targets}
                \o \l{Running Applications on Multiple Targets}
121 122 123 124 125
                \o \l{Specifying Build Settings}
                \o \l{Specifying Run Settings}
                \o \l{Specifying Editor Settings}
                \o \l{Specifying Dependencies}
            \endlist
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
126
       \o \l{Debugging}
127 128 129 130
            \list
                \o \l{Debugging the Example Application}
                \o \l{Interacting with the Debugger}
                \o \l{Setting Up Debugger}
131
                \o \l{Debugger Modes of Operation}
132
                \o \l{Using Debugging Helpers}
133
                \o \l{Debugging Qt Quick Projects}
134
            \endlist
135
       \o \l{Using the Maemo Emulator}
136 137 138 139 140 141 142
       \o \l{Deploying Applications to Mobile Devices}
            \list
                \o \l{Deploying Applications to Symbian Devices}
                \o \l{Deploying Applications to Maemo Devices}
                \o \l{Publishing Applications to Ovi Store}
                \o \l{Building with Remote Compiler}
            \endlist
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
143
       \o \l{Using Version Control Systems}
144
       \o \l{Creating Task List Files}
145
       \o \l{Using Command Line Options}
146
       \o \l{Getting Help}
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
147 148 149 150 151
       \o \l{Tips and Tricks}
       \o \l{Keyboard Shortcuts}
       \o \l{Known Issues}
       \o \l{Glossary}
       \o \l{Acknowledgements}
con's avatar
con committed
152 153 154
    \endlist
*/

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
155

con's avatar
con committed
156 157
/*!
    \contentspage index.html
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
158
    \previouspage index.html
Leena Miettinen's avatar
Leena Miettinen committed
159 160 161 162 163
    \page creator-overview.html
    \nextpage creator-os-supported-platforms.html

  \title Introducing Qt Creator

Leena Miettinen's avatar
Leena Miettinen committed
164 165 166
    Qt Creator is an integrated development environment (IDE) that provides you with
    tools to design and develop complex applications for multiple desktop and mobile
    platforms.
167

168
    \image qtcreator-overview.png "Qt Creator overview"
169

170
    \section1 Cross-platform Development
171

Leena Miettinen's avatar
Leena Miettinen committed
172 173 174 175
    One of the major advantages of Qt Creator is that it allows a team of developers
    to share a project across different development platforms with a common tool
    for development and debugging.

176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208
    The recommended way to build a project is to use a version control system.
    Store and edit only project source files and the .pro and .pri files (for qmake)
    or CMakeLists.txt and *.cmake files (for CMake). Do not store
    files generated by the build system or Qt Creator, such as makefiles,
    .pro.user, and object files. Other approaches are possible,
    but we recommend that you do not use network resources, for example.

    Qt Creator allows you to specify separate build settings
    for each development platform. By default, \l{glossary-shadow-build}{shadow builds} are used to
    keep the build specific files separate from the source.

    You can create separate versions of project files to keep platform-dependent
    code separate. You can use qmake
    \l{http://qt.nokia.com/doc/4.7/qmake-tutorial.html#adding-platform-specific-source-files}{scopes}
    to select the file to process depending on which platform qmake is run on.

    Items such as open files, breakpoints, and watches are stored in
    sessions. They are not considered to be part of the
    information shared across platforms.

    Qt Creator is integrated with cross-platform systems for build automation:
    qmake and CMake. In addition, you can import generic projects that do not use qmake
    or CMake, and specify that Qt Creator ignores your build system.

    In addition to Qt libraries, you can link your application to other
    libraries, such as system libraries or your own libraries. Further, your
    own libraries might link to other libraries. To be able to compile your
    project, you must add the libraries to your project. This also enables
    code completion and syntax highlighting for the libraries.
    The procedure of adding a library to a project depends on the the build
    system that you use.

    Qt Creator provides support for building and running Qt applications for
209
    desktop environment and mobile devices. When you install the \QSDK,
210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227
    the build and run settings for the Maemo and Symbian targets are set up
    automatically. However, you need to install and configure some additional software
    on the devices.

    \note The only supported build system for mobile applications in Qt
    Creator is qmake.

    Once your mobile application is ready, you can test it in the Qt Simulator.
    You can also connect Maemo and Symbian devices to your development PC and
    debug applications on the devices. After you have tested the application,
    you can deploy it on mobile devices.

    Developing applications for mobile devices is different from developing
    desktop applications. For more information, see
    \l{Optimizing Applications for Mobile Devices}.

    \section1 Projects

Leena Miettinen's avatar
Leena Miettinen committed
228 229 230
    But 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.
231

232
    Creating a project allows you to:
233

234
        \list
235

236
            \o Group files together
237

238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254
            \o Add custom build steps

            \o Include forms and resource files

            \o Specify settings for running applications

        \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
    interface (GUI) application, Qt Creator generates an empty .ui file
    that you can modify with the integrated \QD.

    Qt Creator is integrated with cross-platform systems for build automation: qmake and
    CMake. In addition, you can import generic projects that do not use qmake or CMake,
    and specify that Qt Creator ignores your build system.
255

Leena Miettinen's avatar
Leena Miettinen committed
256 257
    \section1 Editors

258 259
    Qt Creator comes with a code editor and two integrated visual editors for designing
    and building
Leena Miettinen's avatar
Leena Miettinen committed
260 261 262
    graphical user interfaces (GUIs) from Qt widgets.

    \section2 Code Editor
263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280

    As an IDE, Qt Creator differs from a text editor in that it knows how to build and run
    applications. It understands the C++ and QML languages as code, not just as plain text. This allows
    it to:

    \list

        \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

        \o Rename symbols in an intelligent way, so that other symbols with the same name
281
         that belong to other scopes are not renamed
Leena Miettinen's avatar
Leena Miettinen committed
282

283
        \o Show you the locations in code where a function is declared or called
Leena Miettinen's avatar
Leena Miettinen committed
284

285
    \endlist
Leena Miettinen's avatar
Leena Miettinen committed
286

Leena Miettinen's avatar
Leena Miettinen committed
287
    \section2 UI Designer
Leena Miettinen's avatar
Leena Miettinen committed
288

289 290
    Qt Creator provides two integrated visual editors, \QD and \QMLD.

291 292
    \l{Using Qt Designer}{\QD} is a tool for designing and building graphical user
    interfaces (GUIs) from
293 294 295 296
    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,
Leena Miettinen's avatar
Leena Miettinen committed
297 298 299 300
    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.
301

302 303 304 305 306 307
    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.

308 309
    \l{Using Qt Quick Designer}{\QMLD} allows you to easily develop animations by using a
    declarative programming
Leena Miettinen's avatar
Leena Miettinen committed
310
    language called \l {http://doc.qt.nokia.com/4.7/qtquick.html}{QML}.
311 312 313 314 315 316 317 318
    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
    in their state, transitions from one state to another, and user actions that change the
    states. \QMLD generates the necessary code for you.

    You can use Qt or JavaScript to implement the application logic.

con's avatar
con committed
319
      \section1 Languages
320

Leena Miettinen's avatar
Leena Miettinen committed
321
    You can use the code editor to write code in Qt C++ or in the
Leena Miettinen's avatar
Leena Miettinen committed
322
    \l {http://doc.qt.nokia.com/4.7/qtquick.html}{QML} declarative
Leena Miettinen's avatar
Leena Miettinen committed
323
    programming language.
324

Leena Miettinen's avatar
Leena Miettinen committed
325
    \section2 QML
326

Leena Miettinen's avatar
Leena Miettinen committed
327 328 329 330
    You can use QML to build highly dynamic, custom user interfaces from a rich set
    of QML elements. Qt Quick helps programmers and designers collaborate to build the
    fluid user interfaces that are becoming common in portable consumer devices, such as
    mobile phones, media players, set-top boxes and netbooks.
331

Leena Miettinen's avatar
Leena Miettinen committed
332 333 334 335
    QML is an extension to JavaScript, that provides a mechanism to declaratively build
    an object tree of QML elements. QML improves the integration between JavaScript and
    Qt's existing QObject based type system, adds support for automatic property bindings
    and provides network transparency at the language level.
Leena Miettinen's avatar
Leena Miettinen committed
336

Leena Miettinen's avatar
Leena Miettinen committed
337
    \section1 Targets
Leena Miettinen's avatar
Leena Miettinen committed
338

339
    Qt Creator provides support for building and running Qt applications for
Leena Miettinen's avatar
Leena Miettinen committed
340 341
    desktop environment (Windows, Linux, and Mac OS) and mobile devices (Symbian, Maemo,
    and MeeGo). Build settings allow you to quickly switch between build targets.
342

343
    When you run an application for a mobile device target with a device
344 345 346
    connected to the development PC, Qt Creator generates an installation package,
    installs in on the device, and executes it.

Leena Miettinen's avatar
Leena Miettinen committed
347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385
    You can publish the installation packages on the \l{https://publish.ovi.com/info/}{Ovi Store}.
    For Symbian devices, the packages must be signed.

    \section1 Tools

    Qt Creator is integrated with a set of helpful tools, such as version control
    systems and Qt Simulator.

    \section2 Version Control Systems

    Qt Creator uses the version control system's command line clients to access
    your repositories. The following version control systems are supported:

    \list

        \o Git

        \o Subversion

        \o Perforce

        \o CVS

        \o Mercurial

    \endlist

    The functions available to you in Qt Creator depend on the version control
    system. Basic functions are available for all the supported systems. They include
    comparing files with the latest versions stored in the repository and displaying the
    differences, viewing versioning history and change details, annotating files,
    and committing and reverting changes.

    \section2 Qt Simulator

    You can use the Qt Simulator to test Qt applications that are intended
    for mobile devices in an environment similar to that of the device. You
    can change the information that the device has about its configuration
    and environment.
Leena Miettinen's avatar
Leena Miettinen committed
386

387
    The Qt Simulator is installed as part of the \QSDK. After it is
Leena Miettinen's avatar
Leena Miettinen committed
388
    installed, you can select it as a build target in Qt Creator.
Leena Miettinen's avatar
Leena Miettinen committed
389

Leena Miettinen's avatar
Leena Miettinen committed
390 391 392 393 394 395 396 397 398 399 400
    \section1 Debuggers

    Qt Creator does not include a debugger. It provides a debugger plugin that acts
    as an interface between the Qt Creator core and external native debuggers:

    \list

        \o GNU Symbolic Debugger (gdb)

        \o Microsoft Console Debugger (CDB)

Leena Miettinen's avatar
Leena Miettinen committed
401
        \o internal JavaScript debugger
Leena Miettinen's avatar
Leena Miettinen committed
402 403 404

    \endlist

405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422
    You can use the Qt Creator \gui Debug mode to inspect the state of your
    application while debugging. You can interact with the debugger in several
    ways, including the following:

    \list
        \o Go through a program line-by-line or instruction-by-instruction.
        \o Interrupt running programs.
        \o Set breakpoints.
        \o Examine the contents of the call stack.
        \o Examine and modify registers and memory contents of
           the debugged program.
        \o Examine and modify registers and memory contents of
           local and global variables.
        \o Examine the list of loaded shared libraries.
        \o Create snapshots of the current state of the debugged program
           and re-examine them later.
    \endlist

Leena Miettinen's avatar
Leena Miettinen committed
423 424 425
    Qt Creator displays the raw information provided by the native debuggers
    in a clear and concise manner with the goal to simplify the debugging process
    as much as possible without losing the power of the native debuggers.
426 427 428 429 430 431 432 433 434 435 436

    In addition to the generic IDE functionality provided by stack view, views for
    locals and watchers, registers, and so on, Qt Creator includes
    features to make debugging Qt-based applications easy. The debugger
    plugin understands the internal layout of several Qt classes, for
    example, QString, the Qt containers, and most importantly QObject
    (and classes derived from it), as well as most containers of the C++
    Standard Library and some gcc and Symbian extensions. This
    deeper understanding is used to present objects of such classes in
    a useful way.

437
    If you install Qt Creator as part of a \QSDK, the GNU Symbolic Debugger
438 439 440
    is installed automatically and you should be ready to start debugging after
    you create a new project. However, you can change the setup to use debugging
    tools for Windows, for example.
Leena Miettinen's avatar
Leena Miettinen committed
441 442 443

    You can connect mobile devices to your development PC and debug processes
    running on the devices.
444

Leena Miettinen's avatar
Leena Miettinen committed
445 446 447 448 449
*/

/*!
    \contentspage index.html
    \previouspage creator-overview.html
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
450 451 452 453 454 455 456 457 458 459
    \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
460
        \o Windows 7
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
461 462
        \o Windows XP Service Pack 2
        \o Windows Vista
463
        \o (K)Ubuntu Linux 8.04 (32-bit and 64-bit) or later, with the following:
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
464 465 466 467 468 469 470 471 472 473 474 475 476 477 478
           \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
479
               \o If you are using QtOpenGL, libgl-dev and libglu-dev
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
480
           \endlist
481
        \o Mac OS 10.5 or later with the following:
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
482 483 484 485 486 487
           \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

488 489
         \omit  ## Are the Xcode tools still needed separately? \endomit

490
    \section1 Compiling Qt Creator from Source
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
491

492 493
    To build Qt Creator itself from the source, see the requirements and
    instructions in the readme file that is located in the source repository.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
494

495 496 497 498 499 500 501 502 503 504 505 506 507 508
    \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
509 510 511

    \table
        \header
512 513
            \o {1,3} Operating system
            \o {3,1} Platform
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
514 515 516
        \header
            \o Desktop
            \o Symbian
517
            \o Maemo
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
518 519 520 521
        \row
            \o Windows
            \o Yes
            \o Yes
522
            \o Yes
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
523 524 525 526
        \row
            \o Linux
            \o Yes
            \o No
527
            \o Yes
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
528 529 530 531
        \row
            \o Mac OS X
            \o Yes
            \o No
532
            \o Yes
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
533 534 535 536 537 538 539
    \endtable
*/


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

543
    \title Qt Creator User Interface
con's avatar
con committed
544 545 546

    \image qtcreator-breakdown.png

547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568
    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.

569 570 571 572 573
    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
574
    \section1 Qt Creator Modes
con's avatar
con committed
575

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
576
    The mode selector allows you to quickly switch between tasks such as
577 578
    editing project and source files, designing application UIs,
    configuring how projects are built and
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
579 580
    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
581

582 583
    You can use Qt Creator in the following modes:

con's avatar
con committed
584
    \list
585
        \o \gui{\l{Using the Editor}{Edit}} mode for editing project and source files.
586
        \o \gui{\l{Developing Application UI}{Design}} mode for designing and developing
587 588
           application user interfaces. This mode is available for UI files (.ui or
           .qml).
589 590 591
        \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
592
           execution. This mode is available when a project is open.
593
        \o \gui{\l{Getting Help}{Help}} mode for viewing Qt documentation.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
594 595
    \endlist

596
    Certain actions in Qt Creator trigger a mode change. Clicking on
597
    \gui {Debug} > \gui {Start Debugging} > \gui {Start Debugging}
598
    automatically switches to \gui {Debug} mode.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
599 600


601
    \section1 Browsing Project Contents
con's avatar
con committed
602

603
    The sidebar is available in the \gui Edit and \gui Debug modes.
604 605
    Use the sidebar to browse projects, files, and bookmarks, and to view
    the class hierarchy.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
606
    \image qtcreator-sidebar.png
con's avatar
con committed
607

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
608 609 610 611 612
    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{Open Documents} shows currently open files.
613 614 615 616 617 618 619 620 621
        \o \gui Bookmarks shows all bookmarks for the current session.
        \o \gui{File System} shows all files in the currently selected
            directory.
        \o \gui {Class View} shows the class hierarchy of the currently
            open projects.
        \o \gui Outline shows the element hierarchy of a QML file.
        \o \gui {Type Hierarchy} shows the base classes of a class. For
            more information, see \l{Viewing Type Hierarchy}.

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
622
    \endlist
con's avatar
con committed
623

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
624 625 626 627 628
    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
629
           . Select new content to view in the split view.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
630 631 632 633
        \o To close a sidebar view, click
           \inlineimage qtcreator-closesidebar.png
           .
    \endlist
con's avatar
con committed
634

635 636
    The additional options in each view are described in the following
    sections.
con's avatar
con committed
637

638
    \section2 Viewing Project Files
con's avatar
con committed
639

640 641 642
    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
643

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
644 645
    You can use the project tree in the following ways:
    \list
646 647
        \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
648
           For example, through the menu of the project root directory you can,
649
           among other actions, build, re-build, clean and run the project.
650
        \o To hide the categories and sort project files alphabetically, click
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
651
           \inlineimage qtcreator-filter.png
652
           and select \gui{Simplify Tree}.
653 654
        \o To hide source files which are automatically generated by the build
           system, during a build, click \inlineimage qtcreator-filter.png
655 656 657
           and select \gui{Hide Generated Files}.
        \o To keep the position in the project tree synchronized with the file
           currently opened in the editor, click
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
658 659 660 661
           \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
662 663
    \endlist

664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696
    \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.

    To keep the position in the tree synchronized with the file
    opened in the editor, click
    \inlineimage qtcreator-synchronizefocus.png
    .

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

    \section2 Viewing QML Elements

    The \gui Outline view shows the element hierarchy in a QML file.

    \list

        \o To see a complete list of all bindings, click
           \inlineimage qtcreator-filter.png
           and select \gui{Show All Bindings}.

        \o To keep the position in the view synchronized with the element
           selected in the editor, click
           \inlineimage qtcreator-synchronizefocus.png
           .

    \endlist
con's avatar
con committed
697

698
    \section1 Viewing Output
con's avatar
con committed
699

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
700
    The task pane in Qt Creator can display one of the following panes:
701 702 703 704 705
    \list
       \o  \gui{Build Issues}
       \o  \gui{Search Results}
       \o  \gui{Application Output}
       \o  \gui{Compile Output}
706 707
       \o  \gui{General Messages}
       \o  \gui{Version Control}
708 709 710
    \endlist

    Output panes are available in all \l{Qt Creator modes}{modes}.
711 712 713
    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
714

Leena Miettinen's avatar
Leena Miettinen committed
715 716 717 718 719
    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.

720 721 722
    To open the \gui{General Messages} and \gui{Version Control}
    panes, select \gui {Window > Output Panes}.

723

724
    \section2 Build Issues
con's avatar
con committed
725

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

730 731 732 733
    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.

734
    \image qtcreator-build-issues.png
con's avatar
con committed
735

736 737 738 739 740 741 742
    To view task lists in the \gui{Build Issues} pane, click
    \inlineimage qtcreator-filter.png
    and select \gui{My Tasks}. Entries from a task list file (.tasks) are
    imported to the pane. Press \key F6 and \key Shift+F6 to jump from one issue
    to the next.

    For more information about creating task files, see \l{Creating Task List Files}.
743

con's avatar
con committed
744 745
    \section2 Search Results

746 747 748 749 750
    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
751
    occurrences of \c textfinder within the \c "/TextFinder" directory.
con's avatar
con committed
752 753 754

    \image qtcreator-search-pane.png

755

con's avatar
con committed
756 757
    \section2 Application Output

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
758
    The \gui{Application Output} pane displays the status of a program when
759 760 761
    it is executed, and the debug output.

    The figure below shows an example output from qDebug().
con's avatar
con committed
762 763 764

    \image qtcreator-application-output.png

765

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
766
    \section2 Compile Output
con's avatar
con committed
767

768 769 770
    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
771 772 773

    \image qtcreator-compile-pane.png

774 775 776 777 778 779 780 781 782 783
    \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.

*/

784

785 786
/*!
    \contentspage index.html
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
787
    \previouspage creator-cli.html
788 789
    \page creator-help.html
    \nextpage creator-tips.html
790

791
    \title Getting Help
con's avatar
con committed
792

793
    Qt Creator comes fully integrated with Qt documentation and
794
    examples using the Qt Help plugin.
795
    \list
796 797 798 799 800
        \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
801

802
           \image qtcreator-context-sensitive-help.png
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
803

804 805
        \o To select and configure how the documentation is displayed in the
           \gui Help mode, select \gui Tools > \gui Options... > \gui Help.
806 807
    \endlist

808 809
    \section1 Finding Information in Qt Documentation

810
    Qt Creator, \QSDK and other Qt deliverables contain documentation
811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855
    as .qch files. All the documentation is accessible in the \gui Help mode.

    To find information in the documentation, select:

    \list

        \o \gui Bookmarks to view a list of pages on which you have added bookmarks.

        \o \gui Contents to see all the documentation installed on the development
        PC and to browse the documentation contents.

        \o \gui Index to find information based on a list of keywords in all the
        installed documents.

        \o \gui {Open Pages} to view a list of currently open documentation pages.

        \o \gui Search to search from all the installed documents.

    \endlist

    \section2 Adding Bookmarks to Help Pages

    You can add bookmarks to useful help pages to easily find them later
    in the \gui Bookmarks view. You can either use the page title as the
    bookmark or change it to any text. You can organize the bookmarks in
    folders in the view.

    \image qtcreator-help-add-bookmark-dlg.png "Add Bookmark dialog"

    To add a bookmark to an open help page:

    \list 1

        \o Click the
        \inlineimage qtcreator-help-add-bookmark.png
        (\gui {Add Bookmark}) button on the toolbar.

        \o In the \gui {Add Bookmark} dialog, click \gui OK to save the
        page title as a bookmark in the \gui Bookmarks folder.

    \endlist

    To import and export bookmarks, select \gui {Tools > Options... > Help >
    General Settings > Import} or \gui Export.

856
    \section1 Adding External Documentation
con's avatar
con committed
857

858 859
    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
860 861 862 863 864
    \list 1
        \o Create a .qch file from your documentation.

           For information on how to prepare your documentation and create a
           .qch file, see
Leena Miettinen's avatar
Leena Miettinen committed
865
           \l{http://doc.qt.nokia.com/4.7/qthelp-framework.html}{The Qt Help Framework}.
866
        \o To add the .qch file to Qt Creator, select \gui Tools >
867
           \gui Options... > \gui Help > \gui Documentation > \gui Add.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
868
    \endlist
con's avatar
con committed
869

870 871 872 873 874 875 876 877 878 879 880 881 882 883 884
    \section1 Detaching the Help Window

    By default, context-sensitive help is opened in a window next to the
    code editor when you press \key F1. If there is not enough vertical
    space, the help opens in the full-screen help mode.

    You can specify that the help always opens in full-screen mode or
    is detached to an external window. Select \gui {Tools > Options... > Help >
    General Settings} and specify settings for displaying context-sensitive help
    in the \gui {On context help} field. To detach the help window, select
    \gui {Always Show Help in External Window}.

    You can select the help page to open upon startup in the \gui {Home Page}
    field.

885
    \section1 Using Documentation Filters
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 916 917 918 919 920 921 922 923 924

    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
925

926
*/
927

Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
928

929 930 931 932 933
/*!
    \contentspage index.html
    \previouspage creator-editor-external.html
    \page creator-design-mode.html
    \nextpage creator-usability.html
934

935
    \title Developing Application UI
936

937 938 939
    You can use the integrated \QD to design and build graphical user interfaces (GUIs) from
    Qt widgets. You can compose and customize your widgets or dialogs and test
    them using different styles and resolutions.
940

941 942 943 944 945 946 947 948 949 950 951 952 953
    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.

    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.

    You can easily develop animations by using a declarative programming
Leena Miettinen's avatar
Leena Miettinen committed
954
    language called \l {http://doc.qt.nokia.com/4.7/qtquick.html}{QML}.
955
    In QML, a user interface is specified as a tree of objects with properties.
956
    You can edit QML code in the code editor or in the integrated \QMLD. You
957
    can use Qt or JavaScript to implement the application logic.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
958

959
    The integration includes project management and code completion.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
960

961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981
    The following sections describe how to develop application UI:

       \list

           \o \l{Optimizing Applications for Mobile Devices}
           \o \l{Using Qt Designer}
           \o \l{Adding Qt Designer Plugins}
           \o \l{Developing Qt Quick Applications}

       \endlist

*/


/*!
    \contentspage index.html
    \previouspage creator-usability.html
    \page creator-using-qt-designer.html
    \nextpage adding-plugins.html

    \title Using Qt Designer
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
982

983
    Qt Creator automatically opens all .ui files in \QD.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
984 985 986

    \image qtcreator-formedit.png

987
    To change the layout of \QD user interface elements:
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
988
    \list 1
989
        \o Select \gui Tools > \gui{Form Editor} > \gui Views >
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
990 991 992 993 994 995 996
           \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

997
    To change \QD properties, select \gui Tools > \gui Options... >
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009
    \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} >
1010
           \gui Preview, or press \key Alt+Shift+R.
Oswald Buddenhagen's avatar
Oswald Buddenhagen committed
1011 1012 1013 1014
        \o To specify embedded device profiles, such as style, font, and screen
           resolution, select \gui{Embedded Design}.
    \endlist

1015 1016
    To switch between forms and code, use \key Shift+F4.

1017
    For more information on \QD, see
Leena Miettinen's avatar
Leena Miettinen committed
1018
    \l{http://doc.qt.nokia.com/4.7/designer-manual.html}{Qt Designer Manual}.
1019

1020 1021 1022 1023 1024 1025 1026 1027 1028 1029
*/


/*!
    \contentspage index.html
    \previouspage quick-projects.html
    \page creator-using-qt-quick-designer.html
    \nextpage quick-components.html

    \title Using Qt Quick Designer
1030

1031
    You can edit .qml files in the \QMLD visual editor or in the
1032 1033
    code editor.

1034
    In \gui Projects, double-click a .qml file to open it in the code
1035 1036 1037 1038 1039 1040 1041 1042 1043
    editor. Then select the \gui {Design} mode to edit the file in the
    visual editor.

    \image qmldesigner-visual-editor.png "Visual editor"

    Use the visual editor panes to manage your project:

    \list

1044 1045
    \o \gui {Navigator} pane displays the QML elements in the current QML file
    as tree structure.
1046

1047 1048 1049
    \o \gui {Library} pane displays the building blocks that you can use to design
    applications: predefined QML elements, your own QML components, and other
    resources.
1050

1051 1052
    \o \gui {Properties} pane organizes the properties of the selected QML element
    or QML component. You can also change the properties in the code editor.
1053

1054 1055 1056
    \o \gui {State} pane displays the different states of the component. QML
    states typically describe user interface configurations, such as the UI
    elements, their properties and behavior and the available actions.
1057 1058 1059

    \endlist

1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112
    \section1 Managing Element Hierarchy

    The \gui Navigator pane displays the
    \l{http://doc.qt.nokia.com/4.7/qdeclarativeelements.html}{QML elements}
    in the current QML file and their relationships.
    Elements are listed in a tree structure, below their parent.

    \image qmldesigner-navigator.png "Navigator pane"

    You can select elements in the \gui Navigator to edit their properties
    in the \gui Properties pane. Elements can access the properties of their
    parent element.

    Typically, child elements are located within the parent element on the
    canvas. However, they do not necessarily have to fit inside the parent element.
    For example, you might want to make a mouse area larger than the rectangle
    or image beneath it.

    \image qmldesigner-element-size.png "Mouse area for a button"

    When you copy an element, all its child elements are also copied. When
    you remove an element, the child elements are also removed.

    You can show and hide items to focus on specific parts of the application.
    Click the
    \inlineimage qmldesigner-show-hide-icon.png
    icon to change the visibility of an element on the canvas. To change the
    visibility of an element in the application, use the \gui Visibility
    check box or the \gui Opacity field in the \gui Properties pane. If you set
    \gui Opacity to 0, elements are hidden, but you can still apply animation
    to them.

    As all properties, visibility and opacity are inherited from the parent
    element. To hide or show child elements, edit the properties of the
    parent element.

    To view lists of files or projects, instead, select \gui {File System},
    \gui {Open Documents}, or \gui Projects in the menu.

    \section2 Switching Parent Elements

    When you drag and drop QML elements to the canvas, Qt Quick Designer
    adds the new element as a child of the element beneath it.
    When you move elements on the canvas, Qt Quick Designer cannot determine
    whether you want to adjust their position or attach them to a new
    parent element. Therefore, the parent element is not automatically
    changed. To change the parent of the element, press down the \key Shift
    key before you drag and drop the element into a new position. The topmost
    element under the cursor becomes the new parent of the element.

    You can change the parent of an element also in the \gui Navigator pane.
    Drag and drop the element to another position in the tree.

1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136
    \section1 Element Library

    The \gui {Library} pane contains two tabs: \gui {Items} and \gui {Resources}.
    The \gui Items pane displays the QML elements grouped by type: your own QML
    components, basic elements, interaction elements, views, and widgets.

    \image qmldesigner-qml-components.png "QML Components pane"

    The \gui {Resources} pane displays the images and other files that you copy to
    the project folder.

    \section1 Specifying Element Properties

    The \gui Properties pane displays all the properties of the selected QML element.
    The properties are grouped by type. The top part of the pane displays properties
    that are common to all elements, such as element type, position, size,
    and visibility.

    The bottom part of the pane displays properties that are specific to each element
    type. For example, the following image displays the properties you can set for
    \gui Rectangle and \gui Text elements.

    \image qmldesigner-element-properties.png

1137 1138 1139 1140
    The default values of properties are displayed in white color, while the values
    that you specify explicitly are highlighted with blue color. In addition, property
    changes in states are highlighted with blue.

1141 1142 1143 1144
    For more information on the properties available for an element, press \key {F1}.

    \section2 Setting Expressions

1145 1146 1147 1148 1149 1150 1151 1152 1153 1154
    \l{http://doc.qt.nokia.com/4.7/propertybinding.html}{Property binding}
    is a declarative way of specifying the value of a property.
    Binding allows a property value to be expressed as an JavaScript expression
    that defines the value relative to other property values or data accessible
    in the application. The property value is automatically kept up to date if
    the other properties or data values change.

    Property bindings are created implicitly in QML whenever a property is assigned
    an JavaScript expression. To set JavaScript expressions as values of properties
    in Qt Quick Designer, click the circle
1155 1156 1157 1158
    icon next to a property to open a context menu, and select \gui {Set Expression}.

    \image qmldesigner-set-expression.png "Element properties context menu"

1159 1160
    To remove expressions, select \gui Reset in the context menu.

Leena Miettinen's avatar
Leena Miettinen committed
1161
    For more information on the JavaScript environment provided by QML, see
Leena Miettinen's avatar
Leena Miettinen committed
1162
    \l{http://doc.qt.nokia.com/4.7/qdeclarativejavascript.html}{Integrating JavaScript}.
1163 1164 1165

    \section2 Setting Anchors and Margins

1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181
    In addition to arranging elements in a grid, row, or column, you can use
    \l{http://doc.qt.nokia.com/4.7/qml-anchor-layout.html}{anchors} to lay out screens.
    In an anchor-based layout, each item can be thought of as having a set of
    invisible \e anchor lines: top, bottom, left, right, fill, horizontal center,
    vertical center, and baseline.

    In the \gui Layout pane you can set anchors and margins for elements. To set
    the anchors of an item, click the anchor buttons. You can combine the top/bottom,
    left/right, and horizontal/vertical anchors to anchor objects in the corners of
    the parent element or center them horizontally or vertically within the parent
    element.

    \image qmldesigner-anchor-buttons.png "Anchor buttons"

    In version 2.1, specifying the baseline anchor in Qt Quick Designer is
    not supported. You can specify it using the code editor.
1182

1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215