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
|
||||
\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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
*/
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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}.
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user