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:
Leena Miettinen
2021-03-16 10:29:55 +01:00
parent e9bf841dc9
commit a10ee88437
19 changed files with 150 additions and 149 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -477,46 +477,46 @@
\row
\li M220
\li Error
\li This type (type name) is not supported as a root element of a Qt
Quick UI form.
\li This type (type name) is not supported as a root element of a
UI file (.ui.qml).
\li
\row
\li M221
\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
\row
\li M222
\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
\l{Supported Methods}.
\row
\li M223
\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
\row
\li M224
\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
\row
\li M225
\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
\row
\li M226
\li Error
\li Referencing the parent of the root item is not supported in a Qt
Quick UI form.
\li Referencing the parent of the root item is not supported in a
UI file (.ui.qml).
\li
\row

View File

@@ -302,8 +302,9 @@
\li QML files, which specify items in Qt Quick projects.
\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
(\e .ui.qml) and the corresponding QML file.
Qt Quick 2.0, and \uicontrol {Qt Quick UI File} creates a
\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
Qt Quick projects

View File

@@ -121,7 +121,7 @@
\li \l{Using Custom Fonts}
\li \l{Annotating Designs}
\li \l{Loading Placeholder Data}
\li \l{Qt Quick UI Forms}
\li \l{UI Files}
\endlist
\li \l {Adding Dynamics}
\list
@@ -166,7 +166,7 @@
\li \l {Browsing ISO 7000 Icons}
\li \l {Using QML Modules with Plugins}
\li \l {Converting UI Projects to Applications}
\li \l {Exporting QML}
\li \l {Exporting Components}
\endlist
\li \l{Developing Widget Based Applications}
\list

View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
@@ -101,9 +101,9 @@
convert them to Qt Quick Application projects that contain .pro,
.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.
\endlist

View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** 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
to Qt Quick applications (commercial only). You can use the
\uicontrol {ISO Icon Browser} to add a \l {Picture} type and select the
icon to use for the type. You can change the default color of the icon.
\uicontrol {ISO Icon Browser} to add a \l {Picture} component and select the
icon to use for the component. You can change the default color of the icon.
\image qtcreator-iso-icon-browser.png
@@ -45,16 +45,16 @@
\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} >
\uicontrol {Add Import} > \uicontrol {QtQuick.Extras} to import the
\l {Qt Quick Extras} module.
\li Select \l Library > \uicontrol Components > \inlineimage plus.png
> \uicontrol {QtQuick.Extras} to import the \l {Qt Quick Extras}
module.
\li Drag and drop a \uicontrol Picture element from the library to the
canvas.
\li Drag and drop a \uicontrol Picture component from \uicontrol Library
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}.
\li To find icons, select a criterion for filtering icons and enter a

View File

@@ -48,9 +48,9 @@
\section1 Naming Conventions
Establish naming conventions to keep the items in your UI organized.
Name your items accurately and give them suitable QML IDs. You should
manually specify the names of the items you export from design tools to
Establish naming conventions to keep the components in your UI organized.
Name your components accurately and give them suitable IDs. You should
manually specify the names of the components you export from design tools to
create reliable and self-explanatory names that follow the naming
conventions you have established.
@@ -82,20 +82,21 @@
components that can be conveniently recombined to suit the needs of
your UI.
\li Use as few components as necessary. To minimize the number of
components, use alias properties and states to create the
differences in your instances. We recommend reusing components
components, use \l{Adding Property Aliases}{alias properties} and
\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
processed as completely new types. This reduces loading and
compilation time as well as the size of the binary.
processed as completely new component types. This reduces loading
and compilation time as well as the size of the binary.
\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
or \c real property for speed to which the UI is bound.
\li Separate UI from the application logic. Designers should work with
the UI forms (.ui.qml files), while developers should work on the
corresponding QML files (.qml) to define their programmatic
behaviors or JavaScript. This enables iteration from both the design
and development side of the process without the the risk of
overwriting each other's work.
the \l{UI Files}{UI files} (.ui.qml), while developers should work
on the corresponding implementation files (.qml) to define their
programmatic behaviors or JavaScript. This enables iteration from
both the design and development side of the process without the the
risk of overwriting each other's work.
\endlist
*/

View File

@@ -83,7 +83,7 @@
\li \l{Adding Signal Handlers}
\row
\li Go to Implementation
\li \l{Using Qt Quick UI Forms}
\li \l{Using UI Files}
\row
\li Go into Component
\li \l{Moving Within Components}

View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
@@ -32,46 +32,44 @@
\nextpage creator-using-qt-designer.html
\endif
\title Exporting QML
\title Exporting Components
\l{Qt Quick UI Forms}{UI forms} (ui.qml files) can be exported to
JSON metadata format and PNG assets.
\l{glossary-component}{Components} contained in \l{UI Files}
{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
current project, select \uicontrol Build > \uicontrol {Export QML}.
To export the UI files from the current project, select \uicontrol Build >
\uicontrol {Export Components}.
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
can generate PSD files by importing the metadata and assets.
QML is exported as follows:
Components are exported as follows:
\list
\li QML types inherited from \l [QML]{Item}{Item} are exported, other
types are ignored.
\li Components (QML types) inherited from \l [QML]{Item}{Item} are
exported, other components are ignored.
\li \l [QML]{Text}{Text} components are exported as metadata only
and no assets are generated.
\li \l [QML]{Rectangle}{Rectangle} and \l [QML]{Image}{Image} types
generate assets as PNG files.
\li \l [QML]{Rectangle}{Rectangle} and \l [QML]{Image}{Image}
components generate assets as PNG files.
\endlist
\section1 Configuring QML Export
You can configure the export in the \uicontrol {Export QML} dialog, which
lists the \l{Qt Quick UI Forms}{UI forms} (ui.qml files) of the current
project.
You can configure the export in the \uicontrol {Export Components} dialog,
which lists the UI files (.ui.qml) of the current project.
\image qtquick-qml-export-dialog.png "QML Export Dialog"
\image qtquick-qml-export-dialog.png "Export Components dialog"
\list 1
\li In the \uicontrol {Export path} field, specify the path where
the metadata file and assets are exported.
\li Deselect the \uicontrol {Export assets} check box to disable
exporting assets and only generate the metadata file.
\li Select the \uicontrol {Export components separately} check box to generate separate
metadata files for each component.
\li In the file list, select the \l{Qt Quick UI Forms}{UI forms}
to be exported.
\li Select the \uicontrol {Export components separately} check box to
generate separate metadata files for each component.
\li In the file list, select the .ui.qml files to be exported.
\li Select \uicontrol {Export} export to start the export process.
\endlist
*/

View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
@@ -35,20 +35,20 @@
\title Loading Placeholder Data
The Design mode supports views, models, and delegates, so that when you add
a Grid View, List View, or Path View item, the ListModel and the delegate
item are added automatically.
\QC supports views, models, and delegates, so that when you add
a Grid View, List View, or Path View component, the ListModel and
the delegate component are added automatically.
However, the missing context of the application presents a challenge.
Specific models defined in C++ are the most obvious case. Often,
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.
\section1 Using Dummy Models
If you open a file in the Design mode that references a C++ model, you see
nothing on the canvas. If the data in the model is fetched from the
If you open a file in \l {Form Editor} that references a C++ model, you see
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}
was introduced.
@@ -66,7 +66,7 @@
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,
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
qml/exampleapp/example.qml
@@ -93,7 +93,7 @@
\section1 Creating Dummy Context
The following example presents a common pattern in QML:
The following example presents a common pattern:
\qml
Item {
@@ -102,11 +102,11 @@
}
\endqml
This works nicely for applications but the Design mode displays a zero-sized
item. A parent for the opened file does not exist, because the context is
missing. To get around the missing context, the idea of a \e {dummy
context} is introduced. If you place a file with the same name as the
application (here, example.qml) in the \c {dummydata/context} directory,
This works nicely for applications but \uicontrol {Form Editor} displays a
zero-sized component. A parent for the opened file does not exist, because
the context is missing. To get around the missing context, the idea of a
\e {dummy context} is introduced. If you place a file with the same name as
the application (here, example.qml) in the \c {dummydata/context} directory,
you can fake a parent context:
\qml

View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
@@ -38,13 +38,12 @@
\endif
\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
\e .ui.qml. The UI forms contain a purely declarative subset of the QML
language. It is recommended that you edit the forms in the \uicontrol Design mode.
\QC enforces the use of the supported QML features by displaying error
messages.
You can use \QC wizards to create UI files that have the filename
extension \e .ui.qml. The UI files can be edited in \l {Form Editor}.
If you use \uicontrol {Text Editor} to add code that is not supported
by \uicontrol {Form Editor}, \QC displays error messages.
The following features are not supported:
@@ -52,11 +51,12 @@
\li JavaScript blocks
\li Other bindings than pure expressions
\li Signal handlers
\li States in other items than the root item
\li Root items that are not derived from \l QQuickItem or \l [QML]{Item}
\li States in other components than the root component
\li Root components that are not derived from \l QQuickItem or
\l [QML]{Item}
\endlist
The following types are not supported:
The following components are not supported:
\list
\li Behavior
@@ -161,11 +161,11 @@
For more information about using the methods, see
\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
\uicontrol {Text Editor} tabs in the \uicontrol Design mode. Items that are
supposed to be used in QML code have to be exported as properties:
You can edit the UI files in the \l {Form Editor} and
\uicontrol {Text Editor} views. Components that are
supposed to be used in code have to be exported as properties:
\code
Item {
@@ -182,17 +182,16 @@
}
\endcode
The property alias exports the button to the QML code that uses the form.
You can use the
\inlineimage export_checked.png
(\uicontrol Export) button in the \uicontrol Navigator to export an item as
a property:
The property alias exports the button to the code that uses the form.
You can use the \inlineimage export_unchecked.png
(\uicontrol Export) button in \l Navigator to export a component
as a property:
\image qmldesigner-export-item.png
In the QML file that uses the form, you can use the \c button property alias
to implement signal handlers, for example. In the following code snippet,
the UI form is called \e MainForm.ui.qml:
In the UI file where the component is used, you can use the \c button
property alias to implement signal handlers, for example. In the
following code snippet, the UI file is called \e MainForm.ui.qml:
\code
MainForm {
@@ -203,8 +202,9 @@
You can also assign properties or define behavior or transitions.
To move from the \uicontrol Design mode directly to the implementation of a
type in the .qml file, right-click the type in the \uicontrol Navigator and
select \uicontrol {Go to Implementation} in the context menu.
To move from \l {Form Editor} or \l Navigator directly to the
implementation of a component in the .qml file, right-click the
component and select \uicontrol {Go to Implementation} in the
context menu.
*/

View File

@@ -123,10 +123,10 @@
\list
\endif
\li \l{Qt Quick UI Forms}
\li \l{UI Files}
Some of the wizards create Qt Quick projects that contain UI forms
(.ui.qml files). The forms use a purely declarative subset of the
QML language and you can edit them in the Design mode.
Some of the wizards create projects that contain UI files
(.ui.qml). You should always edit UI files in \l{Form Editor}
and \l Properties, to avoid breaking the code.
\endlist
*/

View File

@@ -87,45 +87,45 @@
in the Design mode. For more information about moving views around,
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
a UI using Qt Quick and QML. The files are listed in the \uicontrol Projects
view. For more information, see \l {Viewing Project Files}.
a UI. The files are listed in the \uicontrol Projects view. For more
information, see \l {Viewing Project Files}.
\image loginui1-project-files.png
\list
\li The \e {loginui1.qmlproject} project file defines that all
QML, JavaScript, and image files in the project folder belong to
the project. Therefore, you do not need to individually list new
component, JavaScript, and image files in the project folder belong
to the project. Therefore, you do not need to individually list new
files when you add them to the project.
\li The \e {loginui1.qml} file defines the functionality of
the UI. For the time being, it does not do anything.
\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
\l {Styling Qt Quick Controls}{UI style} and some style-specific
arguments.
\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
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,
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.
\endlist
QML files define a hierarchy of objects with a highly-readable, structured
layout. Every QML file consists of two parts: an imports section and an
object declaration section. The QML types and functionality most common to
UIs are provided in the QtQuick import. You can view the QML code of an
ui.qml file in the \uicontrol {Text Editor} view.
UI files define a hierarchy of components with a highly-readable, structured
layout. Every UI file consists of two parts: an imports section and an
component declaration section. The components and functionality most common to
UIs are provided in the QtQuick import. You can view the code of an
.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}.
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.
\section1 Creating the Main Page

View File

@@ -252,7 +252,7 @@
\section1 Importing Metadata & Assets
\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.
Imported text and the assets are organized into Artboards, layers, and groups.

View File

@@ -36,16 +36,16 @@
You will need the following files:
\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.
For more information about using JavaScript, see
\l{Integrating QML and JavaScript}.
\li Module definition file (\e qmldir) that declares the QML type
you specify in the Qt Quick file. For more information, see
\li Module definition file (\e qmldir) that declares the component
(QML type) you specify in the UI file. For more information, see
\l {Module Definition qmldir Files}.
\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
property values in the UI.

View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** 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
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
tools, such as Adobe Photoshop, using \QB.

View File

@@ -103,27 +103,27 @@
\QDS creates the following files and folders:
\list
\li .qmlproject project file defines that all QML, JavaScript, and image
files in the project folder belong to the project. Therefore, 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
whole UI.
\li ui.qml file defines a form for the UI.
\li .qmlproject project file defines that all component, JavaScript, and
image files in the project folder belong to the project. Therefore,
you do not need to individually list all the files in the project.
\li .qml file defines the functionality and appearance of a component.
\li ui.qml file defines a visual component that you can edit in
\l{Form Editor}.
\li qtquickcontrols2.conf file specifies the preferred style and some
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
a font loader for the Arial font and the screen resolution. The
size of the default Screen.ui.qml Rectangle should be set as
\c {width: Constants.width & height: Constants.height}, so it
inherits the global resolution saved here.
\li \e qmldir module definition file declares the Constant QML type.
a font loader for the Arial font and the screen resolution. The size
of the default Screen.ui.qml \l{basic-rectangle}{Rectangle} should
be set as \c {width: Constants.width & height: Constants.height} so
that it inherits the global resolution saved here.
\li \e qmldir module definition file declares the Constant component.
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
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
@@ -133,15 +133,16 @@
\list
\li \uicontrol {Qt Quick Files}
\list
\li \uicontrol {Flow Item} and \uicontrol {Flow View} generate
types that you can use to design the application flow.
\li \uicontrol {Qt Quick File} generates a QML type with one
of the following basic types or \l{Using Positioners}
{positioners} as the root item: \l {basic-item}{Item},
\li \uicontrol {Flow Item} and \uicontrol {Flow View}
generate components that you can use to design the
\l{Designing Application Flows}{application flow}.
\li \uicontrol {Qt Quick File} generates a component with one
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 {Border Image}, \l Flickable, Row, Column, Flow, or Grid.
\li \uicontrol {Qt Quick UI File} generates a UI form with one
of the above types as the root item.
\li \uicontrol {Qt Quick UI File} generates a component file
with one of the above components as the root component.
\li \uicontrol {Qt Quick Views} generates a Grid View or a
List View. For more information, see \l{List and Grid Views}.

View File

@@ -88,7 +88,7 @@
\li \l{Importing 3D Assets}
\endlist
\li \l{Converting UI Projects to Applications}
\li \l{Exporting QML}
\li \l{Exporting Components}
\endlist
\li \l{Creating UIs}
\list
@@ -110,7 +110,7 @@
\li \l{Positioning Items}
\li \l{Using Custom Fonts}
\li \l{Annotating Designs}
\li \l{Qt Quick UI Forms}
\li \l{UI Files}
\endlist
\li \l {Adding Dynamics}
\list

View File

@@ -59,7 +59,7 @@
\li \l{Using Git}
\li \l{Importing Designs}
\li \l{Converting UI Projects to Applications}
\li \l{Exporting QML}
\li \l{Exporting Components}
\endlist
\li \b {\l{Creating UIs}}
\list