Doc: Qt Quick Designer extensions
Move the documentation for commercial features from a separate manual to the Qt Creator Manual. Change-Id: Ifc8f10bda4a2a234e4b81f812601ce2ceb104ddd Reviewed-by: Thomas Hartmann <Thomas.Hartmann@digia.com>
BIN
doc/images/qmldesigner-bindings.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
doc/images/qmldesigner-connections.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
doc/images/qmldesigner-dynamicprops.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
doc/images/qmldesigner-extensions.png
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
doc/images/qmldesigner-inline-editing.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
doc/images/qmldesigner-pathview-editor.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 43 KiB |
@@ -171,6 +171,11 @@
|
||||
\li \l {Creating Buttons}
|
||||
\li \l {Creating Scalable Buttons and Borders}
|
||||
\li \l {Creating Screens}
|
||||
\li \l {Using Qt Quick Designer Extensions}
|
||||
\list
|
||||
\li \l{Editing PathView Properties}
|
||||
\li \l{Adding Connections}
|
||||
\endlist
|
||||
\li \l {Exporting Designs from Graphics Software}
|
||||
\li \l {Using QML Modules with Plugins}
|
||||
\endlist
|
||||
|
||||
@@ -58,6 +58,10 @@
|
||||
You can combine basic QML types with ready-made Qt Quick Controls,
|
||||
Dialogs, and Layouts (available since Qt 5.1) to create screens. You
|
||||
can use states and transitions to navigate between screens.
|
||||
\li \l {Using Qt Quick Designer Extensions}
|
||||
|
||||
\QMLD contains commercial features that make developing Qt Quick
|
||||
applications faster and easier.
|
||||
\li \l {Exporting Designs from Graphics Software}
|
||||
|
||||
You can export designs from graphics software, such as Adobe
|
||||
|
||||
123
doc/src/qtquick/qtquick-connection-editor.qdoc
Normal file
@@ -0,0 +1,123 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
|
||||
** Contact: http://www.qt-project.org/legal
|
||||
**
|
||||
** This file is part of Qt Creator.
|
||||
**
|
||||
** Commercial License Usage
|
||||
** Licensees holding valid commercial Qt licenses may use this file in
|
||||
** accordance with the commercial license agreement provided with the
|
||||
** Software or, alternatively, in accordance with the terms contained in
|
||||
** a written agreement between you and Digia. For licensing terms and
|
||||
** conditions see http://qt.digia.com/licensing. For further information
|
||||
** use the contact form at http://qt.digia.com/contact-us.
|
||||
**
|
||||
** GNU Lesser General Public License Usage
|
||||
** Alternatively, this file may be used under the terms of the GNU Lesser
|
||||
** General Public License version 2.1 as published by the Free Software
|
||||
** Foundation and appearing in the file LICENSE.LGPL included in the
|
||||
** packaging of this file. Please review the following information to
|
||||
** ensure the GNU Lesser General Public License version 2.1 requirements
|
||||
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
|
||||
**
|
||||
** In addition, as a special exception, Digia gives you certain additional
|
||||
** rights. These rights are described in the Digia Qt LGPL Exception
|
||||
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
|
||||
**
|
||||
****************************************************************************/
|
||||
|
||||
/*!
|
||||
\contentspage {Qt Creator Manual}
|
||||
\previouspage qmldesigner-pathview-editor.html
|
||||
\page qmldesigner-connections.html
|
||||
\nextpage quick-export-to-qml.html
|
||||
|
||||
\title Adding Connections
|
||||
|
||||
You can use the \gui {Connections} view (commercial only) to:
|
||||
|
||||
\list
|
||||
|
||||
\li Connect objects to signals.
|
||||
|
||||
\li Specify dynamic properties for objects.
|
||||
|
||||
\li Create bindings between the properties of two objects.
|
||||
|
||||
\endlist
|
||||
|
||||
\section1 Connecting Objects to Signals
|
||||
|
||||
To connect objects to signals in QML, create \l{Connection} objects.
|
||||
|
||||
\image qmldesigner-connections.png
|
||||
|
||||
To create the connections:
|
||||
|
||||
\list 1
|
||||
|
||||
\li Select the \gui {Connections} tab.
|
||||
|
||||
\li Select \gui Target to add the object to connect to a signal.
|
||||
|
||||
\li Select \gui {Signal Handler} to select the signal that the connection
|
||||
will listen to from a list of all signals available for the object.
|
||||
|
||||
\li Select \gui Actions to specify the action to perform when
|
||||
the signal is emitted. You use JavaScript to specify the actions.
|
||||
|
||||
\endlist
|
||||
|
||||
\section1 Specifying Dynamic Properties
|
||||
|
||||
You can bind \l{Properties} to dynamic expressions to define global properties for an
|
||||
object that can be read by other objects. For example, you can specify
|
||||
global properties for the root object that you can use in the child objects.
|
||||
|
||||
\image qmldesigner-dynamicprops.png
|
||||
|
||||
To specify dynamic properties for an object:
|
||||
|
||||
\list 1
|
||||
|
||||
\li Select the \gui {Dynamic Properties} tab.
|
||||
|
||||
\li Select \gui Item to select the object to specify the property for.
|
||||
|
||||
\li Select \gui Property to give a name to the property.
|
||||
|
||||
\li Select \gui {Property Type} to specify the type of the property.
|
||||
|
||||
\li Select \gui {Property Value} to specify the value of the property.
|
||||
|
||||
\endlist
|
||||
|
||||
\section1 Adding Bindings Between Properties
|
||||
|
||||
To dynamically change the behavior of an object, you can create a
|
||||
\l{Property Binding} between the properties of two objects.
|
||||
|
||||
\image qmldesigner-bindings.png
|
||||
|
||||
To bind a property of an object to the property of another object:
|
||||
|
||||
\list 1
|
||||
|
||||
\li Select the \gui {Bindings} tab.
|
||||
|
||||
\li Select \gui Item to select the target object whose property you want
|
||||
to change dynamically.
|
||||
|
||||
\li Select \gui Property to specify the property to bind to a source
|
||||
property.
|
||||
|
||||
\li Select \gui {Source Item} to specify the object whose property you
|
||||
want to use to determine the behavior of the target object.
|
||||
|
||||
\li Select \gui {Source Property} to specify the property to bind the
|
||||
target property to.
|
||||
|
||||
\endlist
|
||||
|
||||
*/
|
||||
54
doc/src/qtquick/qtquick-designer-extensions.qdoc
Normal file
@@ -0,0 +1,54 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
|
||||
** Contact: http://www.qt-project.org/legal
|
||||
**
|
||||
** This file is part of Qt Creator.
|
||||
**
|
||||
** Commercial License Usage
|
||||
** Licensees holding valid commercial Qt licenses may use this file in
|
||||
** accordance with the commercial license agreement provided with the
|
||||
** Software or, alternatively, in accordance with the terms contained in
|
||||
** a written agreement between you and Digia. For licensing terms and
|
||||
** conditions see http://qt.digia.com/licensing. For further information
|
||||
** use the contact form at http://qt.digia.com/contact-us.
|
||||
**
|
||||
** GNU Lesser General Public License Usage
|
||||
** Alternatively, this file may be used under the terms of the GNU Lesser
|
||||
** General Public License version 2.1 as published by the Free Software
|
||||
** Foundation and appearing in the file LICENSE.LGPL included in the
|
||||
** packaging of this file. Please review the following information to
|
||||
** ensure the GNU Lesser General Public License version 2.1 requirements
|
||||
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
|
||||
**
|
||||
** In addition, as a special exception, Digia gives you certain additional
|
||||
** rights. These rights are described in the Digia Qt LGPL Exception
|
||||
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
|
||||
**
|
||||
****************************************************************************/
|
||||
|
||||
/*!
|
||||
\contentspage {Qt Creator Manual}
|
||||
\previouspage quick-screens.html
|
||||
\page creator-qtquick-designer-extensions.html
|
||||
\nextpage qmldesigner-pathview-editor.html
|
||||
|
||||
\title Using Qt Quick Designer Extensions
|
||||
|
||||
\image qmldesigner-extensions.png
|
||||
|
||||
\QMLD contains commercial features that make developing Qt Quick
|
||||
applications faster and easier:
|
||||
|
||||
\list
|
||||
|
||||
\li \l{Editing PathView Properties}
|
||||
|
||||
Use a spline editor to specify properties for a PathView object.
|
||||
|
||||
\li \l{Adding Connections}
|
||||
|
||||
Create connections between objects, signals, and object properties.
|
||||
|
||||
\endlist
|
||||
*/
|
||||
@@ -49,17 +49,22 @@
|
||||
to the project, and
|
||||
other resources.
|
||||
|
||||
\li \gui Canvas (3) is the working area where you create QML components and
|
||||
\li \gui Connections pane (3) enables you to create connections between
|
||||
objects, signals, and object properties (commercial only). For more
|
||||
information, see \l{Adding Connections}.
|
||||
|
||||
\li \gui Canvas (4) is the working area where you create QML components and
|
||||
design applications.
|
||||
|
||||
\li \gui {Properties} pane (4) organizes the properties of the selected item.
|
||||
\li \gui {Properties} pane (5) organizes the properties of the selected item.
|
||||
You can change the properties also in the code editor.
|
||||
|
||||
\li \gui {State} pane (5) displays the different states of the item.
|
||||
\li \gui {State} pane (6) displays the different states of the item.
|
||||
QML states typically describe user interface configurations, such as
|
||||
the UI controls, their properties and behavior and the available
|
||||
actions.
|
||||
|
||||
|
||||
\endlist
|
||||
|
||||
\section1 Managing Item Hierarchy
|
||||
@@ -336,6 +341,16 @@
|
||||
|
||||
For more information on Transform types, see \l{Transform}.
|
||||
|
||||
\section2 Editing Properties Inline
|
||||
|
||||
You can double-click objects on the canvas to edit their text, color, or
|
||||
source properties inline (commercial only).
|
||||
Because you can specify several of these properties for some QML types, such
|
||||
as TextEdit, you can also right-click objects to open the inline editors
|
||||
from a context-menu.
|
||||
|
||||
\image qmldesigner-inline-editing.png
|
||||
|
||||
\section1 Adding States
|
||||
|
||||
User interfaces are designed to present different interface configurations
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
/*!
|
||||
|
||||
\contentspage {Qt Creator Manual}
|
||||
\previouspage quick-screens.html
|
||||
\previouspage qmldesigner-connections.html
|
||||
\page quick-export-to-qml.html
|
||||
\nextpage creator-qml-modules-with-plugins.html
|
||||
|
||||
|
||||
66
doc/src/qtquick/qtquick-pathview-editor.qdoc
Normal file
@@ -0,0 +1,66 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
|
||||
** Contact: http://www.qt-project.org/legal
|
||||
**
|
||||
** This file is part of Qt Creator.
|
||||
**
|
||||
** Commercial License Usage
|
||||
** Licensees holding valid commercial Qt licenses may use this file in
|
||||
** accordance with the commercial license agreement provided with the
|
||||
** Software or, alternatively, in accordance with the terms contained in
|
||||
** a written agreement between you and Digia. For licensing terms and
|
||||
** conditions see http://qt.digia.com/licensing. For further information
|
||||
** use the contact form at http://qt.digia.com/contact-us.
|
||||
**
|
||||
** GNU Lesser General Public License Usage
|
||||
** Alternatively, this file may be used under the terms of the GNU Lesser
|
||||
** General Public License version 2.1 as published by the Free Software
|
||||
** Foundation and appearing in the file LICENSE.LGPL included in the
|
||||
** packaging of this file. Please review the following information to
|
||||
** ensure the GNU Lesser General Public License version 2.1 requirements
|
||||
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
|
||||
**
|
||||
** In addition, as a special exception, Digia gives you certain additional
|
||||
** rights. These rights are described in the Digia Qt LGPL Exception
|
||||
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
|
||||
**
|
||||
****************************************************************************/
|
||||
|
||||
/*!
|
||||
\contentspage {Qt Creator Manual}
|
||||
\previouspage creator-qtquick-designer-extensions.html
|
||||
\page qmldesigner-pathview-editor.html
|
||||
\nextpage qmldesigner-connections.html
|
||||
|
||||
\title Editing PathView Properties
|
||||
|
||||
A \l{PathView} lays out data provided by data models on a \l{Path}.
|
||||
|
||||
A graphical spline editor enables you to specify PathView paths, which
|
||||
is a non-trivial task to do in the code editor (commercial only).
|
||||
|
||||
\image qmldesigner-pathview-editor.png "PathView editor"
|
||||
|
||||
To start editing the Path, double-click the PathView on the canvas. The
|
||||
editor composes the path of PathCubic path objects. They are cubic Bezier
|
||||
curves to a given position with two control points. Drag and drop the
|
||||
control points to construct the curve.
|
||||
|
||||
In addition, PathLine and PathQuad path objects are supported indirectly.
|
||||
To make a curve segment linear, select \gui {Make Curve Segment Straight} in
|
||||
the context menu.
|
||||
|
||||
By default, the Path is closed, which means that its start and end points
|
||||
are identical. To create separate start and end points for it, right-click
|
||||
an edit point to open a context menu, and deselect \gui {Closed Path}.
|
||||
|
||||
To add intermediary points to a curve segment, select \gui {Split Segment}
|
||||
in the context menu.
|
||||
|
||||
In the \gui Properties pane, you can specify other properties for
|
||||
the PathView. For example, what is the maximum distance from the path that
|
||||
initiates mouse dragging and what is the rate at which a flick will
|
||||
decelerate.
|
||||
|
||||
*/
|
||||
@@ -27,7 +27,7 @@
|
||||
\contentspage {Qt Creator Manual}
|
||||
\previouspage quick-scalable-image.html
|
||||
\page quick-screens.html
|
||||
\nextpage quick-export-to-qml.html
|
||||
\nextpage creator-qtquick-designer-extensions.html
|
||||
|
||||
\title Creating Screens
|
||||
|
||||
|
||||
@@ -83,9 +83,10 @@
|
||||
\endcode
|
||||
|
||||
The property alias exports the button to the QML code that uses the form.
|
||||
In \QC Enterprise you can use the
|
||||
You can use the
|
||||
\inlineimage qmldesigner-export-item-button.png
|
||||
(\gui Export) button in the \gui Navigator to export an item as a property:
|
||||
(\gui Export) button in the \gui Navigator to export an item as a property
|
||||
(commercial only):
|
||||
|
||||
\image qmldesigner-export-item.png
|
||||
|
||||
|
||||