qtquick-app-development.qdoc 38.2 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 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 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 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 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 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 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 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 856 857 858 859 860 861 862 863 864 865 866 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 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067
/****************************************************************************
**
** This file is part of Qt Creator
**
** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
**
** Contact: Nokia Corporation (info@qt.nokia.com)
**
**
** GNU Free Documentation License
**
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of this
** file.
**
** If you have questions regarding the use of this file, please contact
** Nokia at info@qt.nokia.com.
**
****************************************************************************/

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

/*!

    \contentspage index.html
    \previouspage creator-design-mode.html
    \page creator-visual-editor.html
    \nextpage quick-projects.html

    \title Developing Qt Quick Applications

    You can either create Qt Quick projects from scratch or import existing
    projects to \QC.

    You can use the code editor (\l{Using the Editor}{Edit mode}) or the visual
    editor (\l{Using Qt Quick Designer}{Design mode}) to develop Qt Quick
    applications.

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

    The following sections describe typical tasks you can do with \QC.

    \list

        \o \l {Creating Qt Quick Projects}
        \o \l {Using Qt Quick Designer}
        \o \l {Creating Components}
        \o \l {Creating Buttons}
        \o \l {Creating Scalable Buttons and Borders}
        \o \l {Creating Screens}
        \o \l {Animating Screens}
        \o \l {Adding User Interaction Methods}
        \o \l {Exporting Designs from Graphics Software}
        \o \l {Implementing Application Logic}
        \o \l {Using QML Modules with Plugins}

    \endlist

*/


/*!

    \contentspage index.html
    \previouspage creator-visual-editor.html
    \page quick-projects.html
    \nextpage creator-using-qt-quick-designer.html

    \title Creating Qt Quick Projects

    \image qmldesigner-new-project.png "New File or Project dialog"

    When you create a new Qt Quick project from scratch, you have the following
    options:

    \list

        \o  \gui {Qt Quick Application} creates a Qt Quick application project
            that can contain both QML and C++ code. The project includes a
            QDeclarativeView. You can build the application and deploy it on
            desktop and mobile target platforms. For example, you
            can create signed Symbian Installation System (SIS) packages for
            this type of projects.

        \o  \gui {Qt Quick UI} creates a Qt Quick UI project with a single QML
            file that contains the main view. You can review Qt Quick UI
            projects in the QML Viewer and you need not build them. You do not
            need to have the development environment installed on your
            computer to create and run this type of projects.

        \o  \gui {Custom QML Extension Plugin} creates a C++ plugin that makes
            it possible to offer extensions that can be loaded dynamically into
            applications by using the QDeclarativeEngine class.

    \endlist

    If you have existing QML applications that you want to run in \QC or deploy
    to mobile devices, use the \gui {Qt Quick Application} wizard to convert
    them to Qt Quick applications.

    \section1 Creating Qt Quick UI Projects

    \list 1

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

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

            \image qmldesigner-new-ui-project-location.png "Introduction and Project Location dialog"

        \o  In the \gui Name field, give a name to the project.

            Do not use spaces and special characters in the project name and
            path.

        \o  In the \gui {Create in} field, enter the path for the project files.
            For example, \c {C:\Qt\examples}. To select the path from a
            directory tree, click \gui Browse.

        \o  Click \gui{Next}.

            \image qmldesigner-new-ui-project-summary.png "Project Management dialog"

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

    \endlist

    \QC creates the following files:

    \list

        \o  .qmlproject project file defines that all QML, JavaScript, and image
            files in the project folder belong to the project. Therefore, you do
            not need to individually list all the files in the project.

        \o  .qml file defines an element, such as a component, screen, or the
            whole application UI.

    \endlist

    The \c import statement in the beginning of the .qml file specifies the
    \l {http://doc.qt.nokia.com/4.7/qdeclarativemodules.html} {Qt modules}
    to import. Each Qt module contains a set of default elements.
    Specify a version to get the features you want.

    To use JavaScript and image files in the application, copy them to the
    project folder.

    \section1 Creating Qt Quick Applications

    \list 1

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

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

            \image qmldesigner-new-project-location.png "Introduction and Project Location dialog"

        \o  In the \gui Name field, give a name to the project.

            Do not use spaces and special characters in the project name and path.

        \o  In the \gui {Create in} field, enter the path for the project files.
            For example, \c {C:\Qt\examples}. To select the path from a
            directory tree, click \gui Browse.

        \o  Click \gui{Next}.

            The \gui {Application Type} dialog opens.

            \image qmldesigner-new-project-qml-sources.png "Application Type dialog"

        \o  Select the Qt Quick Component Set to use in your application. The
            built-in elements allow you to write cross-platform applications
            with custom look and feel. The components for a mobile platform
            allow you to create applications with a native look and feel for
            that platform.

            You can also import an existing QML file in this dialog.

        \o  Click \gui{Next}.

            The \gui {Target Setup} dialog opens.

            \image qmldesigner-new-project-qt-versions.png "Target Setup dialog"

        \o  Select the Qt versions to use as build targets for your project,
            and then click \gui{Next}.

            \note Qt Quick is supported since Qt 4.7, and therefore, only Qt 4.7
            and later versions are displayed. Further, if you have only one
            supported Qt version installed, this dialog is skipped.

            The \gui {Mobile Options} dialog opens.

            \image qmldesigner-new-app-project-mobile-options.png "Mobile Options dialog"

        \o  In the \gui {Orientation behavior} field, determine how the application
            behaves when the orientation of the device display rotates between portrait
            and landscape, and then click \gui Next.

            \note This dialog opens only if you select \gui Maemo5 or
            \gui {Symbian Device} target in the \gui {Target Setup} dialog. On
            Harmattan, the Qt Quick Components for MeeGo provide native-looking
            rotation.

            The \gui {Symbian Specific} dialog opens.

            \image qmldesigner-new-project-symbian-options.png "Symbian Specific dialog"

        \o In the \gui {Application icon (.svg)} field, select an application
        icon for the \gui {Symbian Device} target, or use the default icon.

        \o In the \gui {Target UID3} field, specify the \l{Application UID}, or
        use the default UID.

        \note \QC generates a UID for testing the application on a device.
        You need to change the UID when you deliver the application for public
        use.

        \o Click \gui Next.

        The \gui {Maemo Specific} dialog opens.

        \image qmldesigner-new-project-maemo-options.png "Maemo Specific dialog"

        \o In the \gui {Application icon} field, select the application
         icon to use on Maemo or Harmattan targets, or use the default icon.

        The \gui {Project Management} dialog opens.

        \image qmldesigner-new-project-summary.png "Project Management" dialog

        \o In the \gui {Add to project} field, you can add this project to another
        project as a subproject.

        \o In the \gui {Add to version control} field, you can add the project to
        a version control system.

        \o Click \gui Finish to create the project.

    \endlist

    \QC creates the necessary boilerplate files. Some of the files are
    specific to the Symbian, Maemo, or MeeGo Harmattan platform.

    \section1 Importing QML Applications

    If you have existing QML applications that you want to run in \QC or deploy
    to mobile devices, use the \gui {Qt Quick Application} wizard and select the main
    .qml file in your project. All the other files in the project are automatically added
    to the application project.

    To import QML applications:

    \list 1

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

        \o Name the project and set its path, and then click \gui Next.

        \o In the \gui {Application Type} dialog, select the \gui {Use an
        existing .qml file}
        option and specify the main .qml file of the project you want to import.

        \image qmldesigner-import-project.png "Application Type dialog"

        \o Click \gui Next.

        \o Select the Qt versions to use as build targets for your project, and click
        \gui{Next}.

        \o Specify options for deploying the application to mobile device targets, and
        click \gui{Next}.

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

    \endlist

    \QC adds references to the QML files to a project and creates the additional files
    necessary for deploying applications to mobile devices.

*/


/*!

    \contentspage index.html
    \previouspage creator-using-qt-quick-designer.html
    \page quick-components.html
    \nextpage quick-buttons.html

    \title Creating Components

    A QML component provides a way of defining a new type that you can re-use in other QML
    files. A component is like a black box; it interacts with the outside world
    through properties, signals, and slots, and is generally defined in its own QML file.
    You can import components to screens and applications.

    You can use the following QML elements to create components:

    \list

        \o \l{http://doc.qt.nokia.com/4.7/qml-borderimage.html}{Border Image}
        uses an image as a border or background.
        \o \l{http://doc.qt.nokia.com/4.7/qml-image.html}{Image}
        adds a bitmap to the scene. You can stretch and tile images.
        \o \l{http://doc.qt.nokia.com/4.7/qml-item.html}{Item}
        is the most basic of all visual items in QML. Even though it has no visual appearance,
        it defines all the properties that are common across visual items, such as the x and
        y position, width and height, anchoring, and key handling.
        \o \l{http://doc.qt.nokia.com/4.7/qml-rectangle.html}{Rectangle}
        adds a rectangle that is painted with a solid fill color and an optional border.
        You can also use the radius property to create rounded rectangles.
        \o \l{http://doc.qt.nokia.com/4.7/qml-text.html}{Text}
        adds formatted read-only text.
        \o \l{http://doc.qt.nokia.com/4.7/qml-textedit.html}{Text Edit}
        adds a single line of editable formatted text that can be validated.
        \o \l{http://doc.qt.nokia.com/4.7/qml-textinput.html}{Text Input}
        adds a single line of editable plain text that can be validated.
        \o \l{http://doc.qt.nokia.com/4.7-snapshot/qml-webview.html}{Web View}
        adds web content to a canvas.

    \endlist

    QML elements allow you to write cross-platform applications with custom look
    and feel. You can also use ready-made Qt Quick Components for Symbian and
    MeeGo Harmattan that allow you to create applications with a native look and
    feel for the selected mobile platform. You can install the components as
    part of \QSDK.

    When you use the \QC project wizard to create Qt Quick applications,
    you can select which component set to use in your application.

    Even if you use the Qt Quick Components, you can still write cross-platform
    applications, by using different sets of QML files for each platform.

    You can dowload a set of commonly used UI-components for generic use in
    Qt Quick projects from
    \l{https://projects.forum.nokia.com/QMLTemplates}{QML Templates}. You can
    open and edit the templates in \QD.

    \section1 Creating Components in Qt Quick Designer

    \list 1

        \o Select \gui {File > New File or Project > Files and Classes > QML
        > Choose} to create a new .qml file.

        \note Components are listed in the \gui {QML Components} section of the
        \gui Library pane only if the filename begins with a capital letter.

        \o Click \gui Design to open the .qml file in \QMLD.

        \o Drag and drop an item from the \gui Library pane to the editor.

        \o Edit item properties in the \gui Properties pane.

        The available properties depend on the item.

    \endlist

    The following sections contain examples of how to create some common components:

    \list

        \o \l{Creating Buttons}

        \o \l{Creating Scalable Buttons and Borders}

    \endlist

*/


/*!
    \contentspage index.html
    \previouspage quick-components.html
    \page quick-buttons.html
    \nextpage quick-scalable-image.html

    \title Creating Buttons

    To create a button component:

    \list 1

        \o Select \gui {File > New File or Project > QML > QML File > Choose} to
         create a QML file called Button.qml (for example).

        \note Components are listed in the \gui Library pane only if the filename
        begins with a capital letter.

        \o Click \gui {Design} to edit the file in the visual editor.

        \o In the \gui Navigator pane, click \gui Rectangle to set properties
        for it.

        \o In the \gui Properties pane, modify the appearance of the button.

        \list a

            \o In the \gui Size field, set the width (\gui W) and height (\gui H)
            of the button.

            \o In the \gui Color field, select the button color.

            \o In the \gui Radius field, use the slider to set the radius of the
            rectangle and produce rounded corners for the button.

        \endlist

        \o Drag and drop a \gui {Text} item on top of the \gui Rectangle. This
        creates a nested element where \gui Rectangle is the parent element of
        \gui Text. Elements are positioned relative to their parents.

        \o In the \gui Properties pane, edit the properties of the \gui Text item.

        \list a

            \o In the \gui Text field, type \bold Button.

            You can select the text color, font, size, and style in the \gui Font
            section.

            \o In the \gui Alignment field, select the center buttons to align
            the text to the center of the button.

            \o Click \gui {Layout}, and then click the
            \inlineimage qmldesigner-anchor-fill-screen.png
            button to anchor the text to the whole button area.

        \endlist

        \o Press \key {Ctrl+S} to save the button.

        \image qmldesigner-button.png "Button component"

    \endlist

    \note To view the button, you must add it to a Qt Quick Application or Qt Quick UI
    project.

    To create a graphical button that scales beautifully without using vector graphics,
    use the \l{http://doc.qt.nokia.com/4.7/qml-borderimage.html}{Border Image}
    element. For more information, see \l{Creating Scalable Buttons and Borders}.

    */


/*!

    \contentspage index.html
    \previouspage quick-buttons.html
    \page quick-scalable-image.html
    \nextpage quick-screens.html

    \title Creating Scalable Buttons and Borders

    You can use the \l{http://doc.qt.nokia.com/4.7/qml-borderimage.html}{Border Image}
    element to display an image, such as a PNG file, as a border and a background.

    Use two Border Image elements and suitable graphics to make it look like the button
    is pushed down when it is clicked. One of the Border Image elements is visible by default.
    You can specify that it is hidden and the other one becomes visible when the mouse
    is clicked.

    Add a MouseArea that covers the whole area and emits the clicked signal (\c {parent.clicked()})
    when it detects a mouse click.

    You can add text to the button and set it up as a property. The text can then be initialized
    from the outside, making the button a reusable UI component. The font size is also available
    in case the default size is too big. You can scale down the button text and use smooth text
    rendering for some extra quality.

    \image qmldesigner-borderimage.png "Graphical button"

    To create a graphical button:

    \list 1

        \o Select \gui {File > New File or Project > QML > QML File > Choose} to create
        a QML file called Button.qml (for example).

        \o Double-click the file to open it in the code editor.

        \o Replace the \gui Rectangle with an \gui Item, as illustrated by the
        following code snippet:

        \qml
        Item {

        }
        \endqml

        \o Specify properties and set expressions for the \gui Item, as
        illustrated by the following code snippet:

        \snippet snippets/qml/quick-scalable-image.qml properties and signal definitions

        You will point to the properties and expression later.

        \o Click \gui {Design} to edit the file in the visual editor.

        \o Drag and drop two \gui BorderImage items from the \gui Library pane to
        the scene.

        \o Drag and drop a \gui Text item to the scene.

        \o Drag and drop a \gui MouseArea to the screen.

        \o In the \gui Navigator pane, select \gui border_image1 to specify
        settings for it in the \gui Properties pane:

        \list a

            \o Select \gui {Set Expression} in the menu next to the \gui Visibility
            check box.

            \o Enter the following expression to specify that the image is visible
            when the mouse is not pressed down: \c {!mouse_area1.pressed}.

            \o In the \gui Source field, select the image file for the
            button, for example button_up.png.

            \o Click \gui {Layout}, and then click the
            \inlineimage qmldesigner-anchor-fill-screen.png
            button to anchor the border image to the \gui Item.

        \endlist

        \o Select \gui border_image2 to specify similar settings for it:

        \list a

            \o Set the following epression for \gui Visibility, to specify that
            the image is visible when the mouse is pressed down:
            \c {mouse_area1.pressed}.

            \o In the \gui Source field, select the image file for the
            button when it is clicked, for example button_down.png.

            \o Click \gui {Layout}, and then click the
            \inlineimage qmldesigner-anchor-fill-screen.png
            button to anchor the border image to the \gui Item.

        \endlist

        \o Select \gui text1 to specify font size and color, and text
        scaling and rendering:

        \list a

            \o In the \gui Color field, use the color picker to select
            the font color, or enter a value in the field.

            \o In the \gui Text field, select \gui {Set Expression} and
            enter a pointer to the \c {text} property that you specified
            earlier: \c {parent.txt}.

            \o Select the \gui Aliasing check box to enable smooth text
            rendering.

            \o In the \gui Size field, select \gui {Pixels} to specify
            the font size in pixels. By default, the size is specified in
            points.

            \o In the \gui Size field, select \gui {Set Expression} and
            enter a pointer to the \c {fontSize} property that you specified
            earlier.

            \o Click \gui {Layout}, and then click the
            \inlineimage qmldesigner-center-in.png "Anchor buttons"
            buttons to inherit the vertical and horizontal centering from
            the parent.

            \o Click \gui Advanced to specify scaling for the text in the
            \gui Scale field.

            \o Select \gui {Set Expression} and enter the following expression:
            \c {if (!mousearea1.pressed) { 1 } else { 0.95 }}.

            \note You can enter long and complicated expressions also in the
            code editor.

        \endlist

        \o In the code editor, add to the \c MouseArea item
        a pointer to the \c clicked expression that you added earlier:
        \c {onClicked: parent.clicked()}.

    \endlist

    \note To view the button, you must add it to a Qt Quick Application or Qt
    Quick UI project.

*/


/*!

    \contentspage index.html
    \previouspage quick-scalable-image.html
    \page quick-screens.html
    \nextpage quick-animations.html

    \title Creating Screens

    You can use predefined QML elements and your own components to create screens.
    Typically, the main qml file in a Qt Quick project specifies the main window of an
    application.

    The QML files in the project folder are displayed in \gui {QML Components} in the
    \gui Library pane.

    You can also use ready-made Qt Quick Components for Symbian and
    MeeGo Harmattan that allow you to create screens with a native look and
    feel for the selected mobile platform. You can install the components as
    part of \QSDK.

    You can dowload QML templates that specify different types of screens from
    \l{https://projects.developer.nokia.com/QMLTemplates}{QML Templates} for use in
    your Qt Quick projects. You can open and edit the templates in \QD.

    \section1 Adding Components to Screens

    \list 1

        \o Drag and drop components from the \gui Library pane to the editor.

        \o Select components in the \gui Navigator pane to edit their properties
        in the \gui Properties pane.

        For example, you can anchor components to a position on the screen.

    \endlist

    \section1 Using Data Models

    You can create the following types of views to organize items provided by
    \l{http://doc.qt.nokia.com/4.7/qdeclarativemodels.html}{data models}:

    \list

        \o \l{http://doc.qt.nokia.com/4.7/qml-gridview.html}{Grid View}
        provides a grid vizualization of a model.

        \o \l{http://doc.qt.nokia.com/4.7/qml-listview.html}{List View}
        provides a list vizualization of a model.

        \o \l{http://doc.qt.nokia.com/4.7/qml-pathview.html}{Path View}
        visualizes the contents of a model along a path.

    \endlist

    When you add a Grid View, List View, or Path View element, the
    \l{http://doc.qt.nokia.com/4.7/qml-listmodel.html}{ListModel} and the
    delegate component that creates an instance for each item in the model are
    added automatically. You can edit element properties in the \gui Properties
    pane or in the code editor. You can also replace the default model and
    delegate with other, more complex models and delegates in the code editor.

    \section1 Positioning Items on Screens

    You can use the following items to arrange items on screens:

    \list

        \o  \l{http://doc.qt.nokia.com/4.7-snapshot/qml-column.html}{Column}
            arranges its child items vertically.

        \o  \l{http://doc.qt.nokia.com/4.7-snapshot/qml-row.html}{Row}
            arranges its child items horizontally.

        \o  \l{http://doc.qt.nokia.com/4.7-snapshot/qml-grid.html}{Grid}
            arranges its child items so that they are aligned in a grid and
            are not overlapping.

        \o  \l{http://doc.qt.nokia.com/4.7-snapshot/qml-flow.html}{Flow}
            arranges its child items side by side, wrapping as necessary.

    \endlist

    \section1 Using States

    Use states and transitions
    to navigate between screens.

    QML states typically describe user interface configurations, such as the UI elements,
    their properties and behavior and the available actions. For example, you can use
    states to create two screens.

    To add states, click the empty slot in the \gui States pane. Then modify the new state
    in the visual editor.

    \image qmldesigner-states.png "States pane"

    The properties that you change in a state are highlighted with blue color.
    In the code editor, you can see the changes recorded as changes to the base state.

    To keep the QML code clean, you should create a base state that contains all the
    elements you will need in the application. You can then create states, in
    which you hide and show a set of items and modify their properties.
    This allows you to:

    \list

        \o Align items on different screens with each other.

        \o Avoid excessive property changes. If an item is invisible in the base
        state, you must define all changes to its child elements as property changes,
        which leads to complicated QML code.

        \o Minimize the differences between the base state and the other states
        to keep the QML code short and readable and to improve performance.

        \o Avoid problems when using transitions and animation when changing
        states.

    \endlist

    To create screens for an application by using states:

    \list 1

        \o In the base state, add all elements you will need in the application.
        While you work on one screen, you can click the
        \inlineimage qmldesigner-show-hide-icon.png
        icon to hide elements on the canvas that are not part of a screen.

        \o In the \gui States pane, click the empty slot to create a new state
        and give it a name. For example, \c Normal.

        \o In the \gui Properties pane, deselect the \gui Visibility check box
        or set \gui Opacity to 0 for each element that is not needed in this view.
        If you specify the setting for the parent element, all child elements
        inherit it and are also hidden.

        \image qmldesigner-screen-design.png "Designing screens"

        \o Create additional states for each screen and set the visibility or
        opacity of the elements in the screen.

        \o To determine which view opens when the application starts, use the code
        editor to set the state of the root item of the .qml file, as specified by the
        following code snippet:

        \qml
        Item {
            state: "Normal"
        }
        \endqml

    \endlist


*/


/*!

    \contentspage index.html
    \previouspage quick-screens.html
    \page quick-animations.html
    \nextpage quick-user-interaction.html

    \title Animating Screens

    To make movement between states smooth, you can specify transitions.
    You can use different types of animated transitions. For example, you can animate changes
    to property values and colors. You can use rotation animation to control the direction of
    rotation. For more information, see
    \l{http://doc.qt.nokia.com/4.7/qdeclarativeanimation.html}{QML Animation}.

    You can use the \c ParallelAnimation element to start several animations at the same time.
    Or use the \c SequentialAnimation element to run them one after another.

    You can use the code editor to specify transitions. For more information, see
    \l{http://doc.qt.nokia.com/4.7/qml-transition.html}{QML Transition Element}.

*/


/*!

    \contentspage index.html
    \previouspage quick-animations.html
    \page quick-user-interaction.html
    \nextpage quick-export-to-qml.html

    \title Adding User Interaction Methods

    You can add the following basic interaction methods to scenes:

    \list

        \o \l{http://doc.qt.nokia.com/4.7/qml-flickable.html}{Flickable}
        items can be flicked horizontally or vertically.
        \o \l{http://doc.qt.nokia.com/4.7/qml-flipable.html}{Flipable}
        items can be flipped between their front and back sides by using rotation,
        state, and transition.
        \o \l{http://doc.qt.nokia.com/4.7/qml-focusscope.html}{Focus Scope}
        assists in keyboard focus handling when building reusable QML components.
        \o \l{http://doc.qt.nokia.com/4.7/qml-mousearea.html}{Mouse Area}
        enables simple mouse handling.

    \endlist

*/


/*!

    \contentspage index.html
    \previouspage quick-user-interaction.html
    \page quick-export-to-qml.html
    \nextpage quick-application-logic.html

    \title Exporting Designs from Graphics Software

    You can export designs from graphics software, such as Adobe Photoshop and GIMP,
    to QML files. Each scene is converted into a single QML file with an Image or a
    Text element for each layer and saved on the development PC. Top-level layer
    groups are converted into merged QML Image elements.

    Note: GIMP does not support grouping, and therefore, each layer is exported as
    an item in GIMP.

    You can open the QML file in \QC for editing. If you edit the file in Adobe
    Photoshop and export it to the same directory again, any changes you made in
    \QC are overwritten. However, you can re-export graphical assets without
    recreating the QML code.

    If you create vector graphics with other tools that have an Adobe Photoshop export
    option, such as Adobe Illustrator, you can export them first to Photoshop
    and then
    to QML.

    \section1 Conversion Rules

    The following rules apply to the conversions:

    \list

        \o Layer names are used as element names. Spaces and hash marks (#) are
         replaced with underscore characters to create valid ids for the elements.

        \o Layer styles, such as drop shadows, are converted to images.

        \o Offset, size, ordering and opacity are preserved.

        \o Text layers are converted to Text elements, unless you specify that they
        be converted to Image elements.

        \o Hidden layers can be exported, and their visibility is set to hidden.

        \o PNG images are copied to the images subirectory.

    \endlist

    \section1 Preparing Files for Conversion

    To create QML files that are easy to use, prepare the Adobe Photoshop or
    GIMP designs for exporting, as follows:

    \list

        \o  To minimize the number of elements, minimize the number of layers or
            use top-level layer groups, because each layer or layer group is
            exported as a Text or Image element.

        \o  To make sure that all related elements are exported to the same
            element, use top-level layer groups.

        \o  To determine that some layers are not exported, hide them, and
            deselect the \gui {Export hidden} check box during exporting.

        \o  To make it easier to find the layers and layer groups after
            exporting them, use descriptive names for them.

        \o  To make sure that image dimensions are preserved during export,
            create at least one fully filled layer (which can be hidden), such
            as a background layer. If the export script does not find a fully
            filled layer, it resizes all images to the size of the canvas.

        \o  To prevent errors during export, make sure that the layers are not
            locked. Locked layers cannot be exported.

        \o  To avoid unexpected results, do not use Blending Mode effects. They
            are not exported.

    \endlist

    \section1 Exporting from Adobe Photoshop to QML

    \image qml-export-photoshop.png

    The script has been tested to work on Adobe Photoshop CS 4 and 5, but it might also
    work on other versions.

    \list 1

        \o Download the export script, \e{Export QML.jx}, from
        \l{http://qt.gitorious.org/qt-labs/photoshop-qmlexporter/trees/master}{Gitorious}.

        \note Read the README.txt file in the repository for latest information about
        the script.

        \o Double-click the export script to add the export command to the \gui Scripts
        menu. You can also copy the script file to the Adobe Photoshop scripts directory
        (typically, \c{\Presets\Scripts} in the Photoshop installation directory).

        \o In Adobe Photoshop, choose \gui {File > Scripts > Export to QML} to export the
        scene to a QML file.

        \o In the \gui {Export Document to QML} dialog, enter a name and location for the
        QML file.

        \o Select the \gui {Rasterize text} check box to export text layers as images,
        not as Text elements.

        \o Select the \gui {Group layers} check box to export each top-level group as a
        merged QML Image element.

        \o Select the \gui {Export hidden} check box to export hidden layers and to set
        their visibility property to hidden.

        \o Deselect the \gui {Export QML} check box if you have modified the QML document
        in \QC, but still want to re-export graphical assets.

        \o Click \gui Export.

    \endlist

    The QML file is saved to the location that you specified.
    In \QC, choose \gui {File > Open File or Project} to open the QML file.

    \note Existing files are replaced without warning.

    \section1 Exporting from GIMP to QML

    \image qml-export-gimp.png

    The script has been tested to work on GIMP 2. You can download GIMP 2 from
    \l{http://www.gimp.org/downloads/}{GIMP Downloads}.

    To use the export script on Microsoft Windows, you also need to install the
    GIMP Python extension (Python, PyCairo, PyGobject, PyGTK). However, GIMP is
    not officially supported on Windows, so we cannot guarantee that this will
    work.

    \list 1

        \o On Microsoft Windows, you must first add Python support to your GIMP
        installation, as instructed in
        \l {http://www.gimpusers.com/tutorials/install-python-for-gimp-2-6-windows}{Tutorial: Installing Python for GIMP 2.6 (Windows)}.

        \o Download the export script, \e qmlexporter.py, from
        \l{http://qt.gitorious.org/qt-labs/gimp-qmlexporter/trees/master}{Gitorious}.

        \note Read the INSTALL.txt in the repository for latest information about the
        script.

        \o Copy the export script to the plug-ins directory in the GIMP installation
        directory.

        \o Check the properties of the file to make sure that it is executable.

        On Linux, run the following command: \c {chmod u+rx}

        \o Restart GIMP to have the export command added to the \gui File menu.

        \o Choose \gui {File > Export to QML} to export the design to a QML file.

        \o In the \gui {Export Layers to a QML Document} dialog, enter a name and
        location for the QML file, and click \gui Export.

    \endlist

    The QML file is saved to the location that you specified.
    In \QC, choose \gui {File > Open File or Project} to open the QML file.

    \note Existing files are replaced without warning.

*/


/*!

    \contentspage index.html
    \previouspage quick-export-to-qml.html
    \page quick-application-logic.html
    \nextpage creator-qml-modules-with-plugins.html

    \title Implementing Application Logic

    A user interface is only a part of an application, and not really useful by itself.
    You can use Qt or JavaScript to implement the application logic. For more information on
    using JavaScript, see
    \l {http://doc.qt.nokia.com/4.7/qdeclarativejavascript.html} {Integrating JavaScript}.

    For an example of how to use JavaScript to develop a game, see the
    \l {http://doc.qt.nokia.com/4.7/qml-advtutorial.html} {QML Advanced Tutorial}.

 */


/*!
    \contentspage index.html
    \previouspage quick-application-logic.html
    \page creator-qml-modules-with-plugins.html
    \nextpage creator-using-qt-designer.html

    \title Using QML Modules with Plugins

    QML modules may use plugins to expose components defined in C++ to
    QML applications. Since \QC cannot load the plugins to determine
    the details of the contained components, these modules need to provide
    extra type information for code completion and the semantic checks to work
    correctly.

    Ideally, QML modules have a \c{plugins.qmltypes} file in the same directory
    as the \c qmldir file. The \c qmltypes file contains a description of the
    components exported by the module's plugins and is loaded by \QC
    when the module is imported.

    For Qt 4.8 and later, one or more \c qmltypes files can be listed in the
    \c qmldir file under the \c typeinfo header. These files will be read in addition
    to \c{plugins.qmltypes}. For more information, see
    \l{http://doc.qt.nokia.com/4.8-snapshot/qdeclarativemodules.html#writing-a-qmldir-file}{Writing a qmldir File}.

    \section1 Generating qmltypes Files

    You can create and edit \c qmltypes files manually, but you are recommended
    to use the \c qmlplugindump tool shipped with Qt 4.8 and later to generate
    them automatically. For earlier versions of Qt, you can compile a version
    of the tool called \c qmldump from the sources in
    \c{<QtCreator>/share/qtcreator/qml/qmldump} if the Qt version contains private headers.

    Once you have obtained qmlplugindump for the Qt version the QML module's
    plugins were compiled with, run the following command to load My.Module
    version 1.0 from \c{/import/path/my/module} including all its plugins and
    output a description of the plugins' types to
    \c{/import/path/my/module/plugins.qmltypes}:

    \code
    qmlplugindump My.Module 1.0 /import/path > /import/path/my/module/plugins.qmltypes
    \endcode

    You can safely ignore the debug output.

    \section1 Dumping Plugins Automatically

    If a module with plugins lacks the \c qmltypes file, \QC tries to
    generate a temporary file itself by running the \c qmldump program in the
    background. However, this automatic dumping is a fallback mechanism with
    many points of failure and cannot be relied upon.

*/