diff --git a/doc/images/qmldesigner-anchor-buttons.png b/doc/images/qmldesigner-anchor-buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..077d83b3930b1b2e97353f6375660f825489b827
Binary files /dev/null and b/doc/images/qmldesigner-anchor-buttons.png differ
diff --git a/doc/images/qmldesigner-element-properties.png b/doc/images/qmldesigner-element-properties.png
new file mode 100644
index 0000000000000000000000000000000000000000..32f2166c6911f663f2bf99dc98b001c23e3a4e50
Binary files /dev/null and b/doc/images/qmldesigner-element-properties.png differ
diff --git a/doc/images/qmldesigner-qml-components.png b/doc/images/qmldesigner-qml-components.png
new file mode 100644
index 0000000000000000000000000000000000000000..231b1f3651d8ac09ef1444efa16e90561fce617a
Binary files /dev/null and b/doc/images/qmldesigner-qml-components.png differ
diff --git a/doc/images/qmldesigner-set-expression.png b/doc/images/qmldesigner-set-expression.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ba9bfe6ff87b3ce4705f488cc4d5ed48c111b53
Binary files /dev/null and b/doc/images/qmldesigner-set-expression.png differ
diff --git a/doc/images/qmldesigner-visual-editor.png b/doc/images/qmldesigner-visual-editor.png
index 5813c8302713d746b9ae5f30abd516e68b1335fb..02dc997edfa14b2285119c3e0902efdfb205504e 100644
Binary files a/doc/images/qmldesigner-visual-editor.png and b/doc/images/qmldesigner-visual-editor.png differ
diff --git a/doc/qtcreator.qdoc b/doc/qtcreator.qdoc
index 11b290e7211aae725c2aa4857d14e1ac9f991714..8dfd773e3b410a27ec92eda7e2557a1327a3a9b6 100644
--- a/doc/qtcreator.qdoc
+++ b/doc/qtcreator.qdoc
@@ -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.