Skip to content
GitLab
Commit 05c24045 authored by Leena Miettinen's avatar Leena Miettinen
Browse files

Doc - Qt Quick Designer UI in more detail 

Reviewed-by: Carsten Owerfeldt
parent 1a8e48e1
Hide whitespace changes
Inline Side-by-side
doc/qtcreator.qdoc
View file @ 05c24045
......@@ -1025,28 +1025,23 @@
editor. Then select the \gui {Design} mode to edit the file in the
visual editor.
To enable or disable the \QMLD visual editor, select
\gui {Help > About Plugins... > Qt Quick > QmlDesigner}. You must restart Qt Creator
to enable or disable the visual editor.
\image qmldesigner-visual-editor.png "Visual editor"
Use the visual editor panes to manage your project:
\list
\o \gui {Navigator} pane displays the items in the editor. You can
show and hide items to focus on specific parts of the application.
\o \gui {Navigator} pane displays the QML elements in the current QML file.
You can show and hide items to focus on specific parts of the application.
To view lists of files or projects, instead, select \gui {File System},
\gui {Open Documents}, or \gui Projects in the menu.
\o \gui {Library} pane displays lists of predefined \gui {Items} and
imported \gui {Resources} that you can use to design applications. The
images and other files that you copy to the project folder appear in the
\gui {Resources} pane.
\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.
\o \gui {Properties} pane displays the properties of the selected component.
You can also change the properties in the code editor.
\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.
\o \gui {State} pane displays the different states of the component. To add
states, click the empty slot. Then modify the new state in the editor.
......@@ -1055,6 +1050,59 @@
\endlist
\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
For more information on the properties available for an element, press \key {F1}.
\section2 Setting Expressions
You can set Java Script expressions as values of some properties. Click the circle
icon next to a property to open a context menu, and select \gui {Set Expression}.
\image qmldesigner-set-expression.png "Element properties context menu"
For more information on the Java Script environment provided by QML, see
\l{http://doc.qt.nokia.com/4.7-snapshot/qdeclarativejavascript.html}{Integrating JavaScript}.
\section2 Setting Anchors and Margins
The \gui Layout pane allows you to set anchors and margins for elements. To set
the anchors of an item, click the anchor buttons. You can combine the top/bottom
and left/right anchors to anchor objects in the corners of the parent element.
\inlineimage qmldesigner-anchor-buttons.png "Anchor buttons"
\section2 Building Transformations on Items
The \gui Advanced pane allows you configure advanced transformations, such as
rotation, scale, and translation. You can assign any number of transformations
to an item. Each transformation is applied in order, one at a time.
For more information on Transform elements, see
\l {http://doc.qt.nokia.com/4.7/qml-transform.html}{QML Transform Element}.
*/
......@@ -6285,10 +6333,6 @@
\endlist
To enable or disable the \QMLD visual editor, select
\gui {Help > About Plugins... > Qt Quick > QmlDesigner}. You must restart Qt Creator
to enable or disable the visual editor.
*/
......@@ -6540,6 +6584,9 @@
\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.
......@@ -6590,8 +6637,8 @@
\list a
\o In the \gui Size field, set the width (\gui W) of the button to 60
and the height of the button (\gui H) to 20.
\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.
......@@ -6708,8 +6755,6 @@
\o Drag and drop a \gui MouseArea to the screen.
\o Click \gui Design to return to the visual editor.
\o In the \gui Navigator pane, select \gui border_image1 to specify
settings for it in the \gui Properties pane:
......@@ -6811,17 +6856,15 @@
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.
\section1 Adding Components to Screens
\list 1
\o Select \gui {File > New File or Project > Qt Quick Project > Qt Quick UI}
or \gui {Qt Quick Application} to create a Qt Quick project.
\o Drag and drop components from the \gui Library pane to the editor.
The QML files in the project folder are displayed in \gui {QML Elements}.
\o Select components in the \gui Navigator pane to edit their properties
in the \gui Properties pane.
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment