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 \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

View File

@@ -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

View File

@@ -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

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/ ** 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

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/ ** 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

View File

@@ -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
*/ */

View File

@@ -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}

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/ ** 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
*/ */

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/ ** 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

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/ ** 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.
*/ */

View File

@@ -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
*/ */

View File

@@ -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

View File

@@ -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.

View File

@@ -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.

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/ ** 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.

View File

@@ -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}.

View File

@@ -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

View File

@@ -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