feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: replace "element" with "QML type" or "item"

Browse Source 
Try to make terminology more consistent, by using
"QML type" when describing the types, "item" when
describing instances of QML types, and "component"
when describing objects built by using QML types.

Change-Id: Ie03f3a7e6f483471e344ae1f35bec0742173b27c
Reviewed-by: Jerome Pasion <jerome.pasion@digia.com>
Reviewed-by: Thomas Hartmann <Thomas.Hartmann@digia.com>
This commit is contained in:
Leena Miettinen
2013-03-13 11:39:36 +01:00
parent 8c97b21e2a
commit dd4bd99c89
18 changed files with 207 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
doc/src/analyze/qtquick-profiler.qdoc
View File

@@ -103,7 +103,7 @@
\li Compiling the QML sources \li Compiling the QML sources
\li Creating elements \li Creating items using QML types
\li Binding evaluations \li Binding evaluations

2
doc/src/debugger/qtquick-debugger-example.qdoc
View File

@@ -116,7 +116,7 @@
the \c text property to change it temporarily from \gui {Quit} to the \c text property to change it temporarily from \gui {Quit} to
\gui {End Game}. \gui {End Game}.
When you select an element, the cursor moves to it in the code When you select an item, the cursor moves to it in the code
editor, where you can change the value permanently. editor, where you can change the value permanently.
\endlist \endlist

26
doc/src/debugger/qtquick-debugging.qdoc
View File

@@ -172,29 +172,29 @@
\gui {Locals and Expressions} view, they are immediately updated in the running \gui {Locals and Expressions} view, they are immediately updated in the running
application, but not in the source code. application, but not in the source code.
\section1 Inspecting QML Objects \section1 Inspecting Items
While the application is running, you can use the While the application is running, you can use the
\gui {Locals and Expressions} view to explore the QML object structure. \gui {Locals and Expressions} view to explore the QML item structure.
\image qml-observer-view.png "QML object tree" \image qml-observer-view.png "QML item tree"
To keep the application visible while you interact with the debugger, click To keep the application visible while you interact with the debugger, click
\inlineimage qml-inspector-app-on-top.png \inlineimage qml-inspector-app-on-top.png
(\gui {Show Application on Top}). (\gui {Show Application on Top}).
You can view a QML element in \gui {Locals and Expressions} in the following You can view a QML item in \gui {Locals and Expressions} in the following
ways: ways:
\list \list
\li Expand the element in the object tree. \li Expand the item in the object tree.
\li Select the element in the code editor. \li Select the item in the code editor.
\li Click \li Click
\inlineimage qml-inspector-select-button.png \inlineimage qml-inspector-select-button.png
(\gui Select) to activate selection mode and then click an element (\gui Select) to activate selection mode and then click an item
in the running application. in the running application.
\endlist \endlist
@@ -206,16 +206,16 @@
\section1 Inspecting User Interfaces \section1 Inspecting User Interfaces
When you debug complex applications, you can jump to the position in code When you debug complex applications, you can jump to the position in code
where an element is defined or you can zoom into the user interface. where an item is defined or you can zoom into the user interface.
When the \gui Select tool is enabled, you can click elements in the running When the \gui Select tool is enabled, you can click items in the running
application to jump to their definitions in the code. The properties of the application to jump to their definitions in the code. The properties of the
selected element are displayed in the \gui {Locals and Expressions} view. selected item are displayed in the \gui {Locals and Expressions} view.
You can also right-click an element in the running application to view the You can also right-click an item in the running application to view the
element hierarchy as a context menu. item hierarchy as a context menu.
\image qml-observer-context-menu.png "QML element hierarchy" \image qml-observer-context-menu.png "QML item hierarchy"
To switch to the zoom mode, click the \gui Zoom button. Click in the To switch to the zoom mode, click the \gui Zoom button. Click in the
running application to zoom in. Right-click to open a context menu that running application to zoom in. Right-click to open a context menu that

26
doc/src/editors/creator-editors.qdoc
View File

@@ -507,12 +507,12 @@
\row \row
\li M204 \li M204
\li Warning \li Warning
\li This type is not supported in the Qt Quick Designer \li This QML type is not supported in the Qt Quick Designer
\li \li
\row \row
\li M205 \li M205
\li Warning \li Warning
\li Reference to parent item cannot be resolved correctly by the \li Reference to parent QML type cannot be resolved correctly by the
Qt Quick Designer Qt Quick Designer
\li \li
@@ -526,7 +526,7 @@
\row \row
\li M207 \li M207
\li Warning \li Warning
\li Qt Quick Designer only supports states in the root item \li Qt Quick Designer only supports states in the root QML type
\li \li
\row \row
@@ -761,7 +761,7 @@
\li A C++ code snippet \li A C++ code snippet
\row \row
\li \inlineimage completion/element.png \li \inlineimage completion/element.png
\li A QML element \li A QML type
\row \row
\li \inlineimage completion/qmlsnippet.png \li \inlineimage completion/qmlsnippet.png
\li A QML code snippet \li A QML code snippet
@@ -1492,7 +1492,7 @@
To apply refactoring actions to C++ code, right-click an operand, To apply refactoring actions to C++ code, right-click an operand,
conditional statement, string, or name to open a context menu. In QML code, conditional statement, string, or name to open a context menu. In QML code,
click an element ID or name. click an item ID or name.
In the context menu, select \gui {Refactoring} and then select a refactoring In the context menu, select \gui {Refactoring} and then select a refactoring
action. action.
@@ -1877,7 +1877,7 @@
\li Split initializers \li Split initializers
\li Move a QML element into a separate file to reuse it in other \li Move a QML type into a separate file to reuse it in other
.qml files .qml files
\endlist \endlist
@@ -1894,11 +1894,11 @@
\row \row
\li Move Component into 'filename.qml' \li Move Component into 'filename.qml'
\li Moves a QML element into a separate file \li Moves a QML type into a separate file
\li Element name \li QML type name
\row \row
\li Split Initializer \li Split Initializer
\li Reformats a one-line element into a multi-line element. For example, \li Reformats a one-line type into a multi-line type. For example,
rewrites rewrites
\code \code
Item { x: 10; y: 20; width: 10 } Item { x: 10; y: 20; width: 10 }
@@ -1913,12 +1913,12 @@
width: 10 width: 10
} }
\endcode \endcode
\li Element property \li QML type property
\row \row
\li Wrap in Loader \li Wrap in Loader
\li Wraps the element in a Component element and loads it dynamically in \li Wraps the type in a Component type and loads it dynamically in
a Loader element. This is usually done to improve startup time. a Loader type. This is usually done to improve startup time.
\li Element name \li QML type name
\row \row
\li Add a message suppression comment \li Add a message suppression comment
\li Prepends the line with an annotation comment that stops the message \li Prepends the line with an annotation comment that stops the message

8
doc/src/howto/creator-ui.qdoc
View File

@@ -127,7 +127,7 @@
\li \gui {Class View} shows the class hierarchy of the currently \li \gui {Class View} shows the class hierarchy of the currently
open projects. open projects.
\li \gui Outline shows the symbol hierarchy of a C++ file and the element \li \gui Outline shows the symbol hierarchy of a C++ file and the type
hierarchy of a QML file. hierarchy of a QML file.
\li \gui {Type Hierarchy} shows the base classes of a class. \li \gui {Type Hierarchy} shows the base classes of a class.
@@ -209,16 +209,16 @@
\inlineimage qtcreator-show-subprojects.png \inlineimage qtcreator-show-subprojects.png
(\gui {Show Subprojects}). (\gui {Show Subprojects}).
\section2 Viewing QML Elements \section2 Viewing QML Types
The \gui Outline view shows the element hierarchy in a QML file. The \gui Outline view shows the type hierarchy in a QML file.
\list \list
\li To see a complete list of all bindings, select \gui {Filter Tree > \li To see a complete list of all bindings, select \gui {Filter Tree >
Show All Bindings}. Show All Bindings}.
\li To keep the position in the view synchronized with the element \li To keep the position in the view synchronized with the QML type
selected in the editor, select \gui {Synchronize with Editor}. selected in the editor, select \gui {Synchronize with Editor}.
\endlist \endlist

2
doc/src/overview/creator-glossary.qdoc
View File

@@ -69,7 +69,7 @@
Button component to create Button objects. Alternatively, a Button component to create Button objects. Alternatively, a
component may be defined inside a component may be defined inside a
\l{http://qt-project.org/doc/qt-5.0/qtqml/qml-qtquick2-component.html} \l{http://qt-project.org/doc/qt-5.0/qtqml/qml-qtquick2-component.html}
{Component} element. {Component} QML type.
\row \row
\li Deploy configuration \li Deploy configuration

6
doc/src/projects/creator-projects-creating.qdoc
View File

@@ -112,9 +112,9 @@
Qt 4.6.x Qt 4.6.x
\endif \endif
\li Qt Quick Application (Built-in Elements) \li Qt Quick Application (Built-in Types)
Use built-in QML elements to design user interfaces based on Use built-in QML types to design user interfaces based on
Qt Quick 1 (Qt 4.7.1, or later) or Qt Quick 2 (Qt 5) with a Qt Quick 1 (Qt 4.7.1, or later) or Qt Quick 2 (Qt 5) with a
custom look and feel and QML and C++ code to implement the custom look and feel and QML and C++ code to implement the
application logic application logic
@@ -279,7 +279,7 @@
\li Qt resource files, which allow you to store binary files in the \li Qt resource files, which allow you to store binary files in the
application executable application executable
\li QML files, which specify elements in Qt Quick projects. \li QML files, which specify items in Qt Quick projects.
\gui {Qt Quick 1} creates a QML file that imports Qt Quick 1.1 and \gui {Qt Quick 1} creates a QML file that imports Qt Quick 1.1 and
\gui {Qt Quick 2} creates a QML file that imports Qt Quick 2.0. \gui {Qt Quick 2} creates a QML file that imports Qt Quick 2.0.
Select \gui {Qt Quick 1} to add files to a Qt Quick 1 application Select \gui {Qt Quick 1} to add files to a Qt Quick 1 application

22
doc/src/qtquick/qtquick-app-tutorial.qdoc
View File

@@ -30,7 +30,7 @@
\title Creating a Qt Quick Application \title Creating a Qt Quick Application
This tutorial uses built-in QML elements and illustrates basic concepts of This tutorial uses built-in QML types and illustrates basic concepts of
\l {http://qt-project.org/doc/qt-5.0/qtquick/qtquick-index.html}{Qt Quick}. \l {http://qt-project.org/doc/qt-5.0/qtquick/qtquick-index.html}{Qt Quick}.
This tutorial describes how to use \QC to implement Qt states and transitions. We use This tutorial describes how to use \QC to implement Qt states and transitions. We use
@@ -48,11 +48,11 @@
\list 1 \list 1
\li Select \gui{File > New File or Project > Applications > \li Select \gui{File > New File or Project > Applications >
Qt Quick 2 Application (Built-in Elements) > Choose}. Qt Quick 2 Application (Built-in Types) > Choose}.
\note The QML types used in this example are also supported in Qt Quick 1. To create \note The QML types used in this example are also supported in Qt Quick 1. To create
this example application for platforms that run Qt 4, select \gui {Qt Quick 1 this example application for platforms that run Qt 4, select \gui {Qt Quick 1
Application (Built-in Elements)}. Application (Built-in Types)}.
\li In the \gui{Name} field, type \b {Transitions}. \li In the \gui{Name} field, type \b {Transitions}.
@@ -91,7 +91,7 @@
directory in the Qt installation directory. For example: directory in the Qt installation directory. For example:
\c {C:\Qt\Qt5.0.1\5.0.1\msvc2010\examples\declarative\animation\states}. The image appears \c {C:\Qt\Qt5.0.1\5.0.1\msvc2010\examples\declarative\animation\states}. The image appears
in the \gui Resources pane. You can also use any other image or a QML in the \gui Resources pane. You can also use any other image or a QML
element, instead. type, instead.
\list 1 \list 1
@@ -132,7 +132,7 @@
\endlist \endlist
\li In the \gui Library view, \gui Items tab, select \gui Rectangle, \li In the \gui Library view, \gui {QML Types} tab, select \gui Rectangle,
drag and drop it to the canvas, and edit its properties. drag and drop it to the canvas, and edit its properties.
\image qmldesigner-tutorial-topleftrect.png "Rectangle properties" \image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
@@ -174,10 +174,10 @@
\endlist \endlist
\li In the \gui Navigator pane, drag and drop the \gui {Mouse Area} \li In the \gui Navigator pane, drag and drop the \gui {Mouse Area}
element from \e page to \e topLeftRect to make it apply only to the from \e page to \e topLeftRect to make it apply only to the
rectangle and not to the whole page. rectangle and not to the whole page.
\li Edit \gui {Mouse Area} properties: \li Edit the \gui {Mouse Area} properties:
\list a \list a
@@ -187,7 +187,7 @@
rectangle. rectangle.
\li In the code editor, edit the pointer to the clicked expression \li In the code editor, edit the pointer to the clicked expression
in the mouse area element, as illustrated by the following code in the mouse area, as illustrated by the following code
snippet: snippet:
\qml \qml
@@ -208,7 +208,7 @@
\li In the \gui Navigator pane, copy topLeftRect (by pressing \li In the \gui Navigator pane, copy topLeftRect (by pressing
\key {Ctrl+C}) and paste it to the canvas twice (by pressing \key {Ctrl+C}) and paste it to the canvas twice (by pressing
\key {Ctrl+V}). \QC renames the new instances of the element \key {Ctrl+V}). \QC renames the new instances of the type
topLeftRect1 and topLeftRect2. topLeftRect1 and topLeftRect2.
\li Select topLeftRect1 and edit its properties: \li Select topLeftRect1 and edit its properties:
@@ -225,7 +225,7 @@
for the vertical center anchor. for the vertical center anchor.
\li In the code editor,add a pointer to a clicked expression to the \li In the code editor,add a pointer to a clicked expression to the
mouse area element. The following expression sets the state to mouse area. The following expression sets the state to
\e State1: \e State1:
\c {onClicked: page.state = 'State1'} \c {onClicked: page.state = 'State1'}
@@ -247,7 +247,7 @@
for the left anchor. for the left anchor.
\li In the code editor, add a pointer to a clicked expression to the \li In the code editor, add a pointer to a clicked expression to the
mouse area element. The following expression sets the state to mouse area. The following expression sets the state to
\e State2: \e State2:
\c {onClicked: page.state = 'State2'} \c {onClicked: page.state = 'State2'}

14
doc/src/qtquick/qtquick-buttons.qdoc
View File

@@ -60,8 +60,8 @@
\endlist \endlist
\li Drag and drop a \gui {Text} item on top of the \gui Rectangle. This \li 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 creates a nested item where \gui Rectangle is the parent item
of \gui Text. Elements are positioned relative to their parents. of \gui Text. Items are positioned relative to their parents.
\li In the \gui Properties pane, edit the properties of the \gui Text \li In the \gui Properties pane, edit the properties of the \gui Text
item. item.
@@ -92,7 +92,7 @@
To create a graphical button that scales beautifully without using vector To create a graphical button that scales beautifully without using vector
graphics, use the \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-borderimage.html} graphics, use the \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-borderimage.html}
{Border Image} element. For more information, see {Border Image} type. For more information, see
\l{Creating Scalable Buttons and Borders}. \l{Creating Scalable Buttons and Borders}.
*/ */
@@ -109,11 +109,11 @@
You can use the You can use the
\l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-borderimage.html} \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-borderimage.html}
{Border Image} element to display an image, such as a PNG file, as a border {Border Image} type to display an image, such as a PNG file, as a border
and a background. and a background.
Use two Border Image elements and suitable graphics to make it look like the Use two Border Image items and suitable graphics to make it look like the
button is pushed down when it is clicked. One of the Border Image elements button is pushed down when it is clicked. One of the Border Image items
is visible by default. You can specify that it is hidden and the other one is visible by default. You can specify that it is hidden and the other one
becomes visible when the mouse is clicked. becomes visible when the mouse is clicked.
@@ -250,7 +250,7 @@
\endlist \endlist
\li In the code editor, add to the \c MouseArea item a pointer to the \li In the code editor, add to the \c MouseArea a pointer to the
\c clicked expression that you added earlier: \c clicked expression that you added earlier:
\c {onClicked: parent.clicked()}. \c {onClicked: parent.clicked()}.

16
doc/src/qtquick/qtquick-components.qdoc
View File

@@ -31,13 +31,13 @@
\title Creating Components \title Creating Components
A \l{glossary-component}{component} provides a way of defining a new type A \l{glossary-component}{component} provides a way of defining a new visual item
that you can re-use in other QML files. A component is like a black box; it 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 interacts with the outside world through properties, signals, and slots, and
is generally defined in its own QML file. You can import components to is generally defined in its own QML file. You can import components to
screens and applications. screens and applications.
You can use the following QML elements to create components: You can use the following QML types to create components:
\list \list
@@ -49,9 +49,9 @@
adds a bitmap to the scene. You can stretch and tile images. adds a bitmap to the scene. You can stretch and tile images.
\li \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-item.html}{Item} \li \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-item.html}{Item}
is the most basic of all visual items in QML. Even though it has no is the most basic of all visual types in QML. Even though it has no
visual appearance, it defines all the properties that are common visual appearance, it defines all the properties that are common
across visual items, such as the x and y position, width and height, across visual types, such as the x and y position, width and height,
anchoring, and key handling. anchoring, and key handling.
\li \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-rectangle.html}{Rectangle} \li \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-rectangle.html}{Rectangle}
@@ -73,7 +73,7 @@
\endlist \endlist
QML elements allow you to write cross-platform applications with custom look QML types allow you to write cross-platform applications with custom look
and feel. You can also use ready-made Qt Quick Components that enable you to and feel. You can also use ready-made Qt Quick Components that enable you to
create applications with a native look and feel for a particular target create applications with a native look and feel for a particular target
platform. You can install the components as part of the Qt 4 SDK. platform. You can install the components as part of the Qt 4 SDK.
@@ -97,11 +97,11 @@
\li Click \gui Design to open the .qml file in \QMLD. \li Click \gui Design to open the .qml file in \QMLD.
\li Drag and drop an item from the \gui Library pane to the editor. \li Drag and drop a QML type from the \gui Library pane to the editor.
\li Edit item properties in the \gui Properties pane. \li Edit its properties in the \gui Properties pane.
The available properties depend on the item. The available properties depend on the QML type.
\endlist \endlist

13
doc/src/qtquick/qtquick-creating.qdoc
View File

@@ -43,9 +43,9 @@
QDeclarativeView. You can build the application and deploy it to QDeclarativeView. You can build the application and deploy it to
desktop and mobile target platforms. desktop and mobile target platforms.
You can select a template that uses either the built-in QML elements You can select a template that uses either the built-in QML types
or Qt Quick components for a particular platform. The built-in QML or Qt Quick components for a particular platform. The built-in QML
elements enable you to create cross-platform applications with a types enable you to create cross-platform applications with a
custom look and feel, whereas the components provide the look and custom look and feel, whereas the components provide the look and
feel for a particular platform. feel for a particular platform.
@@ -91,14 +91,14 @@
files in the project folder belong to the project. Therefore, you do files in the project folder belong to the project. Therefore, you do
not need to individually list all the files in the project. not need to individually list all the files in the project.
\li .qml file defines an element, such as a component, screen, or the \li .qml file defines an UI item, such as a component, screen, or the
whole application UI. whole application UI.
\endlist \endlist
The \c import statement in the beginning of the .qml file specifies the Qt modules to The \c import statement in the beginning of the .qml file specifies the Qt modules to
\l{http://qt-project.org/doc/qt-5.0/qtqml/qtqml-syntax-imports.html}{import}. Each Qt module \l{http://qt-project.org/doc/qt-5.0/qtqml/qtqml-syntax-imports.html}{import}. Each Qt module
contains a set of default elements. Specify a version to get the features you want. contains a set of default QML types. Specify a version to get the features you want.
To use JavaScript and image files in the application, copy them to the To use JavaScript and image files in the application, copy them to the
project folder. project folder.
@@ -106,9 +106,8 @@
\section1 Creating Qt Quick Applications \section1 Creating Qt Quick Applications
Select \gui File > \gui {New File or Project} > \gui Applications > Select \gui File > \gui {New File or Project} > \gui Applications >
\gui {Qt Quick Application 1 (Built-in Elements)} or \gui {Qt Quick \gui {Qt Quick Application 1 (Built-in Types)} or \gui {Qt Quick Application 2 (Built-in Types)}
Application 2 (Built-in Elements)} > \gui Choose, and follow the > \gui Choose, and follow the instructions of the wizard.
instructions of the wizard.
\note The SDK for a particular target platform might install additional \note The SDK for a particular target platform might install additional
templates for that platform. For example, the \gui {Qt Quick Application for templates for that platform. For example, the \gui {Qt Quick Application for

200
doc/src/qtquick/qtquick-designer.qdoc
View File

@@ -51,64 +51,60 @@
\list \list
\li \gui {Navigator} pane (1) displays the QML elements in the current QML \li \gui {Navigator} pane (1) displays the items in the current QML
file as tree structure. file as tree structure.
\li \gui {Library} pane (2) displays the building blocks that you can use to \li \gui {Library} pane (2) displays the building blocks that you can use to
design applications: predefined QML elements, your own QML design applications: predefined QML types, your own QML
components, Qt Quick components that you import to the project, and components, Qt Quick components that you import to the project, and
other resources. other resources.
\li \gui Canvas (3) is the working area where you create QML components and \li \gui Canvas (3) is the working area where you create QML components and
design applications. design applications.
\li \gui {Properties} pane (4) organizes the properties of the selected QML \li \gui {Properties} pane (4) organizes the properties of the selected item.
element or QML component. You can change the properties also in the You can change the properties also in the code editor.
code editor.
\li \gui {State} pane (5) displays the different states of the component. \li \gui {State} pane (5) displays the different states of the item.
QML states typically describe user interface configurations, such as QML states typically describe user interface configurations, such as
the UI elements, their properties and behavior and the available the UI controls, their properties and behavior and the available
actions. actions.
\endlist \endlist
\section1 Managing Element Hierarchy \section1 Managing Item Hierarchy
The \gui Navigator pane displays the The \gui Navigator pane displays the items in the current QML file and their relationships.
\l{http://qt-project.org/doc/qt-5.0/qtquick/qtquick-qmltypereference.html}{Qt Quick QML types} Items (1) are listed in a tree structure, below their parent (2).
in the current QML file and their relationships. QML types (1) are listed in a
tree structure, below their parent (2).
\image qmldesigner-navigator.png "Navigator pane" \image qmldesigner-navigator.png "Navigator pane"
You can select elements in the \gui Navigator to edit their properties You can select items in the \gui Navigator to edit their properties
in the \gui Properties pane. Elements can access the properties of their in the \gui Properties pane. Items can access the properties of their
parent element. To select elements on the canvas, right-click an element, parent item. To select items on the canvas, right-click an item,
and select another element in the context menu. and select another type in the context menu.
Typically, child elements are located within the parent element on the Typically, child items are located within the parent item on the
canvas. However, they do not necessarily have to fit inside the parent 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 item. For example, you might want to make a mouse area larger than the
rectangle or image beneath it (1). rectangle or image beneath it (1).
\image qmldesigner-element-size.png "Mouse area for a button" \image qmldesigner-element-size.png "Mouse area for a button"
When you copy an element, all its child elements are also copied. When When you copy an item, all its child items are also copied. When
you remove an element, the child elements are also removed. you remove an item, the child items are also removed.
You can show and hide items to focus on specific parts of the application. You can show and hide items to focus on specific parts of the application.
Click the Click the
\inlineimage qmldesigner-show-hide-icon.png \inlineimage qmldesigner-show-hide-icon.png
icon to change the visibility of an element on the canvas. To change the icon to change the visibility of an item on the canvas. To change the
visibility of an element in the application, use the \gui Visibility visibility of an item in the application, use the \gui Visibility
check box or the \gui Opacity field in the \gui Properties pane. If you set 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 \gui Opacity to 0, items are hidden, but you can still apply animation
to them. to them.
As all properties, visibility and opacity are inherited from the parent As all properties, visibility and opacity are inherited from the parent
element. To hide or show child elements, edit the properties of the item. To hide or show child items, edit the properties of the parent item.
parent element.
To view lists of files or projects, instead, select \gui {File System}, To view lists of files or projects, instead, select \gui {File System},
\gui {Open Documents}, or \gui Projects in the menu. \gui {Open Documents}, or \gui Projects in the menu.
@@ -118,10 +114,10 @@
\section2 Setting the Stacking Order \section2 Setting the Stacking Order
The \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-item.html#z-prop}{z property} of a The \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-item.html#z-prop}{z property} of an
QML type determines its position in relation to its sibling types in the item determines its position in relation to its sibling items in the
type hierarchy. By default, types with a higher stacking value are type hierarchy. By default, items with a higher stacking value are
drawn on top of siblings with a lower stacking value. Types with the same drawn on top of siblings with a lower stacking value. Items with the same
stacking value are drawn in the order they are listed, from the last item stacking value are drawn in the order they are listed, from the last item
up. up.
@@ -130,32 +126,32 @@
or move the item to the front or back of all its siblings. To remove the or move the item to the front or back of all its siblings. To remove the
\c z property, select \gui {Reset z Property}. \c z property, select \gui {Reset z Property}.
\section2 Switching Parent Elements \section2 Switching Parent Items
When you drag and drop QML elements to the canvas, Qt Quick Designer When you drag and drop instances of QML types to the canvas, Qt Quick Designer
adds the new element as a child of the element beneath it. adds the new item as a child of the item beneath it.
When you move elements on the canvas, Qt Quick Designer cannot determine When you move items on the canvas, Qt Quick Designer cannot determine
whether you want to adjust their position or attach them to a new whether you want to adjust their position or attach them to a new
parent element. Therefore, the parent element is not automatically parent item. Therefore, the parent item is not automatically
changed. To change the parent of the element, press down the \key Shift changed. To change the parent of the item, press down the \key Shift
key before you drag and drop the element into a new position. The topmost key before you drag and drop the item into a new position. The topmost
element under the cursor becomes the new parent of the element. item under the cursor becomes the new parent of the item.
You can change the parent of an element also in the \gui Navigator pane. You can change the parent of an item also in the \gui Navigator pane.
Drag and drop the element to another position in the tree or use the arrow Drag and drop the item to another position in the tree or use the arrow
buttons (1) to move the element in the tree. buttons (1) to move the item in the tree.
\image qmldesigner-navigator-arrows.png "Navigator arrow buttons" \image qmldesigner-navigator-arrows.png "Navigator arrow buttons"
\section1 Element Library \section1 QML Type Library
The \gui {Library} pane contains two tabs: \gui {Items} and \gui {Resources}. The \gui {Library} pane contains two tabs: \gui {QML Types} and \gui {Resources}.
The \gui Items pane displays the QML elements grouped by type: your own QML The \gui {QML Types} pane displays the QML types grouped by category: your own QML
components, basic elements, positioner elements, and views. components, basic types, positioner types, and views.
Sets of UI components with the look and feel of a particular mobile device Sets of UI components with the look and feel of a particular mobile device
platform have been defined for Qt Quick. They are based on standard QML platform have been defined for Qt Quick. They are based on standard QML
elements. To view the UI components in the \gui {Library} pane, add import types. To view the UI components in the \gui {Library} pane, add import
statements to the .pro file of your project. For example: statements to the .pro file of your project. For example:
\list \list
@@ -172,25 +168,25 @@
The \gui {Resources} pane displays the images and other files that you copy The \gui {Resources} pane displays the images and other files that you copy
to the project folder (to the same subfolder as the QML files). to the project folder (to the same subfolder as the QML files).
\section1 Specifying Element Properties \section1 Specifying Item Properties
The \gui Properties pane displays all the properties of the selected QML The \gui Properties pane displays all the properties of the selected item.
element. The properties are grouped by type. The top part of the pane The properties are grouped by type. The top part of the pane
displays properties that are common to all elements, such as element type, displays properties that are common to all QML types, such as
position, size, and visibility. position, size, and visibility.
The bottom part of the pane displays properties that are specific to each The bottom part of the pane displays properties that are specific to each
element type. For example, the following image displays the properties you QML type. For example, the following image displays the properties you
can set for \gui Rectangle (1) and \gui Text (2) elements. can set for \gui Rectangle (1) and \gui Text (2) items.
\image qmldesigner-element-properties.png \image qmldesigner-element-properties.png
You can use a context-menu to reset some element properties. To reset the You can use a context-menu to reset some item properties. To reset the
position or size property of an element, right-click the element and select position or size property of an item, right-click the item and select
\gui {Edit > Reset Position} or \gui {Reset Size} in the context menu. To \gui {Edit > Reset Position} or \gui {Reset Size} in the context menu. To
set the visibility of the component, select \gui {Edit > Visibility}. set the visibility of the item, select \gui {Edit > Visibility}.
For more information on the properties available for an element, press For more information on the properties available for an item, press
\key {F1}. \key {F1}.
\section2 Viewing Changes in Properties \section2 Viewing Changes in Properties
@@ -200,7 +196,7 @@
addition, property changes in states are highlighted with blue. addition, property changes in states are highlighted with blue.
This allows you to easily see which values are set in the .qml file and This allows you to easily see which values are set in the .qml file and
which values are default characteristics of an element or a component. which values are default characteristics of a QML type or a component.
When editing states, you can easily see which values are explicitly set in When editing states, you can easily see which values are explicitly set in
the current state and which values are derived from the base state. the current state and which values are derived from the base state.
@@ -226,21 +222,21 @@
\row \row
\li \image qmldesigner-boolean-true.png \li \image qmldesigner-boolean-true.png
\li TRUE \li TRUE
\li The element is visible by default. The visibility might be \li The QML type is visible by default. The visibility might be
overridden by the visibility set in the base state. overridden by the visibility set in the base state.
\row \row
\li \image qmldesigner-boolean-true-blue.png \li \image qmldesigner-boolean-true-blue.png
\li TRUE (highlighted) \li TRUE (highlighted)
\li The element is explicitly set to visible. \li The QML type is explicitly set to visible.
\row \row
\li \image qmldesigner-boolean-false.png \li \image qmldesigner-boolean-false.png
\li FALSE \li FALSE
\li The element is hidden by default. The visibility might be \li The QML type is hidden by default. The visibility might be
overridden by the visibility set in the base state. overridden by the visibility set in the base state.
\row \row
\li \image qmldesigner-boolean-false-blue.png \li \image qmldesigner-boolean-false-blue.png
\li FALSE (hightlighted) \li FALSE (hightlighted)
\li The item is explicitly set to hidden. \li The type is explicitly set to hidden.
\endtable \endtable
\section2 Setting Expressions \section2 Setting Expressions
@@ -258,7 +254,7 @@
properties in \QMLD, click the circle icon next to a property to open a properties in \QMLD, click the circle icon next to a property to open a
context menu, and select \gui {Set Expression}. context menu, and select \gui {Set Expression}.
\image qmldesigner-set-expression.png "Element properties context menu" \image qmldesigner-set-expression.png "Type properties context menu"
To remove expressions, select \gui Reset in the context menu. To remove expressions, select \gui Reset in the context menu.
@@ -266,9 +262,9 @@
\l{http://qt-project.org/doc/qt-5.0/qtqml/qtqml-javascript-topic.html} \l{http://qt-project.org/doc/qt-5.0/qtqml/qtqml-javascript-topic.html}
{Integrating QML and JavaScript}. {Integrating QML and JavaScript}.
\section2 Marking Text Elements for Translation \section2 Marking Text Items for Translation
To support translators, mark each text element that should be translated. To support translators, mark each text item that should be translated.
In the \gui Properties pane, \gui Text field, select \gui tr (1). In the \gui Properties pane, \gui Text field, select \gui tr (1).
\image qmldesigner-text-property-tr.png "Text properties" \image qmldesigner-text-property-tr.png "Text properties"
@@ -280,13 +276,13 @@
\section2 Loading Placeholder Data \section2 Loading Placeholder Data
\QMLD supports views, models, and delegates, so that when you add a Grid \QMLD supports views, models, and delegates, so that when you add a Grid
View, List View, or Path View element, the ListModel and the delegate View, List View, or Path View item, the ListModel and the delegate
component are added automatically. item are added automatically.
However, the missing context of the application presents a challenge for However, the missing context of the application presents a challenge for
\QMLD. Specific models defined in C++ are the most obvious case. Often, \QMLD. Specific models defined in C++ are the most obvious case. Often,
the context is missing simple properties, which are either defined in C++, the context is missing simple properties, which are either defined in C++,
or in other QML files. A typical example is a component which uses the or in other QML files. A typical example is an item that uses the
properties of its parent, such as \c parent.width. properties of its parent, such as \c parent.width.
\section3 Using Dummy Models \section3 Using Dummy Models
@@ -372,33 +368,33 @@
set of invisible \e anchor lines: top, bottom, left, right, fill, horizontal set of invisible \e anchor lines: top, bottom, left, right, fill, horizontal
center, vertical center, and baseline. center, vertical center, and baseline.
In the \gui Layout pane you can set anchors and margins for elements. To set In the \gui Layout pane you can set anchors and margins for items. To set
the anchors of an item, click the anchor buttons. You can combine the 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 top/bottom, left/right, and horizontal/vertical anchors to anchor items in
the corners of the parent element or center them horizontally or vertically the corners of the parent item or center them horizontally or vertically
within the parent element. within the parent item.
\image qmldesigner-anchor-buttons.png "Anchor buttons" \image qmldesigner-anchor-buttons.png "Anchor buttons"
In version 2.1, specifying the baseline anchor in Qt Quick Designer is Specifying the baseline anchor in Qt Quick Designer is
not supported. You can specify it using the code editor. not supported. You can specify it using the code editor.
For performance reasons, you can only anchor an element to its siblings and For performance reasons, you can only anchor an item to its siblings and
direct parent. By default, an element is anchored to its parent when you direct parent. By default, an item is anchored to its parent when you
use the anchor buttons. Select a sibling of the element in the \gui Target use the anchor buttons. Select a sibling of the item in the \gui Target
field to anchor to it, instead. field to anchor to it, instead.
Arbitrary anchoring is not supported. For example, you cannot specify: Arbitrary anchoring is not supported. For example, you cannot specify:
\c {anchor.left: parent.right}. You have to specify: \c {anchor.left: parent.left}. \c {anchor.left: parent.right}. You have to specify: \c {anchor.left: parent.left}.
When you use the anchor buttons, anchors to the parent element are always When you use the anchor buttons, anchors to the parent item are always
specified to the same side. However, anchors to sibling elements are specified specified to the same side. However, anchors to sibling items are specified
to the opposite side: \c {anchor.left: sibling.right}. This allows you to keep to the opposite side: \c {anchor.left: sibling.right}. This allows you to keep
sibling elements together. sibling items together.
In the following image, \gui{Rectangle 2} is anchored to \gui{Rectangle 1} In the following image, \gui{Rectangle 2} is anchored to \gui{Rectangle 1}
on its left and to the bottom of its parent. on its left and to the bottom of its parent.
\image qmldesigner-anchors.png "Anchoring sibling elements" \image qmldesigner-anchors.png "Anchoring sibling items"
The anchors for \gui{Rectangle 2} are specified as follows in code: The anchors for \gui{Rectangle 2} are specified as follows in code:
@@ -435,7 +431,7 @@
such that the interface could be seen to be internally changing from one such that the interface could be seen to be internally changing from one
\e state to another. \e state to another.
This applies generally to interface elements regardless of their complexity. This applies generally to interfaces regardless of their complexity.
A photo viewer may initially present images in a grid, and when an image is A photo viewer may initially present images in a grid, and when an image is
clicked, change to a detailed state where the individual image is expanded clicked, change to a detailed state where the individual image is expanded
and the interface is changed to present new options for image editing. and the interface is changed to present new options for image editing.
@@ -443,13 +439,13 @@
to a \e pressed state in which its color and position is modified to give a to a \e pressed state in which its color and position is modified to give a
pressed appearance. pressed appearance.
In QML, any object can change between different states to apply sets of In QML, any item can change between different states to apply sets of
changes that modify the properties of relevant items. Each state can present changes that modify the properties of relevant items. Each state can present
a different configuration that can, for example: a different configuration that can, for example:
\list \list
\li Show some UI elements and hide others. \li Show some UI items and hide others.
\li Present different available actions to the user. \li Present different available actions to the user.
@@ -485,58 +481,58 @@
For more information on adding animation, see \l{Animating Screens}. For more information on adding animation, see \l{Animating Screens}.
\section1 Aligning and Positioning Elements \section1 Aligning and Positioning QML Types
The position of an element on the canvas can be either absolute or relative The position of an item on the canvas can be either absolute or relative
to other elements. In the element properties, you can set the x and y to other items. In the item properties, you can set the x and y
coordinates of an element, or \l{Setting Anchors and Margins}{anchor} it to coordinates of an item, or \l{Setting Anchors and Margins}{anchor} it to
its parent and sibling elements. its parent and sibling items.
\section2 Snap to Margins \section2 Snap to Margins
When you are working on a design, you can use snap and guides to align When you are working on a design, you can use snap and guides to align
elements on the canvas. Click the items on the canvas. Click the
\inlineimage qmldesigner-snap-to-guides-button.png \inlineimage qmldesigner-snap-to-guides-button.png
button to have the elements snap to the guides. button to have the items snap to the guides.
Choose \gui {Tools > Options > Qt Quick > Qt Quick Designer} to specify Choose \gui {Tools > Options > Qt Quick > Qt Quick Designer} to specify
settings for snap to settings for snap to
margins. In the \gui {Snap margin} field, specify the position of the guides margins. In the \gui {Snap margin} field, specify the position of the guides
as pixels from the edge of the canvas. In the \gui {Item spacing} field, as pixels from the edge of the canvas. In the \gui {Item spacing} field,
specify the space in pixels to leave between elements on the screen. specify the space in pixels to leave between items on the screen.
The following image shows the position of the guides when \gui {Snap margin} The following image shows the position of the guides when \gui {Snap margin}
is set to 5 pixels. is set to 5 pixels.
\image qmldesigner-snap-margins.png "Snap margins on canvas" \image qmldesigner-snap-margins.png "Snap margins on canvas"
\section2 Hiding Element Boundaries \section2 Hiding Item Boundaries
Qt Quick Designer displays the boundaries of elements on the canvas. To hide Qt Quick Designer displays the boundaries of items on the canvas. To hide
the element boundaries, click the the boundaries, click the
\inlineimage qmldesigner-show-bounding-rectangles-button.png \inlineimage qmldesigner-show-bounding-rectangles-button.png
button. button.
\section2 Selecting Elements \section2 Selecting Items
When you point the mouse to overlapping elements, the frontmost element is When you point the mouse to overlapping items, the frontmost item is
selected by default. However, elements that do not have any content, such as selected by default. However, items that do not have any content, such as
the mouse area, are typically located in front of elements that do have the mouse area, are typically located in front of items that do have
content, such as rectangles or border images. To select elements with content content, such as rectangles or border images. To select items with content
by default, click the by default, click the
\inlineimage qmldesigner-only-select-items-with-content.png \inlineimage qmldesigner-only-select-items-with-content.png
button. button.
\section2 Previewing Element Size \section2 Previewing Component Size
The width and height of the root item in a QML file determine the size of The width and height of the root item in a QML file determine the size of
the QML element. You can reuse elements, such as buttons, in different the component. You can reuse component, such as buttons, in different
sizes in other QML files and design screens for use with different device sizes in other QML files and design screens for use with different device
profiles, screen resolution, or screen orientation. The component size profiles, screen resolution, or screen orientation. The component size
might also be zero (0,0) if its final size is determined by property might also be zero (0,0) if its final size is determined by property
bindings. bindings.
To experiment with different element sizes, enter values in the To experiment with different component sizes, enter values in the
\gui Height and \gui Width fields (1) on the canvas toolbar. The changes are \gui Height and \gui Width fields (1) on the canvas toolbar. The changes are
displayed in the \gui States pane (2) and on the canvas (3), but the property displayed in the \gui States pane (2) and on the canvas (3), but the property
values are not changed permanently in the QML file. You can permanently values are not changed permanently in the QML file. You can permanently
@@ -552,8 +548,8 @@
\section1 Refreshing the Canvas \section1 Refreshing the Canvas
When you open QML files in \QMLD, the QML elements in the file are drawn on When you open QML files in \QMLD, the items in the file are drawn on
the canvas. When you edit the element properties in \QMLD, the QML file and the canvas. When you edit the item properties in \QMLD, the QML file and
the image on the canvas might get out of sync. For example, when you change the image on the canvas might get out of sync. For example, when you change
the position of an item within a column or a row, the new position might the position of an item within a column or a row, the new position might
not be displayed correctly on the canvas. not be displayed correctly on the canvas.

24
doc/src/qtquick/qtquick-exporting-qml.qdoc
View File

@@ -33,8 +33,8 @@
You can export designs from graphics software, such as Adobe Photoshop and 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 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. Image or a Text item for each layer and saved on the development PC.
Top-level layer groups are converted into merged QML Image elements. Top-level layer groups are converted into merged QML Image types.
\note GIMP does not support grouping, and therefore, each layer is exported \note GIMP does not support grouping, and therefore, each layer is exported
as an item in GIMP. as an item in GIMP.
@@ -54,16 +54,16 @@
\list \list
\li Layer names are used as element names. Spaces and hash marks (#) are \li Layer names are used as item names. Spaces and hash marks (#) are
replaced with underscore characters to create valid ids for the replaced with underscore characters to create valid ids for the
elements. items.
\li Layer styles, such as drop shadows, are converted to images. \li Layer styles, such as drop shadows, are converted to images.
\li Offset, size, ordering and opacity are preserved. \li Offset, size, ordering and opacity are preserved.
\li Text layers are converted to Text elements, unless you specify that \li Text layers are converted to Text items, unless you specify that
they be converted to Image elements. they be converted to Image items.
\li Hidden layers can be exported, and their visibility is set to \li Hidden layers can be exported, and their visibility is set to
hidden. hidden.
@@ -79,12 +79,12 @@
\list \list
\li To minimize the number of elements, minimize the number of layers or \li To minimize the number of items, minimize the number of layers or
use top-level layer groups, because each layer or layer group is use top-level layer groups, because each layer or layer group is
exported as a Text or Image element. exported as a Text or Image item.
\li To make sure that all related elements are exported to the same \li To make sure that all related items are exported to the same
element, use top-level layer groups. item, use top-level layer groups.
\li To determine that some layers are not exported, hide them, and \li To determine that some layers are not exported, hide them, and
deselect the \gui {Export hidden} check box during exporting. deselect the \gui {Export hidden} check box during exporting.
@@ -133,10 +133,10 @@
location for the QML file. location for the QML file.
\li Select the \gui {Rasterize text} check box to export text layers as \li Select the \gui {Rasterize text} check box to export text layers as
images, not as Text elements. images, not as Text items.
\li Select the \gui {Group layers} check box to export each top-level \li Select the \gui {Group layers} check box to export each top-level
group as a merged QML Image element. group as a merged QML Image item.
\li Select the \gui {Export hidden} check box to export hidden layers \li Select the \gui {Export hidden} check box to export hidden layers
and to set their visibility property to hidden. and to set their visibility property to hidden.

2
doc/src/qtquick/qtquick-modules-with-plugins.qdoc
View File

@@ -49,7 +49,7 @@
Ideally, QML modules have a \c{plugins.qmltypes} file in the same directory 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 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 types exported by the module's plugins and is loaded by \QC when the
module is imported. module is imported.
For Qt 4.8 and later, one or more \c qmltypes files can be listed in the For Qt 4.8 and later, one or more \c qmltypes files can be listed in the

34
doc/src/qtquick/qtquick-screens.qdoc
View File

@@ -31,7 +31,7 @@
\title Creating Screens \title Creating Screens
You can use predefined QML elements and your own components to create You can use predefined QML types and your own components to create
screens. Typically, the main qml file in a Qt Quick project specifies the screens. Typically, the main qml file in a Qt Quick project specifies the
main window of an application. main window of an application.
@@ -78,10 +78,10 @@
\endlist \endlist
When you add a Grid View, List View, or Path View element, the When you add a Grid View, List View, or Path View, the
\l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-listmodel.html}{ListModel} and the \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-listmodel.html}{ListModel} and the
delegate component that creates an instance for each item in the model are delegate component that creates an instance for each item in the model are
added automatically. You can edit element properties added automatically. You can edit item properties
\if defined(qcmanual) \if defined(qcmanual)
in the \gui Properties pane or in the \gui Properties pane or
\endif \endif
@@ -90,7 +90,7 @@
\section1 Positioning Items on Screens \section1 Positioning Items on Screens
You can use the following items to arrange items on screens: You can use the following QML types to arrange items on screens:
\list \list
@@ -110,8 +110,8 @@
\endlist \endlist
\if defined(qcmanual) \if defined(qcmanual)
To lay out several items in a Column, Row, Grid, or Flow element, select To lay out several items in a Column, Row, Grid, or Flow, select
the elements on the canvas, and then select \gui Layout in the context the items on the canvas, and then select \gui Layout in the context
menu. menu.
\endif \endif
@@ -121,7 +121,7 @@
Use states and transitions to navigate between screens. Use states and transitions to navigate between screens.
QML states typically describe user interface configurations, such as the UI QML states typically describe user interface configurations, such as the UI
elements, their properties and behavior and the available actions. For controls, their properties and behavior and the available actions. For
example, you can use states to create two screens. example, you can use states to create two screens.
\if defined(qcmanual) \if defined(qcmanual)
@@ -137,7 +137,7 @@
To keep the QML code clean, you should create a base state that contains all 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, the types 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. in which you hide and show a set of items and modify their properties.
This allows you to: This allows you to:
@@ -146,7 +146,7 @@
\li Align items on different screens with each other. \li Align items on different screens with each other.
\li Avoid excessive property changes. If an item is invisible in the \li Avoid excessive property changes. If an item is invisible in the
base state, you must define all changes to its child elements as base state, you must define all changes to its child types as
property changes, which leads to complicated QML code. property changes, which leads to complicated QML code.
\li Minimize the differences between the base state and the other states \li Minimize the differences between the base state and the other states
@@ -162,24 +162,24 @@
\list 1 \list 1
\li In the base state, add all elements you will need in the \li In the base state, add all items you will need in the
application (1). application (1).
While you work on one screen, you can click the While you work on one screen, you can click the
\inlineimage qmldesigner-show-hide-icon.png \inlineimage qmldesigner-show-hide-icon.png
icon to hide elements on the canvas that are not part of a screen. icon to hide items on the canvas that are not part of a screen.
\li In the \gui States pane, click the empty slot to create a new state \li In the \gui States pane, click the empty slot to create a new state
and give it a name. For example, \c Normal. and give it a name. For example, \c Normal.
\li In the \gui Properties pane (2), deselect the \gui Visibility check box \li In the \gui Properties pane (2), deselect the \gui Visibility check box
or set \gui Opacity to 0 for each element that is not needed in this or set \gui Opacity to 0 for each item that is not needed in this
view. If you specify the setting for the parent element, all child view. If you specify the setting for the parent item, all child
elements inherit it and are also hidden. items inherit it and are also hidden.
\image qmldesigner-screen-design.png "Designing screens" \image qmldesigner-screen-design.png "Designing screens"
\li Create additional states for each screen and set the visibility \li Create additional states for each screen and set the visibility
or opacity of the elements in the screen. or opacity of the items in the screen.
\li To determine which view opens when the application starts, use the \li 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 code editor to set the state of the root item of the .qml file, as
@@ -213,8 +213,8 @@
\l{http://qt-project.org/doc/qt-5.0/qtquick/qtquick-statesanimations-animations.html} \l{http://qt-project.org/doc/qt-5.0/qtquick/qtquick-statesanimations-animations.html}
{Animation and Transitions in Qt Quick}. {Animation and Transitions in Qt Quick}.
You can use the \c ParallelAnimation element to start several animations at You can use the \c ParallelAnimation type to start several animations at
the same time. Or use the \c SequentialAnimation element to run them one the same time. Or use the \c SequentialAnimation type to run them one
after another. after another.
You can use the code editor to specify transitions. For more information, You can use the code editor to specify transitions. For more information,

12
doc/src/qtquick/qtquick-toolbars.qdoc
View File

@@ -30,12 +30,12 @@
\title Using Qt Quick Toolbars \title Using Qt Quick Toolbars
When you select a component in the code and a toolbar is available, When you select a QML type in the code and a toolbar is available,
a light bulb icon appears: a light bulb icon appears:
\inlineimage qml-toolbar-indicator.png \inlineimage qml-toolbar-indicator.png
. Select the icon to open the toolbar. . Select the icon to open the toolbar.
To open toolbars immediately when you select a component, select To open toolbars immediately when you select a QML type, select
\gui{Tools > Options > Qt Quick > Qt Quick Toolbar > Always show Qt Quick \gui{Tools > Options > Qt Quick > Qt Quick Toolbar > Always show Qt Quick
Toolbar}. Toolbar}.
@@ -49,7 +49,7 @@
The Qt Quick Toolbar for images allows you to edit the properties of The Qt Quick Toolbar for images allows you to edit the properties of
\l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-borderimage.html}{Border Image} \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-borderimage.html}{Border Image}
and \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-image.html}{Image} components. and \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-image.html}{Image} items.
You can scale and tile the images, replace them with other images, You can scale and tile the images, replace them with other images,
preview them, and change the image margins. preview them, and change the image margins.
@@ -63,7 +63,7 @@
\section1 Formatting Text \section1 Formatting Text
The Qt Quick Toolbar for text allows you to edit the properties of The Qt Quick Toolbar for text allows you to edit the properties of
\l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-text.html}{Text} components. \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-text.html}{Text} items.
You can change the font family and size as well as text formatting, style, You can change the font family and size as well as text formatting, style,
alignment, and color. alignment, and color.
@@ -80,7 +80,7 @@
The Qt Quick Toolbar for animation allows you to edit the properties of The Qt Quick Toolbar for animation allows you to edit the properties of
\l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-propertyanimation.html} \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-propertyanimation.html}
{PropertyAnimation} components and the components that inherit it. You can {PropertyAnimation} items and the items that inherit it. You can
change the easing curve type and duration. For some curves, you can also change the easing curve type and duration. For some curves, you can also
specify amplitude, period, and overshoot values. specify amplitude, period, and overshoot values.
@@ -92,7 +92,7 @@
The Qt Quick Toolbar for rectangles allows you to edit the properties of The Qt Quick Toolbar for rectangles allows you to edit the properties of
\l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-rectangle.html}{Rectangle} \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-rectangle.html}{Rectangle}
components. You can change the fill and border colors and add items. You can change the fill and border colors and add
gradients. gradients.
\image qml-toolbar-rectangle.png "Qt Quick Toolbar for rectangles" \image qml-toolbar-rectangle.png "Qt Quick Toolbar for rectangles"

2
src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp
View File

@@ -108,7 +108,7 @@ ItemLibraryWidget::ItemLibraryWidget(QWidget *parent) :
/* other widgets */ /* other widgets */
QTabBar *tabBar = new QTabBar(this); QTabBar *tabBar = new QTabBar(this);
tabBar->addTab(tr("Items", "Title of library items view")); tabBar->addTab(tr("QML Types", "Title of library QML types view"));
tabBar->addTab(tr("Resources", "Title of library resources view")); tabBar->addTab(tr("Resources", "Title of library resources view"));
tabBar->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed); tabBar->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);

8
src/plugins/qt4projectmanager/wizards/qtquickappwizard.cpp
View File

@@ -141,18 +141,18 @@ void QtQuickAppWizard::createInstances(ExtensionSystem::IPlugin *plugin)
basicFeatures = Core::Feature(QtSupport::Constants::FEATURE_QT_QUICK_1); basicFeatures = Core::Feature(QtSupport::Constants::FEATURE_QT_QUICK_1);
parameter = base; parameter = base;
parameter.setDisplayName(tr("Qt Quick 1 Application (Built-in Elements)")); parameter.setDisplayName(tr("Qt Quick 1 Application (Built-in Types)"));
parameter.setDescription(basicDescription + tr("The built-in elements in the QtQuick 1 namespace allow " parameter.setDescription(basicDescription + tr("The built-in QML types in the QtQuick 1 namespace allow "
"you to write cross-platform applications with " "you to write cross-platform applications with "
"a custom look and feel.\n\nRequires <b>Qt 4.7.0</b> or newer.")); "a custom look and feel.\n\nRequires <b>Qt 4.7.0</b> or newer."));
parameter.setRequiredFeatures(basicFeatures); parameter.setRequiredFeatures(basicFeatures);
list << parameter; list << parameter;
parameter = base; parameter = base;
parameter.setDisplayName(tr("Qt Quick 2 Application (Built-in Elements)")); parameter.setDisplayName(tr("Qt Quick 2 Application (Built-in Types)"));
parameter.setDescription(tr("Creates a Qt Quick 2 application project that can contain " parameter.setDescription(tr("Creates a Qt Quick 2 application project that can contain "
"both QML and C++ code and includes a QQuickView.\n\n" "both QML and C++ code and includes a QQuickView.\n\n"
"The built-in elements in the QtQuick 2 namespace allow " "The built-in QML types in the QtQuick 2 namespace allow "
"you to write cross-platform applications with " "you to write cross-platform applications with "
"a custom look and feel.\n\nRequires <b>Qt 5.0</b> or newer.")); "a custom look and feel.\n\nRequires <b>Qt 5.0</b> or newer."));
parameter.setRequiredFeatures(Core::Feature(QtSupport::Constants::FEATURE_QT_QUICK_2)); parameter.setRequiredFeatures(Core::Feature(QtSupport::Constants::FEATURE_QT_QUICK_2));