forked from qt-creator/qt-creator
Doc: Update info on component files and exporting components
- Rename "Qt Quick UI Forms" as "UI Files" - Rename "Exporting QML" as "Exporting Components" Task-number: QDS-3778 Change-Id: I8aa4afbb7391fe04dbcee8f68bcc6407a855b65a Reviewed-by: Vikas Pachdha <vikas.pachdha@qt.io> Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 14 KiB |
@@ -477,46 +477,46 @@
|
|||||||
\row
|
\row
|
||||||
\li M220
|
\li M220
|
||||||
\li Error
|
\li Error
|
||||||
\li This type (type name) is not supported as a root element of a Qt
|
\li This type (type name) is not supported as a root element of a
|
||||||
Quick UI form.
|
UI file (.ui.qml).
|
||||||
\li
|
\li
|
||||||
|
|
||||||
\row
|
\row
|
||||||
\li M221
|
\li M221
|
||||||
\li Error
|
\li Error
|
||||||
\li This type (type name) is not supported in a Qt Quick UI form.
|
\li This type (type name) is not supported in a UI file (.ui.qml).
|
||||||
\li
|
\li
|
||||||
|
|
||||||
\row
|
\row
|
||||||
\li M222
|
\li M222
|
||||||
\li Error
|
\li Error
|
||||||
\li Functions are not supported in a Qt Quick UI form.
|
\li Functions are not supported in a UI file (.ui.qml).
|
||||||
\li For a list of supported JavaScript functions, see
|
\li For a list of supported JavaScript functions, see
|
||||||
\l{Supported Methods}.
|
\l{Supported Methods}.
|
||||||
|
|
||||||
\row
|
\row
|
||||||
\li M223
|
\li M223
|
||||||
\li Error
|
\li Error
|
||||||
\li Java Script blocks are not supported in a Qt Quick UI form.
|
\li Java Script blocks are not supported in a UI file (.ui.qml).
|
||||||
\li
|
\li
|
||||||
|
|
||||||
\row
|
\row
|
||||||
\li M224
|
\li M224
|
||||||
\li Error
|
\li Error
|
||||||
\li Behavior type is not supported in a Qt Quick UI form.
|
\li Behavior type is not supported in a UI file (.ui.qml).
|
||||||
\li
|
\li
|
||||||
|
|
||||||
\row
|
\row
|
||||||
\li M225
|
\li M225
|
||||||
\li Error
|
\li Error
|
||||||
\li States are only supported in the root item in a Qt Quick UI form.
|
\li States are only supported in the root item in a UI file (.ui.qml).
|
||||||
\li
|
\li
|
||||||
|
|
||||||
\row
|
\row
|
||||||
\li M226
|
\li M226
|
||||||
\li Error
|
\li Error
|
||||||
\li Referencing the parent of the root item is not supported in a Qt
|
\li Referencing the parent of the root item is not supported in a
|
||||||
Quick UI form.
|
UI file (.ui.qml).
|
||||||
\li
|
\li
|
||||||
|
|
||||||
\row
|
\row
|
||||||
|
|||||||
@@ -302,8 +302,9 @@
|
|||||||
|
|
||||||
\li QML files, which specify items in Qt Quick projects.
|
\li QML files, which specify items in Qt Quick projects.
|
||||||
\uicontrol {QML File (Qt Quick 2)} creates a QML file that imports
|
\uicontrol {QML File (Qt Quick 2)} creates a QML file that imports
|
||||||
Qt Quick 2.0 and \uicontrol {Qt Quick UI File} creates an UI form
|
Qt Quick 2.0, and \uicontrol {Qt Quick UI File} creates a
|
||||||
(\e .ui.qml) and the corresponding QML file.
|
\l{UI Files}{UI file} (\e .ui.qml) and the corresponding
|
||||||
|
implementation file (\e .qml).
|
||||||
|
|
||||||
\li JavaScript files that you can use to write the application logic in
|
\li JavaScript files that you can use to write the application logic in
|
||||||
Qt Quick projects
|
Qt Quick projects
|
||||||
|
|||||||
@@ -121,7 +121,7 @@
|
|||||||
\li \l{Using Custom Fonts}
|
\li \l{Using Custom Fonts}
|
||||||
\li \l{Annotating Designs}
|
\li \l{Annotating Designs}
|
||||||
\li \l{Loading Placeholder Data}
|
\li \l{Loading Placeholder Data}
|
||||||
\li \l{Qt Quick UI Forms}
|
\li \l{UI Files}
|
||||||
\endlist
|
\endlist
|
||||||
\li \l {Adding Dynamics}
|
\li \l {Adding Dynamics}
|
||||||
\list
|
\list
|
||||||
@@ -166,7 +166,7 @@
|
|||||||
\li \l {Browsing ISO 7000 Icons}
|
\li \l {Browsing ISO 7000 Icons}
|
||||||
\li \l {Using QML Modules with Plugins}
|
\li \l {Using QML Modules with Plugins}
|
||||||
\li \l {Converting UI Projects to Applications}
|
\li \l {Converting UI Projects to Applications}
|
||||||
\li \l {Exporting QML}
|
\li \l {Exporting Components}
|
||||||
\endlist
|
\endlist
|
||||||
\li \l{Developing Widget Based Applications}
|
\li \l{Developing Widget Based Applications}
|
||||||
\list
|
\list
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/****************************************************************************
|
/****************************************************************************
|
||||||
**
|
**
|
||||||
** Copyright (C) 2020 The Qt Company Ltd.
|
** Copyright (C) 2021 The Qt Company Ltd.
|
||||||
** Contact: https://www.qt.io/licensing/
|
** Contact: https://www.qt.io/licensing/
|
||||||
**
|
**
|
||||||
** This file is part of the Qt Creator documentation.
|
** This file is part of the Qt Creator documentation.
|
||||||
@@ -101,9 +101,9 @@
|
|||||||
convert them to Qt Quick Application projects that contain .pro,
|
convert them to Qt Quick Application projects that contain .pro,
|
||||||
.cpp, and .qrc files.
|
.cpp, and .qrc files.
|
||||||
|
|
||||||
\li \l {Exporting QML}
|
\li \l {Exporting Components}
|
||||||
|
|
||||||
\l{Qt Quick UI Forms}{UI forms} (ui.qml files) can be exported to
|
\l{UI Files}{UI files} (.ui.qml) can be exported to
|
||||||
JSON metadata format and PNG assets.
|
JSON metadata format and PNG assets.
|
||||||
|
|
||||||
\endlist
|
\endlist
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/****************************************************************************
|
/****************************************************************************
|
||||||
**
|
**
|
||||||
** Copyright (C) 2020 The Qt Company Ltd.
|
** Copyright (C) 2021 The Qt Company Ltd.
|
||||||
** Contact: https://www.qt.io/licensing/
|
** Contact: https://www.qt.io/licensing/
|
||||||
**
|
**
|
||||||
** This file is part of the Qt Creator documentation.
|
** This file is part of the Qt Creator documentation.
|
||||||
@@ -34,8 +34,8 @@
|
|||||||
|
|
||||||
You can add icons from an ISO 7000 icon library that is installed with \QC
|
You can add icons from an ISO 7000 icon library that is installed with \QC
|
||||||
to Qt Quick applications (commercial only). You can use the
|
to Qt Quick applications (commercial only). You can use the
|
||||||
\uicontrol {ISO Icon Browser} to add a \l {Picture} type and select the
|
\uicontrol {ISO Icon Browser} to add a \l {Picture} component and select the
|
||||||
icon to use for the type. You can change the default color of the icon.
|
icon to use for the component. You can change the default color of the icon.
|
||||||
|
|
||||||
\image qtcreator-iso-icon-browser.png
|
\image qtcreator-iso-icon-browser.png
|
||||||
|
|
||||||
@@ -45,16 +45,16 @@
|
|||||||
|
|
||||||
\li Create a new Qt Quick Application or open an application in \QC.
|
\li Create a new Qt Quick Application or open an application in \QC.
|
||||||
|
|
||||||
\li Open the Qt Quick UI form in the \uicontrol Design mode.
|
\li Open the \l{UI Files}{UI file} (.ui.qml) in \l {Form Editor}.
|
||||||
|
|
||||||
\li In the \uicontrol Library, select \uicontrol {QML Imports} >
|
\li Select \l Library > \uicontrol Components > \inlineimage plus.png
|
||||||
\uicontrol {Add Import} > \uicontrol {QtQuick.Extras} to import the
|
> \uicontrol {QtQuick.Extras} to import the \l {Qt Quick Extras}
|
||||||
\l {Qt Quick Extras} module.
|
module.
|
||||||
|
|
||||||
\li Drag and drop a \uicontrol Picture element from the library to the
|
\li Drag and drop a \uicontrol Picture component from \uicontrol Library
|
||||||
canvas.
|
to \l {Form Editor}.
|
||||||
|
|
||||||
\li Right-click the picture element and select \uicontrol {Choose Icon}
|
\li Right-click the picture component and select \uicontrol {Choose Icon}
|
||||||
to open the \uicontrol {ISO Icon Browser}.
|
to open the \uicontrol {ISO Icon Browser}.
|
||||||
|
|
||||||
\li To find icons, select a criterion for filtering icons and enter a
|
\li To find icons, select a criterion for filtering icons and enter a
|
||||||
|
|||||||
@@ -48,9 +48,9 @@
|
|||||||
|
|
||||||
\section1 Naming Conventions
|
\section1 Naming Conventions
|
||||||
|
|
||||||
Establish naming conventions to keep the items in your UI organized.
|
Establish naming conventions to keep the components in your UI organized.
|
||||||
Name your items accurately and give them suitable QML IDs. You should
|
Name your components accurately and give them suitable IDs. You should
|
||||||
manually specify the names of the items you export from design tools to
|
manually specify the names of the components you export from design tools to
|
||||||
create reliable and self-explanatory names that follow the naming
|
create reliable and self-explanatory names that follow the naming
|
||||||
conventions you have established.
|
conventions you have established.
|
||||||
|
|
||||||
@@ -82,20 +82,21 @@
|
|||||||
components that can be conveniently recombined to suit the needs of
|
components that can be conveniently recombined to suit the needs of
|
||||||
your UI.
|
your UI.
|
||||||
\li Use as few components as necessary. To minimize the number of
|
\li Use as few components as necessary. To minimize the number of
|
||||||
components, use alias properties and states to create the
|
components, use \l{Adding Property Aliases}{alias properties} and
|
||||||
differences in your instances. We recommend reusing components
|
\l{Adding States}{states} to create the differences in your
|
||||||
|
component instances. We recommend reusing components
|
||||||
instead of duplicating them, so the components do not need to be
|
instead of duplicating them, so the components do not need to be
|
||||||
processed as completely new types. This reduces loading and
|
processed as completely new component types. This reduces loading
|
||||||
compilation time as well as the size of the binary.
|
and compilation time as well as the size of the binary.
|
||||||
\li Any content that is data-driven should be
|
\li Any content that is data-driven should be
|
||||||
\l {Using Qt Quick UI Forms}{exported as a public property} of the
|
\l {Using UI Files}{exported as a public property} of the
|
||||||
relevant component. For example, a speedometer should have an \c int
|
relevant component. For example, a speedometer should have an \c int
|
||||||
or \c real property for speed to which the UI is bound.
|
or \c real property for speed to which the UI is bound.
|
||||||
\li Separate UI from the application logic. Designers should work with
|
\li Separate UI from the application logic. Designers should work with
|
||||||
the UI forms (.ui.qml files), while developers should work on the
|
the \l{UI Files}{UI files} (.ui.qml), while developers should work
|
||||||
corresponding QML files (.qml) to define their programmatic
|
on the corresponding implementation files (.qml) to define their
|
||||||
behaviors or JavaScript. This enables iteration from both the design
|
programmatic behaviors or JavaScript. This enables iteration from
|
||||||
and development side of the process without the the risk of
|
both the design and development side of the process without the the
|
||||||
overwriting each other's work.
|
risk of overwriting each other's work.
|
||||||
\endlist
|
\endlist
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -83,7 +83,7 @@
|
|||||||
\li \l{Adding Signal Handlers}
|
\li \l{Adding Signal Handlers}
|
||||||
\row
|
\row
|
||||||
\li Go to Implementation
|
\li Go to Implementation
|
||||||
\li \l{Using Qt Quick UI Forms}
|
\li \l{Using UI Files}
|
||||||
\row
|
\row
|
||||||
\li Go into Component
|
\li Go into Component
|
||||||
\li \l{Moving Within Components}
|
\li \l{Moving Within Components}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/****************************************************************************
|
/****************************************************************************
|
||||||
**
|
**
|
||||||
** Copyright (C) 2020 The Qt Company Ltd.
|
** Copyright (C) 2021 The Qt Company Ltd.
|
||||||
** Contact: https://www.qt.io/licensing/
|
** Contact: https://www.qt.io/licensing/
|
||||||
**
|
**
|
||||||
** This file is part of the Qt Creator documentation.
|
** This file is part of the Qt Creator documentation.
|
||||||
@@ -32,46 +32,44 @@
|
|||||||
\nextpage creator-using-qt-designer.html
|
\nextpage creator-using-qt-designer.html
|
||||||
\endif
|
\endif
|
||||||
|
|
||||||
\title Exporting QML
|
\title Exporting Components
|
||||||
|
|
||||||
\l{Qt Quick UI Forms}{UI forms} (ui.qml files) can be exported to
|
\l{glossary-component}{Components} contained in \l{UI Files}
|
||||||
JSON metadata format and PNG assets.
|
{UI files} (.ui.qml) can be exported to JSON metadata format and PNG assets.
|
||||||
|
|
||||||
To export the \l{Qt Quick UI Forms}{UI forms} (ui.qml files) from the
|
To export the UI files from the current project, select \uicontrol Build >
|
||||||
current project, select \uicontrol Build > \uicontrol {Export QML}.
|
\uicontrol {Export Components}.
|
||||||
|
|
||||||
The primary use of exported metadata and assets is to generate native file
|
The primary use of exported metadata and assets is to generate native file
|
||||||
formats in content creation tools, such as Adobe Photoshop, using \QB. \QBPS
|
formats in content creation tools, such as Adobe Photoshop, using \QB. \QBPS
|
||||||
can generate PSD files by importing the metadata and assets.
|
can generate PSD files by importing the metadata and assets.
|
||||||
|
|
||||||
QML is exported as follows:
|
Components are exported as follows:
|
||||||
|
|
||||||
\list
|
\list
|
||||||
\li QML types inherited from \l [QML]{Item}{Item} are exported, other
|
\li Components (QML types) inherited from \l [QML]{Item}{Item} are
|
||||||
types are ignored.
|
exported, other components are ignored.
|
||||||
\li \l [QML]{Text}{Text} components are exported as metadata only
|
\li \l [QML]{Text}{Text} components are exported as metadata only
|
||||||
and no assets are generated.
|
and no assets are generated.
|
||||||
\li \l [QML]{Rectangle}{Rectangle} and \l [QML]{Image}{Image} types
|
\li \l [QML]{Rectangle}{Rectangle} and \l [QML]{Image}{Image}
|
||||||
generate assets as PNG files.
|
components generate assets as PNG files.
|
||||||
\endlist
|
\endlist
|
||||||
|
|
||||||
\section1 Configuring QML Export
|
\section1 Configuring QML Export
|
||||||
|
|
||||||
You can configure the export in the \uicontrol {Export QML} dialog, which
|
You can configure the export in the \uicontrol {Export Components} dialog,
|
||||||
lists the \l{Qt Quick UI Forms}{UI forms} (ui.qml files) of the current
|
which lists the UI files (.ui.qml) of the current project.
|
||||||
project.
|
|
||||||
|
|
||||||
\image qtquick-qml-export-dialog.png "QML Export Dialog"
|
\image qtquick-qml-export-dialog.png "Export Components dialog"
|
||||||
|
|
||||||
\list 1
|
\list 1
|
||||||
\li In the \uicontrol {Export path} field, specify the path where
|
\li In the \uicontrol {Export path} field, specify the path where
|
||||||
the metadata file and assets are exported.
|
the metadata file and assets are exported.
|
||||||
\li Deselect the \uicontrol {Export assets} check box to disable
|
\li Deselect the \uicontrol {Export assets} check box to disable
|
||||||
exporting assets and only generate the metadata file.
|
exporting assets and only generate the metadata file.
|
||||||
\li Select the \uicontrol {Export components separately} check box to generate separate
|
\li Select the \uicontrol {Export components separately} check box to
|
||||||
metadata files for each component.
|
generate separate metadata files for each component.
|
||||||
\li In the file list, select the \l{Qt Quick UI Forms}{UI forms}
|
\li In the file list, select the .ui.qml files to be exported.
|
||||||
to be exported.
|
|
||||||
\li Select \uicontrol {Export} export to start the export process.
|
\li Select \uicontrol {Export} export to start the export process.
|
||||||
\endlist
|
\endlist
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/****************************************************************************
|
/****************************************************************************
|
||||||
**
|
**
|
||||||
** Copyright (C) 2020 The Qt Company Ltd.
|
** Copyright (C) 2021 The Qt Company Ltd.
|
||||||
** Contact: https://www.qt.io/licensing/
|
** Contact: https://www.qt.io/licensing/
|
||||||
**
|
**
|
||||||
** This file is part of the Qt Creator documentation.
|
** This file is part of the Qt Creator documentation.
|
||||||
@@ -35,20 +35,20 @@
|
|||||||
|
|
||||||
\title Loading Placeholder Data
|
\title Loading Placeholder Data
|
||||||
|
|
||||||
The Design mode supports views, models, and delegates, so that when you add
|
\QC supports views, models, and delegates, so that when you add
|
||||||
a Grid View, List View, or Path View item, the ListModel and the delegate
|
a Grid View, List View, or Path View component, the ListModel and
|
||||||
item are added automatically.
|
the delegate component are added automatically.
|
||||||
|
|
||||||
However, the missing context of the application presents a challenge.
|
However, the missing context of the application presents a challenge.
|
||||||
Specific models defined in C++ are the most obvious case. Often,
|
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 an item that uses the
|
or in other component files. A typical example is a component that uses the
|
||||||
properties of its parent, such as \c parent.width.
|
properties of its parent, such as \c parent.width.
|
||||||
|
|
||||||
\section1 Using Dummy Models
|
\section1 Using Dummy Models
|
||||||
|
|
||||||
If you open a file in the Design mode that references a C++ model, you see
|
If you open a file in \l {Form Editor} that references a C++ model, you see
|
||||||
nothing on the canvas. If the data in the model is fetched from the
|
nothing in it. If the data in the model is fetched from the
|
||||||
internet, you have no control over it. To get reliable data, \e {dummy data}
|
internet, you have no control over it. To get reliable data, \e {dummy data}
|
||||||
was introduced.
|
was introduced.
|
||||||
|
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
|
|
||||||
Create a directory named \e dummydata in the root directory of the project,
|
Create a directory named \e dummydata in the root directory of the project,
|
||||||
so that it is not deployed to the device. In the \c dummydata directory,
|
so that it is not deployed to the device. In the \c dummydata directory,
|
||||||
create a QML file that has the same name as the value of \c model:
|
create a file (.qml) that has the same name as the value of \c model:
|
||||||
|
|
||||||
\code
|
\code
|
||||||
qml/exampleapp/example.qml
|
qml/exampleapp/example.qml
|
||||||
@@ -93,7 +93,7 @@
|
|||||||
|
|
||||||
\section1 Creating Dummy Context
|
\section1 Creating Dummy Context
|
||||||
|
|
||||||
The following example presents a common pattern in QML:
|
The following example presents a common pattern:
|
||||||
|
|
||||||
\qml
|
\qml
|
||||||
Item {
|
Item {
|
||||||
@@ -102,11 +102,11 @@
|
|||||||
}
|
}
|
||||||
\endqml
|
\endqml
|
||||||
|
|
||||||
This works nicely for applications but the Design mode displays a zero-sized
|
This works nicely for applications but \uicontrol {Form Editor} displays a
|
||||||
item. A parent for the opened file does not exist, because the context is
|
zero-sized component. A parent for the opened file does not exist, because
|
||||||
missing. To get around the missing context, the idea of a \e {dummy
|
the context is missing. To get around the missing context, the idea of a
|
||||||
context} is introduced. If you place a file with the same name as the
|
\e {dummy context} is introduced. If you place a file with the same name as
|
||||||
application (here, example.qml) in the \c {dummydata/context} directory,
|
the application (here, example.qml) in the \c {dummydata/context} directory,
|
||||||
you can fake a parent context:
|
you can fake a parent context:
|
||||||
|
|
||||||
\qml
|
\qml
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/****************************************************************************
|
/****************************************************************************
|
||||||
**
|
**
|
||||||
** Copyright (C) 2020 The Qt Company Ltd.
|
** Copyright (C) 2021 The Qt Company Ltd.
|
||||||
** Contact: https://www.qt.io/licensing/
|
** Contact: https://www.qt.io/licensing/
|
||||||
**
|
**
|
||||||
** This file is part of the Qt Creator documentation.
|
** This file is part of the Qt Creator documentation.
|
||||||
@@ -38,13 +38,12 @@
|
|||||||
\endif
|
\endif
|
||||||
\nextpage qtquick-adding-dynamics.html
|
\nextpage qtquick-adding-dynamics.html
|
||||||
|
|
||||||
\title Qt Quick UI Forms
|
\title UI Files
|
||||||
|
|
||||||
You can use \QC wizards to create UI forms that have the filename extension
|
You can use \QC wizards to create UI files that have the filename
|
||||||
\e .ui.qml. The UI forms contain a purely declarative subset of the QML
|
extension \e .ui.qml. The UI files can be edited in \l {Form Editor}.
|
||||||
language. It is recommended that you edit the forms in the \uicontrol Design mode.
|
If you use \uicontrol {Text Editor} to add code that is not supported
|
||||||
\QC enforces the use of the supported QML features by displaying error
|
by \uicontrol {Form Editor}, \QC displays error messages.
|
||||||
messages.
|
|
||||||
|
|
||||||
The following features are not supported:
|
The following features are not supported:
|
||||||
|
|
||||||
@@ -52,11 +51,12 @@
|
|||||||
\li JavaScript blocks
|
\li JavaScript blocks
|
||||||
\li Other bindings than pure expressions
|
\li Other bindings than pure expressions
|
||||||
\li Signal handlers
|
\li Signal handlers
|
||||||
\li States in other items than the root item
|
\li States in other components than the root component
|
||||||
\li Root items that are not derived from \l QQuickItem or \l [QML]{Item}
|
\li Root components that are not derived from \l QQuickItem or
|
||||||
|
\l [QML]{Item}
|
||||||
\endlist
|
\endlist
|
||||||
|
|
||||||
The following types are not supported:
|
The following components are not supported:
|
||||||
|
|
||||||
\list
|
\list
|
||||||
\li Behavior
|
\li Behavior
|
||||||
@@ -161,11 +161,11 @@
|
|||||||
For more information about using the methods, see
|
For more information about using the methods, see
|
||||||
\l{https://doc.qt.io/qt/qml-qtqml-qt.html}{Qt QML Methods}.
|
\l{https://doc.qt.io/qt/qml-qtqml-qt.html}{Qt QML Methods}.
|
||||||
|
|
||||||
\section1 Using Qt Quick UI Forms
|
\section1 Using UI Files
|
||||||
|
|
||||||
You can edit the forms in the \uicontrol {Form Editor} and
|
You can edit the UI files in the \l {Form Editor} and
|
||||||
\uicontrol {Text Editor} tabs in the \uicontrol Design mode. Items that are
|
\uicontrol {Text Editor} views. Components that are
|
||||||
supposed to be used in QML code have to be exported as properties:
|
supposed to be used in code have to be exported as properties:
|
||||||
|
|
||||||
\code
|
\code
|
||||||
Item {
|
Item {
|
||||||
@@ -182,17 +182,16 @@
|
|||||||
}
|
}
|
||||||
\endcode
|
\endcode
|
||||||
|
|
||||||
The property alias exports the button to the QML code that uses the form.
|
The property alias exports the button to the code that uses the form.
|
||||||
You can use the
|
You can use the \inlineimage export_unchecked.png
|
||||||
\inlineimage export_checked.png
|
(\uicontrol Export) button in \l Navigator to export a component
|
||||||
(\uicontrol Export) button in the \uicontrol Navigator to export an item as
|
as a property:
|
||||||
a property:
|
|
||||||
|
|
||||||
\image qmldesigner-export-item.png
|
\image qmldesigner-export-item.png
|
||||||
|
|
||||||
In the QML file that uses the form, you can use the \c button property alias
|
In the UI file where the component is used, you can use the \c button
|
||||||
to implement signal handlers, for example. In the following code snippet,
|
property alias to implement signal handlers, for example. In the
|
||||||
the UI form is called \e MainForm.ui.qml:
|
following code snippet, the UI file is called \e MainForm.ui.qml:
|
||||||
|
|
||||||
\code
|
\code
|
||||||
MainForm {
|
MainForm {
|
||||||
@@ -203,8 +202,9 @@
|
|||||||
|
|
||||||
You can also assign properties or define behavior or transitions.
|
You can also assign properties or define behavior or transitions.
|
||||||
|
|
||||||
To move from the \uicontrol Design mode directly to the implementation of a
|
To move from \l {Form Editor} or \l Navigator directly to the
|
||||||
type in the .qml file, right-click the type in the \uicontrol Navigator and
|
implementation of a component in the .qml file, right-click the
|
||||||
select \uicontrol {Go to Implementation} in the context menu.
|
component and select \uicontrol {Go to Implementation} in the
|
||||||
|
context menu.
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -123,10 +123,10 @@
|
|||||||
|
|
||||||
\list
|
\list
|
||||||
\endif
|
\endif
|
||||||
\li \l{Qt Quick UI Forms}
|
\li \l{UI Files}
|
||||||
|
|
||||||
Some of the wizards create Qt Quick projects that contain UI forms
|
Some of the wizards create projects that contain UI files
|
||||||
(.ui.qml files). The forms use a purely declarative subset of the
|
(.ui.qml). You should always edit UI files in \l{Form Editor}
|
||||||
QML language and you can edit them in the Design mode.
|
and \l Properties, to avoid breaking the code.
|
||||||
\endlist
|
\endlist
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -87,45 +87,45 @@
|
|||||||
in the Design mode. For more information about moving views around,
|
in the Design mode. For more information about moving views around,
|
||||||
see \l {Managing Workspaces}.
|
see \l {Managing Workspaces}.
|
||||||
|
|
||||||
\section2 Learn Qt Quick - Projects and Files
|
\section2 Learn More - Projects and Files
|
||||||
|
|
||||||
\QDS creates a set of boilerplate files and folders that you need to create
|
\QDS creates a set of boilerplate files and folders that you need to create
|
||||||
a UI using Qt Quick and QML. The files are listed in the \uicontrol Projects
|
a UI. The files are listed in the \uicontrol Projects view. For more
|
||||||
view. For more information, see \l {Viewing Project Files}.
|
information, see \l {Viewing Project Files}.
|
||||||
|
|
||||||
\image loginui1-project-files.png
|
\image loginui1-project-files.png
|
||||||
|
|
||||||
\list
|
\list
|
||||||
\li The \e {loginui1.qmlproject} project file defines that all
|
\li The \e {loginui1.qmlproject} project file defines that all
|
||||||
QML, JavaScript, and image files in the project folder belong to
|
component, JavaScript, and image files in the project folder belong
|
||||||
the project. Therefore, you do not need to individually list new
|
to the project. Therefore, you do not need to individually list new
|
||||||
files when you add them to the project.
|
files when you add them to the project.
|
||||||
\li The \e {loginui1.qml} file defines the functionality of
|
\li The \e {loginui1.qml} file defines the functionality of
|
||||||
the UI. For the time being, it does not do anything.
|
the UI. For the time being, it does not do anything.
|
||||||
\li The \e {Screen01.ui.qml} file defines the appearance of the
|
\li The \e {Screen01.ui.qml} file defines the appearance of the
|
||||||
UI. For more information, see \l {Qt Quick UI Forms}.
|
UI. For more information, see \l {UI Files}.
|
||||||
\li The \e {qtquickcontrols2.conf} file specifies the selected
|
\li The \e {qtquickcontrols2.conf} file specifies the selected
|
||||||
\l {Styling Qt Quick Controls}{UI style} and some style-specific
|
\l {Styling Qt Quick Controls}{UI style} and some style-specific
|
||||||
arguments.
|
arguments.
|
||||||
\li The \e imports folder contains a \e {Constants.qml} file that
|
\li The \e imports folder contains a \e {Constants.qml} file that
|
||||||
specifies a font loader for the Arial font and a \e qmldir module
|
specifies a font loader for the Arial font and a \e qmldir module
|
||||||
definition file that declares the Constant QML type. For more
|
definition file that declares the Constant component. For more
|
||||||
information, see \l {Module Definition qmldir Files}. In addition,
|
information, see \l {Module Definition qmldir Files}. In addition,
|
||||||
the \e QtQuick subfolder contains the Studio components and effects
|
the \e QtQuick subfolder contains the Studio components and effects
|
||||||
QML types. You can ignore the subfolder for now, because it is not
|
components. You can ignore the subfolder for now, because it is not
|
||||||
used in this tutorial.
|
used in this tutorial.
|
||||||
\endlist
|
\endlist
|
||||||
|
|
||||||
QML files define a hierarchy of objects with a highly-readable, structured
|
UI files define a hierarchy of components with a highly-readable, structured
|
||||||
layout. Every QML file consists of two parts: an imports section and an
|
layout. Every UI file consists of two parts: an imports section and an
|
||||||
object declaration section. The QML types and functionality most common to
|
component declaration section. The components and functionality most common to
|
||||||
UIs are provided in the QtQuick import. You can view the QML code of an
|
UIs are provided in the QtQuick import. You can view the code of an
|
||||||
ui.qml file in the \uicontrol {Text Editor} view.
|
.ui.qml file in the \uicontrol {Text Editor} view.
|
||||||
|
|
||||||
For more information about creating a QML file from scratch, see
|
For more information about creating a component file from scratch, see
|
||||||
\l{First Steps with QML}.
|
\l{First Steps with QML}.
|
||||||
|
|
||||||
Next, you will edit the values of the properties of the UI elements to
|
Next, you will edit the values of the properties of the UI components to
|
||||||
create the main page of the UI.
|
create the main page of the UI.
|
||||||
|
|
||||||
\section1 Creating the Main Page
|
\section1 Creating the Main Page
|
||||||
|
|||||||
@@ -252,7 +252,7 @@
|
|||||||
\section1 Importing Metadata & Assets
|
\section1 Importing Metadata & Assets
|
||||||
|
|
||||||
\QBPS can import metadata generated from other tools and generate a Photoshop document. A
|
\QBPS can import metadata generated from other tools and generate a Photoshop document. A
|
||||||
conventional workflow would be to generate metadata and assets by \l {Exporting QML} {exporting}
|
conventional workflow would be to generate metadata and assets by \l {Exporting Components} {exporting}
|
||||||
a QML project from \QDS and use \QBPS to generate a Photoshop document.
|
a QML project from \QDS and use \QBPS to generate a Photoshop document.
|
||||||
|
|
||||||
Imported text and the assets are organized into Artboards, layers, and groups.
|
Imported text and the assets are organized into Artboards, layers, and groups.
|
||||||
|
|||||||
@@ -36,16 +36,16 @@
|
|||||||
You will need the following files:
|
You will need the following files:
|
||||||
|
|
||||||
\list
|
\list
|
||||||
\li Qt Quick file that will specify the API of the UI
|
\li Component file (.qml) that will specify the API of the UI
|
||||||
\li JavaScript file that generates mock data for the UI.
|
\li JavaScript file that generates mock data for the UI.
|
||||||
For more information about using JavaScript, see
|
For more information about using JavaScript, see
|
||||||
\l{Integrating QML and JavaScript}.
|
\l{Integrating QML and JavaScript}.
|
||||||
\li Module definition file (\e qmldir) that declares the QML type
|
\li Module definition file (\e qmldir) that declares the component
|
||||||
you specify in the Qt Quick file. For more information, see
|
(QML type) you specify in the UI file. For more information, see
|
||||||
\l {Module Definition qmldir Files}.
|
\l {Module Definition qmldir Files}.
|
||||||
\endlist
|
\endlist
|
||||||
|
|
||||||
Here, you will create a QML type based on the QObject class that will
|
Here, you will create a component based on the QObject class that will
|
||||||
be registered as a singleton type. This enables the use of global
|
be registered as a singleton type. This enables the use of global
|
||||||
property values in the UI.
|
property values in the UI.
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/****************************************************************************
|
/****************************************************************************
|
||||||
**
|
**
|
||||||
** Copyright (C) 2019 The Qt Company Ltd.
|
** Copyright (C) 2021 The Qt Company Ltd.
|
||||||
** Contact: https://www.qt.io/licensing/
|
** Contact: https://www.qt.io/licensing/
|
||||||
**
|
**
|
||||||
** This file is part of the Qt Design Studio documentation.
|
** This file is part of the Qt Design Studio documentation.
|
||||||
@@ -67,9 +67,9 @@
|
|||||||
to Qt Quick Application projects that contain .pro, .cpp, and .qrc
|
to Qt Quick Application projects that contain .pro, .cpp, and .qrc
|
||||||
files.
|
files.
|
||||||
|
|
||||||
\li \l {Exporting QML}
|
\li \l {Exporting Components}
|
||||||
|
|
||||||
You can export UI forms (ui.qml files) to JSON metadata format
|
You can export UI files (.ui.qml) to JSON metadata format
|
||||||
and PNG assets to generate native file formats in content creation
|
and PNG assets to generate native file formats in content creation
|
||||||
tools, such as Adobe Photoshop, using \QB.
|
tools, such as Adobe Photoshop, using \QB.
|
||||||
|
|
||||||
|
|||||||
@@ -103,27 +103,27 @@
|
|||||||
\QDS creates the following files and folders:
|
\QDS creates the following files and folders:
|
||||||
|
|
||||||
\list
|
\list
|
||||||
\li .qmlproject project file defines that all QML, JavaScript, and image
|
\li .qmlproject project file defines that all component, JavaScript, and
|
||||||
files in the project folder belong to the project. Therefore, you do
|
image files in the project folder belong to the project. Therefore,
|
||||||
not need to individually list all the files in the project.
|
you do not need to individually list all the files in the project.
|
||||||
\li .qml file defines a UI item, such as a component, screen, or the
|
\li .qml file defines the functionality and appearance of a component.
|
||||||
whole UI.
|
\li ui.qml file defines a visual component that you can edit in
|
||||||
\li ui.qml file defines a form for the UI.
|
\l{Form Editor}.
|
||||||
\li qtquickcontrols2.conf file specifies the preferred style and some
|
\li qtquickcontrols2.conf file specifies the preferred style and some
|
||||||
style-specific arguments.
|
style-specific arguments.
|
||||||
|
\li \e fonts folder contains font files that you have added in
|
||||||
|
\l Library > \uicontrol Assets.
|
||||||
\li \e imports folder contains a \e {Constants.qml} file that specifies
|
\li \e imports folder contains a \e {Constants.qml} file that specifies
|
||||||
a font loader for the Arial font and the screen resolution. The
|
a font loader for the Arial font and the screen resolution. The size
|
||||||
size of the default Screen.ui.qml Rectangle should be set as
|
of the default Screen.ui.qml \l{basic-rectangle}{Rectangle} should
|
||||||
\c {width: Constants.width & height: Constants.height}, so it
|
be set as \c {width: Constants.width & height: Constants.height} so
|
||||||
inherits the global resolution saved here.
|
that it inherits the global resolution saved here.
|
||||||
\li \e qmldir module definition file declares the Constant QML type.
|
\li \e qmldir module definition file declares the Constant component.
|
||||||
For more information, see \l {Module Definition qmldir Files}.
|
For more information, see \l {Module Definition qmldir Files}.
|
||||||
\li In addition, the \e QtQuick subfolder contains the Studio components
|
|
||||||
and effects QML types.
|
|
||||||
\endlist
|
\endlist
|
||||||
|
|
||||||
To use JavaScript and image files in the UI, select \uicontrol Library >
|
To use JavaScript and image files in the UI, select \uicontrol Library >
|
||||||
Assets > Add New Assets.
|
\uicontrol Assets > \inlineimage plus.png.
|
||||||
|
|
||||||
\section1 Adding Files to Projects
|
\section1 Adding Files to Projects
|
||||||
|
|
||||||
@@ -133,15 +133,16 @@
|
|||||||
\list
|
\list
|
||||||
\li \uicontrol {Qt Quick Files}
|
\li \uicontrol {Qt Quick Files}
|
||||||
\list
|
\list
|
||||||
\li \uicontrol {Flow Item} and \uicontrol {Flow View} generate
|
\li \uicontrol {Flow Item} and \uicontrol {Flow View}
|
||||||
types that you can use to design the application flow.
|
generate components that you can use to design the
|
||||||
\li \uicontrol {Qt Quick File} generates a QML type with one
|
\l{Designing Application Flows}{application flow}.
|
||||||
of the following basic types or \l{Using Positioners}
|
\li \uicontrol {Qt Quick File} generates a component with one
|
||||||
{positioners} as the root item: \l {basic-item}{Item},
|
of the following default components or \l{Using Positioners}
|
||||||
|
{positioners} as the root component: \l {basic-item}{Item},
|
||||||
\l {basic-rectangle}{Rectangle}, \l {Images}{Image},
|
\l {basic-rectangle}{Rectangle}, \l {Images}{Image},
|
||||||
\l {Border Image}, \l Flickable, Row, Column, Flow, or Grid.
|
\l {Border Image}, \l Flickable, Row, Column, Flow, or Grid.
|
||||||
\li \uicontrol {Qt Quick UI File} generates a UI form with one
|
\li \uicontrol {Qt Quick UI File} generates a component file
|
||||||
of the above types as the root item.
|
with one of the above components as the root component.
|
||||||
\li \uicontrol {Qt Quick Views} generates a Grid View or a
|
\li \uicontrol {Qt Quick Views} generates a Grid View or a
|
||||||
List View. For more information, see \l{List and Grid Views}.
|
List View. For more information, see \l{List and Grid Views}.
|
||||||
|
|
||||||
|
|||||||
@@ -88,7 +88,7 @@
|
|||||||
\li \l{Importing 3D Assets}
|
\li \l{Importing 3D Assets}
|
||||||
\endlist
|
\endlist
|
||||||
\li \l{Converting UI Projects to Applications}
|
\li \l{Converting UI Projects to Applications}
|
||||||
\li \l{Exporting QML}
|
\li \l{Exporting Components}
|
||||||
\endlist
|
\endlist
|
||||||
\li \l{Creating UIs}
|
\li \l{Creating UIs}
|
||||||
\list
|
\list
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
\li \l{Positioning Items}
|
\li \l{Positioning Items}
|
||||||
\li \l{Using Custom Fonts}
|
\li \l{Using Custom Fonts}
|
||||||
\li \l{Annotating Designs}
|
\li \l{Annotating Designs}
|
||||||
\li \l{Qt Quick UI Forms}
|
\li \l{UI Files}
|
||||||
\endlist
|
\endlist
|
||||||
\li \l {Adding Dynamics}
|
\li \l {Adding Dynamics}
|
||||||
\list
|
\list
|
||||||
|
|||||||
@@ -59,7 +59,7 @@
|
|||||||
\li \l{Using Git}
|
\li \l{Using Git}
|
||||||
\li \l{Importing Designs}
|
\li \l{Importing Designs}
|
||||||
\li \l{Converting UI Projects to Applications}
|
\li \l{Converting UI Projects to Applications}
|
||||||
\li \l{Exporting QML}
|
\li \l{Exporting Components}
|
||||||
\endlist
|
\endlist
|
||||||
\li \b {\l{Creating UIs}}
|
\li \b {\l{Creating UIs}}
|
||||||
\list
|
\list
|
||||||
|
|||||||
Reference in New Issue
Block a user