diff options
Diffstat (limited to 'doc/qtcreator')
15 files changed, 114 insertions, 111 deletions
diff --git a/doc/qtcreator/images/qmldesigner-bindings.png b/doc/qtcreator/images/qmldesigner-bindings.png Binary files differindex c3a90cc3c7..017b22cd23 100644 --- a/doc/qtcreator/images/qmldesigner-bindings.png +++ b/doc/qtcreator/images/qmldesigner-bindings.png diff --git a/doc/qtcreator/images/qmldesigner-editing-components.png b/doc/qtcreator/images/qmldesigner-editing-components.png Binary files differnew file mode 100644 index 0000000000..1fe80e23c1 --- /dev/null +++ b/doc/qtcreator/images/qmldesigner-editing-components.png diff --git a/doc/qtcreator/images/qmldesigner-element-properties.png b/doc/qtcreator/images/qmldesigner-element-properties.png Binary files differindex 6df75cc67a..18239bdf41 100644 --- a/doc/qtcreator/images/qmldesigner-element-properties.png +++ b/doc/qtcreator/images/qmldesigner-element-properties.png diff --git a/doc/qtcreator/images/qmldesigner-properties-view.png b/doc/qtcreator/images/qmldesigner-properties-view.png Binary files differnew file mode 100644 index 0000000000..36c2e9ca15 --- /dev/null +++ b/doc/qtcreator/images/qmldesigner-properties-view.png diff --git a/doc/qtcreator/images/qmldesigner-qml-components.png b/doc/qtcreator/images/qmldesigner-qml-components.png Binary files differindex a2b090dd37..46918eee92 100644 --- a/doc/qtcreator/images/qmldesigner-qml-components.png +++ b/doc/qtcreator/images/qmldesigner-qml-components.png diff --git a/doc/qtcreator/images/qmldesigner-screen-design.png b/doc/qtcreator/images/qmldesigner-screen-design.png Binary files differindex 42bb30bb16..ff19977a0f 100644 --- a/doc/qtcreator/images/qmldesigner-screen-design.png +++ b/doc/qtcreator/images/qmldesigner-screen-design.png diff --git a/doc/qtcreator/images/qmldesigner-states-when-condition.png b/doc/qtcreator/images/qmldesigner-states-when-condition.png Binary files differindex a26ba37b52..7a1530efb0 100644 --- a/doc/qtcreator/images/qmldesigner-states-when-condition.png +++ b/doc/qtcreator/images/qmldesigner-states-when-condition.png diff --git a/doc/qtcreator/images/qmldesigner-states.png b/doc/qtcreator/images/qmldesigner-states.png Binary files differindex 0b2510e6dc..4f1193bfba 100644 --- a/doc/qtcreator/images/qmldesigner-states.png +++ b/doc/qtcreator/images/qmldesigner-states.png diff --git a/doc/qtcreator/images/qmldesigner-transitions.png b/doc/qtcreator/images/qmldesigner-transitions.png Binary files differindex 8d7309ddc8..8791133a87 100644 --- a/doc/qtcreator/images/qmldesigner-transitions.png +++ b/doc/qtcreator/images/qmldesigner-transitions.png diff --git a/doc/qtcreator/src/projects/creator-only/creator-projects-creating.qdoc b/doc/qtcreator/src/projects/creator-only/creator-projects-creating.qdoc index 0866481120..2ff19db916 100644 --- a/doc/qtcreator/src/projects/creator-only/creator-projects-creating.qdoc +++ b/doc/qtcreator/src/projects/creator-only/creator-projects-creating.qdoc @@ -102,18 +102,18 @@ \list \li Qt Quick Application - Empty - Create an empty Qt Quick application that uses Qt Quick 2 types. + Create an empty \l{Qt Quick} application that uses Qt Quick 2 + types. You can build the application and deploy it to desktop, embedded, and mobile target platforms. \li Qt Quick Application - Scroll, Stack, or Swipe - Create a Qt Quick application that uses - \l{http://doc.qt.io/qt-5/qtquickcontrols2-index.html} - {Qt Quick Controls} to implement a scrollable list (requires - Qt 5.9 or later) or a set of pages with a stack-based or - swipe-based navigation model (requires Qt 5.7 or later). + Create a Qt Quick application that uses \l{Qt Quick Controls} to + implement a scrollable list (requires Qt 5.9 or later) or a set + of pages with a stack-based or swipe-based navigation model + (requires Qt 5.7 or later). \endlist \li Application (Qt) @@ -150,8 +150,8 @@ \list \li MCU Support Application - Creates an application that uses a subset of QML and - Qt Quick Controls (as supported by Qt for MCUs) that + Creates an application that uses a subset of Qt QML and + Qt Quick Controls types (as supported by Qt for MCUs) that you can deploy, run, and debug on MCU boards. For more information, see \l {Connecting MCUs}. \endlist diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index da35dae588..2b17c2c5da 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -127,7 +127,7 @@ \endlist \li \l{Importing 3D Assets} \li \l{Editing 3D Assets in Design Mode} - \li \l{Working in the 3D Editor} + \li \l{Working in 3D Editor} \li \l{Adding 3D Views} \li \l{Using 3D Components} \list diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-states-scxml.qdocinc b/doc/qtcreator/src/qtquick/creator-only/qtquick-states-scxml.qdocinc index ccbc236229..18100dfe36 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-states-scxml.qdocinc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-states-scxml.qdocinc @@ -26,20 +26,23 @@ /*! //! [scxml state machines] - \section2 Using SCXML State Machines + \section1 Using SCXML State Machines - To use QML together with an SCXML state machine, add states and bind them to - the state machine in the \uicontrol Backends tab in the Design mode, as + To use QML together with an SCXML state machine, add states and + bind them to the state machine in the \uicontrol Backends tab + of the \uicontrol Connections view, as described in \l {Managing C++ Backend Objects}. - In the \uicontrol States view, you can edit the \c when condition of states + In the \uicontrol States view, you can select \uicontrol Actions > + \uicontrol {Set when Condition} to edit the \c when condition of states to map QML states to the states of the SCXML state machine. For an example, see \l {Qt SCXML Traffic Light QML Example (Dynamic)}. \image qmldesigner-states-when-condition.png - If you add animation to the states, you can run the application to test the - animation. + If you add animation to the states, you can \l{Previewing}{preview} + or \l{Running on Multiple Platforms}{run} the application to test + the animation. //! [scxml state machines] */ diff --git a/doc/qtcreator/src/qtquick/qtquick-components.qdoc b/doc/qtcreator/src/qtquick/qtquick-components.qdoc index 3820b01116..ca4a6e6d89 100644 --- a/doc/qtcreator/src/qtquick/qtquick-components.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-components.qdoc @@ -51,14 +51,15 @@ \image qmldesigner-qml-components.png "QML Components" - The \uicontrol {QML Types} tab displays the QML types grouped by category: - your own QML components, basic types, layouts, positioner types, and views. + The \uicontrol {QML Types} tab displays the QML types grouped by category, + such as your own QML components, basic types, layouts, positioner types, and + views. Sets of UI components with the look and feel of a particular mobile device platform have been defined for Qt Quick 1. Since Qt 5.1, ready-made Qt Quick Controls, Dialogs, and Layouts are available for creating user interfaces using Qt Quick 2. The components and controls are based on - standard QML types. To view the components and controls in the + standard QML types. To view the components and controls in \uicontrol {Library}, import the component sets in \uicontrol {QML Imports}. The \uicontrol {Qt Quick Application} wizards for a particular platform add @@ -70,21 +71,23 @@ \section1 Adding Components to Designs - \image studio-design-mode.png "Design mode" + \image qmldesigner-editing-components.png "Editing QML components in Design mode" \list 1 - \li Drag and drop components from the \uicontrol Library (2) to the - \uicontrol Navigator (3) or \uicontrol {Form Editor} (1). - \li Select components in the \uicontrol Navigator to edit their - properties in the \uicontrol Properties view (4). For more - information, see \l {Specifying Item Properties}. + \li Drag and drop components from \uicontrol Library (1) to + \uicontrol Navigator (2) or \uicontrol {Form Editor} (3). + \li Select components in \uicontrol Navigator to edit their + properties in \uicontrol Properties. + \image qmldesigner-properties-view.png "Properties view" + For more information, see \l {Specifying Item Properties}. \li Connect components to signals or create bindings between components - in the \uicontrol Connections view (5). For more information, see - \l{Adding Connections}. + in the \uicontrol Connections view. + \image qmldesigner-bindings.png "Connections view Bindings tab" + For more information, see \l{Adding Connections}. \li Add states to apply sets of changes to the properties of one or - several components in the \uicontrol States view (6). For more - information, see \l{Adding States}. - \li Animate component properties in the \uicontrol Timeline view (7). + several components in the \uicontrol States view. + For more information, see \l{Adding States}. + \li Animate component properties in the \uicontrol Timeline view. For more information, see \l{Creating Animations}. \endlist @@ -136,12 +139,12 @@ When you add a \l{GridView}{Grid View}, \l{ListView}{List View}, or \l{PathView}{Path View}, the ListModel and the delegate component that creates an instance for each item in the model are added automatically. - You can edit item properties in the \uicontrol Properties view or - in the \uicontrol {Text Editor}. You can also replace the default model and - delegate with other, more complex models and delegates in the + You can edit item properties in \uicontrol Properties or in + \uicontrol {Text Editor}. You can also replace the default model and + delegate with other, more complex models and delegates in \uicontrol {Text Editor}. \l{ItemDelegate}{Item Delegate} and \l{SwipeDelegate}{Swipe Delegate} delegate components are also available - in the \uicontrol Library. + in \uicontrol Library. \section1 Positioning Items in UIs @@ -179,7 +182,7 @@ \image qmldesigner-set-expression.png "Type properties context menu" - In the \uicontrol {Binding Editor}, select an item and a property from + In \uicontrol {Binding Editor}, select an item and a property from lists of available items and their properties. \image qmldesigner-binding-editor.png "Binding Editor" @@ -192,7 +195,7 @@ When a binding is set, the \uicontrol Actions menu icon changes to \inlineimage icons/action-icon-binding - . To remove bindings, select \uicontrol Reset in the \uicontrol Actions menu. + . To remove bindings, select \uicontrol Actions > \uicontrol Reset. You can set bindings also in the \uicontrol Connections view. For more information, see \l {Adding Bindings Between Properties}. @@ -227,7 +230,7 @@ (\uicontrol {Reset Anchors}) button to reset the anchors to their saved state. - You can specify the baseline anchor in the \uicontrol {Text Editor} in the + You can specify the baseline anchor in \uicontrol {Text Editor} in the Design mode. For performance reasons, you can only anchor an item to its siblings @@ -340,8 +343,9 @@ \endlist To position several items in a \uicontrol Column, \uicontrol Row, - \uicontrol Grid, or \uicontrol Flow, select the items on the canvas, and - then select \uicontrol Position in the context menu. + \uicontrol Grid, or \uicontrol Flow, select the items in + \uicontrol {Form Editor}, and then select \uicontrol Position in + the context menu. \section2 Using Layouts @@ -353,8 +357,6 @@ You can use the following layout types to arrange items in UIs: \list - \li \l{Layout} provides attached properties for items pushed onto a - column, row, or grid layout. \li \l{ColumnLayout}{Column Layout} provides a grid layout with only one column. \li \l{RowLayout}{Row Layout} provides a grid layout with only one row. @@ -365,7 +367,7 @@ \endlist To lay out several items in a column, row, grid, or - \uicontrol {Stack Layout}, select the items in the \uicontrol {Form Editor}, + \uicontrol {Stack Layout}, select the items in \uicontrol {Form Editor}, and then select \uicontrol Layout in the context menu. You can also click the \inlineimage column.png @@ -374,9 +376,9 @@ (\uicontrol {Grid Layout}) toolbar buttons to apply layouts to the selected items. - To make an item within a layout as wide as possible while respecting - the given constraints, select the item on the canvas and then select - \uicontrol Layout > \uicontrol {Fill Width} in the context menu. To + To make an item within a layout as wide as possible while respecting the + given constraints, select the item in \uicontrol {Form Editor}, and then + select \uicontrol Layout > \uicontrol {Fill Width} in the context menu. To make the item as high as possible, select \uicontrol {Fill Height}. \section2 Editing Stack Layouts @@ -385,7 +387,7 @@ To add items to a \uicontrol {Stack Layout}, select the \inlineimage plus.png - button next to the type name in the \uicontrol {Form Editor}. To move + button next to the type name in \uicontrol {Form Editor}. To move between items, select the \inlineimage prev.png (\uicontrol Previous) and \inlineimage next.png (\uicontrol Next) buttons. @@ -550,22 +552,22 @@ \endif \uicontrol Choose to create a new .qml file. - \note Components are listed in the \uicontrol {QML Components} section of - the \uicontrol Library only if the filename begins with a capital - letter. + \note Components are listed in the \uicontrol {My QML Components} + tab in the \uicontrol Library view only if the filename begins with + a capital letter. \li Click \uicontrol Design to open the .qml file in the Design mode. - \li Drag and drop a QML type from the \uicontrol Library to the + \li Drag and drop a QML type from \uicontrol Library to \uicontrol Navigator or \uicontrol {Form Editor}. - \li Edit its properties in the \uicontrol Properties view. + \li Edit its properties in \uicontrol Properties. The available properties depend on the QML type. \endlist - The following sections contain more information about how to use the + The following sections contain more information about how to use \uicontrol {Form Editor} to edit 2D content, as well as examples of how to create some common components using basic QML types: @@ -582,10 +584,11 @@ \section1 Moving Within Components Components can consist of several other components. To view the component - hierarchy as a bread crumb path when you edit a component on the canvas, - select \uicontrol {Go into Component} or press \key F2. Click the component - names in the path to navigate to them. You can easily navigate back to the - top level when you are done editing the component. + hierarchy as a bread crumb path when you edit a component in + \uicontrol {Form Editor}, select \uicontrol {Go into Component} or press + \key F2. Click the component names in the path to navigate to them. You + can easily navigate back to the top level when you are done editing the + component. \image qmldesigner-breadcrumbs.png "Go into Component command" */ diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc index cdba49811c..78c70b2809 100644 --- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc @@ -37,7 +37,7 @@ The bottom part of the view displays properties that are specific to each QML type. For example, the following image displays the properties you can - set for \uicontrol Rectangle (1) and \uicontrol Text (2) items. + set for \uicontrol Rectangle and \uicontrol Text items. \image qmldesigner-element-properties.png diff --git a/doc/qtcreator/src/qtquick/qtquick-states.qdoc b/doc/qtcreator/src/qtquick/qtquick-states.qdoc index d670fb21b5..d3902d34d6 100644 --- a/doc/qtcreator/src/qtquick/qtquick-states.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-states.qdoc @@ -55,56 +55,59 @@ \list \li Show some UI items and hide others. \li Present different available actions to the user. - \li Start, stop or pause animations. + \li Start, stop, or pause animations. \li Execute some script required in the new state. \li Change a property value for a particular item. \li Show a different view. \endlist + \section1 Creating States + The \uicontrol States view displays the different \l{State}{states} - of the component in the Design mode. The \uicontrol States view is - collapsed by default to save space. Select \uicontrol Expand in - the context menu to view the whole view. + of a UI, beginning with a \e {base state}. \image qmldesigner-transitions.png "States view" To add states, click the \inlineimage plus.png - button. Then modify the new state in the editor. For example, to change the - appearance of a button, you can hide the button image and show another image - in its place. Or, to add movement to the view, you can change the position - of an object on the canvas and then add animation to the change between the - states. - - To determine when the state should be applied, select - \uicontrol {Set when Condition} in the menu and specify a - \l [QtQuick]{State::when}{when} property for the state. - Set the value of the property to an expression that - evaluates to \c true when you want the state to be applied. - In the binding editor, select the component and property to - create the expression. For example, to change the state when - a button is pressed, you could select a button component and - its pressed property. - - \image qtquick-states-binding-editor.png "Binding editor in States view" - - You can preview the states in the \uicontrol States view and click them to - switch between states on the canvas. + button. Click the new state to switch to it in \uicontrol {Form Editor}, + and then modify the properties of components in \uicontrol Properties. - \section1 Using States + For example, to change the appearance of a button, you can hide the button + image and show another image in its place. Or, to add movement to the view, + you can change the position of an object in \uicontrol {Form Editor} + and then add animation to the change between the states. + + The properties that you change in a state are highlighted with blue color. + In \uicontrol {Text Editor}, you can see the changes recorded as changes + to the base state. - QML states typically describe user interface configurations, such as the UI - controls, their properties and behavior and the available actions. For - example, you can use states to create two views. + \image qmldesigner-states.png "States and Properties views" - To add states, click the empty slot in the \uicontrol States view. - Then modify the new state in the \uicontrol {Form Editor} or the - \uicontrol Properties view. + \section1 Setting the Default State - \image qmldesigner-states.png "States view" + To determine the startup state of the application, + select \inlineimage icons/action-icon.png + to open the \uicontrol Actions menu, and then select + \uicontrol {Set as Default}. - The properties that you change in a state are highlighted with blue color. - In the \uicontrol {Text Editor}, you can see the changes recorded as changes - to the base state. + To reset the state later, select \uicontrol Actions > + \uicontrol {Reset Default}. + + \section1 Applying States + + To determine when a state should be applied, select \uicontrol Actions > + \uicontrol {Set when Condition}. In \uicontrol {Binding Editor}, specify + a \l [QtQuick]{State::when}{when} property for the state. Set the value of + the property to an expression that evaluates to \c true when you want the + state to be applied. + + In \uicontrol {Binding Editor}, select the component and property to + create the expression. For example, to change the state when a button is + pressed, you could select a button component and its pressed property. + + \image qtquick-states-binding-editor.png "Binding Editor in States view" + + \section1 Using States To keep the QML code clean, you should create a base state that contains all the types you will need in the application. You can then create states, @@ -124,30 +127,24 @@ To create views for an application by using states: + \image qmldesigner-screen-design.png "Designing views" + \list 1 \li In the base state, add all items you will need in the application (1). While you work on one view, you can click the \inlineimage eye_open.png icon to hide items on the canvas that are not part of a view. - \li In the \uicontrol States view, click the empty slot to create a + \li In \uicontrol States, click the empty slot to create a new state and give it a name. For example, \c Normal. - \li In the \uicontrol Properties view (2), deselect the - \uicontrol Visibility check box or set \uicontrol Opacity to 0 - for each item that is not needed in this view. If you specify - the setting for the parent item, all child items inherit it and - are also hidden. - \image qmldesigner-screen-design.png "Designing views" + \li In \uicontrol Properties (2), deselect the \uicontrol Visibility + check box or set \uicontrol Opacity to 0 for each item that is not + needed in this view. If you specify the setting for the parent item, + all child items inherit it and are also hidden. \li Create additional states for each view and set the visibility or opacity of the items in the view. - \li To determine which view opens when the application starts, use the - \uicontrol {Text 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 + \li To determine which state is applied when the application starts, + select \uicontrol Actions > \uicontrol {Set as Default}. + \endlist \if defined(qtcreator) \include qtquick-states-scxml.qdocinc scxml state machines @@ -165,7 +162,7 @@ the type of behavior that is required. You can drag and drop the following QML types from \uicontrol Library - > \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to the + > \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to \uicontrol Navigator or \uicontrol {Form Editor}: \list @@ -181,10 +178,10 @@ sequential animation to create a step where nothing happens, for a specified duration. \li \l [QML] {PropertyAction}{Property Action} immediately changes - a propertyvalue during an animation, without animating the property - change. + a property value during an animation, without animating the + property change. \li \l [QML] {PropertyAnimation}{Property Animation} animates - changes in thevalue of a property. + changes in the value of a property. \li \l [QML] {ScriptAction}{Script Action} defines scripts to be run during an animation. \li \l [QML] {SequentialAnimation}{Sequential Animation} enables |
