diff --git a/doc/qtcreator/images/qtquick-qml-export-dialog.png b/doc/qtcreator/images/qtquick-qml-export-dialog.png index 2c6ff30858d..7a3c327a5d3 100644 Binary files a/doc/qtcreator/images/qtquick-qml-export-dialog.png and b/doc/qtcreator/images/qtquick-qml-export-dialog.png differ diff --git a/doc/qtcreator/src/editors/creator-code-syntax.qdoc b/doc/qtcreator/src/editors/creator-code-syntax.qdoc index 8da38dd3bf6..1afc4566472 100644 --- a/doc/qtcreator/src/editors/creator-code-syntax.qdoc +++ b/doc/qtcreator/src/editors/creator-code-syntax.qdoc @@ -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 diff --git a/doc/qtcreator/src/projects/creator-only/creator-projects-creating.qdoc b/doc/qtcreator/src/projects/creator-only/creator-projects-creating.qdoc index d4d9a5600c6..942f0902cf5 100644 --- a/doc/qtcreator/src/projects/creator-only/creator-projects-creating.qdoc +++ b/doc/qtcreator/src/projects/creator-only/creator-projects-creating.qdoc @@ -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 diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index b5b08a880bc..df32bf6ccf2 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -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 diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc index 34c5b827484..29da64a5294 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc @@ -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 diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-iso-icon-browser.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-iso-icon-browser.qdoc index 6dd14ec3a7a..4939494504b 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-iso-icon-browser.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-iso-icon-browser.qdoc @@ -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 diff --git a/doc/qtcreator/src/qtquick/qtdesignstudio-best-practices.qdoc b/doc/qtcreator/src/qtquick/qtdesignstudio-best-practices.qdoc index 5b3573620c0..f76f54ef4c9 100644 --- a/doc/qtcreator/src/qtquick/qtdesignstudio-best-practices.qdoc +++ b/doc/qtcreator/src/qtquick/qtdesignstudio-best-practices.qdoc @@ -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 */ diff --git a/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc b/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc index 0dff73e4d70..149077c6497 100644 --- a/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc +++ b/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc @@ -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} diff --git a/doc/qtcreator/src/qtquick/qtquick-export.qdoc b/doc/qtcreator/src/qtquick/qtquick-export.qdoc index 84516411662..436847b03bc 100644 --- a/doc/qtcreator/src/qtquick/qtquick-export.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-export.qdoc @@ -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 */ diff --git a/doc/qtcreator/src/qtquick/qtquick-placeholder-data.qdoc b/doc/qtcreator/src/qtquick/qtquick-placeholder-data.qdoc index b620a6e57b0..c3133fd0b86 100644 --- a/doc/qtcreator/src/qtquick/qtquick-placeholder-data.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-placeholder-data.qdoc @@ -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 diff --git a/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc b/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc index 9b398f476a6..db6f67fe9d0 100644 --- a/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc @@ -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. */ diff --git a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc index 22da82757c5..3bb6b5f6ad5 100644 --- a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc @@ -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 */ diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc index d6ea0b5a096..2b9c2f9805e 100644 --- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc @@ -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 diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc index cab3e9b3223..a9cc81718af 100644 --- a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc @@ -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. diff --git a/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc index 77b0d0cd0ad..918b852a1e9 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc @@ -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. diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc index a50e7fcf86b..9f22e18b4c8 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc @@ -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. diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc index 054e3d54f71..3c3c64cef55 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc @@ -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}. diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index acf03b07e79..ba0fedf9058 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -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 diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc index 95f9c2369c2..443e7fa82c7 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -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