diff options
| author | Leena Miettinen <riitta-leena.miettinen@qt.io> | 2020-01-16 16:30:39 +0100 |
|---|---|---|
| committer | Leena Miettinen <riitta-leena.miettinen@qt.io> | 2020-01-20 13:54:38 +0000 |
| commit | 4a971127ac06fc81bc503085264ec8fecaa95bc3 (patch) | |
| tree | aa744fcc2591b14040c9be570c12e02b700dcb3f | |
| parent | 11b7074170c0e2278dd8fed60cd789b5846eee81 (diff) | |
Doc: Add Qt Design Studio Manual sources
To build the manual, switch to qtcreator\doc\qtdesignstudiodoc,
run qmake, and then "make docs".
The example documentation does not get built with this change.
We need to decide whether to move the examples or fetch their
docs from the other repository.
Task-number: QDS-1487
Change-Id: Ic0a8c15b226eba8ac90686953568f3deaa000fb0
Reviewed-by: Eike Ziller <eike.ziller@qt.io>
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>
182 files changed, 10274 insertions, 0 deletions
diff --git a/doc/qtdesignstudio/README.md b/doc/qtdesignstudio/README.md new file mode 100644 index 0000000000..74a5f5c741 --- /dev/null +++ b/doc/qtdesignstudio/README.md @@ -0,0 +1,156 @@ +# Writing Qt Design Studio Documentation + +The Qt Design Studio Manual is based on the Qt Creator Manual, with additional +topics. When building the Qt Design Studio Manual, parts of the Qt Creator +Manual are pulled in from Qt Creator sources. This is enabled by creating +separate table of contents files for each Manual and by using defines +to hide and show information depending on which Manual is being built. + +This readme file describes how to build the Qt Design Studio Manual and how to +edit or add source files when necessary. + +## Building the Qt Design Studio Manual + +1. Edit qtcreator\qtcreator.pri as follows: + `isEmpty(IDE_DISPLAY_NAME): IDE_DISPLAY_NAME = Qt Design Studio` + `isEmpty(IDE_ID): IDE_ID = qtdesignstudio` + `isEmpty(IDE_CASED_ID): IDE_CASED_ID = QtDesignStudio` +2. Switch to the `qtcreator\doc\qtdesignstudio` directory. +4. Run `qmake` from Qt 5.14.0, or later + (because you need the Qt Timeline and Qt Quick 3D module docs) +5. Run `make docs` on Linux and macOS or `nmake docs` on Windows. + +The docs are generated in `qtcreator\doc\qtdesignstudio\doc\qtdesignstudio` + +## Showing and Hiding Information + +Qt Design Studio uses only a subset of Qt Creator plugins and it has its +own special plugins. This means that their manuals have somewhat different +structures. Which, in turn breaks the navigation links to previous and next +pages. + +This also means that some of the Qt Creator doc source files are not needed at +all and some contain information that does not apply to the Qt Design Studio +Manual. If QDoc parses all the Qt Creator doc sources, it would generate +HTML files for each topic and include those files and all the images that they +refer to in the help compilation files. This would unnecessarily increase the +size of the help database and pollute the help index with references to files +that are not actually listed in the table of contents of the manual. To avoid +this, the files that are not needed are excluded from doc builds in the doc +build configuration file. + +### Fixing the Navigation Links + +The navigation order of the topics in the Qt Design Studio Manual is specified +in `qtcreator\doc\qtdesignstudio\src\qtdesignstudio-toc.qdoc`. The +order of the topics in the Qt Creator Manual is specified in +`qtcreator\doc\src\qtcreator-toc.qdoc`. If you add topics to or move them +around in the TOC file, you must adjust the navigation links accordingly. + +The `qtdesignstudio` define is specified as a value of the `defines` option in +the Qt Design Studio doc configuration file, +`qtcreator\doc\qtdesignstudio\config\qtdesignstudio.qdocconf`. It is +mostly used in the Qt Creator doc sources to specify values for the +\previouspage and \nextpage commands depending on whether the Qt Design Studio +Manual or Qt Creator Manual is being built. For example, the following if-else +statement is needed, because the `quick-buttons.html` is excluded from the +Qt Design Studio Manual: + +`\page quick-components.html` +`\previouspage creator-using-qt-quick-designer.html` +`\if defined(qtdesignstudio)` +`\nextpage qtquick-navigator.html` +`\else` +`\nextpage quick-buttons.html` +`\endif` + +### Excluding Souce Files from Builds + +The directories to exclude from Qt Design Studio Manual builds are listed as +values of the `excludedirs` option in `\config\qtdesignstudio.qdocconf`. + +You only need to edit the values of the option if you want to show or hide all +the contents of a directory. For example, if you add support for a Qt Creator +plugin that was previously not supported by Qt Design Studio, you should remove +the directory that contains the documentation for the plugin from the values. + +To hide or show individual topics within individual `.qdoc` files, you need to +move the files in the Qt Creator doc source (`qtcreator\doc\src`) to or from +excluded directories. + +For example, if support for iOS were added, you would need to check whether the +information about iOS support is applicable to Qt Design Studio Manual. If yes, +you would need to remove the following line from the `excludedirs` value: + +`../../src/ios \` + +You would then use defines to hide any Qt Creator specific information from the +source file in the directory. + +If a directory contains some files that are needed in both manuals and some that +are only needed in the Qt Creator Manual, the latter are located in a +subdirectory called `creator-only`, which is excluded from the Qt Design Studio +doc builds. + +### Hiding Text in Qt Creator Doc Sources + +The `qtcreator` define is specified as a value of the `defines` option in the +Qt Creator doc configuration file, +`qtcreator\doc\src\config\qtcreator-project.qdocconf`. It is mostly used in the +Qt Creator doc sources to hide Qt Creator specific information when the Qt +Design Studio Manual is built. + +The `\else` command is sometimes used to replace some Qt Creator specific text +with text that applies to Qt Design Studio. For example, the following if-else +statement is needed in the Qt Creator doc sources, because the project wizards +in Qt Design Studio are different from those in Qt Creator, and are therefore +described in a new topic that is located in the Qt Design Studio doc sources: + +`For more information, see` +`\if defined(qtcreator)` +`\l{Creating Qt Quick Projects}.` +`\else` +`\l{Creating UI Prototype Projects}.` +`\endif` + +Note that titles in the two manuals can be identical only if the page is +excluded from the Qt Design Studio Manual. In this case, QDoc can correctly +determine the link target. If you add a link to a section title that appears +twice in the doc source files, QDoc uses the first reference to that title +in the `.index` file. + +## Writing About Qt Design Studio Specific Features + +Qt Design Studio specific plugins and features are described in a set of doc +source files located in the `qtcreator\doc\qtdesignstudio\src` directory. Some +files are used to include subsections in topics in the Qt Creator doc sources. + +Screenshots and other illustrations are stored in the `\qtdesignstudio\images` +directory. + +### Adding Topics + +If you add new topics to the Qt Design Studio Manual, add links to them to the +table of contents in `qtdesignstudio-toc.qdoc` and check the values of the +navigation links around them. + +### Including Sections in Qt Creator Doc Sources + +Qt Quick Designer is an integral part of both Qt Creator and Qt Design Studio. +Therefore, most topics that describe it are needed in the manuals of both tools. +You can use the `\include` command in the Qt Creator doc sources to include +`.qdocinc` files from the Qt Design Studio doc sources when building the +Qt Design Studio Manual. + +For example, the following lines in the +`qtcreator\doc\src\qtquick\qtquick-components.qdoc` file add information about +creating and using Qt Design Studio Components to the `Creating Components` +topic that is pulled from the Qt Creator doc sources: + +`\if defined(qtdesignstudio)` +`\include qtdesignstudio-components.qdocinc creating studio components` +`\include qtdesignstudio-components.qdocinc studio components` +`\endif` + +Similarly, you can use include files to include subsections in different main +level topics in the two manuals. diff --git a/doc/qtdesignstudio/config/html-online.qdocconf b/doc/qtdesignstudio/config/html-online.qdocconf new file mode 100644 index 0000000000..d7963a3c3d --- /dev/null +++ b/doc/qtdesignstudio/config/html-online.qdocconf @@ -0,0 +1,2 @@ +HTML.prologue = \ + "<div class=\"context qt_commercial\">\n" diff --git a/doc/qtdesignstudio/config/license.qdocconf b/doc/qtdesignstudio/config/license.qdocconf new file mode 100644 index 0000000000..06da694133 --- /dev/null +++ b/doc/qtdesignstudio/config/license.qdocconf @@ -0,0 +1,4 @@ +# Start of footer - the rest is defined in the default template +HTML.footer = \ + " <p class=\"qt_commercial\">Available under certain Qt licenses.<br/><a href=\"http://www.qt.io/download/\">Find out more.</a></p>\n" \ + " </div>\n" diff --git a/doc/qtdesignstudio/config/qtdesignstudio.qdocconf b/doc/qtdesignstudio/config/qtdesignstudio.qdocconf new file mode 100644 index 0000000000..c27a744898 --- /dev/null +++ b/doc/qtdesignstudio/config/qtdesignstudio.qdocconf @@ -0,0 +1,120 @@ +project = "$IDE_DISPLAY_NAME" +description = "$IDE_DISPLAY_NAME Manual" +url = https://doc.qt.io/qtdesignstudio + +moduleheader = + +headerdirs = +sourcedirs = ../src \ + ../examples/doc \ + ../../src +# The image folders also need to added by packaging scripts, so inform your +# local release team about any changes you make. +imagedirs = ../images \ + ../examples/doc/images \ + ../../images \ + ../../../plugins/qmldesigner/qmlpreviewplugin/images \ + ../../../share/qtcreator/qml/qmlpuppet/mockfiles/images \ + ../../../share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images \ + ../../../src/libs/qmleditorwidgets/images \ + ../../../src/libs/utils/images \ + ../../../src/plugins/debugger/images \ + ../../../src/plugins/diffeditor/images \ + ../../../src/plugins/help/images \ + ../../../src/plugins/projectexplorer/images \ + ../../../src/plugins/qmldesigner/components/componentcore/images \ + ../../../src/plugins/qmldesigner/components/formeditor \ + ../../../src/plugins/qmldesigner/components/navigator \ + ../../../src/plugins/qmldesigner/components/timelineeditor/images \ + ../../../src/plugins/qmldesigner/qmlpreviewplugin/images \ + ../../../src/plugins/texteditor/images + +excludefiles += ../../src/qtcreator.qdoc \ + ../../src/qtcreator-toc.qdoc + +excludedirs += ../../examples/accelbubble \ + ../../examples/textfinder \ + ../../examples/transitions \ + ../../src/analyze \ + ../../src/android \ + ../../src/baremetal \ + ../../src/cmake \ + ../../src/debugger/creator-only \ + ../../src/editors/creator-only \ + ../../src/howto/creator-only \ + ../../src/ios \ + ../../src/linux-mobile \ + ../../src/mcu \ + ../../src/overview/creator-only \ + ../../src/projects \ + ../../src/qnx \ + ../../src/qtquick/creator-only \ + ../../src/vcs/creator-only \ + ../../src/widgets \ + ../../src/webassembly + +exampledirs = ../examples/ \ + ../../examples +examples.fileextensions += *.qml *.svg *.ts *.qm + +HTML.extraimages = ../../config/images/commercial.png +qhp.QtCreator.extraFiles = ../../config/images/commercial.png + +depends += qtwidgets \ + qtcore \ + qtqml \ + qtqmlmodels \ + qtquick \ + qmake \ + qtdoc \ + qtgraphicaleffects \ + qtgui \ + qthelp \ + qtquick3d \ + qtquickcontrols \ + qtquickextras \ + qtquicktimeline \ + qtlinguist \ + qtscxml \ + qtsensors \ + qttestlib \ + qtuitools \ + qtxml + +include(../../config/macros.qdocconf) +include(../../config/qt-cpp-ignore.qdocconf) +include(../../config/qt-defines.qdocconf) + +defines += qtdesignstudio + +sources.fileextensions = "*.qdoc" "*.qdocinc" + +#depends += qtcreator \ +# qmake + +qhp.projects = qtdesignstudio +qhp.qtdesignstudio.file = qtdesignstudio.qhp +qhp.qtdesignstudio.namespace = org.qt-project.$IDE_ID.$QTC_VERSION_TAG +qhp.qtdesignstudio.virtualFolder = doc +qhp.qtdesignstudio.indexTitle = $IDE_DISPLAY_NAME Manual $QTC_VERSION +qhp.qtdesignstudio.filterAttributes = $IDE_ID $QTC_VERSION +qhp.qtdesignstudio.customFilters.qtdesignstudio.name = $IDE_DISPLAY_NAME $QTC_VERSION +qhp.qtdesignstudio.customFilters.qtdesignstudio.filterAttributes = $IDE_ID $QTC_VERSION +qhp.qtdesignstudio.indexRoot = + +qhp.qtdesignstudio.subprojects = manual +qhp.qtdesignstudio.subprojects.manual.title = $IDE_DISPLAY_NAME Manual +qhp.qtdesignstudio.subprojects.manual.indexTitle = All Topics +qhp.qtdesignstudio.subprojects.manual.type = manual + + +# Doxygen compatibility commands +macro.see = "\\sa" +macro.function = "\\fn" +macro.QB = "Qt Bridge" +macro.QBPS = "Qt Bridge for Adobe Photoshop" +macro.QBSK = "Qt Bridge for Sketch" +macro.QDS = "Qt Design Studio" + +navigation.landingpage = "$IDE_DISPLAY_NAME Manual" +buildversion = "$IDE_DISPLAY_NAME Manual $QTC_VERSION" diff --git a/doc/qtdesignstudio/config/style/qt5-sidebar.html b/doc/qtdesignstudio/config/style/qt5-sidebar.html new file mode 100644 index 0000000000..ea8aeab578 --- /dev/null +++ b/doc/qtdesignstudio/config/style/qt5-sidebar.html @@ -0,0 +1,18 @@ +<div class="sectionlist normallist"> + <div class="heading"> + <a name="reference"></a> + <h2 id="reference">Qt Design Studio Manual</h2> + </div> + <div class="indexboxcont indexboxbar"> + <ul> + <li><a href="studio-getting-started.html">Getting Started</a></li> + <li><a href="studio-projects-managing.html">Managing Projects</a></li> + <li><a href="studio-prototyping.html">Creating UIs</a></li> + <li><a href="studio-adding-dynamics.html">Adding Dynamics</a></li> + <li><a href="studio-3d.html">Editing 3D Scenes</a></li> + <li><a href="creator-live-preview.html">Previewing</a></li> + <li><a href="studio-advanced.html">Advanced Topics</a></li> + <li><a href="studio-help.html">Help</a></li> + <li><a href="qtdesignstudio-toc.html">All Topics</a></li> + </ul> + </div> diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png Binary files differnew file mode 100644 index 0000000000..1e64ec1b1b --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png b/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png Binary files differnew file mode 100644 index 0000000000..abbf16e991 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-breadcrumb-bar.png b/doc/qtdesignstudio/examples/doc/images/loginui1-breadcrumb-bar.png Binary files differnew file mode 100644 index 0000000000..99898235fe --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-breadcrumb-bar.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png Binary files differnew file mode 100644 index 0000000000..0449e31505 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png Binary files differnew file mode 100644 index 0000000000..ea4796fa09 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library.png b/doc/qtdesignstudio/examples/doc/images/loginui1-library.png Binary files differnew file mode 100644 index 0000000000..1183e572cd --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-library.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png Binary files differnew file mode 100644 index 0000000000..06998bdd51 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png Binary files differnew file mode 100644 index 0000000000..43a561c54e --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-project.png b/doc/qtdesignstudio/examples/doc/images/loginui1-project.png Binary files differnew file mode 100644 index 0000000000..1fe1ff3c1f --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-project.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png Binary files differnew file mode 100644 index 0000000000..472dec3001 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-toolbar.png b/doc/qtdesignstudio/examples/doc/images/loginui1-toolbar.png Binary files differnew file mode 100644 index 0000000000..8968b021a4 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-toolbar.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1.png b/doc/qtdesignstudio/examples/doc/images/loginui1.png Binary files differnew file mode 100644 index 0000000000..4971673531 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png Binary files differnew file mode 100644 index 0000000000..26444afef6 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png Binary files differnew file mode 100644 index 0000000000..cd41dfbe32 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-imports.png b/doc/qtdesignstudio/examples/doc/images/loginui2-imports.png Binary files differnew file mode 100644 index 0000000000..961f4c875e --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui2-imports.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png Binary files differnew file mode 100644 index 0000000000..af692bf74e --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png Binary files differnew file mode 100644 index 0000000000..0381935b0d --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2.png b/doc/qtdesignstudio/examples/doc/images/loginui2.png Binary files differnew file mode 100644 index 0000000000..40fae287d4 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui2.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png Binary files differnew file mode 100644 index 0000000000..2966ea7061 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png Binary files differnew file mode 100644 index 0000000000..783065d3f4 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png Binary files differnew file mode 100644 index 0000000000..4b00084e3c --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-states.png b/doc/qtdesignstudio/examples/doc/images/loginui3-states.png Binary files differnew file mode 100644 index 0000000000..bc0e5f7239 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-states.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png Binary files differnew file mode 100644 index 0000000000..858c959942 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3.gif b/doc/qtdesignstudio/examples/doc/images/loginui3.gif Binary files differnew file mode 100644 index 0000000000..f3380d9078 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui3.gif diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png Binary files differnew file mode 100644 index 0000000000..8a1eb963ad --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png Binary files differnew file mode 100644 index 0000000000..70238a8b85 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png Binary files differnew file mode 100644 index 0000000000..de5346276a --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png Binary files differnew file mode 100644 index 0000000000..6085894bf9 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png Binary files differnew file mode 100644 index 0000000000..d1affa8d8c --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png Binary files differnew file mode 100644 index 0000000000..e983c6f42e --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4.gif b/doc/qtdesignstudio/examples/doc/images/loginui4.gif Binary files differnew file mode 100644 index 0000000000..0d51973091 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui4.gif diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc new file mode 100644 index 0000000000..18a7d8d499 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc @@ -0,0 +1,381 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example loginui1 + \ingroup studioexamples + \ingroup gstutorials + \nextpage {Log In UI - Part 2} + + \title Log In UI - Part 1 + \brief Illustrates how to use wizards to create a simple UI that contains a + text label, push buttons, and a logo. + + \image loginui1.png + + \e{Log In UI - Part 1} is the first in a series of examples that build on + each other to illustrate how to use \QDS to create a simple UI with some + basic UI components, such as pages, buttons, and fields. Part 1 describes + how to use \QDS wizards to create a Qt Quick project and a button UI + control, and how to modify the files generated by the wizards to design + your own UI. + + The \e {Learn Qt Quick} sections provide additional information about the + tasks performed by the wizards and about the basics of QML and Qt Quick. + + \section1 Creating the UI Project + + For the purposes of this example, you will use the simplest wizard offered. + Wizards are available also for creating UIs that are optimized for mobile + platforms and for launcher applications. For more information about the + options you have, see \l {Creating Projects}. + + To create a project: + + \list 1 + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol General > \uicontrol {Qt Quick Application - Empty} > + \uicontrol Choose. + \li In the \uicontrol Name field, enter \e {loginui1}. + \li In the \uicontrol {Create in} field, enter the path for the project + files + \li Select \uicontrol Next (or \uicontrol Continue on \macos) to + continue to the \uicontrol {Define Project Details} page. + \li In the \uicontrol {Screen resolution} field, select \e {640 x 480}. + \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create + the project. + \endlist + + Your project should now look something like this in the Design mode: + + \image loginui1-project.png "Log In UI project in the Design mode" + + The UI is built using a \l Rectangle QML type that forms the background and + a \l Text type that displays some text. + + \section2 Learn Qt Quick - 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 Project + tab in the \uicontrol Navigator and in the \uicontrol Projects pane. 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 + 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}. + \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 + 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 + used in this example. + \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. Select the \uicontrol {Text Editor} + tab in the Design mode or press \key F4 to view the QML code of an ui.qml + file. + + For more information about creating a QML file from scratch, see + \l{First Steps with QML}. + + Next, you will edit the properties of the UI elements to create the main + page of the UI. + + \section1 Creating the Main Page + + You will now change the properties of the \l Rectangle type to turn the UI + background white and those of the \l Text type to change the text and to use + a larger font size. In addition, you will use the \l Image type to add the + Qt logo to the page. + + To preview the changes that you make to the UI while you make + them, select the \inlineimage live_preview.png + (\uicontrol {Show Live Preview}) button on the canvas toolbar + or press \key {Alt+P}. + + The \e Screen01.ui.qml file that the wizard created for you should be + open in the Design mode. If it is not, you can double-click it in the + \uicontrol Project sidebar view to open it. + + To modify \e Screen01.ui.qml in the \uicontrol {Form Editor} tab: + + \list 1 + \li Select \e Rectangle in the \uicontrol Navigator to display its + properties in the \uicontrol Properties view. + \li In the \uicontrol Color field, select the + \inlineimage icons/action-icon-binding.png + (\uicontrol Actions) menu, and then select \uicontrol Reset to + reset the rectangle background to the default color, white. + \li Select \e Text in the \uicontrol Navigator. + \li In the \uicontrol id field, change its id to \e pageTitle. + \li In the \uicontrol Text field, enter \e {Qt Account}. + \li In the \uicontrol Font group, \uicontrol Size field, set the font + size to \e 24 pixels. + \li Drag and drop an \l Image type from \uicontrol Library > + \uicontrol {QML Types} > \uicontrol {Qt Quick Basic} to the + top-left corner of the rectangle. + \li In the \uicontrol id field, change its id to \e logo. + \li In the \uicontrol Source field, select the \inlineimage browse-button.png + (\uicontrol Browse) button to locate the Qt logo image file. Click + \l {https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_64x64px.png} + {here} to open the Qt logo in a browser and save it as a file in the + folder where you created the project. The image is only used for + decoration, so you can also use any other image or just leave it + out. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + Your UI should now look something like this in the Design mode and live + preview: + + \image loginui1-main-page.png "Modified UI in the Design mode" + + \section2 Learn Qt Quick - QML Types + + The \l {Qt Quick} module provides all the basic types necessary for creating + UIs. It provides a visual canvas and includes types for creating and + animating visual components, receiving user input, and creating data models + and views. + + To be able to use the functionality of Qt Quick types, the wizard adds the + following \e import statements to the QML files that it creates: + + \quotefromfile loginui1/Screen01.ui.qml + \skipto import + \printuntil loginui1 1.0 + + The \uicontrol Library lists the QML types in each Qt module that are + supported by \QDS. You can use the basic types to create your own QML + types, and they will be listed in the \uicontrol {My QML Components} tab. + The tab is only visible if you have created custom QML components. + + For more information about the \l Rectangle and \l Image types used in this + example, see \l{Use Case - Visual Elements In QML}. For descriptions of all + QML types, see \l{All QML Types} in the Qt reference documentation. + + \section1 Creating a Push Button + + You can use another wizard to create a push button and to add it to the + project. The wizard creates a reusable button component that appears in + the \uicontrol {My QML Components} tab in the \uicontrol Library. You can + drag and drop it to the canvas and modify its properties to change its + appearance and functionality. + + If you find that you cannot use the wizard to create the kind of push + button that you want, you can create your button from scratch using basic + QML types. For more information, see \l {Creating Buttons} and + \l {Creating Scalable Buttons and Borders}. + + To create a push button: + + \list 1 + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} > + \uicontrol {Custom Button} > \uicontrol Choose. + \li In the \uicontrol {Component name} field, enter \e {PushButton}. + \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create + the button. + \endlist + + Your button should now look something like this in the Design mode: + + \image loginui1-button.png "Button in the Design mode." + + \section2 Learn Qt Quick - Qt Quick Controls + + The \e {Custom Button} wizard creates a \l [Qt Quick Controls 2] {Button} + QML type that belongs to the \l {Qt Quick Controls 2} module. It is a + push-button control that can be pushed or clicked by the user. Buttons + are normally used to perform an action or to answer a question. The Button + type inherits properties and functionality from another QML type. These + enable you to set text, display an icon, react to mouse clicks, and so on. + + To be able to use the functionality of the Button type, the wizard adds the + following \e import statements to the \e PushButton.ui.qml file: + + \quotefromfile loginui1/PushButton.ui.qml + \skipto import + \printuntil loginui1 + + The \l {Qt Quick Templates 2} module provides the functionality of the + Button type. The module is imported as \e T, and the alias is added to + the Button type definition to indicate that the Button type from the + Qt Quick Controls 2 module is used, instead of some other type with the + same name. + + \printuntil text + \dots + \skipto Rectangle { + \printuntil } + \dots + + Next, you will change the appearance of the button by modifying its + properties. + + \section1 Styling the Button + + You can now modify the properties of the PushButton type to your liking. To + make the changes apply to all the button instances, you must make them in + the \e PushButton.ui.qml file. + + Because the wizard already set a master style for all the UI files in the + project, the button background properties are not displayed in the + \uicontrol Properties view. You can access them by selecting them in the + \uicontrol Master menu (1) on the toolbar. + + \image loginui1-toolbar.png + + To change the button properties: + + \list 1 + \li On the toolbar, select \uicontrol Master > + \uicontrol buttonBackground to move into the button background + component. + \li Select the button background on the canvas or in the + \uicontrol Navigator to display its properties in the + \uicontrol Properties view. + \li In the \uicontrol Color field, select + \inlineimage icons/action-icon.png + (\uicontrol Actions) > \uicontrol {Set Binding} and set the + button background color to \e #41cd52. + \li Press \key Enter or select the tick button at the bottom of + the editor to save the new value. + \image loginui1-binding-editor.png "Binding Editor" + \li In the \uicontrol {Border Color} field, set the button + border color to \e #21be2b. You could also use the color picker + to change the button color. + \li In the \uicontrol Radius field, enter 6 to give the button + rounded corners. + \li Select \uicontrol Master > \uicontrol textItem, and set the + button text color to white (\e #ffffff). + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + To move back to the top level PushButton type on the canvas, select + \uicontrol PushButton.ui.qml on the breadcrumb bar (1): + + \image loginui1-breadcrumb-bar.png "Breadcrumb bar in the Design mode." + + Your button should now look something like this: + + \image loginui1-button-styled.png "Modified button in the Design mode." + + \section2 Learn Qt Quick - Property Bindings + + An object's property can be assigned a static value which stays constant + until it is explicitly assigned a new value. In this example, the color + values you set in the \uicontrol {Binding Editor} are static. + + However, to make the fullest use of QML and its built-in support for dynamic + object behavior, you can use property bindings that specify relationships + between different object properties. When a property's dependencies change + in value, the property is automatically updated according to the specified + relationship. + + Behind the scenes, the QML engine monitors the property's dependencies + (that is, the variables in the binding expression). When it detects a + change, it re-evaluates the binding expression and applies the new result + to the property. + + For more information, see \l {Property Binding}. + + Next, you will use the \e PushButton type in the main UI QML file, + \e Screen01.ui.qml to add two instances of the button to the UI + and to modify their text labels. + + \section1 Adding Buttons to the UI + + You will now add two button instances to the UI and modify their labels. + + \list 1 + \li Double-click \e Screen01.ui.qml in the \uicontrol Project sidebar + view to open it on the canvas. + \li Drag and drop two instances of the PushButton type from the + \uicontrol Library to the canvas. + \image loginui1-library.png "Library sidebar view" + \li Select one of the buttons in the \uicontrol Navigator to modify + its id and text label in the \uicontrol Properties view. + \li In the \uicontrol Id field, enter \e loginButton. + \li In the \uicontrol Text field, enter \e {Log In} and select + \uicontrol tr to mark the text + \l {Internationalization and Localization with Qt Quick} + {translatable}. + \li Select the other button, and change its id to \e registerButton + and text label to \e {Create Account}. Again, mark the text + translatable. + \li When an element is selected, selection handles are displayed in its + corners and on its sides. Use the selection handles to resize the + buttons so that the text fits comfortably on the button background. + In this example, the button width is set to 120 pixels. + \li Move the cursor on the selected button to make the selection icon + appear. You can now drag the button to another position on the + canvas. Use the guidelines to align the buttons below the page + title: + \image loginui1-align-buttons.png + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + The first iteration of your UI is now ready and should now look something + like this in the Design mode and live preview: + + \image loginui1-ready.png "The finished UI in the Design mode" + + \section2 Learn Qt Quick - QML Ids + + Each QML type and each instance of a QML type has an \e id that uniquely + identifies it and enables other objects' properties to be bound to it. An + id must be unique, it must begin with a lower-case letter or an underscore + character, and it can contain only letters, numbers, and underscore + characters. + + For more information, see \l{The id Attribute}. + + \section1 Next Steps + + To learn how to add more UI controls and position them on the page using + anchors and layouts so that the UI is scalable, see the next example in + the series, \l {Log In UI - Part 2}. + + For a more advanced example of creating a menu button and using it to + construct a button bar, see \l {Side Menu}. +*/ diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc new file mode 100644 index 0000000000..908c50ee51 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc @@ -0,0 +1,217 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example loginui2 + \ingroup studioexamples + \ingroup gstutorials + \previouspage {Log In UI - Part 1} + \nextpage {Log In UI - Part 3} + + \title Log In UI - Part 2 + \brief Illustrates how to position UI components on pages using anchors and + positioners. + + \image loginui2.png "Log In UI" + + \e{Log In UI - Part 2} is the second in a series of examples that build + on each other to illustrate how to use \QDS to create a simple UI with + some basic UI components, such as pages, buttons, and entry fields. Part 2 + describes how to position the UI components on pages to create a scalable + UI. + + To ensure that the layout is responsive and all the UI elements stay in + their proper places when you resize the UI on the desktop or on devices + with different screen sizes, you will use anchors and positioners. + + These instructions build on \l {Log In UI - Part 1}. + + The \e {Learn Qt Quick} sections provide additional information about the + features of QML and Qt Quick that are relevant to the task at hand. + + \section1 Anchoring UI Components + + First, you will add a new rectangle to the canvas and move all the + current UI components to it to create a new page. Then, you will + \l {Setting Anchors and Margins}{anchor} the static elements on the + page, that is the logo image (\e logo) and page title (\e pageTitle), + to the page. When you created the project using the new project wizard + in Part 1 of this example, the wizard anchored \e pageTitle to the + vertical and horizontal center of the page. Therefore, you will only + need to replace the vertical anchor of \e pageTitle with a top anchor + to align it with \e logo on the page. + + To preview the changes that you make to the UI while you make + them, select the \inlineimage live_preview.png + (\uicontrol {Show Live Preview}) button on the canvas toolbar + or press \key {Alt+P}. + + To anchor components on a page: + + \list 1 + \li Open \e {Screen01.ui.qml} for editing in the Design mode + \uicontrol {Form Editor} tab. + \li Select the rectangle that forms the UI background in the + \uicontrol Navigator, and change its id to \e root in the + \uicontrol Properties view. + \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library + to \e root, and change its id to \e loginPage. + \li In the \uicontrol Layout tab, select the \inlineimage anchor-fill.png + (\uicontrol {Fill Parent Item}) button to anchor the page to the root + item on all sides. + \li Select all the other UI elements below \e root in the + \uicontrol Navigator (press the \key Shift key for multiple + selection) and drag them to \e loginPage. + \li Select \e logo in the \uicontrol Navigator. + \li Select the \inlineimage anchor-top.png + (\uicontrol Top) and \inlineimage anchor-left.png + (\uicontrol Left) anchor buttons to anchor \e logo to the top left + corner of its parent (the \e loginPage) with 10-pixel margins. + \li Select \e pageTitle in the \uicontrol Navigator. + \li Deselect the \inlineimage anchor-vertical-center.png + (\uicontrol {Vertical Center}) button to remove the + anchor, and then select the \uicontrol Top button to anchor the + title to the top of the page with a 70-pixel margin. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + Your page now should look something like this in the Design mode and live + preview: + + \image loginui2-loginpage.png "Login page in the Design mode" + + \section2 Learn Qt Quick - Anchors + + In an anchor-based layout, each QML type can be thought of as having a set + of invisible \e anchor lines: top, bottom, left, right, fill, horizontal + center, vertical center, and baseline. + + Anchors enable placing an object either adjacent to or inside of another + object, by attaching one or more of the object's anchor lines to the anchor + lines of the other object. If an object changes, the objects that are + anchored to it will adjust automatically to maintain the anchoring. + + For more information, see \l{Positioning with Anchors}. + + \section1 Using Column Positioners + + You will now add two entry fields to the page and position them in a column + to learn another method of \l{Using Positioners}{positioning items}. + Next, you will position the push buttons on the page in another column. + Finally, you will anchor the columns to the page to enable their positions + to change when the screen size changes. + + To add entry fields to the page: + + \list 1 + \li In \uicontrol Library > \uicontrol {QML Types}, select the + \uicontrol {+ \QtQuick.Controls} button to display the + \l {Qt Quick Controls 2} types in the tab: + \image loginui2-imports.png + \li Drag and drop two instances of the \uicontrol {Text Field} type + to the canvas. + \li Select one of the text fields in the \uicontrol Navigator, and + change its id to \e usernameField in the \uicontrol Properties view. + \li In the \uicontrol Geometry group, \uicontrol Size field, set the + width of the field to \e 300 pixels. + \li In the \uicontrol Placeholder field, enter \e Username and select + \uicontrol tr to mark the text translatable. + \image loginui2-field-properties.png "Text field properties" + \li In the \uicontrol Text field, delete the default text to make the + placeholder text visible on the canvas. The text value always takes + precedence over the placeholder text value. + \li Select the other text field, and change its id to + \e passwordField, placeholder text to \e Password, + and width to \e 300 pixels. Also remove the default text. + \endlist + + You will now position the fields and buttons as columns: + + \list 1 + \li Select \e usernameField and \e passwordField in the + \uicontrol Navigator, and right-click on either item + to open a context menu. + \li Select \uicontrol Position > \uicontrol {Position in Column} + to position the fields on top of each other on the canvas. + \li Select the column in the \uicontrol Navigator and change its id + to \e fieldColumn in \uicontrol Properties. + \li In the \uicontrol Spacing field, set the spacing between the + fields to 5 pixels. + \image loginui2-column-properties.png "Column properties" + \li Select \e loginButton and \e registerButton, and then select + \uicontrol Position > \uicontrol {Position in Column} to position + them in a column. + \li Select the button column, change its id to \e buttonColumn, and + set the spacing between the buttons to 5 pixels, as above. + \endlist + + You will now anchor the field and button columns to the page: + + \list 1 + \li Select \e fieldColumn in the \uicontrol Navigator. + \li In \uicontrol Properties > \uicontrol Layout, select the + \uicontrol Top button to anchor the top of the button column to + the top of its parent (the \e loginPage) with a 200-pixel margin. + \li Select the \inlineimage anchor-horizontal-center.png + (\uicontrol {Horizontal Center}) button to center the field + column horizontally on the page. + \li Select \e buttonColumn in the \uicontrol Navigator. + \li In \uicontrol Properties > \uicontrol Layout, select the + \inlineimage anchor-bottom.png + (\uicontrol Bottom) button to anchor the bottom of the button + column to the bottom of its parent (the \e loginPage) with a + 50-pixel margin. + \li Select the \uicontrol {Horizontal Center} button to center + the button column horizontally on the page. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + The second iteration of your UI is now ready and should look something like + this in the Design mode and live preview: + + \image loginui2-loginpage-ready.png "Login page in the Design mode" + + \section1 Learn Qt Quick - Positioners + + Qt Quick provides built-in positioner items. For many use cases, the best + positioner to use is a simple grid, row, or column, and Qt Quick provides + items that will position children in these formations in the most efficient + manner possible. For more information about using pre-defined positioners, + see \l {Item Positioners}. + + For more complicated UI designs, you can use QML types from the + \l {Qt Quick Layouts Overview}{Qt Quick Layouts module}. + + \section1 Next Steps + + To learn more about positioning items in \QDS, see + \l{Positioning Items in UIs}. + + To learn how to add a second page and move to it from the main page, see + the next example in the series, \l {Log In UI - Part 3}. +*/ + diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc new file mode 100644 index 0000000000..1bfa856b3e --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc @@ -0,0 +1,274 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example loginui3 + \ingroup studioexamples + \ingroup gstutorials + + \title Log In UI - Part 3 + \brief Illustrates how to use states to create a second UI page. + \previouspage {Log In UI - Part 2} + \nextpage {Log In UI - Part 4} + + \image loginui3.gif "Log In UI" + + \e{Log In UI - Part 3} is the third in a series of examples that build + on each other to illustrate how to use \QDS to create a simple UI with + some basic UI components, such as pages, buttons, and entry fields. Part 3 + describes how to use states to add a second page to the UI. + + Because the second page will contain most of the same UI elements as the + login page, you will use \e states to show and hide UI elements as necessary + when a user selects the \uicontrol {Create Account} button. + + These instructions build on: + + \list + \li \l {Log In UI - Part 1} + \li \l {Log In UI - Part 2} + \endlist + + The \e {Learn Qt Quick} sections provide additional information about the + features of QML and Qt Quick that are relevant to the task at hand. + + \section1 Adding UI Components + + You will add another text field for verifying the password that users + enter to create an account and a back button for returning to the login + page. You are already familiar with the tasks in this section from Part 1 + of this example. + + To preview the changes that you make to the UI while you make + them, select the \inlineimage live_preview.png + (\uicontrol {Show Live Preview}) button on the canvas toolbar + or press \key {Alt+P}. + + To add the text field and a back button needed on the registration page: + + \list 1 + \li Open \e {Screen01.ui.qml} in the Design mode + \uicontrol {Form Editor} for editing. + \li Drag and drop a \uicontrol {Text Field} from \uicontrol Library + > \uicontrol {QML Types} > \uicontrol {Qt Quick Controls 2} to + \e fieldColumn in the \uicontrol Navigator. + \li In \uicontrol Properties, change the id of the text field to + \e verifyPasswordField. + \li In the \uicontrol Geometry group, \uicontrol Size field, set the + width of the field to \e 300 pixels. + \li In the \uicontrol Placeholder field, set the placeholder text to + \e {Verify password}. + \li In the \uicontrol Text field, delete the default text to make the + placeholder text visible on the canvas. + \li Drag and drop a PushButton type from the \uicontrol Library, + \uicontrol {My QML Components} tab, to \e loginPage in the + \uicontrol Navigator. + \li Select the button in the \uicontrol Navigator and change its id to + \e backButton in \uicontrol Properties. + \li In the \uicontrol Geometry group, \uicontrol Size field, set the + button width to \e 40 pixels. + \li In the \uicontrol Text field, enter \e <. + \li In the \uicontrol Font group, \uicontrol Size field, set the font + size to \e 24 pixels. + \li In the \uicontrol Layout tab, select the \inlineimage anchor-top.png + (\uicontrol Top) and \inlineimage anchor-right.png + (\uicontrol Right) anchor buttons to anchor \e backButton to + the top right corner of its parent (the \e loginPage) with 20- + and 10-pixel margins, respectively. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + Your page now should look something like this in the Design mode and live + preview: + + \image loginui3-base-state.png "Login page with new UI components" + + Next, you will add states for the login page and the registration page, + where you use the visibility property to hide the password verification + field and the back button on the login page and the login button on the + registration page. + + \section1 Using States to Simulate Page Changes + + You will now add \l{Adding States}{states} to the UI to show and hide UI + components on the canvas: + + \list 1 + \li In the \uicontrol States pane, select the \inlineimage plus.png + button. + \image loginui3-login-state.png "States pane" + \li Enter \e loginState as the state name. + \li Select \e verifyPasswordField in the \uicontrol Navigator, + and deselect the \uicontrol Visibility check box in + \uicontrol Properties to hide the verify password field in + the login state. + \image loginui3-visibility.png + \li Repeat the above step for \e backButton. + \li In the \uicontrol {Text Editor}, add the following line to the + definition of \e root to specify that the application should start + in \e loginState: + \quotefromfile loginui3/Screen01.ui.qml + \skipto Rectangle { + \printuntil state: "loginState" + \li Add another state and name it \e registerState. + \li In this state, reselect the \uicontrol Visibility check box in + \e verifyPasswordField and \e backButton properties to show them + again. + \li Select \e loginButton in the \uicontrol Navigator, and deselect + the \uicontrol Visibility check box to hide the login button in + the registration state. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + You can now see all the states in the \uicontrol States view. The live + preview displays the default state, \e loginState: + + \image loginui3-states.png "States view" + + \section2 Learn Qt Quick - States + + In Qt Quick, the \e state of a particular visual item is the set of + information which describes how and where the individual component + parts of the visual item are displayed within it, and all the data + associated with that state. Most visual items in a UI will have a + limited number of states, each with well-defined properties. + + For example, an element in a list may be either selected or not, and if + selected, it may either be the currently active single selection or it + may be part of a selection group. Each of those states may have certain + associated visual appearance (neutral, highlighted, expanded, and so on). + + Qt Quick provides a \l State type with properties which define its + semantics and can be used to trigger behavior or animations. UI components + typically have a state property and a default state. The default state + contains all of an item's initial property values, and is therefore useful + for managing property values before state changes. + + UI components can specify additional states by adding new State objects to + the state property. Each state within a component has a unique name. To + change the current state of an item, the state property is set to the name + of the state. State changes can be bound to conditions by using the \c when + property. + + For more information, see \l{Qt Quick States}. + + Next, you will create connections to specify that clicking the + \uicontrol {Create Account} button on the login page triggers a + transition to the registration page and that clicking the back + button on the registration page triggers a transition to the login + page. + + \section1 Connecting Buttons to States + + QML types have predefined signals that are emitted when users interact + with the UI. The \e PushButton QML type contains a \l{MouseArea} type + that has a \e clicked signal. The signal is emitted whenever the mouse + is clicked within the area. + + You will now use the \uicontrol Connections view to + \l{Connecting Objects to Signals}{connect} the clicked signal of + \e registerButton to \e registerState and that of \e backButton + to \e loginState: + + \list 1 + \li Select \e registerButton in the \uicontrol Navigator. + \li In the \uicontrol Connections view, select the \inlineimage plus.png + button to add the action that the \c onClicked signal handler of + \e registerButton should apply. + \li Double-click the value \uicontrol Action column and select + \uicontrol {Change state to registerState} in the drop-down menu. + \li Repeat the steps above to connect \e backButton to \e loginState + by selecting \uicontrol {Change state to loginState} in the last + step. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + You can now see the following connections in the Design mode: + + \image loginui3-connections.png "Connections view" + + In the live preview, you can now click the \uicontrol {Create Account} + button to go to the registration page and the back button to return to + the login page. + + \image loginui3.gif "Moving between login page and registration page" + + The \e PushButton type also uses states to change the button background and + text color when the button is clicked. Now that clicking buttons performs + actions, you will change the background color for the button down state + from grey to green to match the color in the normal state that you changed + to green in Part 1. + + \section2 Learn Qt Quick - Signal and Event Handlers + + UI components need to communicate with each other. For example, a button + needs to know that the user has clicked on it. The button may change color + to indicate its state and perform an action. + + QML has a signal and handler mechanism, where the signal is the event that + is responded to through a signal handler. When a signal is emitted, the + corresponding signal handler is invoked. Placing logic such as a script or + other operations in the handler allows the component to respond to the + event. + + For more information, see \l{Signal and Handler Event System}. + + Next, you will modify the properties of the \e PushButton type in the text + editor. + + \section1 Changing Button Background Color + + You will modify the button background color for the \e down state of the + \e PushButton type in the \e PushButton.ui.qml file. + + \list 1 + \li Right-click \e loginButton in the \uicontrol Navigator and select + \uicontrol {Go into Component} to open \e PushButton.ui.qml for + editing in the Design mode. + \li Open the \uicontrol {Text Editor} tab. + \li Edit the property values for the \e down state, to set the button + text color to white and the background and border colors to + darker shades of green by using the \c {Qt.darker()} function: + \quotefromfile loginui3/PushButton.ui.qml + \skipto states: + \printuntil ] + You could also specify all the colors here as fixed values. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + \section1 Next Steps + + For a more complicated UI, you would typically use QML types that specify + a view of items provided by a model, such as a \l ListView or \l StackView. + For more information, see \l{Using Data Models}. + + To learn how to use a timeline to animate the transition between the login + and registration pages, see the next example in the series, + \l {Log In UI - Part 4}. +*/ diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc new file mode 100644 index 0000000000..66fd5886c5 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/loginui4.qdoc @@ -0,0 +1,322 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example loginui4 + \ingroup studioexamples + \ingroup gstutorials + + \title Log In UI - Part 4 + \brief Illustrates how to use the timeline and states to animate UI + components. + \previouspage {Log In UI - Part 3} + \nextpage {Log In UI - Part 5} + + \image loginui4.gif "Log In UI" + + \e{Log In UI - Part 4} is the fourth in a series of examples that build + on each other to illustrate how to use \QDS to create a simple UI with + some basic UI components, such as pages, buttons, and entry fields. Part 4 + describes how to use the timeline and states to animate UI components. + + In Part 3, you learned how to use states to simulate page changes in a UI + and connections to provide user interaction with it. In Part 4, you will now + learn another way of animating the UI by using timeline animations that you + bind to states. + + These instructions build on: + + \list + \li \l {Log In UI - Part 1} + \li \l {Log In UI - Part 2} + \li \l {Log In UI - Part 3} + \endlist + + The \e {Learn Qt Quick} sections provide additional information about the + features of QML and Qt Quick that are relevant to the task at hand. + + \section1 Animating UI Components + + In Part 3, you changed the visibility property in different states to + simulate changing pages. To make sure that those changes won't interfere + with the changes to the opacity property you will make in Part 4, you will + first remove the states. + In addition, you will need to remove the line that sets the default state + from the \e Screen01.ui.qml file in the \uicontrol {Text Editor}. + + Then, you will add a timeline and insert keyframes for the opacity property + to hide the password verification field and back button on the login page + and the login button on the registration page. Because we want the password + verification field to appear to slide down from the password field, you will + also need to insert a keyframe for its anchor margin property. To be able to + animate the anchor, you also need to pull out the fields from the fields + column and anchor them to the page and to each other instead. + + To preview the changes that you make to the UI while you make + them, select the \inlineimage live_preview.png + (\uicontrol {Show Live Preview}) button on the canvas toolbar + or press \key {Alt+P}. + + \section2 Replacing Columns with Anchors + + First, you will prepare the page for adding animation: + + \list 1 + \li Open \e {Screen01.ui.qml} in the Design mode for editing. + \li In the \uicontrol States pane, select the \inlineimage close.png + (\uicontrol Close) button in \e loginState and \e registerState + to remove the states. + \li In the \uicontrol {Text Editor}, remove the following line: + \code + {state: "loginState"} + \endcode + \li Select the fields in \e fieldColumn in the \uicontrol Navigator + and drag and drop them to \e loginPage. + \li Select \e fieldColumn in the \uicontrol Navigator and press + \key Delete to delete it. + \li Select \e usernameField in the \uicontrol Navigator. + \li In \uicontrol Properties > \uicontrol Layout, select the + \inlineimage anchor-top.png + (\uicontrol Top) button to anchor the top of the field to the top + of its parent (the \e loginPage). \QDS will suggest an appropriate + margin based on the current Y-position of the field. + \li Select the \inlineimage anchor-horizontal-center.png + (\uicontrol {Horizontal Center}) button to anchor + the horizontal center of the field to that of its parent. + \li Select \e passwordField, and then select the \uicontrol Top + button in \uicontrol Properties > \uicontrol Layout. + \li In the \uicontrol Target field, select \e usernameField to anchor + the top of \e passwordField to the bottom of \e usernameField + with a 5-pixel margin. + \li Select the \uicontrol {Horizontal Center} button to anchor the + horizontal center of \e passwordField to that of \e usernameField. + \li Repeat the above steps to anchor the top of \e verifyPasswordField + to the bottom of the \e passwordField with a 5-pixel margin and to + anchor its horizontal center to that of \e passwordField. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + You could also animate the Y-position property of the verify password + field for a similar effect. In that case, you would need to use absolute + positioning for the field. This is less flexible if you export your + design from a design tool, such as Adobe Photoshop, and decide to change + your design and export it again at some point. In that case, the margins + would probably stay the same, even if the positions of the fields on the + page would change. + + Your page now should look something like this in the Design mode and live preview: + + \image loginui4-page.png "UI with all the buttons and fields in the Design mode" + + \section2 Adding a Timeline and Animation Settings + + You are now ready to add the \l{Creating Animations}{timeline}. You will + need two animations, one for moving into the registration page and another + for returning to the login page. You can use the same animation for both + cases, by running it either from the beginning to the end or from the + end to the beginning. + + To add a timeline with settings for running the animation: + + \image loginui4-timeline-settings.png + + \list 1 + \li In the \uicontrol Timeline view, select \inlineimage plus.png + to add a 1000-frame timeline and settings for running the animation. + \li In the \uicontrol {Animation ID} field, enter \e toLoginState. + \li Deselect the \uicontrol {Running in base state} check box, because + you want the animation to run only after the user clicks the + \uicontrol {Create Account} button. You can use the default settings + for the other fields. + \li Select \inlineimage plus.png + next to the \uicontrol {Animation Settings} group to add settings + for running the animation when the user clicks the back button. + \li In the \uicontrol {Animation ID} field, enter \e toRegisterState. + \li To run the animation backwards when the user clicks the back button, + enter \e 1000 in the \uicontrol {Start frame} field and \e 0 in the + \uicontrol {End frame} field. + \li Select \uicontrol Close in the \uicontrol {Timeline Settings} view + to save the timeline and the animation settings. + \endlist + + Next, you will record the animation in the \uicontrol Timeline view. + + \section2 Inserting Keyframes + + You will now insert keyframes and record property changes in the + \uicontrol Timeline view: + + \list 1 + \li Select \e backButton in the \uicontrol Navigator. + \li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings, + select \uicontrol {Insert Keyframe} to insert a keyframe for the + opacity property of the button. + \li Check that the playhead is in frame 0, and select the + \inlineimage recordfill.png + (Per Property Recording) button for the \uicontrol opacity property + of \e backButton to start recording property changes. + \image loginui4-timeline-opacity.png "Record button for the opacity property" + \li In the field next to the opacity property name on that same line, + type 0 to hide the button, and press \key Enter to save the value. + \li Move the playhead to frame 1000 and change the opacity value to 1 + to show the button. + \li Select the record button again to stop recording property changes. + If you forget this, all the following changes will be recorded, and + the results will be unpredictable. + \li Select \e verifyPasswordField in the \uicontrol Navigator, + and repeat the above steps to insert a keyframe for the + \uicontrol opacity property of the field and to record + changes for it. + \li Select the \e loginButton in the \uicontrol Navigator, and repeat + the above steps to insert a keyframe for the \uicontrol opacity + property of the button and to record changes for it. However, this + time the opacity value needs to be 1 in frame 0 and 0 in frame 1000. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + When you move the playhead along the timeline, you can see how the login + button fades out while the verify password field and back button fade in. + + You will now animate the top anchor margin of the verify password field + to make it appear to slide down from the password field. + + \section2 Animating Anchors + + To animate the top anchor margin of the verify password field: + + \list 1 + \li Select \e verifyPasswordField in the \uicontrol Navigator. + \li Select \uicontrol Properties > \uicontrol Layout > \uicontrol Margin + > \uicontrol {Insert Keyframe} to insert a keyframe for the top + anchor margin of \e verifyPasswordField. + \li In the \uicontrol Timeline view, check that the playhead is in + frame 0, and select the record button for the \e anchors.topMargin + property of \e verifyPasswordField. + \li In the field next to the property, set a negative value for the + top anchor margin, -40, to place \e verifyPasswordField on top of + \e passwordField. + \li Move the playhead to frame 1000 and change the top anchor margin to + 5, so that \e verifyPasswordField appears to slide down and settle + below \e passwordField. + \li Select the record button again to stop recording property changes. + \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} + to save your changes. + \endlist + + \section2 Adding Easing Curves + + You will now add an \l{Editing Easing Curves}{easing curve} to the anchor + margin animation that will make the transition seem smoother: + + \list 1 + \li Click the keyframe marker \inlineimage keyframe_linear_inactive.png + for the \e anchors.topMargin property at frame 1000 on the + timeline to select it. + \li Right-click the keyframe marker to open a context menu, and + select \uicontrol {Edit Easing Curve} to add an easing curve + to the animation. + \li In the \uicontrol {Easing Curve Editor}, select \e easeOutSine. + \image loginui4-easing-curve.png + \li Select \uicontrol OK to close the editor. + \endlist + + When you attach easing curves to keyframes, the shape of the keyframe + marker changes from \inlineimage keyframe_linear_inactive.png + to \inlineimage keyframe_manualbezier_inactive.png + . + + Your timeline now should look something like this: + + \image loginui4-timeline.png "Timeline view with the recorded property changes" + + Next, you create states for the login and registration pages and bind them + to the animation settings. + + \section1 Binding Animation to States + + You will now bring back the \l{Adding States}{states} in the + \uicontrol States pane and bind them to the animation settings + in the \uicontrol Timeline view: + + \list 1 + \li In the \uicontrol States pane, select the \inlineimage plus.png + button twice to add two states called \e loginState and + \e registerState. You don't need to make any property changes this + time, because you'll bind the states to property animations. + \li In the \uicontrol Timeline view, select the \inlineimage animation.png + (\uicontrol {Timeline Settings (S)}) button on the toolbar (or press + \key S to open the \uicontrol {Timeline Settings} dialog. + \image loginui4-timeline-settings-states.png + \li Double-click the cell in the \uicontrol Timeline column on the + \e loginState row, and select \e timeline in the list. + \li Double-click the cell in the \uicontrol Animation column on the + \e loginState row, and select \e toRegisterState. + \li Repeat these steps for \e registerState row, but select + \e toLoginState in the \uicontrol Animation column. + \li Click \uicontrol Close to save the timeline settings. + \endlist + + In the live preview, you can now click the \uicontrol {Create Account} + button to go to the registration page and the back button to return to + the login page. + + \image loginui4.gif "Moving between login page and registration page" + + \section2 Learn Qt Quick - Timeline + + The Qt Quick Timeline module provides QML types to use timelines and + keyframes to animate component properties in UIs. Animating properties + enables their values to move through intermediate values instead of + immediately changing to the target value. + + The Keyframe type specifies the value of a keyframe on a timeline. \QDS + automatically adds keyframes between two keyframes, and sets their values + evenly to create an appearance of movement or transformation. + + An easing curve can be attached to the keyframe to change the appearance + of the animation. For more information about easing curve types, see the + documentation for \l [QML] {PropertyAnimation}{easing curves}. + + To be able to use the functionality of Qt Quick Timeline types, \QDS adds + the following \e import statement to the QML files where it uses the types: + + \quotefromfile loginui4/Screen01.ui.qml + \skipto QtQuick.Timeline + \printuntil 1.0 + + All the properties and functions of the QML types from this module are + available in the Design mode, and therefore it is enough to learn how to + use the \uicontrol Timeline view, as described in \l {Creating Animations}. + + \section1 Next Steps + + For more examples about using timelines, see \l{Examples and Tutorials}. + + To watch a video tutorial about creating timelines and adding keyframes, + select \e {Learn to use Qt Design Studio Part 2} in the \uicontrol Tutorials + tab in the \uicontrol Welcome mode. +*/ diff --git a/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml new file mode 100644 index 0000000000..0feeed1618 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml @@ -0,0 +1,117 @@ + + +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.10 +import QtQuick.Templates 2.1 as T +import loginui1 1.0 + +T.Button { + id: control + + text: qsTr("MyButton") + + font: Constants.font + implicitWidth: Math.max( + background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max( + background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + leftPadding: 4 + rightPadding: 4 + + background: Rectangle { + id: buttonBackground + color: "#41cd52" + radius: 6 + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + border.width: 1 + border.color: "#21be2b" + } + + contentItem: Text { + id: textItem + text: control.text + + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: "white" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + states: [ + State { + name: "normal" + when: !control.down + PropertyChanges { + target: buttonBackground + } + }, + State { + name: "down" + when: control.down + PropertyChanges { + target: textItem + color: "black" + } + PropertyChanges { + target: buttonBackground + color: "#a2a2a2" + border.color: "black" + } + } + ] +} + diff --git a/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml new file mode 100644 index 0000000000..cdfea9ce60 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml @@ -0,0 +1,96 @@ + + +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.10 +import loginui1 1.0 + +Rectangle { + width: Constants.width + height: Constants.height + + Text { + id: pageTitle + x: 259 + y: 155 + width: 123 + height: 40 + text: qsTr("Qt Account") + font.pixelSize: 24 + } + + Image { + id: logo + x: 8 + y: 8 + width: 100 + height: 100 + source: "qt_logo_green_64x64px.png" + fillMode: Image.PreserveAspectFit + } + + PushButton { + id: registerButton + x: 259 + y: 277 + width: 120 + height: 40 + text: qsTr("Create Account") + } + + PushButton { + id: loginButton + x: 259 + y: 231 + width: 120 + height: 40 + text: qsTr("Log In") + } +} diff --git a/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml new file mode 100644 index 0000000000..83dbc40a9b --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml @@ -0,0 +1,69 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +pragma Singleton +import QtQuick 2.10 + +QtObject { + readonly property int width: 640 + readonly property int height: 480 + readonly property FontLoader mySystemFont: FontLoader { name: "Arial" } + /* Edit this comment to add your custom font */ + /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */ + readonly property font font: Qt.font({ + family: mySystemFont.name, + pointSize: Qt.application.font.pixelSize + }) + readonly property font largeFont: Qt.font({ + family: mySystemFont.name, + pointSize: Qt.application.font.pixelSize * 1.6 + }) + readonly property color backgroundColor: "#c2c2c2" +} diff --git a/doc/qtdesignstudio/examples/loginui1/imports/loginui1/qmldir b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/qmldir new file mode 100644 index 0000000000..616ac20353 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/qmldir @@ -0,0 +1 @@ +singleton Constants 1.0 Constants.qml diff --git a/doc/qtdesignstudio/examples/loginui1/loginui1.qml b/doc/qtdesignstudio/examples/loginui1/loginui1.qml new file mode 100644 index 0000000000..57796d12b4 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/loginui1.qml @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.10 +import loginui1 1.0 + +Item { + width: Constants.width + height: Constants.height + + Screen01 { + } +} diff --git a/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject b/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject new file mode 100644 index 0000000000..7c9af71d7c --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject @@ -0,0 +1,41 @@ +/* File generated by Qt Creator */ + +import QmlProject 1.1 + +Project { + mainFile: "loginui1.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports" ] + + /* Required for deployment */ + targetDirectory: "/opt/loginui1" +} diff --git a/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject.qtds b/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject.qtds new file mode 100644 index 0000000000..156d4a96ed --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject.qtds @@ -0,0 +1,118 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE QtCreatorProject> +<!-- Written by QtDesignStudio 1.3.0, 2019-10-24T11:06:25. --> +<qtcreator> + <data> + <variable>EnvironmentId</variable> + <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value> + </data> + <data> + <variable>ProjectExplorer.Project.ActiveTarget</variable> + <value type="int">0</value> + </data> + <data> + <variable>ProjectExplorer.Project.EditorSettings</variable> + <valuemap type="QVariantMap"> + <value type="bool" key="EditorConfiguration.AutoIndent">true</value> + <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value> + <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0"> + <value type="QString" key="language">Cpp</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">CppGlobal</value> + </valuemap> + </valuemap> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1"> + <value type="QString" key="language">QmlJS</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value> + </valuemap> + </valuemap> + <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value> + <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value> + <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value> + <value type="int" key="EditorConfiguration.IndentSize">4</value> + <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value> + <value type="int" key="EditorConfiguration.MarginColumn">80</value> + <value type="bool" key="EditorConfiguration.MouseHiding">true</value> + <value type="bool" key="EditorConfiguration.MouseNavigation">true</value> + <value type="int" key="EditorConfiguration.PaddingMode">1</value> + <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value> + <value type="bool" key="EditorConfiguration.ShowMargin">false</value> + <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value> + <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value> + <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value> + <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value> + <value type="int" key="EditorConfiguration.TabSize">8</value> + <value type="bool" key="EditorConfiguration.UseGlobal">true</value> + <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value> + <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value> + <value type="bool" key="EditorConfiguration.cleanIndentation">true</value> + <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value> + <value type="bool" key="EditorConfiguration.inEntireDocument">false</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.PluginSettings</variable> + <valuemap type="QVariantMap"/> + </data> + <data> + <variable>ProjectExplorer.Project.Target.0</variable> + <valuemap type="QVariantMap"> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value> + <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value> + <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0"> + <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0"> + <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value> + </valuemap> + <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0"> + <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value> + <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value> + <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value> + <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value> + <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value> + <value type="int" key="PE.EnvironmentAspect.Base">0</value> + <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value> + <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value> + <value type="bool" key="RunConfiguration.UseCppDebugger">false</value> + <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value> + <value type="bool" key="RunConfiguration.UseMultiProcess">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.TargetCount</variable> + <value type="int">1</value> + </data> + <data> + <variable>ProjectExplorer.Project.Updater.FileVersion</variable> + <value type="int">22</value> + </data> + <data> + <variable>Version</variable> + <value type="int">22</value> + </data> +</qtcreator> diff --git a/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject.qtds.4.10-pre1 b/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject.qtds.4.10-pre1 new file mode 100644 index 0000000000..5c5b6b4c9e --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject.qtds.4.10-pre1 @@ -0,0 +1,118 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE QtCreatorProject> +<!-- Written by QtDesignStudio 1.2.0, 2019-05-28T14:45:23. --> +<qtcreator> + <data> + <variable>EnvironmentId</variable> + <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value> + </data> + <data> + <variable>ProjectExplorer.Project.ActiveTarget</variable> + <value type="int">0</value> + </data> + <data> + <variable>ProjectExplorer.Project.EditorSettings</variable> + <valuemap type="QVariantMap"> + <value type="bool" key="EditorConfiguration.AutoIndent">true</value> + <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value> + <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0"> + <value type="QString" key="language">Cpp</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">CppGlobal</value> + </valuemap> + </valuemap> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1"> + <value type="QString" key="language">QmlJS</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value> + </valuemap> + </valuemap> + <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value> + <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value> + <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value> + <value type="int" key="EditorConfiguration.IndentSize">4</value> + <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value> + <value type="int" key="EditorConfiguration.MarginColumn">80</value> + <value type="bool" key="EditorConfiguration.MouseHiding">true</value> + <value type="bool" key="EditorConfiguration.MouseNavigation">true</value> + <value type="int" key="EditorConfiguration.PaddingMode">1</value> + <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value> + <value type="bool" key="EditorConfiguration.ShowMargin">false</value> + <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value> + <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value> + <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value> + <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value> + <value type="int" key="EditorConfiguration.TabSize">8</value> + <value type="bool" key="EditorConfiguration.UseGlobal">true</value> + <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value> + <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value> + <value type="bool" key="EditorConfiguration.cleanIndentation">true</value> + <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value> + <value type="bool" key="EditorConfiguration.inEntireDocument">false</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.PluginSettings</variable> + <valuemap type="QVariantMap"/> + </data> + <data> + <variable>ProjectExplorer.Project.Target.0</variable> + <valuemap type="QVariantMap"> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value> + <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value> + <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0"> + <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0"> + <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value> + </valuemap> + <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0"> + <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value> + <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value> + <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value> + <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value> + <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value> + <value type="int" key="PE.EnvironmentAspect.Base">0</value> + <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value> + <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value> + <value type="bool" key="RunConfiguration.UseCppDebugger">false</value> + <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value> + <value type="bool" key="RunConfiguration.UseMultiProcess">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.TargetCount</variable> + <value type="int">1</value> + </data> + <data> + <variable>ProjectExplorer.Project.Updater.FileVersion</variable> + <value type="int">21</value> + </data> + <data> + <variable>Version</variable> + <value type="int">21</value> + </data> +</qtcreator> diff --git a/doc/qtdesignstudio/examples/loginui1/qt_logo_green_64x64px.png b/doc/qtdesignstudio/examples/loginui1/qt_logo_green_64x64px.png Binary files differnew file mode 100644 index 0000000000..235a381b5f --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/qt_logo_green_64x64px.png diff --git a/doc/qtdesignstudio/examples/loginui1/qtquickcontrols2.conf b/doc/qtdesignstudio/examples/loginui1/qtquickcontrols2.conf new file mode 100644 index 0000000000..75b2cb8fff --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui1/qtquickcontrols2.conf @@ -0,0 +1,6 @@ +; This file can be edited to change the style of the application +; Read "Qt Quick Controls 2 Configuration File" for details: +; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html + +[Controls] +Style=Default diff --git a/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml new file mode 100644 index 0000000000..7138bb41d8 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml @@ -0,0 +1,117 @@ + + +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.10 +import QtQuick.Templates 2.1 as T +import loginui2 1.0 + +T.Button { + id: control + + text: qsTr("MyButton") + + font: Constants.font + implicitWidth: Math.max( + background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max( + background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + leftPadding: 4 + rightPadding: 4 + + background: Rectangle { + id: buttonBackground + color: "#41cd52" + radius: 6 + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + border.width: 1 + border.color: "#21be2b" + } + + contentItem: Text { + id: textItem + text: control.text + + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: "white" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + states: [ + State { + name: "normal" + when: !control.down + PropertyChanges { + target: buttonBackground + } + }, + State { + name: "down" + when: control.down + PropertyChanges { + target: textItem + color: "black" + } + PropertyChanges { + target: buttonBackground + color: "#a2a2a2" + border.color: "black" + } + } + ] +} + diff --git a/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml new file mode 100644 index 0000000000..9995430aaf --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml @@ -0,0 +1,133 @@ + + +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.10 +import loginui2 1.0 +import QtQuick.Controls 2.3 + +Rectangle { + id: root + width: Constants.width + height: Constants.height + + Rectangle { + id: loginPage + color: "#ffffff" + anchors.fill: parent + + Image { + id: logo + width: 100 + height: 100 + anchors.topMargin: 10 + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.top: parent.top + source: "qt_logo_green_64x64px.png" + fillMode: Image.PreserveAspectFit + } + + Text { + id: pageTitle + width: 123 + height: 40 + text: qsTr("Qt Account") + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 70 + font.pixelSize: 24 + } + + Column { + id: fieldColumn + width: 300 + height: 85 + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 200 + + TextField { + id: usernameField + width: 300 + placeholderText: qsTr("Username") + font.pointSize: 10 + } + + TextField { + id: passwordField + width: 300 + placeholderText: qsTr("Password") + font.pointSize: 10 + } + } + + Column { + id: buttonColumn + anchors.bottom: parent.bottom + anchors.bottomMargin: 50 + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter + + PushButton { + id: loginButton + width: 120 + text: qsTr("Log In") + } + + PushButton { + id: registerButton + width: 120 + text: qsTr("Create Account") + } + } + } +} diff --git a/doc/qtdesignstudio/examples/loginui2/imports/loginui2/Constants.qml b/doc/qtdesignstudio/examples/loginui2/imports/loginui2/Constants.qml new file mode 100644 index 0000000000..74a66dcae2 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui2/imports/loginui2/Constants.qml @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +pragma Singleton +import QtQuick 2.10 + +QtObject { + readonly property int width: 640 + readonly property int height: 480 + readonly property FontLoader mySystemFont: FontLoader { name: "Arial" } + /* Edit this comment to add your custom font */ + /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */ + readonly property font font: Qt.font({ + family: mySystemFont.name, + pointSize: Qt.application.font.pixelSize + }) + readonly property font largeFont: Qt.font({ + family: mySystemFont.name, + pointSize: Qt.application.font.pixelSize * 1.6 + }) + readonly property color backgroundColor: "#c2c2c2" +} + + + +/*##^## Designer { + D{i:0;autoSize:true;height:480;width:640} +} + ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui2/imports/loginui2/qmldir b/doc/qtdesignstudio/examples/loginui2/imports/loginui2/qmldir new file mode 100644 index 0000000000..616ac20353 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui2/imports/loginui2/qmldir @@ -0,0 +1 @@ +singleton Constants 1.0 Constants.qml diff --git a/doc/qtdesignstudio/examples/loginui2/loginui2.qml b/doc/qtdesignstudio/examples/loginui2/loginui2.qml new file mode 100644 index 0000000000..594150b005 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui2/loginui2.qml @@ -0,0 +1,62 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.10 +import loginui2 1.0 + +Item { + width: Constants.width + height: Constants.height + + Screen01 { + } +} + + diff --git a/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject b/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject new file mode 100644 index 0000000000..094cd9b2c3 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject @@ -0,0 +1,41 @@ +/* File generated by Qt Creator */ + +import QmlProject 1.1 + +Project { + mainFile: "loginui2.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports" ] + + /* Required for deployment */ + targetDirectory: "/opt/loginui2" +} diff --git a/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject.qtds b/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject.qtds new file mode 100644 index 0000000000..083a067353 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject.qtds @@ -0,0 +1,118 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE QtCreatorProject> +<!-- Written by QtDesignStudio 1.2.0, 2019-05-28T16:13:26. --> +<qtcreator> + <data> + <variable>EnvironmentId</variable> + <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value> + </data> + <data> + <variable>ProjectExplorer.Project.ActiveTarget</variable> + <value type="int">0</value> + </data> + <data> + <variable>ProjectExplorer.Project.EditorSettings</variable> + <valuemap type="QVariantMap"> + <value type="bool" key="EditorConfiguration.AutoIndent">true</value> + <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value> + <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0"> + <value type="QString" key="language">Cpp</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">CppGlobal</value> + </valuemap> + </valuemap> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1"> + <value type="QString" key="language">QmlJS</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value> + </valuemap> + </valuemap> + <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value> + <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value> + <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value> + <value type="int" key="EditorConfiguration.IndentSize">4</value> + <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value> + <value type="int" key="EditorConfiguration.MarginColumn">80</value> + <value type="bool" key="EditorConfiguration.MouseHiding">true</value> + <value type="bool" key="EditorConfiguration.MouseNavigation">true</value> + <value type="int" key="EditorConfiguration.PaddingMode">1</value> + <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value> + <value type="bool" key="EditorConfiguration.ShowMargin">false</value> + <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value> + <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value> + <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value> + <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value> + <value type="int" key="EditorConfiguration.TabSize">8</value> + <value type="bool" key="EditorConfiguration.UseGlobal">true</value> + <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value> + <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value> + <value type="bool" key="EditorConfiguration.cleanIndentation">true</value> + <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value> + <value type="bool" key="EditorConfiguration.inEntireDocument">false</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.PluginSettings</variable> + <valuemap type="QVariantMap"/> + </data> + <data> + <variable>ProjectExplorer.Project.Target.0</variable> + <valuemap type="QVariantMap"> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value> + <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value> + <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0"> + <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0"> + <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value> + </valuemap> + <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0"> + <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value> + <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value> + <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value> + <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value> + <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value> + <value type="int" key="PE.EnvironmentAspect.Base">0</value> + <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value> + <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value> + <value type="bool" key="RunConfiguration.UseCppDebugger">false</value> + <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value> + <value type="bool" key="RunConfiguration.UseMultiProcess">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.TargetCount</variable> + <value type="int">1</value> + </data> + <data> + <variable>ProjectExplorer.Project.Updater.FileVersion</variable> + <value type="int">21</value> + </data> + <data> + <variable>Version</variable> + <value type="int">21</value> + </data> +</qtcreator> diff --git a/doc/qtdesignstudio/examples/loginui2/qt_logo_green_64x64px.png b/doc/qtdesignstudio/examples/loginui2/qt_logo_green_64x64px.png Binary files differnew file mode 100644 index 0000000000..235a381b5f --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui2/qt_logo_green_64x64px.png diff --git a/doc/qtdesignstudio/examples/loginui2/qtquickcontrols2.conf b/doc/qtdesignstudio/examples/loginui2/qtquickcontrols2.conf new file mode 100644 index 0000000000..75b2cb8fff --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui2/qtquickcontrols2.conf @@ -0,0 +1,6 @@ +; This file can be edited to change the style of the application +; Read "Qt Quick Controls 2 Configuration File" for details: +; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html + +[Controls] +Style=Default diff --git a/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml new file mode 100644 index 0000000000..e22e421698 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml @@ -0,0 +1,115 @@ + +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.10 +import QtQuick.Templates 2.1 as T +import loginui3 1.0 + +T.Button { + id: control + + text: qsTr("MyButton") + + font: Constants.font + implicitWidth: Math.max( + background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max( + background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + leftPadding: 4 + rightPadding: 4 + + background: Rectangle { + id: buttonBackground + color: "#41cd52" + radius: 6 + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + border.width: 1 + border.color: "#21be2b" + } + + contentItem: Text { + id: textItem + text: control.text + + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: "white" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + states: [ + State { + name: "normal" + when: !control.down + PropertyChanges { + target: buttonBackground + } + }, + State { + name: "down" + when: control.down + PropertyChanges { + target: textItem + color: "white" + } + PropertyChanges { + target: buttonBackground + color: Qt.darker("#41cd52", 1.2) + border.color: Qt.darker("#21be2b", 1.2) + } + } + ] +} diff --git a/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml new file mode 100644 index 0000000000..2ebf95a89c --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml @@ -0,0 +1,193 @@ + +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.10 +import loginui3 1.0 +import QtQuick.Controls 2.3 + +Rectangle { + id: root + state: "loginState" + width: Constants.width + height: Constants.height + + Rectangle { + id: loginPage + color: "#ffffff" + anchors.fill: parent + + Image { + id: logo + width: 100 + height: 100 + anchors.topMargin: 10 + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.top: parent.top + source: "qt_logo_green_64x64px.png" + fillMode: Image.PreserveAspectFit + } + + Text { + id: pageTitle + width: 123 + height: 40 + text: qsTr("Qt Account") + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 70 + font.pixelSize: 24 + } + + PushButton { + id: backButton + width: 40 + text: "<" + font.pixelSize: 24 + anchors.right: parent.right + anchors.rightMargin: 10 + anchors.top: parent.top + anchors.topMargin: 20 + } + + Column { + id: fieldColumn + width: 300 + height: 130 + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 200 + + TextField { + id: usernameField + width: 300 + placeholderText: qsTr("Username") + font.pointSize: 10 + } + + TextField { + id: passwordField + width: 300 + placeholderText: qsTr("Password") + font.pointSize: 10 + } + + TextField { + id: verifyPasswordField + width: 300 + visible: true + font.pointSize: 10 + placeholderText: qsTr("Verify password") + } + } + + Column { + id: buttonColumn + anchors.bottom: parent.bottom + anchors.bottomMargin: 50 + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter + + PushButton { + id: loginButton + width: 120 + text: qsTr("Log In") + } + + PushButton { + id: registerButton + width: 120 + text: qsTr("Create Account") + } + } + } + + Connections { + target: registerButton + onClicked: { + root.state = "registerState" + } + } + + Connections { + target: backButton + onClicked: { + root.state = "loginState" + } + } + states: [ + State { + name: "loginState" + + PropertyChanges { + target: verifyPasswordField + visible: false + } + + PropertyChanges { + target: backButton + visible: false + } + }, + State { + name: "registerState" + PropertyChanges { + target: verifyPasswordField + visible: true + } + + PropertyChanges { + target: loginButton + visible: false + } + } + ] +} diff --git a/doc/qtdesignstudio/examples/loginui3/imports/loginui3/Constants.qml b/doc/qtdesignstudio/examples/loginui3/imports/loginui3/Constants.qml new file mode 100644 index 0000000000..74a66dcae2 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui3/imports/loginui3/Constants.qml @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +pragma Singleton +import QtQuick 2.10 + +QtObject { + readonly property int width: 640 + readonly property int height: 480 + readonly property FontLoader mySystemFont: FontLoader { name: "Arial" } + /* Edit this comment to add your custom font */ + /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */ + readonly property font font: Qt.font({ + family: mySystemFont.name, + pointSize: Qt.application.font.pixelSize + }) + readonly property font largeFont: Qt.font({ + family: mySystemFont.name, + pointSize: Qt.application.font.pixelSize * 1.6 + }) + readonly property color backgroundColor: "#c2c2c2" +} + + + +/*##^## Designer { + D{i:0;autoSize:true;height:480;width:640} +} + ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui3/imports/loginui3/qmldir b/doc/qtdesignstudio/examples/loginui3/imports/loginui3/qmldir new file mode 100644 index 0000000000..616ac20353 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui3/imports/loginui3/qmldir @@ -0,0 +1 @@ +singleton Constants 1.0 Constants.qml diff --git a/doc/qtdesignstudio/examples/loginui3/loginui3.qml b/doc/qtdesignstudio/examples/loginui3/loginui3.qml new file mode 100644 index 0000000000..0fd5dcc8e7 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui3/loginui3.qml @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.10 +import loginui3 1.0 + +Item { + width: Constants.width + height: Constants.height + + Screen01 { + } +} + + + +/*##^## Designer { + D{i:0;autoSize:true;height:480;width:640} +} + ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject b/doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject new file mode 100644 index 0000000000..418175f23c --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject @@ -0,0 +1,41 @@ +/* File generated by Qt Creator */ + +import QmlProject 1.1 + +Project { + mainFile: "loginui3.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports" ] + + /* Required for deployment */ + targetDirectory: "/opt/loginui3" +} diff --git a/doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject.qtds b/doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject.qtds new file mode 100644 index 0000000000..fafe88caea --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject.qtds @@ -0,0 +1,118 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE QtCreatorProject> +<!-- Written by QtDesignStudio 1.2.0, 2019-05-29T13:03:13. --> +<qtcreator> + <data> + <variable>EnvironmentId</variable> + <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value> + </data> + <data> + <variable>ProjectExplorer.Project.ActiveTarget</variable> + <value type="int">0</value> + </data> + <data> + <variable>ProjectExplorer.Project.EditorSettings</variable> + <valuemap type="QVariantMap"> + <value type="bool" key="EditorConfiguration.AutoIndent">true</value> + <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value> + <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0"> + <value type="QString" key="language">Cpp</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">CppGlobal</value> + </valuemap> + </valuemap> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1"> + <value type="QString" key="language">QmlJS</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value> + </valuemap> + </valuemap> + <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value> + <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value> + <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value> + <value type="int" key="EditorConfiguration.IndentSize">4</value> + <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value> + <value type="int" key="EditorConfiguration.MarginColumn">80</value> + <value type="bool" key="EditorConfiguration.MouseHiding">true</value> + <value type="bool" key="EditorConfiguration.MouseNavigation">true</value> + <value type="int" key="EditorConfiguration.PaddingMode">1</value> + <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value> + <value type="bool" key="EditorConfiguration.ShowMargin">false</value> + <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value> + <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value> + <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value> + <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value> + <value type="int" key="EditorConfiguration.TabSize">8</value> + <value type="bool" key="EditorConfiguration.UseGlobal">true</value> + <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value> + <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value> + <value type="bool" key="EditorConfiguration.cleanIndentation">true</value> + <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value> + <value type="bool" key="EditorConfiguration.inEntireDocument">false</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.PluginSettings</variable> + <valuemap type="QVariantMap"/> + </data> + <data> + <variable>ProjectExplorer.Project.Target.0</variable> + <valuemap type="QVariantMap"> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value> + <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value> + <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0"> + <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0"> + <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value> + </valuemap> + <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0"> + <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value> + <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value> + <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value> + <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value> + <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value> + <value type="int" key="PE.EnvironmentAspect.Base">0</value> + <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value> + <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value> + <value type="bool" key="RunConfiguration.UseCppDebugger">false</value> + <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value> + <value type="bool" key="RunConfiguration.UseMultiProcess">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.TargetCount</variable> + <value type="int">1</value> + </data> + <data> + <variable>ProjectExplorer.Project.Updater.FileVersion</variable> + <value type="int">21</value> + </data> + <data> + <variable>Version</variable> + <value type="int">21</value> + </data> +</qtcreator> diff --git a/doc/qtdesignstudio/examples/loginui3/qt_logo_green_64x64px.png b/doc/qtdesignstudio/examples/loginui3/qt_logo_green_64x64px.png Binary files differnew file mode 100644 index 0000000000..235a381b5f --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui3/qt_logo_green_64x64px.png diff --git a/doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf b/doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf new file mode 100644 index 0000000000..75b2cb8fff --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf @@ -0,0 +1,6 @@ +; This file can be edited to change the style of the application +; Read "Qt Quick Controls 2 Configuration File" for details: +; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html + +[Controls] +Style=Default diff --git a/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml new file mode 100644 index 0000000000..5d49d38abb --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml @@ -0,0 +1,123 @@ + +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.10 +import QtQuick.Templates 2.1 as T +import loginui4 1.0 + +T.Button { + id: control + + text: qsTr("MyButton") + + font: Constants.font + implicitWidth: Math.max( + background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max( + background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + leftPadding: 4 + rightPadding: 4 + + background: Rectangle { + id: buttonBackground + color: "#41cd52" + radius: 6 + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + border.width: 1 + border.color: "#21be2b" + } + + contentItem: Text { + id: textItem + text: control.text + + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: "white" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + states: [ + State { + name: "normal" + when: !control.down + PropertyChanges { + target: buttonBackground + } + }, + State { + name: "down" + when: control.down + PropertyChanges { + target: textItem + color: "white" + } + PropertyChanges { + target: buttonBackground + color: Qt.darker("#41cd52", 1.2) + border.color: Qt.darker("#21be2b", 1.2) + } + } + ] +} + + + + +/*##^## Designer { + D{i:0;autoSize:true;height:480;width:640} +} + ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml new file mode 100644 index 0000000000..e318223a0b --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml @@ -0,0 +1,287 @@ + +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.10 +import loginui4 1.0 +import QtQuick.Controls 2.3 +import QtQuick.Timeline 1.0 + +Rectangle { + id: root + width: Constants.width + height: Constants.height + + Rectangle { + id: loginPage + color: "#ffffff" + anchors.fill: parent + + Image { + id: logo + width: 100 + height: 100 + anchors.topMargin: 10 + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.top: parent.top + source: "qt_logo_green_64x64px.png" + fillMode: Image.PreserveAspectFit + } + + Text { + id: pageTitle + width: 123 + height: 40 + text: qsTr("Qt Account") + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 70 + font.pixelSize: 24 + } + + PushButton { + id: backButton + x: 507 + width: 40 + text: "<" + opacity: 1 + anchors.right: parent.right + anchors.rightMargin: 10 + anchors.top: parent.top + anchors.topMargin: 20 + font.pixelSize: 24 + } + + Column { + id: buttonColumn + anchors.bottom: parent.bottom + anchors.bottomMargin: 50 + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter + + PushButton { + id: loginButton + width: 120 + text: qsTr("Log In") + } + + PushButton { + id: registerButton + width: 120 + text: qsTr("Create Account") + } + } + + TextField { + id: usernameField + width: 300 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 200 + placeholderText: qsTr("Username") + font.pointSize: 10 + } + + TextField { + id: passwordField + width: 300 + anchors.horizontalCenter: usernameField.horizontalCenter + anchors.top: usernameField.bottom + anchors.topMargin: 5 + placeholderText: qsTr("Password") + font.pointSize: 10 + } + + TextField { + id: verifyPasswordField + width: 300 + anchors.horizontalCenter: passwordField.horizontalCenter + anchors.top: passwordField.bottom + anchors.topMargin: 5 + visible: true + font.pointSize: 10 + placeholderText: qsTr("Verify password") + } + } + + Timeline { + id: timeline + animations: [ + TimelineAnimation { + id: toRegisterState + running: false + loops: 1 + duration: 1000 + to: 1000 + from: 0 + }, + TimelineAnimation { + id: toLoginState + loops: 1 + from: 1000 + running: false + to: 0 + duration: 1000 + } + ] + enabled: true + startFrame: 0 + endFrame: 1000 + + KeyframeGroup { + target: verifyPasswordField + property: "opacity" + Keyframe { + frame: 0 + value: 0 + } + + Keyframe { + value: 1 + frame: 1001 + } + } + + KeyframeGroup { + target: loginButton + property: "opacity" + Keyframe { + frame: 0 + value: 1 + } + + Keyframe { + frame: 1000 + value: "0" + } + } + + KeyframeGroup { + target: verifyPasswordField + property: "anchors.topMargin" + + Keyframe { + easing.bezierCurve: [0.39, 0.575, 0.565, 1, 1, 1] + value: 5 + frame: 1001 + } + + Keyframe { + value: "-40" + frame: 0 + } + } + + KeyframeGroup { + target: backButton + property: "opacity" + Keyframe { + frame: 0 + value: 0 + } + + Keyframe { + frame: 1000 + value: 1 + } + } + } + + Connections { + target: registerButton + onClicked: { + root.state = "registerState" + } + } + + Connections { + target: backButton + onClicked: { + root.state = "loginState" + } + } + states: [ + State { + name: "registerState" + + PropertyChanges { + target: timeline + enabled: true + } + + PropertyChanges { + target: toRegisterState + running: true + } + }, + State { + name: "loginState" + + PropertyChanges { + target: timeline + enabled: true + } + + PropertyChanges { + target: toLoginState + running: true + } + } + ] +} + + + + +/*##^## Designer { + D{i:4;anchors_y:28;timeline_expanded:true}D{i:6;timeline_expanded:true}D{i:7;timeline_expanded:true} +D{i:8;anchors_y:200;timeline_expanded:true}D{i:9;anchors_x:170;anchors_y:245}D{i:10;anchors_y:245;timeline_expanded:true} +} + ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml new file mode 100644 index 0000000000..74a66dcae2 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +pragma Singleton +import QtQuick 2.10 + +QtObject { + readonly property int width: 640 + readonly property int height: 480 + readonly property FontLoader mySystemFont: FontLoader { name: "Arial" } + /* Edit this comment to add your custom font */ + /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */ + readonly property font font: Qt.font({ + family: mySystemFont.name, + pointSize: Qt.application.font.pixelSize + }) + readonly property font largeFont: Qt.font({ + family: mySystemFont.name, + pointSize: Qt.application.font.pixelSize * 1.6 + }) + readonly property color backgroundColor: "#c2c2c2" +} + + + +/*##^## Designer { + D{i:0;autoSize:true;height:480;width:640} +} + ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir new file mode 100644 index 0000000000..616ac20353 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir @@ -0,0 +1 @@ +singleton Constants 1.0 Constants.qml diff --git a/doc/qtdesignstudio/examples/loginui4/loginui4.qml b/doc/qtdesignstudio/examples/loginui4/loginui4.qml new file mode 100644 index 0000000000..0f6b845bce --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/loginui4.qml @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.10 +import loginui4 1.0 + +Item { + width: Constants.width + height: Constants.height + + Screen01 { + } +} + + + +/*##^## Designer { + D{i:0;autoSize:true;height:480;width:640} +} + ##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject b/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject new file mode 100644 index 0000000000..8447f30664 --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject @@ -0,0 +1,41 @@ +/* File generated by Qt Creator */ + +import QmlProject 1.1 + +Project { + mainFile: "loginui4.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports" ] + + /* Required for deployment */ + targetDirectory: "/opt/loginui3" +} diff --git a/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject.qtds b/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject.qtds new file mode 100644 index 0000000000..f062eb1fea --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject.qtds @@ -0,0 +1,118 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE QtCreatorProject> +<!-- Written by QtDesignStudio 1.3.0, 2019-09-04T14:46:00. --> +<qtcreator> + <data> + <variable>EnvironmentId</variable> + <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value> + </data> + <data> + <variable>ProjectExplorer.Project.ActiveTarget</variable> + <value type="int">0</value> + </data> + <data> + <variable>ProjectExplorer.Project.EditorSettings</variable> + <valuemap type="QVariantMap"> + <value type="bool" key="EditorConfiguration.AutoIndent">true</value> + <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value> + <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0"> + <value type="QString" key="language">Cpp</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">CppGlobal</value> + </valuemap> + </valuemap> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1"> + <value type="QString" key="language">QmlJS</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value> + </valuemap> + </valuemap> + <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value> + <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value> + <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value> + <value type="int" key="EditorConfiguration.IndentSize">4</value> + <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value> + <value type="int" key="EditorConfiguration.MarginColumn">80</value> + <value type="bool" key="EditorConfiguration.MouseHiding">true</value> + <value type="bool" key="EditorConfiguration.MouseNavigation">true</value> + <value type="int" key="EditorConfiguration.PaddingMode">1</value> + <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value> + <value type="bool" key="EditorConfiguration.ShowMargin">false</value> + <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value> + <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value> + <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value> + <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value> + <value type="int" key="EditorConfiguration.TabSize">8</value> + <value type="bool" key="EditorConfiguration.UseGlobal">true</value> + <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value> + <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value> + <value type="bool" key="EditorConfiguration.cleanIndentation">true</value> + <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value> + <value type="bool" key="EditorConfiguration.inEntireDocument">false</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.PluginSettings</variable> + <valuemap type="QVariantMap"/> + </data> + <data> + <variable>ProjectExplorer.Project.Target.0</variable> + <valuemap type="QVariantMap"> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value> + <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value> + <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0"> + <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0"> + <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value> + </valuemap> + <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0"> + <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value> + <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value> + <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value> + <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value> + <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value> + <value type="int" key="PE.EnvironmentAspect.Base">0</value> + <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value> + <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value> + <value type="bool" key="RunConfiguration.UseCppDebugger">false</value> + <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value> + <value type="bool" key="RunConfiguration.UseMultiProcess">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.TargetCount</variable> + <value type="int">1</value> + </data> + <data> + <variable>ProjectExplorer.Project.Updater.FileVersion</variable> + <value type="int">22</value> + </data> + <data> + <variable>Version</variable> + <value type="int">22</value> + </data> +</qtcreator> diff --git a/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject.qtds.4.10-pre1 b/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject.qtds.4.10-pre1 new file mode 100644 index 0000000000..f4d9a761ec --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject.qtds.4.10-pre1 @@ -0,0 +1,118 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE QtCreatorProject> +<!-- Written by QtDesignStudio 1.2.0, 2019-05-29T15:11:35. --> +<qtcreator> + <data> + <variable>EnvironmentId</variable> + <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value> + </data> + <data> + <variable>ProjectExplorer.Project.ActiveTarget</variable> + <value type="int">0</value> + </data> + <data> + <variable>ProjectExplorer.Project.EditorSettings</variable> + <valuemap type="QVariantMap"> + <value type="bool" key="EditorConfiguration.AutoIndent">true</value> + <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value> + <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0"> + <value type="QString" key="language">Cpp</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">CppGlobal</value> + </valuemap> + </valuemap> + <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1"> + <value type="QString" key="language">QmlJS</value> + <valuemap type="QVariantMap" key="value"> + <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value> + </valuemap> + </valuemap> + <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value> + <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value> + <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value> + <value type="int" key="EditorConfiguration.IndentSize">4</value> + <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value> + <value type="int" key="EditorConfiguration.MarginColumn">80</value> + <value type="bool" key="EditorConfiguration.MouseHiding">true</value> + <value type="bool" key="EditorConfiguration.MouseNavigation">true</value> + <value type="int" key="EditorConfiguration.PaddingMode">1</value> + <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value> + <value type="bool" key="EditorConfiguration.ShowMargin">false</value> + <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value> + <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value> + <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value> + <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value> + <value type="int" key="EditorConfiguration.TabSize">8</value> + <value type="bool" key="EditorConfiguration.UseGlobal">true</value> + <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value> + <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value> + <value type="bool" key="EditorConfiguration.cleanIndentation">true</value> + <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value> + <value type="bool" key="EditorConfiguration.inEntireDocument">false</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.PluginSettings</variable> + <valuemap type="QVariantMap"/> + </data> + <data> + <variable>ProjectExplorer.Project.Target.0</variable> + <valuemap type="QVariantMap"> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value> + <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value> + <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value> + <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0"> + <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0"> + <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value> + </valuemap> + <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/> + <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0"> + <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value> + <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value> + <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value> + <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value> + <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value> + <value type="int" key="PE.EnvironmentAspect.Base">0</value> + <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value> + <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value> + <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value> + <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value> + <value type="bool" key="RunConfiguration.UseCppDebugger">false</value> + <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value> + <value type="bool" key="RunConfiguration.UseMultiProcess">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value> + <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value> + </valuemap> + <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value> + </valuemap> + </data> + <data> + <variable>ProjectExplorer.Project.TargetCount</variable> + <value type="int">1</value> + </data> + <data> + <variable>ProjectExplorer.Project.Updater.FileVersion</variable> + <value type="int">21</value> + </data> + <data> + <variable>Version</variable> + <value type="int">21</value> + </data> +</qtcreator> diff --git a/doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png b/doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png Binary files differnew file mode 100644 index 0000000000..235a381b5f --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png diff --git a/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf b/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf new file mode 100644 index 0000000000..75b2cb8fff --- /dev/null +++ b/doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf @@ -0,0 +1,6 @@ +; This file can be edited to change the style of the application +; Read "Qt Quick Controls 2 Configuration File" for details: +; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html + +[Controls] +Style=Default diff --git a/doc/qtdesignstudio/images/area-light.png b/doc/qtdesignstudio/images/area-light.png Binary files differnew file mode 100644 index 0000000000..89d4c31dfa --- /dev/null +++ b/doc/qtdesignstudio/images/area-light.png diff --git a/doc/qtdesignstudio/images/browse-button.png b/doc/qtdesignstudio/images/browse-button.png Binary files differnew file mode 100644 index 0000000000..b147f3203e --- /dev/null +++ b/doc/qtdesignstudio/images/browse-button.png diff --git a/doc/qtdesignstudio/images/directional-light.png b/doc/qtdesignstudio/images/directional-light.png Binary files differnew file mode 100644 index 0000000000..cf7a1214cb --- /dev/null +++ b/doc/qtdesignstudio/images/directional-light.png diff --git a/doc/qtdesignstudio/images/iso-icon-browser.png b/doc/qtdesignstudio/images/iso-icon-browser.png Binary files differnew file mode 100644 index 0000000000..8aa6109efe --- /dev/null +++ b/doc/qtdesignstudio/images/iso-icon-browser.png diff --git a/doc/qtdesignstudio/images/materials.png b/doc/qtdesignstudio/images/materials.png Binary files differnew file mode 100644 index 0000000000..12cbb22768 --- /dev/null +++ b/doc/qtdesignstudio/images/materials.png diff --git a/doc/qtdesignstudio/images/maya-export-options.png b/doc/qtdesignstudio/images/maya-export-options.png Binary files differnew file mode 100644 index 0000000000..4517eebd60 --- /dev/null +++ b/doc/qtdesignstudio/images/maya-export-options.png diff --git a/doc/qtdesignstudio/images/qt-bridge-override.png b/doc/qtdesignstudio/images/qt-bridge-override.png Binary files differnew file mode 100644 index 0000000000..79d536edb0 --- /dev/null +++ b/doc/qtdesignstudio/images/qt-bridge-override.png diff --git a/doc/qtdesignstudio/images/qt-bridge-sanitize.png b/doc/qtdesignstudio/images/qt-bridge-sanitize.png Binary files differnew file mode 100644 index 0000000000..a52ec74532 --- /dev/null +++ b/doc/qtdesignstudio/images/qt-bridge-sanitize.png diff --git a/doc/qtdesignstudio/images/qt-bridge-settings.png b/doc/qtdesignstudio/images/qt-bridge-settings.png Binary files differnew file mode 100644 index 0000000000..1ac1a9940e --- /dev/null +++ b/doc/qtdesignstudio/images/qt-bridge-settings.png diff --git a/doc/qtdesignstudio/images/qt-bridge.png b/doc/qtdesignstudio/images/qt-bridge.png Binary files differnew file mode 100644 index 0000000000..5eb3dd39dd --- /dev/null +++ b/doc/qtdesignstudio/images/qt-bridge.png diff --git a/doc/qtdesignstudio/images/qt-sketch-bridge-settings.png b/doc/qtdesignstudio/images/qt-sketch-bridge-settings.png Binary files differnew file mode 100644 index 0000000000..13760012e7 --- /dev/null +++ b/doc/qtdesignstudio/images/qt-sketch-bridge-settings.png diff --git a/doc/qtdesignstudio/images/qt-sketch-bridge.png b/doc/qtdesignstudio/images/qt-sketch-bridge.png Binary files differnew file mode 100644 index 0000000000..31d9208504 --- /dev/null +++ b/doc/qtdesignstudio/images/qt-sketch-bridge.png diff --git a/doc/qtdesignstudio/images/studio-3d-directional-light.png b/doc/qtdesignstudio/images/studio-3d-directional-light.png Binary files differnew file mode 100644 index 0000000000..f5e16e8e40 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-3d-directional-light.png diff --git a/doc/qtdesignstudio/images/studio-3d-editor-move.png b/doc/qtdesignstudio/images/studio-3d-editor-move.png Binary files differnew file mode 100644 index 0000000000..77e83eacd5 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-3d-editor-move.png diff --git a/doc/qtdesignstudio/images/studio-3d-editor-rotate.png b/doc/qtdesignstudio/images/studio-3d-editor-rotate.png Binary files differnew file mode 100644 index 0000000000..033c4c4a9e --- /dev/null +++ b/doc/qtdesignstudio/images/studio-3d-editor-rotate.png diff --git a/doc/qtdesignstudio/images/studio-3d-editor-scale.png b/doc/qtdesignstudio/images/studio-3d-editor-scale.png Binary files differnew file mode 100644 index 0000000000..af2ecee0d0 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-3d-editor-scale.png diff --git a/doc/qtdesignstudio/images/studio-3d-editor.png b/doc/qtdesignstudio/images/studio-3d-editor.png Binary files differnew file mode 100644 index 0000000000..575b7510c6 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-3d-editor.png diff --git a/doc/qtdesignstudio/images/studio-3d-point-light.png b/doc/qtdesignstudio/images/studio-3d-point-light.png Binary files differnew file mode 100644 index 0000000000..9252f47c78 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-3d-point-light.png diff --git a/doc/qtdesignstudio/images/studio-3d-properties-type.png b/doc/qtdesignstudio/images/studio-3d-properties-type.png Binary files differnew file mode 100644 index 0000000000..7589d8dc17 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-3d-properties-type.png diff --git a/doc/qtdesignstudio/images/studio-3d-scenes.png b/doc/qtdesignstudio/images/studio-3d-scenes.png Binary files differnew file mode 100644 index 0000000000..94dbb54778 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-3d-scenes.png diff --git a/doc/qtdesignstudio/images/studio-animation.png b/doc/qtdesignstudio/images/studio-animation.png Binary files differnew file mode 100644 index 0000000000..1bcabc0a13 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-animation.png diff --git a/doc/qtdesignstudio/images/studio-arc.png b/doc/qtdesignstudio/images/studio-arc.png Binary files differnew file mode 100644 index 0000000000..3d1a1dabd2 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-arc.png diff --git a/doc/qtdesignstudio/images/studio-border.png b/doc/qtdesignstudio/images/studio-border.png Binary files differnew file mode 100644 index 0000000000..df9f12cc63 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-border.png diff --git a/doc/qtdesignstudio/images/studio-components.png b/doc/qtdesignstudio/images/studio-components.png Binary files differnew file mode 100644 index 0000000000..d72388e53b --- /dev/null +++ b/doc/qtdesignstudio/images/studio-components.png diff --git a/doc/qtdesignstudio/images/studio-connections.png b/doc/qtdesignstudio/images/studio-connections.png Binary files differnew file mode 100644 index 0000000000..787bfbdc95 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-connections.png diff --git a/doc/qtdesignstudio/images/studio-design-mode.png b/doc/qtdesignstudio/images/studio-design-mode.png Binary files differnew file mode 100644 index 0000000000..9937cce4ff --- /dev/null +++ b/doc/qtdesignstudio/images/studio-design-mode.png diff --git a/doc/qtdesignstudio/images/studio-edit-mode.png b/doc/qtdesignstudio/images/studio-edit-mode.png Binary files differnew file mode 100644 index 0000000000..4923271823 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-edit-mode.png diff --git a/doc/qtdesignstudio/images/studio-editing-3d-scenes.png b/doc/qtdesignstudio/images/studio-editing-3d-scenes.png Binary files differnew file mode 100644 index 0000000000..329e38b5c3 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-editing-3d-scenes.png diff --git a/doc/qtdesignstudio/images/studio-editors.png b/doc/qtdesignstudio/images/studio-editors.png Binary files differnew file mode 100644 index 0000000000..063bda76a8 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-editors.png diff --git a/doc/qtdesignstudio/images/studio-flipable.png b/doc/qtdesignstudio/images/studio-flipable.png Binary files differnew file mode 100644 index 0000000000..d4b490b246 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-flipable.png diff --git a/doc/qtdesignstudio/images/studio-group.png b/doc/qtdesignstudio/images/studio-group.png Binary files differnew file mode 100644 index 0000000000..27a5f79bbc --- /dev/null +++ b/doc/qtdesignstudio/images/studio-group.png diff --git a/doc/qtdesignstudio/images/studio-gs.png b/doc/qtdesignstudio/images/studio-gs.png Binary files differnew file mode 100644 index 0000000000..898826e83d --- /dev/null +++ b/doc/qtdesignstudio/images/studio-gs.png diff --git a/doc/qtdesignstudio/images/studio-help.png b/doc/qtdesignstudio/images/studio-help.png Binary files differnew file mode 100644 index 0000000000..3cee0bf635 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-help.png diff --git a/doc/qtdesignstudio/images/studio-import-3d.png b/doc/qtdesignstudio/images/studio-import-3d.png Binary files differnew file mode 100644 index 0000000000..6f960a875a --- /dev/null +++ b/doc/qtdesignstudio/images/studio-import-3d.png diff --git a/doc/qtdesignstudio/images/studio-import-metadata.png b/doc/qtdesignstudio/images/studio-import-metadata.png Binary files differnew file mode 100644 index 0000000000..6b2f1716b5 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-import-metadata.png diff --git a/doc/qtdesignstudio/images/studio-imported-assets.png b/doc/qtdesignstudio/images/studio-imported-assets.png Binary files differnew file mode 100644 index 0000000000..2722c84ba4 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-imported-assets.png diff --git a/doc/qtdesignstudio/images/studio-kit-selector.png b/doc/qtdesignstudio/images/studio-kit-selector.png Binary files differnew file mode 100644 index 0000000000..1844be1412 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-kit-selector.png diff --git a/doc/qtdesignstudio/images/studio-live-preview.png b/doc/qtdesignstudio/images/studio-live-preview.png Binary files differnew file mode 100644 index 0000000000..30d5c822d0 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-live-preview.png diff --git a/doc/qtdesignstudio/images/studio-pie.png b/doc/qtdesignstudio/images/studio-pie.png Binary files differnew file mode 100644 index 0000000000..f2e67a63fb --- /dev/null +++ b/doc/qtdesignstudio/images/studio-pie.png diff --git a/doc/qtdesignstudio/images/studio-preview.png b/doc/qtdesignstudio/images/studio-preview.png Binary files differnew file mode 100644 index 0000000000..4f943f3f8d --- /dev/null +++ b/doc/qtdesignstudio/images/studio-preview.png diff --git a/doc/qtdesignstudio/images/studio-project-wizards.png b/doc/qtdesignstudio/images/studio-project-wizards.png Binary files differnew file mode 100644 index 0000000000..29a31a2e14 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-project-wizards.png diff --git a/doc/qtdesignstudio/images/studio-projects.png b/doc/qtdesignstudio/images/studio-projects.png Binary files differnew file mode 100644 index 0000000000..623bc1f872 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-projects.png diff --git a/doc/qtdesignstudio/images/studio-ps-export.png b/doc/qtdesignstudio/images/studio-ps-export.png Binary files differnew file mode 100644 index 0000000000..a28cc68bb0 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-ps-export.png diff --git a/doc/qtdesignstudio/images/studio-rectangle.png b/doc/qtdesignstudio/images/studio-rectangle.png Binary files differnew file mode 100644 index 0000000000..0d545b8fbb --- /dev/null +++ b/doc/qtdesignstudio/images/studio-rectangle.png diff --git a/doc/qtdesignstudio/images/studio-run-settings.png b/doc/qtdesignstudio/images/studio-run-settings.png Binary files differnew file mode 100644 index 0000000000..034377a98d --- /dev/null +++ b/doc/qtdesignstudio/images/studio-run-settings.png diff --git a/doc/qtdesignstudio/images/studio-settings.png b/doc/qtdesignstudio/images/studio-settings.png Binary files differnew file mode 100644 index 0000000000..2ac37ea853 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-settings.png diff --git a/doc/qtdesignstudio/images/studio-sketch-export.png b/doc/qtdesignstudio/images/studio-sketch-export.png Binary files differnew file mode 100644 index 0000000000..e9ecc8a92b --- /dev/null +++ b/doc/qtdesignstudio/images/studio-sketch-export.png diff --git a/doc/qtdesignstudio/images/studio-triangle.png b/doc/qtdesignstudio/images/studio-triangle.png Binary files differnew file mode 100644 index 0000000000..948e67041e --- /dev/null +++ b/doc/qtdesignstudio/images/studio-triangle.png diff --git a/doc/qtdesignstudio/images/studio-welcome-mode.png b/doc/qtdesignstudio/images/studio-welcome-mode.png Binary files differnew file mode 100644 index 0000000000..2657be12af --- /dev/null +++ b/doc/qtdesignstudio/images/studio-welcome-mode.png diff --git a/doc/qtdesignstudio/images/studio-workflow.png b/doc/qtdesignstudio/images/studio-workflow.png Binary files differnew file mode 100644 index 0000000000..a155ed0da4 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-workflow.png diff --git a/doc/qtdesignstudio/qtdesignstudio-online.qdocconf b/doc/qtdesignstudio/qtdesignstudio-online.qdocconf new file mode 100644 index 0000000000..27121048cb --- /dev/null +++ b/doc/qtdesignstudio/qtdesignstudio-online.qdocconf @@ -0,0 +1,8 @@ +include(config/license.qdocconf) +include($QT_INSTALL_DOCS/global/qt-html-templates-online.qdocconf) +include(config/html-online.qdocconf) +include(config/qtdesignstudio.qdocconf) + +# Add an .html file with sidebar content, used in the online style +HTML.stylesheets += config/style/qt5-sidebar.html + diff --git a/doc/qtdesignstudio/qtdesignstudio.qdocconf b/doc/qtdesignstudio/qtdesignstudio.qdocconf new file mode 100644 index 0000000000..2bb8c5e8f9 --- /dev/null +++ b/doc/qtdesignstudio/qtdesignstudio.qdocconf @@ -0,0 +1,3 @@ +include(config/license.qdocconf) +include($QT_INSTALL_DOCS/global/qt-html-templates-offline.qdocconf) +include(config/qtdesignstudio.qdocconf) diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc new file mode 100644 index 0000000000..60a521726e --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc @@ -0,0 +1,65 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage studio-getting-started.html + \page qtbridge-overview.html + \nextpage psqtbridge.html + + \title Exporting Artwork from Design Tools + + You need to use \QB for exporting the 2D assets from design tools, + whereas you can directly import 3D assets saved in widely-used 3D + graphics formats. For best results when importing 3D assets, follow + the guidelines for creating and exporting them. + + \list + + \li \l{Exporting Designs from Adobe Photoshop} + + You can use the \QBPS export tool in Adobe Photoshop to convert + artwork into Qt Quick files (.ui.qml) that you can import to + projects in \QDS. + + \li \l{Exporting Designs from Sketch} + + You can use the \QBSK export tool in Sketch to convert artwork into + Qt Quick files that you can import to projects in \QDS. + + \li \l{Exporting from Maya} + + You can export 3D graphics from Maya in the FBX format. + The necessary plugin is usually enabled by default. + + \omit + \li \l{Exporting 3D Assets} + + You can import files you created using 3D graphics applications and + stored in several widely-used formats, such as .blend, .dae, .fbx, + .glb, .gltf, .obj, .uia, or .uip. + \endomit + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc new file mode 100644 index 0000000000..272a045421 --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +// Note: The \page value is hard-coded as a link in Qt Bridge for Adobe Photoshop. + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage qtbridge-overview.html + \page psqtbridge.html + \nextpage qtbridge-ps-setup.html + + \title Exporting Designs from Adobe Photoshop + + You can use \QBPS to export designs from Adobe Photoshop to .ui.qml files. + + \image studio-ps-export.png + + If you would rather use Adobe Illustrator for creating artwork, you can + copy-paste your assets to Adobe Photoshop as \e {smart objects}. + + The following topics describe setting up and using \QBPS: + + \list + + \li \l{Setting Up Qt Bridge for Adobe Photoshop} + + You must install and set up the \QBPS export tool before you can use + it to convert artwork into Qt Quick files that you can import to + projects in \QDS. + + \li \l{Using Qt Bridge for Adobe Photoshop} + + To get the best results when you use \QBPS to export designs from + Photoshop to Qt Quick files, you should follow the guidelines for + working with Photoshop and organizing your assets. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc new file mode 100644 index 0000000000..0268fd04af --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc @@ -0,0 +1,116 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + + \contentspage {Qt Design Studio} + \previouspage psqtbridge.html + \page qtbridge-ps-setup.html + \nextpage qtbridge-ps-using.html + + \title Setting Up \QBPS + + \QBPS is delivered as an Adobe extension (ZXP) package and requires Adobe + Photoshop version 20.0.0, or later to be installed. The \QBPS installation + process differs depending on whether you use ZXPInstaller and whether you + are installing on Windows or \macos. + + \section1 Installing with ZXPInstaller + + To use ZXPInstaller to install \QBPS: + + \list 1 + \li Download and install \l{http://zxpinstaller.com/}{ZXPInstaller}. + \li Start ZXPInstaller. + \li Drag and drop the \QBPS ZXP package from the \c photoshop_bridge + directory in the installation directory of \QDS to ZXPInstaller. + \li Follow the instructions of the installation program. + \endlist + + \section1 Installing Without ZXPInstaller + + The \QBPS installation process differs depending on the platform you + are installing on. + + \section2 Installing on Windows + + To install \QBPS on Windows without using ZXPInstaller: + + \list 1 + \li Copy the \QBPS ZXP package from the \c photoshop_bridge directory + in the installation directory of \QDS to the \c Documents directory + in your user directory. + \li Open Windows PowerShell. + \li Enter the following commands: + \badcode + cd "$env:UserProfile\Documents" + mv .\io.qt.QtBridge.zxp .\io.qt.QtBridge.zip + expand-archive .\io.qt.QtBridge.zip + xcopy /E /I .\io.qt.QtBridge "$env:APPDATA\Adobe\CEP\extensions\io.qt.QtBridge" + \endcode + \endlist + + \section2 Installing on \macos + + To install \QBPS on \macos without using ZXPInstaller: + + \list 1 + \li Copy the \QBPS ZXP package from the \c photoshop_bridge + directory in the installation directory of \QDS to your + \c Documents directory. + \li Open Terminal. + \li Enter the following commands: + \badcode + cd ~/Documents + unzip io.qt.QtBridge.zxp -d io.qt.QtBridge + sudo mkdir -p /Library/Application\ Support/Adobe/CEP/extensions + sudo cp -R ./io.qt.QtBridge /Library/Application\ Support/Adobe/CEP/extensions + \endcode + \endlist + + \section1 Enabling Remote Connections + + To set up \QBPS: + + \list 1 + \li Once the installation is completed, restart Adobe Photoshop to make + \QBPS appear in \uicontrol Window > \uicontrol Extensions. + \li Select \uicontrol Edit > \uicontrol Preferences > + \uicontrol General > \uicontrol Plug-ins to enable a remote + connection. + \li Select the \uicontrol {Enable Remote Connections} check box and + enter a password in the \uicontrol Password field. + \li To test that the connection is working properly, start \QBPS and + select the settings icon in the top right corner. + \image qt-bridge-settings.png + \li In the \uicontrol Password field, enter the password you entered in + Adobe Photoshop and select \uicontrol {Connect}. + \li In the \uicontrol {Export Path} group, select the browse button + (\uicontrol {...}) to specify the location where \QBPS copies the + exported files. + \endlist + + Once the connection is successfully created, \QBPS is ready to use. +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc new file mode 100644 index 0000000000..754a73f635 --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc @@ -0,0 +1,258 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage qtbridge-ps-setup.html + \page qtbridge-ps-using.html + \nextpage sketchqtbridge.html + + \title Using \QBPS + + \section1 Organizing Assets + + To get the best results when you use \QBPS to export designs from Adobe + Photoshop to \QDS, follow these guidelines when working with Photoshop: + + \list + \li Arrange your art into artboards and organize it into groups and + layers that are imported into \QDS as separate files, depending + on the choices you make when exporting designs. + \li Use the Type tool to make sure that all of your text labels + are exported to \l Text items. + \li Store all assets in vector format to be able to easily rescale them + for different screen sizes and resolutions. + \endlist + + If you would rather use Adobe Illustrator for creating artwork, you can + copy-paste your assets to Adobe Photoshop as \e {smart objects}. You can + then double-click the smart objects in Photoshop to open them in Illustrator + for editing. Because you use smart objects, all your changes are propagated + to all instances of the objects used in your designs in Photoshop. + + To use the fonts that you use in Photoshop also in \QDS, you need to load + them to \QDS. \QDS deploys them to devices when you preview the UI. For more + information, see \l{Using Custom Fonts}. + + \section2 Using Artboards + + The relationships between the groups and layers on an artboard are preserved + when you export designs from Adobe Photoshop and import them into \QDS. + + When you use \QBPS to export your designs, you will determine how you want + each group or layer exported: as a \e component or \e child. A component is + a single QML file that can contain other assets. A child is a single PNG + file that you can use within QML files. + + If you plan to use pieces of your artwork as separate images in the UI, + group them on an artboard as separate layers. You can then export the group + as a component and each layer within it as a child. The children are + imported to \QDS as separate PNG files that you can use as image sources. + + To use the contents of an artboard as a single image in the UI, you can + merge the groups and layers when you export them. During import, the + contents are flattened into one PNG file. The merge is done in a way that + enables you to change the groups and layers in Photoshop or Adobe + Illustrator and then export and import the artboard again. This is an easy + way to create a reference image of how the final UI should look like, for + example. + + Place different parts of the UI, such as menus and pop-ups, on separate + artboards to be able to export them as components or children and to + import them as QML and PNG files that you can drag and drop to the working + area in \QDS Design mode while creating a UI. + + \QDS offers predefined sets of UI controls that you can modify according + to your needs. You can export your own controls as QML types, Qt Quick + Controls, or Studio Components. The position and dimensions of your control + are preserved. + + However, if you want your UI controls, such as check boxes, to look exactly + like they do in Photoshop, you have to create the control in an Artboard and + use the artboard in the layers where the control instance is to be created. + \QB exports the control as a custom QML component that you can program in + \QDS. + + \section1 Exporting Assets + + Each artboard is exported automatically as a component. That is, a separate + QML file that contains all the artwork on the artboard, except layers that + are set to be skipped or exported as child items. You determine how + each group or layer in an artboard is exported: as a component or a child + item. In addition, you can merge the groups and layers of an artboard + into the parent as one item or skip layers completely. + + By default, layers are exported as follows: + + \list + \li First level group layers are exported as child items of the + artboard. + \li Second level group layers are merged to their parent. + \li Asset layers are exported as merged. + \li Text layers are always exported as child items. + \endlist + + \QBPS automatically proposes identifiers (QML ids) for all groups and layers. + The ids will be used as filenames in \QDS. You can change the ids, so that + you can easily find them in \QDS. Just keep in mind that the ids must be + unique and that they must follow some naming conventions. + + You can export assets using the default settings and make all the changes + later in \QDS. If you are familiar with the \l{QML Syntax Basics} + {QML syntax}, you can modify the settings to tailor the generated QML to + a certain degree. For example, you can specify the QML type or Studio + component to use for a component or layer. If you have drawn an arc that + you mean to animate, you can export it as an Arc Studio component to avoid + having to replace the arc image with an Arc component in \QDS. Or you could + export a button as a Qt Quick Controls 2 Button type. + + You can specify effects, such as a blur effect, to use for a group or layer. + + The QML types supported by \QDS are listed in the \uicontrol {QML Types} + tab in the \uicontrol Library in the Design mode of \QDS. For more + information, see \l{Creating Components}. + + You can also specify values for the properties of the QML type or create + \l{Property Aliases}{property aliases} to fetch the values from other + properties. + + \image qt-bridge.png + + \section2 Specifying Settings for Exporting Assets + + To export your design using \QBPS: + + \list 1 + \li \QBPS automatically proposes identifiers for all groups and layers + that you can change in the \uicontrol {QML ID} field. The ids must + be unique, they must begin with a lower-case letter or an + underscore, and they can only contain letters, numbers, and + underscore characters. For more information, see + \l {The id Attribute}. + \li In the \uicontrol {Export As} field, select the export type for the + group or layer: + \list + \li \uicontrol Component creates a separate QML file for the + selected artboard, group, or layer that contains all the + artwork in it, except layers that are set to be skipped or + exported as child items. + \li \uicontrol Child creates a separate PNG file for each asset + of the selected group or layer, with references to the + images in the component file. + \li \uicontrol Merged merges the selected groups and layers into + the parent as one item. + \li \uicontrol Skipped completely skips the selected layer. + \endlist + \li In the \uicontrol {As Artboard} field, select an artboard + to reuse. For example, you can use an artboard to define a + component, such as a button, and reuse it in other artboards. + \li In the \uicontrol {QML Type} field, specify the QML type + or Studio component to morph this layer into. The generated + component will be of this type. For example, if you drew a + rectangle, you can export it as a Rectangle Studio component. + You can provide the import statement of the module where the QML + type is defined in the \uicontrol {Add Imports} field. + \li In the \uicontrol {Add Imports} field, enter additional + import statements to have them added to the generated QML file. + For example, to use Qt Quick Controls 2.3, you need the import + statement \c {QtQuick.Controls 2.3} and to use Qt Studio + Components 1.0, you need the import statement + \c {QtQuick.Studio.Components 1.0}. You can also import a module + as an alias. + \li In the \uicontrol {QML Properties} field, specify properties for + the QML type. You can add and modify properties in \QDS. + \li Select the \uicontrol {Clip Contents} check box to enable clipping + in the type generated from the layer. The generated type will clip + its own painting, as well as the painting of its children, to its + bounding rectangle. + \li Select the \uicontrol {Create Alias} check box to export the item + generated from this layer as an alias in the parent component. + \li Select \uicontrol {Cascade properties} to apply the current set of + properties to all the children of the selected layer. + \li Select \uicontrol Export to copy your assets to the export path you + specified. + \li When the exporting is done, select \uicontrol OK. + \endlist + + All the assets and metadata are copied to the directory you specified. This + might take a little while depending on the complexity of your project. + + You can now create a project in \QDS and import the assets to it, as + described in \l {Creating Projects} and \l{Importing Designs}. + + \section1 Sanitizing Documents + + \QBPS enables removing all \QBPS related metadata from the active + document. In the \QBPS \uicontrol Settings dialog, select + \uicontrol {Sanitize Document} to sanitize the active document. + Once the sanitization is successfully done, the document will + contain no \QBPS related metadata and the \QBPS layer settings will fall + back to the \l{Exporting Assets}{default} values. + + \note The sanitization is done in memory and the document must be saved to + keep the sanitized state. + + \image qt-bridge-sanitize.png + + \section1 Extending \QBPS + You can change the default behavior of \QBPS with the help of a JSX script. One can write + specific functions in the script that are called by \QBPS with useful parameters. + + \section2 Overridable JSX Functions + You can define the following functions in the override JSX. + \list + \li preExport(document) + This function is called before the document is exported. The parameter \a document is + the PSD Document instance. This function can be used to make temporary changes in + the document before export. + \li postExport(document) + This function is called after the document is exported. The parameter \a document is the + PSD Document instance. You can undo the temporary changes done in the function + \e preExport(...). + \li customDefaultQmlId(name, instance) + The function is called for settings the default QML id of the layer. The returned value + is used for the QML id. Return \e Falsey to use the auto generated QML id instead. + The parameter \a name is the auto generated QML id by the plugin and \a instance is the + PSD layer instance. + \endlist + + \note Please refer to \l {https://www.adobe.com/devnet/photoshop/scripting.html} + {Adobe Photoshop CC Javascript} scripting guide to understand the object model and \e Document + and \e Layer instances. + + \image qt-bridge-override.png + + In the \QBPS \uicontrol Settings dialog, select \uicontrol {Override JSX Script} to set the + override JSX script. + + For more information, watch a video tutorial and webinar about using \QBPS: + + \list + \li \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partone} + {Building an Instrument Cluster for Your Car HMI, Part 1} + \li \l{https://www.youtube.com/watch?v=ZzbucmQPU44} + {From Photoshop to Prototype with Qt Design Studio} + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc new file mode 100644 index 0000000000..dbb986aa61 --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc @@ -0,0 +1,56 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +// Note: The \page value is hard-coded as a link in Qt Bridge for Sketch. + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage qtbridge-ps-using.html + \page sketchqtbridge.html + \nextpage qtbridge-sketch-setup.html + + \title Exporting Designs from Sketch + + You can use \QBSK to export designs from Sketch to .ui.qml files. + + \image studio-sketch-export.png + + The following topics describe setting up and using \QBSK: + + \list + + \li \l{Setting Up Qt Bridge for Sketch} + + You must install Sketch and the \QBSK export tool before you can use + the tool to convert artwork into Qt Quick files that you can import + to projects in \QDS. + + \li \l{Using Qt Bridge for Sketch} + + To get the best results when you use \QBSK to export designs from + Sketch to Qt Quick files, you should follow the guidelines for + working with Sketch and organizing your assets. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-setup.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-setup.qdoc new file mode 100644 index 0000000000..4c761b90d0 --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-setup.qdoc @@ -0,0 +1,44 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + + \contentspage {Qt Design Studio} + \previouspage sketchqtbridge.html + \page qtbridge-sketch-setup.html + \nextpage qtbridge-sketch-using.html + + \title Setting Up \QBSK + + \QBSK is delivered with \QDS as a Sketch plugin that you can install to + Sketch. + + \note Install the Sketch app before installing the plugin. + + To install the \QBSK plugin to Sketch, double-click the \QBSK plugin in the + \c sketch_bridge directory in the installation directory of \QDS. + + The plugin is available at \uicontrol Plugins > \uicontrol {\QB}. +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc new file mode 100644 index 0000000000..c10d4c18ae --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc @@ -0,0 +1,196 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage qtbridge-sketch-setup.html + \page qtbridge-sketch-using.html + \nextpage exporting-from-maya.html + + \title Using \QBSK + + \section1 Organizing Assets + + To get the best results when you use \QBSK to export designs from Sketch + to \QDS, follow these guidelines when working with Sketch: + + \list + \li Arrange your sketch document in artboards, layers, and groups. The + QML code generated in \QDS corresponds to the structure of your + Sketch document. + \li \QBSK supports document \e symbols and \e {symbol overrides}. Each + symbol is exported as a QML component, and each symbol instance is + generated as a respective \e component instance in the generated + QML. The symbol overrides are exported as values of properties for + the components. For example, if you use symbol overrides to specify + the text for each button instance, it is exported as a value of the + text property. + \li Store all assets in the scalable vector graphics (SVG) format + to be able to easily rescale them for different screen sizes + and resolutions. + \endlist + + To use the fonts that you use in Sketch also in \QDS, you need to load + them to \QDS. \QDS deploys them to devices when you preview the UI. For more + information, see \l{Using Custom Fonts}. + + \section2 Using Artboards + + The relationships between artboards and layers are preserved when you export + designs from Sketch and import them into \QDS. + + An artboard can only be exported as a component. That is, a separate + QML file that contains all the artwork on the artboard, except layers that + are set to be skipped or exported as child items. + + A component is a single QML file that can contain other child items with + assets or text. + + To use the contents of an artboard as a single image in the UI, you can + merge the groups and layers when you export them. During import, the + contents are flattened into one PNG file. The merge is done in a way that + enables you to change the groups and layers in Sketch and then export and + import the artboard again. This is an easy way to create a reference image + of how the final UI should look like, for example. + + Place different parts of the UI, such as menus and pop-ups, on separate + artboards to be able to export them as components or children and to + import them as QML and PNG files that you can drag and drop to the working + area in \QDS Design mode while creating a UI. + + \section2 Using Layer and Groups + + When you use \QBSK to export your designs, you will determine how you want + each layer or group to be exported: as \e merged or as \e child. Each + layer or group represents a separate image in the UI when it is exported as + a \e child. The asset of the layer or group is merged to its parent + group or artboard if it is exported as \e merged. + + You can select the asset format and DPI to use for each image in + \uicontrol Settings > \uicontrol {Asset Settings}. + + \section1 Exporting Assets + + By default, layers are exported as follows: + + \list + \li Artboards are always exported as \e components or \e skipped. + \li Asset layers are exported as merged. + \li Text layers can only be exported as \e child or \e skipped. + \li A \e hotspot layer can only be exported as \e child or \e skipped. + It is always exported as an instance of the \l MouseArea QML type. + \li A symbol instance layer can only be exported as \e child or + \e skipped. + \endlist + + You can export assets using the default settings and make all the changes + later in \QDS. If you are familiar with the \l{QML Syntax Basics} + {QML syntax}, you can modify the settings to tailor the generated QML to + a certain degree. For example, you can specify the QML type or + \l {Studio Components}{Qt Quick Studio Component} to use for a component or + layer. If you have drawn an arc that you mean to animate, you can export it + as an \l Arc component to avoid having to replace the arc image with an Arc + component in \QDS. Or you could export a button as a Qt Quick Controls + \l Button type. + + \image qt-sketch-bridge.png + + \section2 Specifying Settings for Exporting Assets + + To export your design using \QBSK: + + \list 1 + \li \QBSK automatically proposes identifiers for all groups and layers + that you can change in the \uicontrol {QML ID} field. The ids will + be made unique when the layer and the respective artwork is imported + into \QDS. + \li In the \uicontrol {Export As} field, select the export type for the + group or layer: + \list + \li \uicontrol Component creates a separate QML file for the + selected symbol that contains all the artwork in it, except + layers or groups that are set to be skipped or exported as + child items. + \li \uicontrol Child creates a separate PNG file for each asset + of the selected group or layer, with references to the + images in the component file. + \li \uicontrol Merged merges the selected groups and layers into + the parent artboard or group as one item. + \li \uicontrol Skipped completely skips the selected layer. + \endlist + \li In the \uicontrol {QML Type} field, specify the QML type or + \l {Studio Components}{Qt Quick Studio Component} to morph this + layer into. The generated component will be of this type. For + example, if you drew a rectangle, you can export it as a + \l Rectangle component. + You can provide the import statement of the module where the QML + type is defined in the \uicontrol Imports field. + \li In the \uicontrol Imports field, enter + additional import statements to have them added to the generated QML + file. For example, to use Qt Quick Controls 2.3, you need the + import statement \c {QtQuick.Controls 2.3} and to use Qt Quick + Studio Components 1.0, you need the import statement + \c {QtQuick.Studio.Components 1.0}. You can also import a module as + an alias. + \li In the \uicontrol {Properties} field, specify properties for the QML + type. You can add and modify properties in \QDS. + \li Select the \uicontrol Alias check box to export the item generated + from this layer as an alias in the parent component. + \li Select the \uicontrol Clip check box to enable + clipping in the type generated from the layer. The generated type + will clip its own painting, as well as the painting of its children, + to its bounding rectangle. + \li Select the \uicontrol Visible check box to determine the visibility + of the layer. + \li Select \uicontrol Export to copy your assets to the export path you + specified. + \li When the exporting is done, select \uicontrol OK. + \endlist + + All the assets and metadata are copied to the directory you specified. This + might take a little while depending on the complexity of your project. + + You can now create a project in \QDS and import the assets to it, as + described in \l {Creating Projects} and \l{Importing Designs}. + + \section1 Specifying Export Path and Asset Format + + To specify export path and asset format, select \uicontrol Settings > + \uicontrol {Asset Settings}. + + \image qt-sketch-bridge-settings.png + + \list 1 + \li By default, \QBSK exports assets to a directory named after your + Sketch file located inside the parent directory of the Sketch file + being exported. You can change the export path in the + \uicontrol {Export Path} field. + \li You can select the default asset format and DPI to use for each + layer. These settings are overridden by the layer export settings + from the Sketch app. That is, if the layer is made exportable in + the Sketch app, the respective asset format and DPI settings are + preserved. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-adding-dynamics.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-adding-dynamics.qdoc new file mode 100644 index 0000000000..60891e2aa3 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-adding-dynamics.qdoc @@ -0,0 +1,70 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-adding-dynamics.html + \previouspage studio-fonts.html + \nextpage studio-timeline.html + + \title Adding Dynamics + + You can animate the properties of UI components and create connections + between them to enable them to communicate with each other. + + \list + \li \l {Creating Animations} + + You can use a timeline and keyframe based editor in the + \uicontrol Timeline view to animate the properties of UI + components. Animating properties enables their values to + move through intermediate values at specified keyframes + instead of immediately changing to the target value. + \li \l {Adding Connections} + + You can create connections between the UI components and + the application to enable them to communicate with each other. For + example, how does the appearance of a button change on a mouse click + and which action does the application need to perform in response to + it. + + You can also create connections between UI components by + binding their properties together. This way, when the value of a + property changes in a parent component, it can be automatically + changed in all the child components, for example. + \li \l {Adding States} + + Qt Quick allows you to declare various UI states that describe + how component properties change from a base state. Therefore, + states can be a useful way of organizing your UI + logic. You can associate transitions with items to define + how their properties will animate when they change due to a state + change. + \li \l {Editing PathView Properties} + + You can use a graphical spline editor to specify \l{PathView} paths. + A path view lays out data provided by data models on a \l{Path}. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc new file mode 100644 index 0000000000..b10c89527c --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc @@ -0,0 +1,90 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage qt-design-viewer.html + \page studio-advanced.html + \nextpage studio-platforms.html + + \title Advanced Topics + + \QDS attempts to meet your needs, whether you have previous experience with + QML, and coding or not. When you install \QDS, the default configuration + allows you to start designing and previewing UIs with very little effort. + + However, you might want to use the \uicontrol {Text Editor} in the Design + mode sometimes to edit your QML files or write some JavaScript to simulate + application logic and bring your UI to life. If you use JavaScript, you + might also want to debug and profile you UIs to find and fix problems in + them. + + You can also use special options to start \QC from the command line and use + it mainly from the keyboard. + + \list + \li \l{Supported Platforms} + + You can install and run \QC on several operating systems to design + UIs for multiple desktop, embedded, and mobile device platforms. + \li \l{Keyboard Shortcuts} + + \QDS provides various keyboard shortcuts to speed up your + development process. You can change the keyboard shortcuts, + as well as import and export keyboard shortcut mapping schemes. + \li \l{Coding} + + You can use the code editor in the Design mode + \uicontrol {Text Editor} view or in the Edit mode to modify QML + code. The code editor understands the QML language as code, not + just as plain text. This enables it to provide you with useful + features, such as semantic highlighting, checking code syntax, + code completion, and refactoring actions. + \li \l{Simulating Application Logic} + + You can use JavaScript to simulate application logic to bring your + UI to life. + \li \l{Debugging and Profiling} + + \QDS comes with a JavaScript debugger. In the Debug mode, you + can inspect the state of your UI while debugging. + + The memory and CPU power available on devices are limited and + you should use them carefully. The QML Profiler enables you to + profile Qt Quick UIs. + \endlist + + \section1 Related Topics + + \list + \li \l{Using External Tools} + + You can use external tools directly from \QC. lupdate and lrelease, + QML preview tools (QML Viewer and QML Scene), the default text + editor for your system, and the \c sort tool are preconfigured for + use. You can change their default configurations and configure new + tools. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc new file mode 100644 index 0000000000..71857f95a7 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc @@ -0,0 +1,79 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! +//! [studio components] + + \section1 Studio Components + + A set of ready-made studio components are available for creating differently + shaped objects, such as arcs, pies, or triangles, as well as objects with + particular abilities, such as being visibly \e flipped between their front + and back sides, like a card. The studio components are built on top of + \l {Qt Quick Shapes QML Types}, with some additional properties. + + You can drag-and-drop the following studio components from the + \uicontrol Library to the canvas or the \uicontrol Navigator: + + \list + \li \l Arc adds an arc that begins and ends at given positions. + \li \l Border adds a border with corners that you can shape + independently of each other. + \li \l Flipable provides a surface that can be flipped. + \li \l Group provides an item with the size property. + \li \l Iso adds a container for an ISO 7000 icon. + \li \l Pie adds a pie slice or a pie with a slice missing from it. + \li \l Rectangle adds a rectangle with corners that you can shape + independently of each other. + \li \l SvgPath adds an SVG path. + \li \l Triangle adds a triangle. + \endlist + +//! [studio components] + +//! [creating studio components] + + \section1 Creating Custom Controls + + You can use the project wizard to create a starting point for a custom + \l [QtQuickControls2] {Button}, \l [QtQuickControls2] {Pane}, + \l [QtQuickControls2] {StackView}{Stack View}, or + \l [QtQuickControls2] {Switch}. + + \list 1 + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls}. + \li Select the control to create, and then select \uicontrol Choose. + + \note Components are listed in the \uicontrol {QML Components} + section of the \uicontrol Library only if the filename begins + with a capital letter. + \li Edit component properties in the \uicontrol Properties pane. + + The available properties depend on the QML type. + \endlist + +//! [creating studio components] +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc new file mode 100644 index 0000000000..98687a88a7 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc @@ -0,0 +1,52 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage studio-javascript.html + \page studio-debugging.html + \nextpage creator-debugging-qml.html + + \title Debugging and Profiling + + \list + \li \l{Debugging Qt Quick Projects} + + You can use the integrated debugger to debug JavaScript functions, + to execute JavaScript expressions to get information about the state + of the UI, and to inspect QML properties and JavaScript + variables and change them temporarily at runtime. + \li \l{Debugging a Qt Quick Example Application} + + This section uses the \l{QML Advanced Tutorial}{Same Game} example + application to illustrate how to debug Qt Quick applications in the + Debug mode. + \li \l{Profiling QML Applications} + + You can use the QML Profiler to find causes for typical performance + problems in your UIs, such as slowness, freezing, and stuttering. + The QML Profiler is installed and configured as part of \QDS. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc new file mode 100644 index 0000000000..03e119d3c3 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc @@ -0,0 +1,48 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage studio-help.html + \group studioexamples + \nextpage creator-help.html + + \title Examples and Tutorials + + In the Welcome mode, you can open examples and tutorials that illustrate + how to use \QDS. + + \section1 Video Tutorials + + The \uicontrol Tutorials tab contains links to video tutorials that provide + more information about \QDS. + + You can access the Cluster tutorial source files in the \uicontrol Examples + tab. + + \section1 Examples + + The \uicontrol Examples tab lists examples about using \QDS. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc new file mode 100644 index 0000000000..7667fa5a10 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc @@ -0,0 +1,40 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage index.html + \previouspage creator-help.html + \page studio-faq.html + \nextpage studio-terms.html + + \title Frequently Asked Questions + + This section contains answers to some frequently asked questions about \QDS. + You might also find answers to your questions in the product documentation + by searching or browsing the index in the \l{Using the Help Mode} + {Help mode}. Many questions are also answered by the + \l{Examples and Tutorials}{examples and video tutorials}. + +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-fonts.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-fonts.qdoc new file mode 100644 index 0000000000..1ceef949d7 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-fonts.qdoc @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + + \contentspage {Qt Design Studio} + \previouspage qtquick-properties.html + \page studio-fonts.html + \nextpage studio-adding-dynamics.html + + \title Using Custom Fonts + + For your UI to use custom fonts when you preview it on a device, + you have to import the fonts to the project folder. \QDS deploys them to + the device along with your UI. + + \note Use fixed-width fonts if you plan to animate running numbers, so that + they do not appear to jump around the screen when they change. + + To add fonts: + + \list 1 + \li Select \uicontrol Library > \uicontrol Resources > + \uicontrol {Add New Resources}. + \li Browse to the folder that contains the font files and select them. + \li Enter the name of the directory to save the fonts. By default, \QDS + suggests the project directory. + \li Select \uicontrol OK to save the fonts. + \endlist + + The fonts are added to the list of fonts for the \uicontrol Font property + in \uicontrol Properties. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc new file mode 100644 index 0000000000..a9b12d1057 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc @@ -0,0 +1,79 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage index.html + \page studio-getting-started.html + \nextpage qtbridge-overview.html + + \title Getting Started + + Typically, you as a designer would create artwork in imaging and design + tools, such as Adobe Photoshop, Sketch, Blender, or Maya, and then send it + to a developer for adding it to the application. With the \QB export tool, + you can convert 2D assets into \l {Qt Quick} files. You can use the export + functionality of 3D graphics tools to save your 3D assets in a format + supported by \QDS. You can import the 2D and 3D assets into \QDS for + editing, before you submit the UI to the developer for adding the + functionality to the application. + + The following image describes the workflow using \QBPS and \QDS: + + \image studio-workflow.png + + The workflow consists of the following steps: + + \list 1 + \li Export your artwork from a design tool. + \li Create a project in \QDS and import your artwork to it. + \li Create reusable components in the Design mode. + \li Animate your design with the timeline and easing curve editor. + \li Create interactions using states and connections. + \li Preview your design in real time, on the desktop or on a mobile + or an embedded device. + \endlist + + The following topics contain information that you'll need to find your + way around \QDS: + + \list + \li \l {Exporting Artwork from Design Tools} + + Describes how to export 2D and 3D assets into files that + you can import to projects in \QDS. + \li \l {User Interface} + + Describes the parts and basic features of \QDS. + \li \l{Editing QML Files in Design Mode} + + Describes the parts and basic features of the Design mode. + \li \l {Tutorials} + + Describes how to use \QDS to create a simple animated UI with some + basic UI components, such as pages, buttons, and fields. Some of + the buttons can be used for moving between the pages. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc new file mode 100644 index 0000000000..8c983839f2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage index.html + \page studio-help.html + \previouspage creator-editor-external.html + \nextpage {Examples and Tutorials} + + \title Help + + \list + \li \l{Examples and Tutorials} + + A set of examples available in the Welcome mode illustrates how + to use \QDS features such as the timeline. If you would rather + be shown things than read about them, you can watch our extensive + video tutorials. + + \li \l{Using the Help Mode} + + \QDS comes fully integrated with documentation. You can use search + and index functions to find particular topics in the helps, or + request context-sensitive help by pressing \key F1 in the Design + mode. + + \li \l{Frequently Asked Questions} + + Contains answers to some frequently asked questions about \QDS. + + \li \l{Concepts and Terms} + + Describes main \QDS concepts and terms. + + \endlist + +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-importing-designs.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-importing-designs.qdoc new file mode 100644 index 0000000000..ee7f2250f9 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-importing-designs.qdoc @@ -0,0 +1,177 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage creator-vcs-git.html + \page studio-importing-designs.html + \nextpage studio-importing-2d.html + + \title Importing Designs + + You can import 2D and 3D assets to \QDS projects. You need to use \QB for + exporting the 2D assets from design tools, whereas you can directly import + 3D assets saved in widely-used 3D graphics formats. + + \list + \li \l{Importing 2D Assets} + + You can import 2D assets that you exported with \QB to a \QDS + project as image and QML files and edit them in the Design mode. + \li \l{Importing 3D Assets} + + You can import 3D assets that you created using 3D graphics + applications and stored in one of the supported file formats. + You can then edit them in the Design mode. + \endlist +*/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-importing-designs.html + \page studio-importing-2d.html + \nextpage studio-importing-3d.html + + \title Importing 2D Assets + + \image studio-imported-assets.png "Artwork imported into Qt Design Studio" + + You can import assets that you exported with \QB to a \QDS project as image + and QML files and edit them in the Design mode. If you make changes to your + design in the design tool, you can merge the changes into existing QML files + without overwriting the changes you have made in \QDS. + + \note Attempting to import assets exported on another system might fail. + + The following instructions use an empty project as an example. For more + information about the options you have, see + \l {Creating Projects}. + + To import designs to \QDS projects: + + \list 1 + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol General > \uicontrol Choose, and follow the + instructions of the wizard to create an empty project. + \li In \uicontrol Projects, double-click \e Screen01.ui.qml to move to + the Design mode. + \li Select \uicontrol Library > \uicontrol Resources > + \uicontrol {Add New Resources}. + \li Select the folder where you exported the assets. + \li Select \uicontrol {Exported Assets (*.metadata)} in the dropdown + menu to filter \e .metadata files. + \li Select a \e .metadata file to import, and then select + \uicontrol Open. + \li Select \uicontrol Details next to the + \uicontrol {Metadata Import Paths} field to display the path where + the metadata is imported from. + \image studio-import-metadata.png "Asset Import dialog" + \li Select \uicontrol Details next to the + \uicontrol {QML/Asset Export Paths} field to display the paths to + copy the assets to. + \li In the \uicontrol QML field, you can change the folder to copy the + QML files to. + \li In the \uicontrol Assets field, you can change the folder to copy + the image files to. + \li Deselect the \uicontrol {Import assets} check box if you only want + to create QML files. + \li Deselect the \uicontrol {Generate QML} check box if you only + want to import assets. + \li Select the \uicontrol {Merge QML} check box if you have imported the + assets before and want to merge the changes into existing QML files + instead of overwriting the existing files. + \li Select \uicontrol Import to import the QML files and assets. This + might take a little while for complex projects. + \endlist + + The imported assets are displayed in the \uicontrol Resources tab in the + \uicontrol Library as PNG images. The components that you specified in + the design tool are displayed in the \uicontrol {My QML Components} tab, + as well as in the \uicontrol Project tab of the \uicontrol Navigator as + separate QML files. + + \note The layer that was the bottom layer in the design tool becames the top + layer in the \uicontrol Navigator to reflect the QML code model. You + can view the QML code in the \uicontrol {Text Editor} tab. + + If asset importer conflicts, warnings, and errors are displayed in the + \uicontrol {Asset Import} dialog while importing, fix the issues in + design tool and export the assets again. + + \section1 \QB Videos + + For more information about importing assets from Adobe Photoshop, watch a + video tutorial and webinar about using \QB: + + \list + \li \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partone} + {Building an Instrument Cluster for Your Car HMI, Part 1} + \li \l{https://www.youtube.com/watch?v=ZzbucmQPU44} + {From Photoshop to Prototype with Qt Design Studio} + \endlist +*/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-importing-2d.html + \page studio-importing-3d.html + \nextpage quick-converting-ui-projects.html + + \title Importing 3D Assets + + You can import files you created using 3D graphics applications and stored + in several widely-used formats, such as .blend, .dae, .fbx, .glb, .gltf, + .obj, .uia, or .uip. For a list of formats supported by each \l{Qt Quick 3D} + version, see the module documentation. + + For more information about exporting 3D graphics from Maya, see + \l{Exporting from Maya}. + + During the import, you can optimize the files for \QDS. You can remove + components from meshes to reduce the cache size, find and fix issues in + the files, optimize graphs and meshes, and so on. The available options + depend on whether you are importing files that you created with Qt 3D Studio + or with other 3D graphics tools. See the tooltips in the options dialog + for more information about a particular option. + + \image studio-import-3d.png + + To import 3D assets to \QDS projects: + + \list 1 + \li In the Design mode, select \uicontrol Library > \uicontrol Resources + > \uicontrol {Add New Resources}. + \li Select \uicontrol {3D Assets} in the dropdown menu to filter 3D + graphics files. + \li Select a file to import, and then select \uicontrol Open. + \li In the \uicontrol {3D Scene Options} tab, select options for + importing the file. + \li Select \uicontrol Import to import the 3D graphics file. + \li When the import is done, select \uicontrol Close. + \endlist + + You can open the imported files in the Design mode for editing in the + \l{Editing 3D Scenes}{3D editor}. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc new file mode 100644 index 0000000000..a0e5926adb --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc @@ -0,0 +1,152 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage creator-editor-options-text.html + \page studio-javascript.html + \nextpage studio-debugging.html + + \title Simulating Application Logic + + You can use JavaScript to simulate application logic that brings your UI to + life. + + You will need the following files: + + \list + \li Qt Quick file 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 + \l {Module Definition qmldir Files}. + \endlist + + Here, you will need to write some C++ code. Namely, the Qt Quick file will + contain a QObject-derived class that is registered with the QML type system + as a \e singleton type. This enables the use of global property values in + the UI. + + You can find a video tutorial about creating JavaScript for generating mock + data for a UI + \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partfour} + {here}. + + To create the necessary files: + + \list 1 + \li In the File Explorer, create a folder for the JavaScript files + (for example, \e backend) and another one for the mock data + (for example, \e Data) in your project folder. + \note Make sure to capitalize the data folder name, because you + will need to import it as a QML type later, and QML type names must + be capitalized. + \li In \QDS, open the project file (.qmlproject) to add the backend + folder to the list of plugin directories passed to the QML runtime: + \code + importPaths: [ "imports", "backend" ] + \endcode + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol {Files and Classes} > \uicontrol {Qt Quick Files} > + \uicontrol {Qt Quick File} > \uicontrol Choose to add a Qt + Quick file that will specify the API of the UI. + \li Follow the instructions of the wizard to create the Qt Quick file + in the data folder. In these instructions, the file is called + \e Values.qml. + \note Make sure to capitalize the filename, because it will become + a custom QML type. + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol {Files and Classes} > \uicontrol {JavaScript} > + \uicontrol {JavaScript File} > \uicontrol Choose to create a + JavaScript file that generates mock data for the UI. + \li Follow the instructions of the wizard to create the JavaScript file + in the data folder. In these instructions, the file is called + \e {simulation.js}. + \li Delete the template text in JavaScript file and save the file. + \li In a text editor such as Notepad, create a module definition file + called \e qmldir with the following contents and place it in the + data directory: + \code + singleton Values 1.0 Values.qml + \endcode + \li Open \e Values.qml in the \uicontrol {Text Editor} tab for editing. + \li Add the following code to the top of the file to register the + QObject-derived class that you will use to expose the global + properties as a singleton type: + \code + pragma Singleton + \endcode + \li Add the following import statement to import the \e {simulation.js} + file to use the functionality that it provides: + \code + #import simulation.js as JS + \endcode + \li Add the following code to create a QObject-derived class that will + list the global properties you want to simulate and their default + values: + \code + QObject { + id: values + + // property values to simulate + property int name1: default1 + property string name2: default2 + property real name3: default3 + + } + \endcode + \note You must export the properties as aliases by selecting + \uicontrol {Export Property as Alias} in the + \inlineimage icons/action-icon.png + (\uicontrol Actions) menu of the property in the + \uicontrol Properties view. Exported properties are listed in + \uicontrol Connections > \uicontrol Properties, where you can + change their names. + \li Add the following code to use a \l Timer type to specify a range of + values for the property: + \code + property Timer name1Timer: Timer{ + running: true + repeat: true + onTriggered: JS.name1Timer() + interval: 10 + \endcode + \note You must add the JavaScript method to the JavaScript file. + \li Open the main UI file of the project and add the following code to + import the data folder as a QML module: + \code + #import Data 1.0 as Data + \endcode + \li Select \uicontrol {Set Binding} in the \uicontrol Settings menu of the + property to bind the property value to the value defined in the + values file. For example, you would set the following expression for + \e name1: + \code + Data.Values.name1 + \endcode + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc new file mode 100644 index 0000000000..2f48bdf68d --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-advanced.html + \page studio-platforms.html + \nextpage creator-keyboard-shortcuts.html + + \title Supported Platforms + + You can install and run \QDS on several operating systems to create + applications for multiple desktop, embedded, and mobile device platforms. + + \section1 Development Platforms + + \QDS is available in binary packages for the following operating systems: + + \list + \li \macos 10.13 and 10.14.x + \li Ubuntu Linux 18.04 + \li Windows 10 + \endlist + + \section1 Design Tools + + \QB is available for the following design tools: + + \list + \li Adobe Photoshop version 20.0.0 + \li Sketch 55.1 + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc new file mode 100644 index 0000000000..6f313d6688 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc @@ -0,0 +1,73 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage {Tutorials} + \page studio-projects-managing.html + \nextpage studio-projects.html + + \title Managing Projects + + One of the major advantages of \QDS is that it allows a team of designers + and developers to share a project across different development platforms + with a common tool for design, development, profiling, and debugging. + + \list + + \li \l {Creating Projects} + + You must add your exported files to a new project that you create + in \QDS. Setting up a new project in \QDS is aided by a wizard that + guides you step-by-step through the project creation process, + creates the necessary files, and specifies settings depending + on the choices you make. + + You can use wizards to create projects for the desktop or embedded + Linux and Android devices. In addition, you can add individual QML + files, components, font loaders, and JavaScript files to your + projects. + + \li \l{Using Git} + + You can add the project files to the Git version control, so that + the developers can keep up with your changes. Store and edit only + project source files and configuration files. Do not store generated + files. + + \li \l{Importing Designs} + + You can import assets that you exported from Adobe Photoshop to a + \QDS project and edit them in the Design mode to create a UI. + + \li \l {Converting UI Projects to Applications} + + \QDS projects are useful for creating UIs. To use them + for application development in Qt Creator, you have to convert them + to Qt Quick Application projects that contain .pro, .cpp, and .qrc + files. + + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc new file mode 100644 index 0000000000..570f2c8eb0 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc @@ -0,0 +1,159 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + + \contentspage {Qt Design Studio Manual} + \previouspage studio-projects-managing.html + \page studio-projects.html + \nextpage creator-vcs-git.html + + \title Creating Projects + + Creating a project enables you to: + + \list + \li Group files together + \li Include forms and resource files + \li Specify settings for previewing UIs + \endlist + + Setting up a new project in \QDS is aided by a wizard that guides you + step-by-step through the project creation process. The wizards prompt you + to enter the settings needed for that particular type of project and create + the necessary files for you. + + Studio projects are useful for creating UIs. You cannot use + them for application development, because they do not contain: + + \list + \li C++ code + \li Resource files (.qrc) + \li Code needed for deploying applications to devices. + \endlist + + Because the UIs do not contain any C++ code, you do not need + to build them. To test how well your designs work, you can preview the + UIs on the desktop or embedded Linux devices. For more + information, see \l{Previewing}. + + \image studio-project-wizards.png "A list of project wizards" + + You can export designs from other design tools and import them to projects + or create them from scratch using the following wizards: + + \list + \li \uicontrol General generates projects that are suitable for all + target platforms. + \omit + \li \uicontrol Embedded generates projects that work well on embedded + Linux devices. + \endomit + \li \uicontrol Mobile generates projects that work well on mobile + devices. + \li \uicontrol Desktop generates projects that work well on the desktop. + \endlist + + \section1 Using Project Wizards + + \list 1 + \li Select \uicontrol File > \uicontrol {New File or Project}. + \li Select the type of your project, and then select \uicontrol Choose. + \li In the \uicontrol Name field, enter a name for the project. + \li In the \uicontrol {Create in} field, enter the path for the project + files, and then select \uicontrol Next (or \uicontrol Continue on + \macos). + \li In the \uicontrol {Screen resolution} field, select the screen + resolution for previewing the UI on the desktop or on a device. + \li In the \uicontrol {Qt Quick Controls Style} field, select one of + the predefined \l{Styling Qt Quick Controls}{UI styles} to use, + and then select \uicontrol Finish (or \uicontrol Done on \macos). + \endlist + + \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 qtquickcontrols2.conf file specifies the preferred style and some + style-specific arguments. + \li \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 information, see + \l {Module Definition qmldir Files}. In addition, the \e QtQuick + subfolder contains the Studio components and effects QML types. + \endlist + + To use JavaScript and image files in the UI, copy them to the + project folder. + + \section1 Adding Files to Projects + + You can use wizards also to add individual files to your projects. + You can create the following types of files: + + \list + \li \uicontrol {Qt Quick Files} + \list + \li \uicontrol {Qt Quick File} generates a QML type with one + of the following types as the root item: \l Item, + \l Rectangle, \l Image, \l BorderImage, \l Flickable, + \l Row, \l Column, \l Flow, or \li 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 Views} generates a \l GridView or a + \l ListView. + \endlist + \li \uicontrol {Qt Quick Controls} + \list + \li \l [Qt Quick Controls 2] {Button}{Custom Button} creates a + push button with a text label. + \li \l [Qt Quick Controls 2] {Switch}{Custom Switch} creates a + switch with on and off states. + \li \l [Qt Quick Controls 2] {Pane} provides a background that + matches the UI style and theme. + \li \l [Qt Quick Controls 2] { StackView} provides a stack-based + navigation model. + \li \l [Qt Quick Controls 2] {SwipeView} enables users to + navigate pages by swiping sideways. + \endlist + \li \uicontrol {QML Files} + \list + \li \l FontLoader imports custom fonts to the project for + deployment to devices. For more information, see + \l {Using Custom Fonts}. + \li \l ListModel adds a list model to the project. + \endlist + \li \uicontrol {JavaScript File} generates files that you can use to + write the application logic. This is useful for testing the + application before the developers implement the application logic + in C++, for example. For more information, see + \l {Simulating Application Logic}. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-prototyping.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-prototyping.qdoc new file mode 100644 index 0000000000..df42f2fca0 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-prototyping.qdoc @@ -0,0 +1,91 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage quick-converting-ui-projects.html + \page studio-prototyping.html + \nextpage quick-components.html + + \title Creating UIs + + When you install \QDS, everything you'll need to design UIs + using \l{Qt Quick} and to preview them on the desktop or on Android or + embedded Linux devices is automatically installed and configured correctly + for you. + + Qt Quick enables you to build UIs around the behavior of + \e components and how they connect with one another. You + create components using Qt Quick and QML types that are available in + the Design mode. You can specify values for the \e properties of a + component to change its appearance and behavior. All QML types have a + set of predefined properties, some of which control things that are + visible to users, while others are used behind the scene. + + While it is useful to learn the basics of Qt Quick, you can also rely on + \QDS to write the code for you when you drag-and-drop the ready-made + components to the working area and change them to your liking by modifying + their properties in the Design mode. You can always check up details in + the extensive Qt Quick documentation by pressing \key F1. + + \list + + \li \l {Creating Components} + + In addition to your imported artwork, you can use the Design + mode to customize ready-made components or design any custom form + and shape directly as QML types. You can import visual assets in + various formats, such as PNG, JPG, and SVG for use in the + components. + + \li \l {Managing Item Hierarchy} + + You can manage the items in the current QML file and their + relationships in the \uicontrol Navigator. + + \li \l {Specifying Item Properties} + + You can specify values for the properties of a component to change + its appearance and behavior. All QML types have a set of predefined + properties. Some properties, such as position, size, and visibility, + are common to all QML types, whereas others are specific to the QML + type. You can specify properties for your components in the + \uicontrol Properties pane. + + \li \l {Using Custom Fonts} + + You can load custom fonts to \QDS and use them in your designs. + \endlist + + \section1 Related Topics + + \list + \li \l{Qt Quick UI Forms} + + 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. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc new file mode 100644 index 0000000000..5bb5b2f2de --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc @@ -0,0 +1,90 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage index.html + \page studio-terms.html + \previouspage studio-faq.html + \nextpage creator-acknowledgements.html + + \title Concepts and Terms + + This topic describes main \QDS concepts and terms. + + \section1 Component + \target glossary-component + + An instantiable QML definition, typically contained in a .qml file. + For example, a Button component may be defined in Button.qml. The + QML runtime may instantiate this Button component to create Button + objects. Alternatively, a component may be defined inside a + \l{Component} QML type. + + \section1 Deploy Configuration + \target glossary-deploy-config + + Handles the packaging and copying of the necessary files to a location + you want to preview the UI at. The files can be copied to a location in + the file system of the development PC or a \l{glossary-device}{device}. + + \section1 Device + \target glossary-device + + An embedded device or an Anroid device. + + \section1 Kit + \target glossary-buildandrun-kit + + \QDS groups run settings as kits to make cross-platform development easier. + Each kit consists of a set of values that define one environment, such as a + \l{glossary-device} {device} to preview the UI on. + + \section1 Mode + \target glossary-mode + + Adapts the \QDS UI to the different UI design + tasks at hand. Each mode has its own view that shows only the information + required for performing a particular task, and provides only the most + relevant features and functions related to it. As a result, the majority + of the \QDS window area is always dedicated to the actual task. + + \section1 Project + \target glossary-project + + Groups together a set of files, images, and other assets that you + can deploy and run on different desktop and \l{glossary-device}{device} + platforms, as specified by a \e {deploy configuration} and + \e {run configuration}. + + \section1 Run Configuration + \target glossary-run-config + + Starts the UI in the location where it was copied by the + \e {deploy configuration}. By default, when you run a project, \QDS + deploys it to the \l{glossary-device}{device} specified in the + selected \l{glossary-buildandrun-kit}{kit}, and runs it there. However, + if you have not made any changes to the project since you last deployed + it, \QC simply runs it again. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc new file mode 100644 index 0000000000..4c7af21e01 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -0,0 +1,160 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \page qtdesignstudio-toc.html + + \title All Topics + + \list + \li \l{Getting Started} + \list + \li \l{Exporting Artwork from Design Tools} + \list + \li \l{Exporting Designs from Adobe Photoshop} + \list + \li \l{Setting Up Qt Bridge for Adobe Photoshop} + \li \l{Using Qt Bridge for Adobe Photoshop} + \endlist + \li \l{Exporting Designs from Sketch} + \list + \li \l{Setting Up Qt Bridge for Sketch} + \li \l{Using Qt Bridge for Sketch} + \endlist + \li \l{Exporting from Maya} + \endlist + \li \l{User Interface} + \list + \li \l{Selecting Modes} + \li \l{Browsing Project Contents} + \li \l{Viewing Output} + \endlist + \li \l{Editing QML Files in Design Mode} + \li \l{Tutorials} + \endlist + \li \l{Managing Projects} + \list + \li \l{Creating Projects} + \li \l{Using Git} + \li \l{Importing Designs} + \list + \li \l{Importing 2D Assets} + \li \l{Importing 3D Assets} + \endlist + \li \l{Converting UI Projects to Applications} + \endlist + \li \l{Creating UIs} + \list + \li \l{Creating Components} + \list + \li \l{Creating Buttons} + \li \l{Creating Scalable Buttons and Borders} + \endlist + \li \l{Managing Item Hierarchy} + \li \l{Specifying Item Properties} + \li \l{Using Custom Fonts} + \li \l{Qt Quick UI Forms} + \endlist + \li \l {Adding Dynamics} + \list + \li \l{Creating Animations} + \li \l{Adding Connections} + \list + \li\l{Connecting Objects to Signals} + \li\l{Specifying Dynamic Properties} + \li\l{Adding Bindings Between Properties} + \endlist + \li \l{Adding States} + \li \l{Editing PathView Properties} + \endlist + \li \b {\l{Editing 3D Scenes}} + \list + \li \l{Editing 3D Assets in Design Mode} + \li \l{Working in the 3D Editor} + \li \l{Adding 3D Views} + \li \l{Using 3D Components} + \list + \li \l{Setting Node Properties} + \li \l{Adding Models} + \li \l{Using Materials and Shaders} + \li \l{Attaching Textures to Materials} + \li \l{Using Lights} + \li \l{Using Scene Camera} + \li \l{Setting Scene Environment} + \endlist + \endlist + \li \l{Previewing} + \list + \li \l{Previewing on Desktop} + \li \l{Previewing on Devices} + \li \l{Previewing in Browsers} + \endlist + \li \l{Advanced Topics} + \list + \li \l{Supported Platforms} + \li \l{Keyboard Shortcuts} + \li \l{Coding} + \list + \li \l{Writing Code} + \list + \li \l{Working in Edit Mode} + \li \l{Semantic Highlighting} + \li \l{Checking Code Syntax} + \li \l{Completing Code} + \li \l{Indenting Text or Code} + \li \l{Using Qt Quick Toolbars} + \li \l{Comparing Files} + \endlist + \li \l{Finding} + \list + \li \l{Finding and Replacing} + \li \l{Searching with the Locator} + \endlist + \li \l{Refactoring} + \li \l{Configuring the Editor} + \list + \li \l{Specifying Text Editor Settings} + \endlist + \endlist + \li \l{Simulating Application Logic} + \li \l{Debugging and Profiling} + \list + \li \l{Debugging Qt Quick Projects} + \li \l{Debugging a Qt Quick Example Application} + \li \l{Profiling QML Applications} + \endlist + \li \l{Using External Tools} + \endlist + \li \l{Help} + \list + \li \l{Examples and Tutorials} + \li \l{Using the Help Mode} + \li \l{Frequently Asked Questions} + \li \l{Concepts and Terms} + \endlist + \li \l{Acknowledgements} + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc new file mode 100644 index 0000000000..da98ee0690 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc @@ -0,0 +1,53 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage creator-using-qt-quick-designer.html + \group gstutorials + \nextpage studio-projects-managing.html + + \title Tutorials + + \image loginui4.gif "Log In UI" + + You can follow a set of hands-on tutorials that build on each other to + illustrate how to use the features of \QDS. In addition, the tutorials + provide additional information about the features of QML and Qt Quick + that are relevant to the task at hand. Even if you plan to export your + designs from a design tool, it is useful to first create a small UI from + scratch to learn the basic concepts of \QDS. In particular, Part 1 + describes the terms and concepts that you will run into when exporting + designs with \QB. + + Before you start, take a look at the following topics to familiarize + yourself with the parts of \QDS in general, and the Design mode in + particular: \l{User Interface} and \l{Editing QML Files in Design Mode}. + + In addition to these entry-level tutorials, \QDS comes with examples + and video tutorials that you can open from the \uicontrol Examples and + \uicontrol Tutorials tabs in the \uicontrol Welcome mode. For more + information, see \l {Examples and Tutorials}. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc new file mode 100644 index 0000000000..e373dc80a8 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc @@ -0,0 +1,104 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! +//! [qml visual effects] + + \section1 Applying Visual Effects + + \QDS provides a set of Qt Quick Studio effects that inherit the types in the + \l {Qt Graphical Effects} module. To apply a visual effect to a component, + you must place the component inside the effect. First drag-and-drop an + effect from \uicontrol Library > \uicontrol Effects to the the canvas or + the \uicontrol Navigator, and then drag-and-drop the component to the + effect. For some effects, you need two source components. + + The following table summarizes the available effects and contains links to + the documentation of the inherited QML type. + + \table + \header + \li Qt Quick Studio Effect + \li Description + \row + \li \l [QML] {Blend} + \li Merges two source components by using a blend mode. + + The default mode is \c subtract, where the pixel value from the + component that is going to be blended over the source component + is subtracted from the source and written. + + For a list of possible values and examples of their use, see + \l{Blend::mode}{Blend.mode}. + \row + \li \l {FastBlur}{Blur} + \li Applies a fast blur effect to one or more source components. + \row + \li \l {BrightnessContrast}{Brightness Contrast} + \li Adjusts brightness and contrast. + \row + \li \l {ColorOverlay}{Color Overlay} + \li Alters the colors of the source component by applying an overlay + color. + \row + \li \l Colorize + \li Sets the color in the HSL color space. + \row + \li \l {DirectionalBlur}{Directional Blur} + \li Applies blur effect to the specified direction. + \row + \li \l {DropShadow}{Drop Shadow} + \li Generates a soft shadow behind the source component. + \row + \li \l [QML] {Glow} + \li Generates a halo-like glow around the source component. + \row + \li \l {HueSaturation}{Hue Saturation} + \li Alters the source component colors in the HSL color space. + \row + \li \l {OpacityMask}{Mask} + \li Masks the source component with another component. + \row + \li \l {MaskedBlur}{Masked Blur} + \li Applies a blur effect with a varying intesity. + The \l GradientStop type is used to specify the color used at a + given position in a gradient, as represented by a gradient stop. + The default positions for the stops are 0.20, 0.50, 0.80, and 1.00. + The default color is black. + \row + \li \l {RadialBlur}{Radial Blur} + \li Applies directional blur in a circular direction around the + component's center point. + \row + \li \l {Desaturate}{Saturation} + \li Reduces the saturation of the colors. + \row + \li \l {ZoomBlur}{Zoom Blur} + \li Applies directional blur effect towards source component's center + point. + \endtable + +//! [qml visual effects] +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc new file mode 100644 index 0000000000..f69cd066c6 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -0,0 +1,119 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage{index.html}{Qt Design Studio} + \page index.html + \nextpage studio-getting-started.html + + \title Qt Design Studio Manual + + \QDS is a UI design and development environment for creating animated UIs + and previewing them on the desktop or on Android and embedded Linux devices. + It provides you with tools for accomplishing your tasks throughout the whole + process, from design to production. + + \table + \row + \li \inlineimage studio-gs.png + \li \inlineimage studio-projects.png + \li \inlineimage studio-components.png + \li \inlineimage studio-animation.png + \row + \li \l{Getting Started} + \list + \li \l{Exporting Artwork from Design Tools} + \li \l{User Interface} + \li \l{Editing QML Files in Design Mode} + \li \l{Tutorials} + \endlist + \li \b {\l{Managing Projects}} + \list + \li \l{Creating Projects} + \li \l{Using Git} + \li \l{Importing Designs} + \li \l{Converting UI Projects to Applications} + \endlist + \li \b {\l{Creating UIs}} + \list + \li \l{Creating Components} + \li \l{Managing Item Hierarchy} + \li \l{Specifying Item Properties} + \li \l{Using Custom Fonts} + \endlist + \li \b {\l{Adding Dynamics}} + \list + \li \l{Creating Animations} + \li \l{Adding Connections} + \li \l{Adding States} + \li \l{Editing PathView Properties} + \endlist + \row + \li \inlineimage studio-3d-scenes.png + \li \inlineimage studio-preview.png + \li \inlineimage studio-settings.png + \li \inlineimage studio-help.png + \row + \li \b {\l{Editing 3D Scenes}} + \list + \li \l{Editing 3D Assets in Design Mode} + \li \l{Working in the 3D Editor} + \li \l{Adding 3D Views} + \li \l{Using 3D Components} + \endlist + \li \b {\l{Previewing}} + \list + \li \l{Previewing on Desktop} + \li \l{Previewing on Devices} + \li \l{Previewing in Browsers} + \endlist + \li \b {\l{Advanced Topics}} + \list + \li \l{Supported Platforms} + \li \l{Keyboard Shortcuts} + \li \l{Coding} + \li \l{Simulating Application Logic} + \li \l{Debugging and Profiling} + \endlist + \li \b {\l{Help}} + \list + \li \l{Examples and Tutorials} + \li \l{Using the Help Mode} + \li \l{Frequently Asked Questions} + \li \l{Concepts and Terms} + \endlist + \row + \li {4,1} \l{All Topics} + \row + \li {4,1} \note To report bugs and suggestions to the Qt Bug + Tracker, select \uicontrol {Help > Report Bug}. + To copy and paste detailed information about your system to the + bug report, select \uicontrol Help > + \uicontrol {System Information}. + + For credits and a list of third-party libraries, see + \l {Acknowledgements}. + \endtable +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-maya.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-maya.qdoc new file mode 100644 index 0000000000..53d3009a78 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-maya.qdoc @@ -0,0 +1,57 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page exporting-from-maya.html + \previouspage qtbridge-sketch-using.html + \nextpage creator-quick-tour.html + + \title Exporting from Maya + + You can export graphics from Maya in the FBX format. The necessary plugin is + usually enabled by default, but you can check that in the plugin manager. + + To export graphics from Maya: + + \list 1 + \li Select \uicontrol Window > \uicontrol Settings/Preferences > + \uicontrol {Plug-in Manager} and check that the fbxmaya.mll + plugin is enabled. + \li Select \uicontrol File > \uicontrol {Export All}. + \image maya-export-options.png "Export options in Maya" + \li In the \uicontrol {File name} field, enter a name for the export + file. + \li In the \uicontrol {Files of type} field, select + \uicontrol {FBX export}. + \li In \uicontrol Presets > \uicontrol {Current Preset}, select + \uicontrol {Autodesk Media & Entertainment}. + \li In \uicontrol Geometry > \uicontrol {Convert NURBS surface to}, + select \uicontrol {Interactive Display Mesh}. + \li To export files, select \uicontrol {Export All}. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc new file mode 100644 index 0000000000..0c33b4bc20 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc @@ -0,0 +1,113 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-camera.html + \previouspage studio-3d-lights.html + \nextpage studio-3d-scene-environment.html + + \title Using Scene Camera + + A camera is always necessary to view the content of a 3D scene. A camera + defines how to project the content of a 3D scene into a 2D coordinate space, + which can then be used on a 2D surface. When a camera is present in the + scene, it can be used to direct what is displayed in a 3D view. + + You can use the following 3D QML types to determine camera projection: + + \list + \li \l{PerspectiveCamera}{Camera Perspective} - is the standard camera + type, which uses field of view and near and far clip planes to + specify the projection. + \li \l{OrthographicCamera}{Camera Orthographic} - renders all contents + with no perspective. It is ideal for rendering 2D elements, because + your images are guaranteed to be the right size on the screen, and + you can use the z position of components to bring them closer to or + take them farther from the camera (\e z-sorting) with no + foreshortening artifacts. + \li \l{FrustumCamera}{Camera Frustum} - enables finer grain control of + how the frustum is defined, by setting the number of degrees between + the top and bottom or left and right edges of the camera frustum. + This is useful when creating asymmetrical frustums. + \li \l{CustomCamera}{Camera Custom} - provides full control over how + the projection matrix is created. + \endlist + + You can position the camera in the scene and set the direction it is facing. + The default direction of the camera is such that the forward vector is + looking up the +z axis, and the up direction vector is up the +y axis. You + can apply transforms to the camera and its parent types to define + exactly where your camera is located and in which direction it is facing. + + The second part of determining the projection of the camera is defining the + field of view (\e frustum) of the camera that defines which parts of the + scene are visible, as well as how they are visible. + + You can edit the camera properties in the \uicontrol Properties view. + + \section1 Setting Camera Field of View + + The camera frustum can be obtained by taking a frustum (that is, a + truncation with parallel planes) of the cone of vision that a camera or eye + would have to the rectangular viewports typically used in computer graphics. + The shape of the cone depends on the camera lens that is being simulated. + Typically, it is a rectangular pyramid with the top cut off. + + The planes that cut the frustum perpendicular to the viewing direction are + called the \e {near plane} and the \e {far plane}. Components in front of + the near plane or behind the far plane are not drawn. + + The \uicontrol {Clip near} and \uicontrol {Clip far} properties determine + the position of the near plane and the far plane. We recommend that + you place the near and far planes as close to each other as possible to + optimize depth accuracy. Components are clipped at pixel level instead of + element level. This means that a model crossing a plane may be only + partially rendered. + + The \uicontrol {Field of view} (FOV) property specifies the number of + degrees between the edges of the camera frustum. The larger the value, + the stronger the sense of 3D in your scene. By default, the + \uicontrol {FOV orientation} property is set to use the vertical FOV. + This value is the number of degrees between the top and bottom edges + of the camera frustum. + + The horizontal FOV determines the number of degrees between the left and + right edges of the camera frustum. It is automatically calculated based on + the aspect ratio of the scene when the FOV orientation is set to vertical. + You can set the orientation to horizontal to translate FOV values from + graphics tools such as Maya and Blender, which use horizontal FOV by + default. + + The default values are intended to cause anything within the view + of the camera to be rendered. Aside from special clipping effects, you + may need to adjust these values to more closely contain your content for + better results with ambient occlusion or with effects that use the depth + buffer of the camera, such as the \e {depth of field} effect. + + \note Orthographic cameras don't have the FOV property. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc new file mode 100644 index 0000000000..38a71a1b53 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-components.html + \previouspage studio-3d-view.html + \nextpage studio-3d-node.html + + \title Using 3D Components + + To add 3D components to the scene, drag and drop a them from + \uicontrol Library > \uicontrol {QML Types} > \uicontrol {Qt Quick 3D} to + the scene or to a 3D view in the \uicontrol Navigator. + + To edit 3D components, select the component in the 3D editor or in the + \uicontrol Navigator and set its properties in the \uicontrol Properties + view. + + \list + \li \l {Setting Node Properties} + + You can set the opacity, visibility, and transform properties + of all 3D components. + \li \l {Adding Models} + + You can use the model component to load static mesh data from + storage or one of the built-in primitive types: cube, cone, + cylinder, rectangle, or sphere. You can attach materials to + meshes and sub-meshes. + \li \l {Using Materials and Shaders} + + You can use materials and shaders to define how object surfaces + are rendered in a scene and during live preview. + \li \l {Attaching Textures to Materials} + + You can use a Texture component to specify an image and how it is + mapped to meshes in a 3D scene. Texture components can use image + data either from a file or a Qt Quick QML type. + \li \l{Using Lights} + + You can use several light types as the source of lighting in a + scene and set their properties. + \li \l {Using Scene Camera} + + To project a 3D scene to a 2D viewport, it is necessary to view + the scene from a camera. You can select the camera type and set + its properties. + \li \l {Setting Scene Environment} + + You can use the SceneEnvironment type to specify how the scene is + rendered globally. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc new file mode 100644 index 0000000000..e214c544f2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc @@ -0,0 +1,88 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-3d.html + \page studio-3d-design-mode.html + \nextpage studio-3d-editor.html + + \title Editing 3D Assets in Design Mode + + \QDS opens QML files that contain 3D scenes in the Design mode and the + scenes in the 3D editor. You can add imported 3D assets as resources + to projects and edit them to create scenes and states, as well as the + transitions between them. + + \image studio-editing-3d-scenes.png "3D assets in Design mode" + + To edit 3D scenes in the Design mode: + + \list + \li \uicontrol {3D Editor} (1) is the working area where you create the + scene, position the model, light and camera, as well as move and + scale items. + \li \uicontrol {3D View} (2) is where you see the scene projected by the + camera. + \li The sidebars contain views where you can select QML types to use in + the scene, specify properties for them, and view them in a tree + structure, as well as to create connections and browse projects and + files. You can select the content of the sidebars in the sidebar + menu: + \list + \li \uicontrol {Library} (3) displays the building blocks that you + can use to create scenes: predefined Qt Quick 3D Components, + Qt Quick Controls, your own 3D assets that you import to the + project, and other resources. For more information, see + \l {Adding 3D Views}. + \li \uicontrol {Navigator} (4) displays the items in the current QML + file as a tree structure. For more information, see + \l {Managing Item Hierarchy}. + \li \uicontrol {Properties} (5) organizes the properties of the + selected item. You can change the properties also in the + \uicontrol {Text Editor}. For more information, see + \l {Specifying Item Properties}. + \li \uicontrol Connections enables you to create connections + between objects, signals, and object properties. For more + information, see \l{Adding Connections}. + \li \uicontrol {File System} shows all files in the currently + selected directory. For more information, see + \l{Viewing the File System}. + \li \uicontrol {Open Documents} shows currently open files. + \li \uicontrol {Projects} shows a list of projects open in the + current session. For more information, see + \l{Viewing Project Files}. + \endlist + \li \uicontrol {States} displays the different states of the + item. QML states typically describe user interface configurations, + such as the UI controls, their properties and behavior and the + available actions. For more information, see \l{Adding States}. + \li \uicontrol Timeline (6) provides a timeline and keyframe based + editor that enables you to animate the properties of components. + \endlist + + To close the 3D editor, select \uicontrol 2D in the list on the toolbar (7). + To reopen it, select \uicontrol {2D/3D}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc new file mode 100644 index 0000000000..034a4817ab --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc @@ -0,0 +1,176 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-3d-design-mode.html + \page studio-3d-editor.html + \nextpage studio-3d-view.html + + \title Working in the 3D Editor + + To project a 3D scene to a 2D viewport, it is necessary to view the scene + from a \l{Using Scene Camera}{camera}. Select the \uicontrol {Toggle + Perspective/Orthographic Projection} button (1) on the 3D editor toolbar to + switch between a \e {perspective camera} and an \e {orthographic camera}. + A perspective camera uses field of view and near and far clip planes to + specify the projection, whereas an orthographic camera can be thought of + as a 2D camera. Both of them are free-form cameras that you can use to + orbit around the scene. + + When you import 3D scenes from files that you exported from 3D graphics + tools, you also import the camera, light, model, and materials. If your + scene did not contain them, you can add the corresponding Qt Quick 3D + types from the \uicontrol Library. + + You can use the manipulator mode toolbar buttons (2) to show the move, rotate, + or scale manipulator in the rendered scene when an item is selected and + to determine what happens when you drag the selected item. Select the + \uicontrol {Toggle Local/Global Orientation} button (3) to determine whether + the manipulators affect only the local transforms of the item or whether + they transform with respect to the global space. + + \image studio-3d-editor.png "3D Editor" + + For example, in local orientation mode, selecting an unrotated cube inside + a rotated group in the move mode shows rotated axes. Dragging on the red + arrow of the move manipulator affects only the x position of the item. + + In global mode, the manipulators always transform with respect to the global + space. In the example above, switching to global mode will show the red + arrow for the move manipulator aligned with the screen (assuming an + unrotated camera). Dragging on the red arrow may affect two or three of the + position values for the selected item in order to move it in global space. + + \section1 Controlling the Edit View Camera + + You can add 3D camera types to the scene to project the view you see in + the View3D type in the application. While editing scenes, you can use + a separate \e {edit view camera} (4) to project the scene to the 3D edit + view in the Design mode. + + You can navigate the scene by rotating, panning, and zooming the edit view + camera. + + To zoom, use the mouse wheel or press \key Alt and right-click anywhere in + the rendered view to zoom the view in or out as you drag up or down. + + To pan, press \key Alt and use the middle mouse button to click anywhere in + the rendered view to slide the view around. + + To orbit, press \key Alt and click anywhere in the rendered view to rotate + the view. + + To scale the edit view camera and to focus it on the selected items, select + \uicontrol {Fit Selected} button or press \key F. + + The world axis helper (5) shows the direction of the world axes in respect + to the edit view camera. To point the camera at the currently selected + component in the direction of an axis, click the axis. If no component + is selected, the camera is pointed at the world origin. This does not + affect the camera zoom level. + + For more information about using the cameras in the scene, the available + 3D camera types, and their properties, see \l{Using Scene Camera}. + + \section1 Selecting Items + + To move, rotate, or scale items in the scene, you need to select them first. + The selection mode buttons determine how items are selected when you click + them in the 3D editor. + + \list + \li In the \inlineimage item_selection_selected.png + (\uicontrol {Select Item}) mode, a single item is selected. + \li In the \inlineimage group_selection_selected.png + (\uicontrol {Select Group}) mode, the top level parent of the item + is selected. This enables you to move, rotate, or scale a group of + items. + \endlist + + To toggle the selection mode, press \key Q. + + \section1 Moving Items + + \image studio-3d-editor-move.png "3D editor in move mode" + + You can move items in relation to their coordinate system, along the x, y, + or z view axis or on the top, bottom, left, and right clip planes of the + render camera. + + To move items, select \inlineimage move_selected.png + or press \key W. + + To move items along an axis, click the axis and drag the item along the + axis. + + To move items on a plane, select the plane handle and drag the item on + the plane. + + To move an item freely in the editor, select the handle at the center of + the item. + + \section1 Rotating Items + + You can rotate items around the view axes of the camera. + + \image studio-3d-editor-rotate.png "3D editor in rotate mode" + + To rotate items, select \inlineimage rotate_selected.png + or press \key E. + + To rotate an item around an axis, select the axis and drag in the direction + you want to rotate the item in. + + To freely rotate the item, select the gray circle. + + \section1 Scaling Items + + \image studio-3d-editor-scale.png "3D editor in scale mode" + + To scale items, select \inlineimage scale_selected.png + or press \key R. + + You can use the scale handles to adjust the local x, y, or z scale of an + item. You can ajust the scale across one, two, or three axes, depending + on the handle. + + To adjust the scale across one axis, select the scale handle attached to + the axis. To uniformly scale an item across all axes, select the handle + at the center of the item. + + To adjust the scale across a plane, select the plane handle and drag the + item on the plane. + + \section1 Using Edit View Light + + You use 3D light types to light the models in the scene. While editing + scenes, you can use a separate \e {edit view light} to illuminate the + portions of the scene that the scene lights do not hit. To switch the edit + view light on and off, select the \uicontrol {Toggle Edit Light} button (6). + + For more information about the available scene light types and their + properties, see \l{Using Lights}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc new file mode 100644 index 0000000000..a247785f03 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc @@ -0,0 +1,165 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-lights.html + \previouspage studio-3d-texture.html + \nextpage studio-3d-camera.html + + \title Using Lights + + Light components are the primary source of lighting in a \QDS scene. + As a secondary light source, you can use \l{Using Image-based Lighting} + {image-based lighting}. + + By default, all imported scenes are created with one directional light. + You can use the following \l{Qt Quick 3D} components to add lights: + + \list + \li \l{DirectionalLight}{Light Directional} + \li \l{PointLight}{Light Point} + \li \l{AreaLight}{Light Area} + \endlist + + \note Each additional light negatively effects the rendering performance + of your scene. Keep scenes as simple as possible and use lights sparingly. + Use a \l{SceneEnvironment}{Scene Environment} component to apply image-based + lighting that can produce soft and subtle lighting. + + You can edit light properties in the \uicontrol Properties view. The + \uicontrol Scope property specifies which node, with it's children, + is illuminated by a light. + + Set the \uicontrol {Color} property to specify the color applied to models + illuminated by a light. Set the \uicontrol {Ambient color} property to + specify the ambient color applied to materials before being illuminated by + the light. + + You can animate light properties in the \uicontrol Timeline view. + + \section1 Directional Light + + A directional light emits light in one direction from a unidentifiable + source located infinitely far away. This is similar to sunlight. + + \image studio-3d-directional-light.png "Models lit by a dirctional light" + + If the \uicontrol {Casts shadow} property is enabled, shadows are positioned + parallel to the light direction. A directional light has infinite range and + does not diminish. + + Moving a directional light does not have any effect. The light will always + be emitted in the direction of the light's z axis. Rotating the light along + its x or y axis will change the direction in which the light is emitted. + + Scaling a directional light will only have an effect in the following cases: + + \list + \li If the z scale is set to a negative number, the light will be + emitted in the opposite direction. + \li If the scale of any axis is set to 0, the light will be emitted + along the world's z axis. Rotating the light has no effect. + \endlist + + \section1 Point Light + + A point light can be described as a sphere, emitting light with equal + strength in all directions from the center of the light. This is similar + to the way a light bulb emits light. + + \image studio-3d-point-light.png "Models lit by a point light" + + Lighting is applied outwards from the center of a point light, becoming + increasingly dim away from the center. Moving a point light changes the + position from where the light is emitted. Rotating or scaling a point + light does not have any effect. + + To specify an overall multiplier for a point light's effects, set the + \uicontrol Brightness property. + + To control the fade-off and range of a point light, set the + \uicontrol {Constant fade}, \uicontrol {Linear fade}, and + \uicontrol {Quadratic fade} properties. Constant fade is the constant + factor of the \e attenuation term of the light. Attenuation refers to + the reduction in the intensity of light as it travels through a medium + due to absorption or scattering of photons. + + Turn up the linear fade value to increase the rate at which the lighting + effect dims the light in proportion to the distance to the light. The value + 0.0 means that the light doesn't have linear fade. + + Turn up the quadratic fade to increase the rate at which the lighting effect + dims on surfaces that are far away from the light. The value 1.0 means that + the point light fade exactly follows the inverse square law. For example, + when the distance to an object doubles, the light intensity decreases to one + fourth. + + Aside from fade, a point light has the same properties as a directional + light. + + \section1 Area Light + + An area light is similar to the directional light. However, instead of + emitting an equally bright light across the whole scene, the area light + emits directional light from a rectangle shaped object. You can set the + \uicontrol Width and \uicontrol Height properties to determine the size + of the area light. + + Aside from the size, an area light has the same properties as a directional + light. + + The image below shows an example on how to light an object with different + colors using two different area lights. + + \image area-light.png + + You can rotate, scale, and move area lights. + + \section1 Shadows + + To simulate shadows using this light, enable the \uicontrol {Cast shadows} + check box. Cast shadows work best with area or point lights. + + To specify the darkness of the shadows, set the \uicontrol {Shadow factor} + property. The value 0 means no shadows are cast. + + To specify the amount of blur applied to the shadows, set the + \uicontrol {Shadow filter} property. + + Tweak the \uicontrol {Shadow bias} property value by small amounts + if you see objects casting shadows on themselves. + + To specify the quality of the shadow map created for shadow rendering, set + the \uicontrol {Shadow map quality} property. Lower quality uses less + resources, but produces lower quality shadows, while higher quality uses + more resources to produce better quality shadows. + + To specify the maximum distance for the shadow map, set the + \uicontrol {Shadow map far} property value. Using smaller values + may improve the precision and effects of the map. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc new file mode 100644 index 0000000000..ecbef398dc --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc @@ -0,0 +1,229 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Desing Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-materials.html + \previouspage studio-3d-model.html + \nextpage studio-3d-texture.html + + \title Using Materials and Shaders + + \image materials.png + + Materials and shaders define how object surfaces are rendered in \QDS and + live preview. As you change the properties of materials, new shaders are + generated accordingly, and the property values are bound. The complexity of + a shader depends on a combination of the properties that are set on it, and + the context of the scene itself. + + The materials that you used in your imported scenes are imported to \QDS + as \l{Qt Quick 3D} components. When you add a View3D component, it contains + a DefaultMaterial component. You can use the following predefined Qt Quick + 3D components to add materials to models: + + \list + \li Default material + \li Principled material + \li Texture + \endlist + + Before a model can be rendered in a scene, it must have at least one + material to define how the mesh is shaded. The DefaultMaterial component + is the easiest way to define such a material. The PrincipledMaterial + component specifies the minimum amount of properties. + + You can use the \l Texture component to apply textures to materials. It + defines an image and how the image is mapped to meshes in a 3D scene. To + use image data from a file, set the \uicontrol Source property of the + Texture component in the \uicontrol Properties view. + + To have the material use vertex colors from the mesh, select the + \uicontrol {Enable vertex colors} check box. These are multiplied + by any other colors specified for the material. + + You can modify material properties in the \uicontrol Properties view, as + instructed in the following sections. The availability of the properties + depends on the material type. + + You can animate material properties in the \uicontrol Timeline view, as + instructed in \l {Creating Animations}. + + \section1 Blending Colors + + To determine how the colors of a model blend with the colors of the models + behind it, set the \uicontrol {Blend mode} property. To make opaque objects + occlude the objects behind them, select \uicontrol {SourceOver}. + + For a lighter result, select \uicontrol Screen to blend colors using an + inverted multiply or \uicontrol ColorDodge to blend them by inverted + division. Color dodge procudes an even lighter result than screen. + + For a darker result, select \uicontrol Multiply to blend colors using a + multiply or \uicontrol ColorBurn to blend them by inverted division, where + the result also is inverted. Color burn produces an even darker result than + multiply. + + The screen and multiply modes are order-independent, so select them to + avoid \e popping, which can happen when using semi-opaque objects and + sorting the back and front faces or models. + + For a result with higher contrast, select \uicontrol Overlay, which is a mix + of the multiply and screen modes. + + \section1 Lighting Materials + + To set the lighting method for generating a material, use the + \uicontrol Lighting property. Select \uicontrol {Fragment lighting} to + calculate diffuse and specular lighting for each rendered pixel. Some + effects, such as Fresnel or a bump map, require fragment lighting. + + To skip lighting calculation, select \uicontrol {No lighting}. This is very + fast and quite effective when using image maps that do not need to be shaded + by lighting. + + To set the base color for the material, use the \uicontrol {Diffuse Color} + property. You can either use the color picker or specify a RBG value. Set + the diffuse color to black to create purely-specular materials, such as + metals or mirrors. To apply a texture to a material, set it as the value of + the \uicontrol {Diffuse map} property. Using a texture with transparency + also applies the alpha channel as an \uicontrol {Opacity map}. You can set + the opacity of the material independently of the model as the value of the + \uicontrol Opacity property. + + \section1 Self-Illuminating Materials + + To set the color and amount of self-illumination for a material, use the + \uicontrol {Emissive color} and \uicontrol {Emissive factor} properties. In + a scene with black ambient lighting, a material with an emissive factor of 0 + is black where the light does not shine on it. Setting the emissive factor + to 1 shows the material in its diffuse color instead. + + To use a Texture for specifying the emissive factor for different parts of + the material, set the \uicontrol {Emissive map} property. Using a grayscale + image does not affect the color of the result, while using a color image + produces glowing regions with the color affected by the emissive map. + + \section1 Using Highlights and Reflections + + You can control the highlights and reflections on a material by setting the + properties in the \uicontrol Specular group. You can use the color picker + or set a RGB value to specify the color used to adjust specular reflections. + Use white for no effect + + To use a color texture to modulate the amount and the color of specularity + across the surface of a material, set the \uicontrol {Specular map} + property. Set the \uicontrol {Specular amount} property to specify the + strength of specularity. This property does not affect the specular + reflection map, but it does affect the amount of reflections from a scene's + light probe. + + \note Unless your mesh is high-resolution, you may need to use fragment + lighting to get good specular highlights from scene lights. + + To determine how to calculate specular highlights for lights in the scene, + set the \uicontrol {Specular model}. In addition to the default mode, you + can use the GGX or Ward lighting model. + + To use a Texture for specular highlighting on a material, set the + \uicontrol {Reflection map} property. When the texture is applied using + environmental mapping (not UV mapping), the map appears to be reflecting + from the environment as you rotate the model. Specular reflection maps are + an easy way to add a high-quality look at a relatively low cost. + + To specify an image to use as the specular reflection map, set the + \uicontrol {Light probe} property + + Crisp images cause your material to look very glossy. The more you + blur your image, the softer your material appears. + + To decrease head-on reflections (looking directly at the surface) + while maintaining reflections seen at grazing angles, set the + \uicontrol {Fresnel power} property. To select the angles to control, + set the \uicontrol {Index of refraction} property. + + To control the size of the specular highlights generated from lights and the + clarity of reflections in general, set the \uicontrol {Specular roughness} + property. Larger values increase the roughness, while softening specular + highlights and blurring reflections. To control the specular roughness of + the material using a Texture, set the \uicontrol {Roughness map property}. + + \section1 Simulating Geometry Displacement + + Specify the properties in the \uicontrol {Bump/Normal} group to simulate + fine geometry displacement across the surface of the material. Set the + \uicontrol {Bump map} property to use a grayscale texture for the + simulation. Brighter pixels indicate raised regions. + + To use a RGB image for simulation, set the \uicontrol {Normal map} property. + The RGB channels indicate XYZ normal deviations. + + The amount of displacement is controlled by the \uicontrol {Bump amount} + property. + + Bump and normal maps do not affect the silhouette of a model. To affect the + silhouette, set the \uicontrol {Displacement map} property. It specifies a + grayscale image used to offset the vertices of geometry across the surface + of the material. The \uicontrol {Displacement amount} property specifies the + offset amount. + + \section1 Specifying Material Translucency + + Set the properties in the \uicontrol Translucency group to control how much + light can pass through the material from behind. To use a grayscale texture, + specify it as the value of the \uicontrol {Translucency map} property. + + To specify the amount of light wrap for the translucency map, set the + \uicontrol {Diffuse light wrap} property. A value of 0 does not wrap the + light at all, while a value of 1 wraps the light all around the object. + + To specify the amount of falloff for the translucency based on + the angle of the normals of the object to the light source, set + the \uicontrol {Translucency falloff} property. + + \section1 Culling Faces + + Set the \uicontrol {Culling mode} property to determine whether the front + and back faces of a model are rendered. Culling modes check whether the + points in the polygon appear in clockwise or counter-clockwise order when + projected onto the screen. If front-facing polygons have a clockwise + winding, but the polygon projected on the screen has a counter-clockwise + winding, the projected polygon is rotated to face away from the camera and + is not rendered. Culling makes rendering objects quicker and more efficient + by reducing the number of polygons to draw. + + \section1 Applying Materials to Models + + To apply materials to models: + + \list 1 + \li Drag and drop a material component from the \uicontrol Library to a + Model component in the \uicontrol Navigator or 3D editor. + \li Edit the properties of the material in the \uicontrol Properties + view. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc new file mode 100644 index 0000000000..4fa05b6463 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc @@ -0,0 +1,77 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-model.html + \previouspage studio-3d-node.html + \nextpage studio-3d-materials.html + + \title Adding Models + + A Model component loads mesh data from a file. You can modify how the + component is shaded by adding materials to the model. + + A model can load static meshes from storage or one of the built-in primitive + types: cube, cone, cylinder, rectangle, or sphere. You can select the model + type in the \uicontrol Source field in the \uicontrol Properties field. + Select the \inlineimage plus.png + button to add custom model types to the list. + + To enable picking the model against the scene, select the + \uicontrol Pickable check box. Picking transforms the screen + space x and y coordinates to a ray cast towards the specified + position in scene space. + + To use the geometry of this model when rendering to shadow maps, select the + \uicontrol {Casts shadows} check box. To allow casting shadows on the model, + select the \uicontrol {Receives shadows} check box. + + \section1 Tessellation + + To dynamically generate additional geometry for the model, select the + tiling mode in the \uicontrol {Tessellation mode} filed. Tessellation + is useful when using a displacement map with geometry, or to generate a + smoother silhouette when zooming in. You can select either a Phong or + an NPatch tessellation generator. + + Specify an edge multiplier to the tessellation generator in the + \uicontrol {Edge tessellation} field and an inner multiplier in + the \uicontrol {Inner tessellation} field. + + To display a wireframe that highlights the additional geometry created by + the tessellation generator, select the \uicontrol {Enable wireframe mode} + check box. + + \section1 Adding Materials to Sub-Meshes + + A model can consist of several sub-meshes, each of which can have its own + material. Select the material from the list in the \uicontrol {Materials} + field. Select the \inlineimage plus.png + button to add materials to the list. For more information about materials, + see \l {Using Materials and Shaders}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc new file mode 100644 index 0000000000..a13bb46725 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc @@ -0,0 +1,82 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-3d-components.html + \page studio-3d-node.html + \nextpage studio-3d-model.html + + \title Setting Node Properties + + You can set the opacity, visibility, and transform properties of a 3D + component in the \uicontrol Properties view. + + \section1 Setting Component Opacity and Visibility + + All components have an \uicontrol Opacity value applied to them. The opacity + of 100 makes a component fully opaque, while the opacity of 0 prevents a + component from rendering at all. + + Just as modifying the position or rotation of a parent component affects + all child components, opacity is multiplicatively cumulative through + the transform hierarchy. A cube that is 50\% opaque inside a group that + is 80\% opaque renders with an equivalent apperance of 40\% opacity + (\c{0.8 * 0.5 = 0.4}). Setting the opacity of a group to 0 prevents + any descendants within the group from rendering. + + The \uicontrol Visibility property provides an alternative way to hide and + show components. It is useful when you want to show a component in a + particular state, but hide it in another state, for example. + + \section1 Setting Transform Properties + + The value of the \uicontrol Translation property contains the position + translation of the component in the local coordinate space established by + the parent component. The \uicontrol Orientation property specifies whether + the left-handed or right-handed coordinate system is used. + + In the y-up left-handed coordinate system, increasing the value of x + moves the component to the right, as seen from the default camera location, + whereas increasing the value of y moves the component up. Increasing the + value of z moves the component away from the camera. + + The value of the \uicontrol Rotation parameter sets the local rotation of + the component in the space established by the parent component. The + \uicontrol {Rotation order} property specifies whether the left-handed or + right-handed (the values with \e r) rotation about the x, y, and z axes + is applied, and the order in which the rotation is applied on each axis. + + The value of the \uicontrol Scale property sets the local scale of the + component in the space established by the parent component. An odd number + of negative scale values causes the component to render \e {inside-out}, + which cannot be seen due to backface-culling. + + The value of the \uicontrol Pivot property sets the local pivot offset for + the component. You can think of the pivot as offsetting the geometry for the + component away from the origin, allowing a component to rotate and scale + around a point other than its local origin. Pivot values are applied before + scaling and rotation values. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc new file mode 100644 index 0000000000..0951110886 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc @@ -0,0 +1,156 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-scene-environment.html + \previouspage studio-3d-camera.html + \nextpage creator-live-preview.html + + \title Setting Scene Environment + + You can use the SceneEnvironment type to specify how the scene is rendered + globally. You can specify settings for antialiasing, scene background, + ambient occlusion, and image based lighting in the \uicontrol Properties + view. + + \section1 Antialiasing + + You can apply temporal, progressive, or multisample antialiasing to + scenes. Temporal and progressive antialiasing jiggle the camera very + slightly between frames and blend the result of each new frame with + the previous frames, while multisample antialiasing super-samples + the edges of geometry. + + Temporal antialiasing finds real details that would otherwise be lost + and has a low impact on performance, but fast-moving objects cause + one-frame ghosting. To enable temporal antialiasing, select the + \uicontrol {Temporal AA} check box. + + Progressive antialiasing jiggles the camera after all the content of the + scene has stopped moving. The more frames you accumulate, the better the + result looks. This provides detailed static images with no performance cost, + but does not take effect if any visual changes are occurring. + + To apply progressive antialiasing, set the number of frames to use for the + final image in the \uicontrol {Progressive AA} field. Note that at the + value of 8x, progressive antialiasing takes one eighth of a second to finish + rendering at 60 FTPS, which may be noticeable. + + Multisample antialiasing results in smoother silhouettes, but has no effect + on the materials inside geometry. It provides good results on geometry + silhouettes, where aliasing is often most noticeable and works smoothly with + fast animation. However, it can be expensive to use and does not help with + texture or reflection issues. + + To apply multisample antialiasing, set the number of samples to use per + pixel in the \uicontrol {Multisample AA} field. + + \section1 Clearing the Scene Background + + To clear the background of the scene to be transparent, select + \uicontrol Transparent in the \uicontrol {Background mode} field. + To clear the background using a color, select \uicontrol Color, + and select the color in the \uicontrol {Clear Color} field. + + To leave the scene uncleared, select \uicontrol {Unspecified}. + + \section1 Blending Scene Colors + + To determine how colors are blended, select a blend mode in the + \uicontrol {Blend mode} field. For more information on the options, + see \uicontrol {Blending Colors}. + + \section1 Performing Depth Tests + + You can perform depth tests to optimize the scene environment. To skip depth + tests, deselect the \uicontrol {Enable depth test} checkbox. Note that + skipping the tests can cause rendering errors. + + To have the renderer write to the depth buffer as part of the color pass, + deselect the \uicontrol {Enable depth prepass} checkbox. Disable depth + prepass on GPU's that use a tiled rendering architecture. + + \section1 Ambient Occlusion + + Ambient occlusion is a form of approximated global illumination that causes + non-directional self-shadowing where objects are close together. + + You can set the strength of the shadows in the \uicontrol {AO strength} + field. A value of 100 causes full darkness shadows, while lower values + cause the shadowing to appear lighter. A value of 0 disables ambient + occlusion entirely, improving performance at a cost to the visual realism + of 3D objects rendered in the scene. All values other than 0 have the same + impact on performance. + + To specify roughly how far ambient occlusion shadows spread away from + objects, select the distance in \uicontrol {AO distance} field. Greater + distances cause increasing impact to performance. + + To prevent components from exhibiting ambient occlusion at close distances, + set the cutoff distance in the \uicontrol {AO bias} field. The higher the + value, the greater the distance that is required between objects before + ambient occlusion occurs. + + \note If you see ambient occlusion shadowing on objects where there should + be no shadowing, increase the value slightly to clip away close results. + + To specify how smooth the edges of the ambient occlusion shading are, set + the softness in the \uicontrol {AO softness} field. To improve smoothness at + the risk of sometimes producing obvious patterned artifacts, you can scatter + the edges of the ambient occlusion shadow bands by selecting the + \uicontrol {AO dither} check box. + + To specify the ambient occlusion quality, at the expense of performance, + select the number of shades of gray to use in the + \uicontrol {AO sample rate} field. + + \note Large distances between the clipping planes of your camera may cause + problems with ambient occlusion. If you are seeing odd banding in ambient + occlusion, try adjusting the value in the \uicontrol {Clip far} field in + the \l{Using Scene Camera}{scene camera} properties. + + \section1 Using Image-based Lighting + + In the material properties, you can specify an image (preferably + a high-dynamic range image) to use to light the scene, either + instead of or in addition to \l{Using Lights}{scene lights}. In the + \uicontrol {Probe brightness} field, you can modify the amount of + light emitted by the light probe. + + To take shortcuts to approximate the light contributes of the light + probe at the expense of quality, select the \uicontrol {Fast IBL} + check box. + + To add darkness (black) to the bottom half of the environment, force + the lighting to come predominantly from the top of the image, and + remove specific reflections from the lower half, increase the value + of the \uicontrol {Probe horizon} field. + + To specify the image source field of view when using a camera source as + the light probe, set the angle in the \uicontrol {Probe FOV} field. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc new file mode 100644 index 0000000000..6e3ba22275 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc @@ -0,0 +1,111 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-texture.html + \previouspage studio-3d-materials.html + \nextpage studio-3d-lights.html + + \title Attaching Textures to Materials + + You can use the Texture 3D QML type to attach textures to materials. + You specify an image and how it is mapped to meshes in a 3D scene. + + \section1 Selecting the Mapping Method + + To specify the method of mapping to use when sampling a texture, select + \uicontrol UV, \uicontrol Environment, or \uicontrol LightProbe in the + \uicontrol {Texture mapping} field. + + UV mapping is the process of projecting 2D images to the surface of a + 3D model for texture mapping. The letters \e U and \e V denote the axes + of the 2D texture, because x, y, and z are already used to denote the + axes of the 3D object in the model space. You can paint the polygons that + make up a 3D object with color and other surface attributes from a UV + texture map. Pixels in the image are assigned to surface mappings on the + polygon. Usually this is done by programmatically copying a triangular + piece of the image map and pasting it onto a triangle on the object. + + UV mapping is used by default for diffuse and opacity maps. It sticks the + image to the mesh, so that a particular same portion of the image always + appears on a particular vertex, unless you animate the UV properties. + + Environment mapping is used by default for specular reflection. It + \e projects the image onto the material as though it is being reflected + from the material. Using Environmental mapping for diffuse maps provides a + mirror effect. + + Light probe mapping is used by default for HDRI sphere maps of + light probes. For more information about light probes, see + \l {Using Highlights and Reflections}. + + To use image data from a file, specify the path to the file in the + \uicontrol Source field. To use a 2D Qt Quick QML type as the source, + specify the type in the \uicontrol {Source item} field. The type is + rendered as an offscreen layer. If you specify the source item, any + image you might specify as a source is ignored. + + \note Currently, there is no way to forward input events to the Item + used as a texture source. + + \section1 UV Scaling + + The \uicontrol {U scale} and \uicontrol {V scale} properties define how + to scale the U and V texture coordinates when mapping to a mesh's UV + coordinates. + + Scaling the U value when using horizontal tiling specifies how many times + the texture is repeated from left to right, while scaling the V value when + using vertical tiling specifies the repetition from bottom to top. + + To control how the texture is mapped when the U scaling value is greater + than 1, set the horizontal tiling mode in the \uicontrol {U tiling} field. + To control how the texture is mapped when the V scaling value is greater + than 1, set the vertical tiling mode in the \uicontrol {V tiling} field. + + To specify that the texture is not tiled, but the value on the edge is used + instead, select \uicontrol ClampToEdge. To repeat the texture and mirrored + it over the x or y axis, select \uicontrol MirroredRepeat. To repeat the + texture over the x or y axis, select \uicontrol Repeat. + + \section1 Setting UV Transform Properties + + To offset the U coordinate mapping from left to right, set the position of + the component in the \uicontrol {U position} field. To offset the mapping + from bottom to top, set it in the \uicontrol {V position} field. + + Specify the U and V pivot point in the \uicontrol {U pivot} and + \uicontrol {V pivot} fields. + + To rotate the texture around the pivot point, specify rotation as degrees + in the \uicontrol {UV rotation} field. A positive value indicates clockwise + rotation. + + For more information about rotating and pivoting components in the local + coordinate space, see \l {Setting Transform Properties}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc new file mode 100644 index 0000000000..4c61d12a12 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc @@ -0,0 +1,54 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-3d-editor.html + \page studio-3d-view.html + \nextpage studio-3d-components.html + + \title Adding 3D Views + + To add a 3D view to the scene, drag and drop a \uicontrol {View 3D} + component from \uicontrol Library > \uicontrol {QML Types} > + \uicontrol {Qt Quick 3D} to the 3D editor or to the \uicontrol Navigator. + A 3D view contains a reference node that specifies a scene light, camera, + and model. A default material is attached to the model. You can attach + textures to materials. + + By default, a directional light and a perspective camera are used. + To use other light and camera types, change the type of the component in + the \uicontrol Type field in the \uicontrol Properties view. For example, + to use a point light, enter \e {PointLight}. + + \image studio-3d-properties-type.png "Type field in Properties view" + + To edit component properties, select the component in the 3D editor + or in the \uicontrol Navigator and modify the property values in the + \uicontrol Properties view. + + For more information about the available components and their properties, + see \l{Using 3D Components}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc new file mode 100644 index 0000000000..0256759f85 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d.html + \previouspage qmldesigner-pathview-editor.html + \nextpage studio-3d-design-mode.html + + \title Editing 3D Scenes + + You can use the 3D editor in the Design mode to edit files you created + using 3D graphics applications and stored in one of the supported formats. + You cannot create 3D models or other assets in the editor, but you can + \l{Importing 3D Assets}{import} the assets you need and work with them to + create scenes and states, as well as the transitions between them. + + When you import 3D scenes from files that you exported from 3D graphics + tools, you also import the camera, light, model, and materials as 3D + components. If your scene did not contain them, you can add predefined + Qt Quick 3D components to it and edit their properties to fit your needs. + + The following topics contain information about working with Qt Quick 3D: + + \list + \li \l {Editing 3D Assets in Design Mode} + + \QDS opens QML files that contain 3D scenes in the Design mode and + the scenes in the 3D editor. You can add imported 3D assets as + resources to projects as 3D components. + \li \l {Working in the 3D Editor} + + You can select 3D components in the 3D editor to move, rotate, and + scale them in the scene projected by the camera. + \li \l{Adding 3D Views} + + You can drag and drop 3D components from the \uicontrol Library + to the scene or to the \uicontrol Navigator. You must add all + 3D components into a 3D view. + \li \l {Using 3D Components} + + You can speficy properties for 3D components, such as cameras, + lights, materials, and shaders, in the \uicontrol Properties view. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc new file mode 100644 index 0000000000..37af1be548 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc @@ -0,0 +1,350 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Arc + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief An arc that ends at the specified position and uses the specified + radius. + + An arc is specified by setting values in degrees for the \l begin and + \l end properties. The arc can be just a line or a filled outline. + The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify + the appearance of the line or outline. The \l dashPattern and \l dashOffset + properties specify the appearance of dashed lines. + + The area between the arc's start and end points or the area inside the + outline are painted using either a solid fill color, specified using the + \l fillColor property, or a gradient, defined using one of the + \l ShapeGradient subtypes and set using the \l gradient property. + If both a color and a gradient are specified, the gradient is used. + + To create an arc with an outline, set the \l outlineArc property to \c true. + The \l arcWidth property specifies the width of the arc outline, including + the stroke. The \l arcWidthBegin and \l arcWidthEnd properties can be used + to specify the width of the start and end points of the outline separately. + The width of the outline between the start and end points is calculated + automatically. The inner and outer curves or the outline can be adjusted by + specifying values for the \l radiusInnerAdjust and \l radiusOuterAdjust + properties. + + The \l round, \l roundBegin, and \l roundEnd properties specify whether the + end points of the arc outline have rounded caps. For an arc that does not + have an outline, the \l capStyle property specifies whether the line ends + are square or rounded. + + Because an arc has curves, it may be appropriate to set the \l antialiasing + property to improve its appearance. + + \section2 Example Usage + + You can use the Arc component in \QDS to create different kinds of arcs. + + \image studio-arc.png + + The QML code looks as follows: + + \code + ArcItem { + id: arc + x: 31 + y: 31 + capStyle: 32 + end: 180 + strokeWidth: 6 + strokeColor: "#000000" + } + + ArcItem { + id: arcOutline + strokeColor: "gray" + arcWidth: 13 + end: 180 + fillColor: "light gray" + antialiasing: true + round: true + outlineArc: true + } + + ArcItem { + id: circle + end: 360 + strokeWidth: 5 + strokeColor: "#000000" + } + + ArcItem { + id: circleOutline + outlineArc: true + round: true + strokeColor: "gray" + fillColor: "light gray" + strokeWidth: 1 + end: 360 + } + \endcode +*/ + +/*! + \qmlproperty enumeration Arc::capStyle + + The cap style of the line if the arc does not have an outline. + + \value ShapePath.FlatCap + A square line end that does not cover the end point of the line. + \value ShapePath.SquareCap + A square line end that covers the end point and extends beyond it + by half the line width. This is the default value. + \value ShapePath.RoundCap + A rounded line end. + + \sa round, roundBegin, roundEnd, Qt::PenCapStyle +*/ + +/*! + \qmlproperty ShapePath Arc::dashOffset + + The starting point of the dash pattern for the arc or arc outline. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Arc::dashPattern + + The dash pattern of the arc or arc outline specified as the dashes and the + gaps between them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + Each dash is also subject to cap styles, and therefore a dash of 1 with + square cap set will extend 0.5 pixels out in each direction resulting in + a total width of 2. + + The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square + line end covers the end point and extends beyond it by half the line width. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath Arc::fillColor + + The arc fill color. + + If the arc is just a line, the area between its \l begin and \l end + points is filled. + + If the arc has an outline, the area within the outline is filled. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath Arc::gradient + + The gradient of the arc fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty ShapePath Arc::strokeColor + + The color of the arc line or outline. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty enumeration Arc::strokeStyle + + The style of the arc line or outline. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Arc::strokeWidth + + The width of the arc line or outline. + + When set to a negative value, no line is drawn. + + The default value is 1. + + The total width of an arc that has an outline (that is, the outline and the + fill) is specified by \l arcWidth. +*/ + +/*! + \qmlproperty real Arc::begin + + The position in degrees where the arc begins. + + The default value is 0. + + To create a circle, set the value of this property to 0 and the value of the + \l end property to 360. +*/ + +/*! + \qmlproperty real Arc::end + + The position in degrees where the arc ends. + + To create a circle, set the value of this property to 360 and the value of + the \l begin property to 0. +*/ + +/*! + \qmlproperty real Arc::arcWidth + + The total width of an arc that has an outline, including the outline and + fill. + + \sa arcWidthBegin, arcWidthEnd, strokeWidth +*/ + +/*! + \qmlproperty real Arc::arcWidthBegin + + The width of the beginning of an arc outline. + + \sa arcWidthEnd, arcWidth +*/ + +/*! + \qmlproperty real Arc::arcWidthEnd + + The width of the end of an arc outline. + + \sa arcWidthBegin, arcWidth +*/ + +/*! + \qmlproperty real Arc::radiusInnerAdjust + + The radius of the inside edge of the arc outline. + + This property can be used to adjust the inner curve of the arc outline. +*/ + +/*! + \qmlproperty real Arc::radiusOuterAdjust + + The radius of the outside edge of the arc outline. + + This property can be used to adjust the outer curve of the arc outline. +*/ + +/*! + \qmlproperty real Arc::alpha + + The area between the \l begin and \l end points of the arc. +*/ + +/*! + \qmlproperty bool Arc::antialiasing + + Whether the arc should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ + +/*! + \qmlproperty bool Arc::outlineArc + + Whether the arc has an outline. + + \sa arcWidth, arcWidthBegin, arcWidthEnd, round, roundBegin, roundEnd, + +*/ + +/*! + \qmlproperty bool Arc::round + + Whether the arc outline end points have round caps. + + The \l roundBegin and \l roundEnd properties can be used to specify the + caps separately for the end points. + +*/ + +/*! + \qmlproperty bool Arc::roundBegin + + Whether the arc outline begins with a round cap. + + \sa Qt::PenCapStyle, round, roundEnd +*/ + +/*! + \qmlproperty bool Arc::roundEnd + + Whether the arc outline ends with a round cap. + + \sa Qt::PenCapStyle, round, roundBegin +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc new file mode 100644 index 0000000000..0f00044dd1 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc @@ -0,0 +1,315 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Border + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A border drawn in four segments: left, top right, and bottom. + + The Border type is used to create borders out of four segments: left, + top, right, and bottom. The \l drawLeft, \l drawTop, \l drawRight, and + \l drawBottom properties can be used to determine whether each of the + segments is visible. + + The \l borderMode property determines whether the border is drawn along + the inside or outside edge of the item, or on top of the edge. + + The \l radius property specifies whether the border corners are rounded. + The radius can also be specified separately for each corner. Because this + introduces curved edges to the corners, it may be appropriate to set the + \l antialiasing property to improve the appearance of the border. + + The \l joinStyle property specifies how to connect two border line segments. + + The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify + the appearance of the border line. The \l dashPattern and \l dashOffset + properties specify the appearance of dashed lines. + + The \l capStyle property specifies whether line ends are square or + rounded. + + \section2 Example Usage + + You can use the Border component in \QDS to create different kinds of + borders. + + \image studio-border.png + + The QML code looks as follows: + + \code + BorderItem { + id: openLeft + width: 99 + height: 99 + antialiasing: true + drawLeft: false + strokeColor: "gray" + } + + BorderItem { + id: openTop + width: 99 + height: 99 + antialiasing: true + strokeColor: "#808080" + drawTop: false + } + + BorderItem { + id: asymmetricalCorners + width: 99 + height: 99 + antialiasing: true + bottomLeftRadius: 0 + topRightRadius: 0 + strokeColor: "#808080" + } + + BorderItem { + id: dashedBorder + width: 99 + height: 99 + antialiasing: true + strokeStyle: 4 + strokeColor: "#808080" + } + \endcode +*/ + +/*! + \qmlproperty int Border::radius + + The radius used to draw rounded corners. + + If radius is non-zero, the corners will be rounded, otherwise they will + be sharp. The radius can also be specified separately for each corner by + using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and + \l topRightRadius properties. +*/ + +/*! + \qmlproperty int Border::bottomLeftRadius + + The radius of the bottom left border corner. + + \sa radius +*/ + +/*! + \qmlproperty int Border::bottomRightRadius + + The radius of the bottom right border corner. + + \sa radius +*/ + +/*! + \qmlproperty int Border::topLeftRadius + + The radius of the top left border corner. + + \sa radius +*/ + +/*! + \qmlproperty int Border::topRightRadius + + The radius of the top right border corner. + + \sa radius +*/ + +/*! + \qmlproperty enumeration Border::capStyle + + The cap style of the line. + + \value ShapePath.FlatCap + A square line end that does not cover the end point of the line. + \value ShapePath.SquareCap + A square line end that covers the end point and extends beyond it + by half the line width. This is the default value. + \value ShapePath.RoundCap + A rounded line end. + + \sa Qt::PenCapStyle +*/ + +/*! + \qmlproperty ShapePath Border::dashOffset + + The starting point of the dash pattern for the border line. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Border::dashPattern + + The dash pattern of the border line specified as the dashes and the gaps + between them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + Each dash is also subject to cap styles, and therefore a dash of 1 with + square cap set will extend 0.5 pixels out in each direction resulting in + a total width of 2. + + The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square + line end covers the end point and extends beyond it by half the line width. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty enumeration Border::joinStyle + + The join style used to connect two border line segments. + + \value ShapePath.MiterJoin + The outer edges of the lines are extended to meet at an angle, and + this area is filled. + \value ShapePath.BevelJoin + The triangular notch between the two lines is filled. + This is the default value. + \value ShapePath.RoundJoin + A circular arc between the two lines is filled. + + \sa Qt::PenJoinStyle +*/ + +/*! + \qmlproperty ShapePath Border::strokeColor + + The color of the border line. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty enumeration Border::strokeStyle + + The style of the border line. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Border::strokeWidth + + The width of the border line. + + When set to a negative value, no line is drawn. + + The default value is 1. +*/ + +/*! + \qmlproperty bool Border::drawBottom + + Whether the bottom border is visible. + + The border segment is drawn if this property is set to \c true. +*/ + +/*! + \qmlproperty bool Border::drawLeft + + Whether the left border is visible. + + The border segment is drawn if this property is set to \c true. +*/ + +/*! + \qmlproperty bool Border::drawRight + + Whether the right border is visible. + + The border segment is drawn if this property is set to \c true. +*/ + +/*! + \qmlproperty bool Border::drawTop + + Whether the top border is visible. + + The border segment is drawn if this property is set to \c true. +*/ + +/*! + \qmlproperty bool Border::antialiasing + + Whether the border should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ + +/*! + \qmlproperty enumeration Border::borderMode + + Where the border is drawn. + + \value Border.Inside + The border is drawn along the inside edge of the item and does not + affect the item width. + This is the default value. + \value Border.Middle + The border is drawn over the edge of the item and does not + affect the item width. + \value Border.Outside + The border is drawn along the outside edge of the item and increases + the item width by the value of \l strokeWidth. + + \sa strokeWidth +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc new file mode 100644 index 0000000000..92fcb6ba14 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc @@ -0,0 +1,125 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Flipable + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \ingroup qtquickstudio-components + + \brief Provides a surface that can be flipped. + + A Flipable type can be visibly \e flipped between its front and back sides, + like a card. The front and back sides are specified by using any two types + inside the Flipable type. The type with the higher z-order is the front + side. The \l opacityFront and \l opacityBack properties are used to hide + and show either the front or back side of the flipable item at a time. + + The \l flipAngle property is used to animate the angle of the type to + produce the flipping effect. The \l xAxis or \l yAxis property is set + to 1 to determine which axis the type is rotated around. + + \section2 Example Usage + + You can use the Flipable component in \QDS to create a flipable item. In + this example, the two sides of the flipable show ISO 7000 icons. + + \image studio-flipable.png + + The QML code looks as follows: + + \code + FlipableItem { + id: flipable + width: 90 + height: 89 + opacityBack: 0 + + IsoItem { + id: arrowIsoIcon + color: "#808080" + anchors.fill: parent + source: "./iso-icons/iso_grs_7000_4_0251.dat" + } + + IsoItem { + id: questionIsoIcon + color: "#808080" + anchors.fill: parent + source: "./iso-icons/iso_grs_7000_4_0435.dat" + } + } + \endcode +*/ + +/*! + \qmlproperty Rotation Flipable::flipAngle + + The flip angle in degrees. + + The minimum value is -360 and the maximum value is 360 degrees. +*/ + +/*! + \qmlproperty real Flipable::opacityBack + + The opacity of the back side of the flipable type. + + The opacity can be set between 0 and 1 to hide or show the items on the + back side of the flipable type. +*/ + +/*! + \qmlproperty real Flipable::opacityFront + + The opacity of the front side of the flipable type. + + The opacity can be set between 0 and 1 to hide or show the items on the + front side of the flipable type. +*/ + +/*! + \qmlproperty int Flipable::xAxis + + Whether the type is rotated around the x-axis. + + This property is set to 1 to rotate the flipable type around the x-axis. +*/ + +/*! + \qmlproperty int Flipable::yAxis + + Whether the type is rotated around the y-axis. + + This property is set to 1 to rotate the flipable type around the y-axis. +*/ + +/*! + \qmlproperty bool Flipable::flipped + + Whether the flipable type has been flipped. + + This property is set to \c true when the type is flipped. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc new file mode 100644 index 0000000000..cca7a56eb8 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Group + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits Item + \ingroup qtquickstudio-components + + \brief A group item that gets its size from its children. + + The Group type is an \l Item type extended with the size property. The value + of size is automatically calculated to fit the children of the group. + + \section2 Example Usage + + You can use the Group type to specify the size of one or several items. + + \image studio-group.png + + The QML code looks as follows: + + \code + GroupItem { + id: group + + Rectangle { + id: rectangle + width: 200 + height: 200 + color: "#c2c2c2" + } + + Rectangle { + id: rectangle1 + x: 140 + y: 140 + width: 200 + height: 200 + color: "#000000" + } + } + \endcode +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc new file mode 100644 index 0000000000..6fb8ed4feb --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Iso + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief An ISO 7000 icon. + + The Iso type specifies an icon from an ISO 7000 icon library as a + \l [QtQuickExtras] {Picture} + type. The icon to use for the type and its color can be specified. + + \section2 Example Usage + + You can use the Iso type in \QDS to add ISO 7000 icons. + + \image studio-flipable.png + + The QML code looks as follows: + + \code + IsoItem { + id: arrowIsoIcon + color: "#808080" + anchors.fill: parent + source: "./iso-icons/iso_grs_7000_4_0251.dat" + } + \endcode + + To select an icon in the \uicontrol {ISO Icon Browser} in \QDS, select + the ISO icon in the \uicontrol Navigator or on the canvas, and then + select \uicontrol {Choose Icon} in the context menu. + + \image iso-icon-browser.png +*/ + +/*! + \qmlproperty color Iso::iconColor + + The color of an ISO 7000 icon. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc new file mode 100644 index 0000000000..e09e6038f2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc @@ -0,0 +1,254 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Pie + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A pie. + + The Pie type is used to create a pie slice, a pie that is missing slices, + or just the pie rind (similar to an \l Arc), depending on the \l begin and + \l end property values and the \l hideLine value. + + The filling of the pie is painted using either a solid fill color, specified + using the \l fillColor property, or a gradient, defined using one of the + \l ShapeGradient subtypes and set using the \l gradient property. + If both a color and a gradient are specified, the gradient is used. + + The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify + the appearance of the pie outline. The \l dashPattern and \l dashOffset + properties specify the appearance of dashed lines. + + The \l capStyle property specifies whether line ends are square or + rounded. + + Because a pie has curved edges, it may be appropriate to set the + \l antialiasing property to improve its appearance. + + \section2 Example Usage + + You can use the Pie component in \QDS to create different kinds of pies. + + \image studio-pie.png + + The QML code looks as follows: + + \code + PieItem { + id: pieSlice + antialiasing: true + strokeColor: "gray" + fillColor: "light gray" + } + + PieItem { + id: pie + end: 300 + fillColor: "#d3d3d3" + strokeColor: "#808080" + antialiasing: true + } + + PieItem { + id: pieRind + strokeWidth: 4 + capStyle: 32 + hideLine: true + end: 300 + strokeColor: "#808080" + antialiasing: true + } + \endcode +*/ + +/*! + \qmlproperty ShapePath Pie::capStyle + + The cap style of the line. + + \value ShapePath.FlatCap + A square line end that does not cover the end point of the line. + \value ShapePath.SquareCap + A square line end that covers the end point and extends beyond it + by half the line width. This is the default value. + \value ShapePath.RoundCap + A rounded line end. + + \sa Qt::PenCapStyle +*/ + +/*! + \qmlproperty ShapePath Pie::dashOffset + + The starting point of the dash pattern for the line. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Pie::dashPattern + + The dash pattern of the line specified as the dashes and the gaps between + them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + Each dash is also subject to cap styles, and therefore a dash of 1 with + square cap set will extend 0.5 pixels out in each direction resulting in + a total width of 2. + + The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square + line end covers the end point and extends beyond it by half the line width. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath Pie::fillColor + + The pie fill color. + + If \l hideLine is \c false, a pie slice is drawn using the values of the + \l begin and \l end properties and filled with this color. + + If \l hideLine is \c true, just the pie rind is drawn and the area between + the \l begin and \l end points is filled. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath Pie::gradient + + The gradient of the pie fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty ShapePath Pie::strokeColor + + The color of the line. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty ShapePath Pie::strokeStyle + + The style of the border line. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Pie::strokeWidth + + The width of the line. + + When set to a negative value, no line is drawn. + + The default value is 1. +*/ + +/*! + \qmlproperty real Pie::begin + + The position in degrees where the pie begins. + + The default value is 0. + + To create a circle, set the value of this property to 0 and the value of the + \l end property to 360. +*/ + +/*! + \qmlproperty real Pie::end + + The position in degrees where the pie ends. + + To create a circle, set the value of this property to 360 and the value of + the \l begin property to 0. +*/ + +/*! + \qmlproperty real Pie::alpha + + The area between \l begin and \l end. +*/ + +/*! + \qmlproperty bool Pie::antialiasing + + Whether the pie should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ + +/*! + \qmlproperty bool Pie::hideLine + + Whether to draw a pie slice or just the pie rind (similar to an \l Arc). +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc new file mode 100644 index 0000000000..dc792addb4 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc @@ -0,0 +1,283 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Rectangle + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A filled rectangle with an optional border. + + Rectangle items are used to fill areas with solid color or gradients and + to provide a rectangular border. + + Each Rectangle item is painted using either a solid fill color, specified + using the \l fillColor property, or a gradient, defined using one of the + \l ShapeGradient subtypes and set using the \l gradient property. + If both a color and a gradient are specified, the gradient is used. + + An optional border can be added to a rectangle with its own color and + thickness by setting the \l strokeColor and \l strokeWidth properties. + Setting the color to \c transparent creates a border without a fill color. + + Rounded rectangles can be drawn using the \l radius property. The radius + can also be specified separately for each corner. Because this introduces + curved edges to the corners of a rectangle, it may be appropriate to set + the \l antialiasing property to improve the appearance of the rectangle. + + \section2 Example Usage + + You can use the Rectangle component in \QDS to create different kinds of + rectangles. + + \image studio-rectangle.png + + The QML code looks as follows: + + \code + RectangleItem { + id: rectangle + gradient: RadialGradient { + focalRadius: 0 + centerY: 38.5 + focalY: 38.5 + centerX: 51.5 + centerRadius: 38.5 + GradientStop { + position: 0 + color: "#ffffff" + } + + GradientStop { + position: 1 + color: "#000000" + } + focalX: 51.5 + } + bottomRightRadius: 0 + topLeftRadius: 0 + strokeColor: "gray" + } + + RectangleItem { + id: rectangle1 + gradient: LinearGradient { + y1: 0 + y2: 77 + x2: 103 + x1: 0 + GradientStop { + position: 0 + color: "#ffffff" + } + + GradientStop { + position: 1 + color: "#000000" + } + } + topRightRadius: 0 + bottomLeftRadius: 0 + strokeColor: "#808080" + } + + RectangleItem { + id: rectangle2 + topLeftRadius: 0 + bottomRightRadius: 0 + fillColor: "#d3d3d3" + strokeColor: "#808080" + } + + RectangleItem { + id: rectangle3 + fillColor: "#000000" + gradient: LinearGradient { + y1: 0 + y2: 77 + x2: 103 + x1: 0 + GradientStop { + position: 0 + color: "#000000" + } + + GradientStop { + position: 1 + color: "#fdf9f9" + } + } + topRightRadius: 0 + bottomLeftRadius: 0 + strokeColor: "#808080" + } + \endcode +*/ + +/*! + \qmlproperty int Rectangle::radius + + The radius used to draw rounded corners. + + If radius is non-zero, the corners will be rounded, otherwise they will + be sharp. The radius can also be specified separately for each corner by + using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and + \l topRightRadius properties. +*/ + +/*! + \qmlproperty int Rectangle::bottomLeftRadius + + The radius of the bottom left rectangle corner. +*/ + +/*! + \qmlproperty int Rectangle::bottomRightRadius + + The radius of the bottom right rectangle corner. +*/ + +/*! + \qmlproperty int Rectangle::topLeftRadius + + The radius of the top left rectangle corner. +*/ + +/*! + \qmlproperty int Rectangle::topRightRadius + + The radius of the top right rectangle corner. +*/ + +/*! + \qmlproperty ShapePath Rectangle::dashOffset + + The starting point of the dash pattern for the rectangle border. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Rectangle::dashPattern + + The dash pattern of the rectangle border specified as the dashes and the + gaps between them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath Rectangle::fillColor + + The rectangle fill color. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath Rectangle::gradient + + The gradient of the rectangle fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty ShapePath Rectangle::strokeColor + + The color used to draw the border of the rectangle. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty ShapePath Rectangle::strokeStyle + + The style of the rectangle border. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Rectangle::strokeWidth + + The width of the border of the rectangle. + + A width of 1 creates a thin line. For no line, use a negative value or a + transparent color. + + \note The width of the rectangle's border does not affect the geometry of + the rectangle itself or its position relative to other items if anchors are + used. + + The border is rendered within the rectangle's boundaries. +*/ + +/*! + \qmlproperty bool Rectangle::antialiasing + + Whether the Rectangle should be antialiased. Antialiasing might + require more memory and slow down drawing the type. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc new file mode 100644 index 0000000000..3a460382b2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc @@ -0,0 +1,212 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype SvgPath + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A path defined using an SVG path data string. + + The SvgPath type uses an SVG path data string to draw a path as a line. + + The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify + the appearance of the path. The \l dashPattern and \l dashOffset properties + specify the appearance of dashed lines. + + The \l capStyle property specifies whether line ends are square or + rounded. + + The \l joinStyle property specifies how to connect two path segments. + If the path segments enclose areas, they can be painted using either + a solid fill color, specified using the \l fillColor property, or a + gradient, defined using one of the \l ShapeGradient subtypes and set + using the \l gradient property. If both a color and a gradient are + specified, the gradient is used. + + If the path has curves, it may be appropriate to set the \l antialiasing + property to improve its appearance. + + \note Mixing SvgPath with other types of elements is not always supported. + For example, when \l Shape is backed by \c GL_NV_path_rendering, a + \l ShapePath can contain one or more SvgPath elements, or one or more + elements of other types, but not both. +*/ + +/*! + \qmlproperty ShapePath SvgPath::capStyle + + The cap style of the line. + + \value ShapePath.FlatCap + A square line end that does not cover the end point of the line. + \value ShapePath.SquareCap + A square line end that covers the end point and extends beyond it + by half the line width. This is the default value. + \value ShapePath.RoundCap + A rounded line end. + + \sa Qt::PenCapStyle +*/ + +/*! + \qmlproperty ShapePath SvgPath::dashOffset + + The starting point of the dash pattern for the line. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath SvgPath::dashPattern + + The dash pattern of the line specified as the dashes and the gaps between + them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + Each dash is also subject to cap styles, and therefore a dash of 1 with + square cap set will extend 0.5 pixels out in each direction resulting in + a total width of 2. + + The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square + line end covers the end point and extends beyond it by half the line width. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath SvgPath::fillColor + + The fill color of enclosed path segments. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath SvgPath::gradient + + The gradient of the fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty ShapePath SvgPath::joinStyle + + The join style used to connect two path segments. + + \value ShapePath.MiterJoin + The outer edges of the lines are extended to meet at an angle, and + this area is filled. + \value ShapePath.BevelJoin + The triangular notch between the two lines is filled. + This is the default value. + \value ShapePath.RoundJoin + A circular arc between the two lines is filled. + + \sa Qt::PenJoinStyle +*/ + +/*! + \qmlproperty ShapePath SvgPath::strokeColor + + The color of the line. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty ShapePath SvgPath::strokeStyle + + The style of the line. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath SvgPath::strokeWidth + + The width of the line. + + When set to a negative value, no line is drawn. + + The default value is 1. +*/ + +/*! + \qmlproperty string SvgPath::path + + The SVG path data string specifying the path. + + For more information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData} + {W3C SVG Path Data}. +*/ + +/*! + \qmlproperty bool SvgPath::antialising + + Whether the path should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc new file mode 100644 index 0000000000..a8431b2f06 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc @@ -0,0 +1,287 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Triangle + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A triangle. + + The Triangle type can be used to draw triangles with different dimensions + and shapes. The type is enclosed in an invisible \l Rectangle type. The size + of the triagle is determined by the size of the bounding rectangle. The + dimensions of the triangle can be changed to make it elongated or squatter + with space around it by using the \l leftMargin, \l topMargin, + \l rightMargin, and \l bottomMargin properties. The margins are set between + the triangle and the edges of the parent rectangle. + + Each Triangle item is painted using either a solid fill color, specified + using the \l fillColor property, or a gradient, defined using one of the + \l ShapeGradient subtypes and set using the \l gradient property. + If both a color and a gradient are specified, the gradient is used. + + An optional border can be added to a triangle with its own color and + thickness by setting the \l strokeColor and \l strokeWidth properties. + Setting the color to \c transparent creates a border without a fill color. + + \section2 Example Usage + + You can use the Triangle component in \QDS to create triangles in different + shapes and colors. + + \image studio-triangle.png + + The QML code looks as follows: + + \code + TriangleItem { + id: triangle + strokeColor: "gray" + fillColor: "light gray" + } + + TriangleItem { + id: squatTriangle + bottomMargin: 10 + topMargin: 30 + fillColor: "#d3d3d3" + strokeColor: "#808080" + } + + TriangleItem { + id: elongatedTriangle + leftMargin: 15 + rightMargin: 15 + fillColor: "#d3d3d3" + strokeColor: "#808080" + } + + TriangleItem { + id: pear + radius: 20 + fillColor: "light gray" + bottomMargin: 10 + arcRadius: 20 + strokeColor: "#808080" + } + \endcode +*/ + +/*! + \qmlproperty ShapePath Triangle::dashOffset + + The starting point of the dash pattern for the triangle border. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Triangle::dashPattern + + The dash pattern of the triangle border specified as the dashes and the + gaps between them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath Triangle::fillColor + + The triangle fill color. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath Triangle::gradient + + The gradient of the triangle fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty enumeration Triangle::joinStyle + + The join style used to connect two triangle line segments. + + \value ShapePath.MiterJoin + The outer edges of the lines are extended to meet at an angle, and + this area is filled. + \value ShapePath.BevelJoin + The triangular notch between the two lines is filled. + This is the default value. + \value ShapePath.RoundJoin + A circular arc between the two lines is filled. + + \sa Qt::PenJoinStyle +*/ + +/*! + \qmlproperty ShapePath Triangle::strokeColor + + The color used to draw the border of the triangle. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty ShapePath Triangle::strokeStyle + + The style of the triangle border. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Triangle::strokeWidth + + The width of the border of the rectangle. + + A width of 1 creates a thin line. For no line, use a negative value or a + transparent color. + + \note The width of the rectangle's border does not affect the geometry of + the rectangle itself or its position relative to other items if anchors are + used. + + The border is rendered within the rectangle's boundaries. +*/ + +/*! + \qmlproperty int Triangle::radius + + Defines the rotation of the triangle in degrees. The default value is 0. + + This property can be used together with the \l radius property to + determine the shape of the triangle. + + \sa arcRadius +*/ + +/*! + \qmlproperty real Triangle::arcRadius + + The radius used to draw rounded corners. + + If radius is non-zero, the corners will be rounded, otherwise they will + be sharp. + + This property can be used together with the \l radius property to + determine the shape of the triangle. +*/ + +/*! + \qmlproperty real Triangle::leftMargin + + The left margin between the triangle and the bounding rectangle. + + Setting the left and right margins makes the triangle thinner and moves it + away from the edge. + + \sa rightMargin, topMargin, bottomMargin +*/ + +/*! + \qmlproperty real Triangle::topMargin + + The top margin between the triangle and the bounding rectangle. + + Setting the top and bottom margins makes the triangle lower and moves it + away from the edge. + + \sa bottomMargin, leftMargin, rightMargin +*/ + +/*! + \qmlproperty real Triangle::rightMargin + + The left margin between the triangle and the bounding rectangle. + + Setting the left and right margins makes the triangle thinner and moves it + away from the edge. + + \sa leftMargin, topMargin, bottomMargin +*/ + +/*! + \qmlproperty real Triangle::bottomMargin + + The top margin between the triangle and the bounding rectangle. + + Setting the top and bottom margins makes the triangle shorter and moves it + away from the edge. + + \sa topMargin, leftMargin, rightMargin +*/ + +/*! + \qmlproperty bool Triangel::antialiasing + + Whether the triangle should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc new file mode 100644 index 0000000000..82eef3cae7 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc @@ -0,0 +1,52 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page qtquickdesigner-components-overview.html + + \title Qt Quick Studio Components + + The Qt Quick Studio Components module provides sets of components and + effects enhanced for creating animated UIs. The components inherit + \l {Qt Quick Shapes QML Types}. The effects inherit the types in the + \l {Qt Graphical Effects} module. + + \section1 Using Studio Components + + A set of ready-made studio components are available for creating differently + shaped objects, such as arcs, pies, or triangles, as well as objects with + particular abilities, such as being visibly \e flipped between their front + and back sides, like a card. The studio components are built on top of + \l {Qt Quick Shapes QML Types}, with some additional properties. + + The following table summarizes the available studio components and contains + links to their documentation. + + \annotatedlist qtquickstudio-components + + \include qtdesignstudio-visual-effects.qdocinc qml visual effects + +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickstudiocomponents-qmlmodule.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickstudiocomponents-qmlmodule.qdoc new file mode 100644 index 0000000000..7f67c3daf2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickstudiocomponents-qmlmodule.qdoc @@ -0,0 +1,58 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \qmlmodule QtQuick.Studio.Components 1.0 + \title Qt Quick Studio Components QML Types + \ingroup qmlmodules + \brief Provides components enhanced for creating animated UIs. + + A set of ready-made studio components are available for creating differently + shaped objects, such as arcs, pies, or triangles, as well as objects with + particular abilities, such as being visibly \e flipped between their front + and back sides, like a card. The studio components are built on top of + \l {Qt Quick Shapes QML Types}, with some additional properties. + + The QML types can be imported into your application using the following + import statements in your .qml file: + + \badcode + import QtQuick.Studio.Components 1.0 + \endcode + + \omit + \\ TODO: Include the omitted text when the module becomes a Qt module. + Currently, the components are a part of Qt Design Studio. + + To link against the module, add the following QT variable to your qmake .pro + file: + + \badcode + QT += studiocomponents + \endcode + \endomit +*/ diff --git a/doc/qtdesignstudio/studiodoc.pro b/doc/qtdesignstudio/studiodoc.pro new file mode 100644 index 0000000000..e6c5787065 --- /dev/null +++ b/doc/qtdesignstudio/studiodoc.pro @@ -0,0 +1,15 @@ +TEMPLATE = aux + +# qtcreator.pro is a subdirs TEMPLATE which does not have debug_and_release +# so setup the same behavoir here for the current used aux TEMPLATE +CONFIG -= debug_and_release + +# include(../qt-creator-defines.pri) +include(../../qtcreator.pri) + +build_online_docs: \ + DOC_FILES = $$PWD/qtdesignstudio-online.qdocconf +else: \ + DOC_FILES = $$PWD/qtdesignstudio.qdocconf + +include(../../docs.pri) |
