diff options
Diffstat (limited to 'doc/qtdesignstudio')
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) |
