diff options
author | Tim Jenssen <tim.jenssen@qt.io> | 2022-10-04 15:21:56 +0200 |
---|---|---|
committer | Tim Jenssen <tim.jenssen@qt.io> | 2022-10-04 13:44:42 +0000 |
commit | 964f539e559f0bb51204a10ad6147bda3a1924d0 (patch) | |
tree | 056b43eeec5ea5cb4aac35fc6476089906ce5d21 /doc | |
parent | 993fd2a92a9e90c9e06f161b40eb5b0201169ade (diff) | |
parent | 47887da778215045831d8284cf896e8934e75cda (diff) | |
download | qt-creator-964f539e559f0bb51204a10ad6147bda3a1924d0.tar.gz |
Merge remote-tracking branch 'origin/8.0' into 9.0
resolved conflicts:
* doc/qtdesignstudio/src/developers/studio-designer-developer-workflow.qdoc
* src/plugins/qmldesigner/components/edit3d/edit3dwidget.cpp
* src/plugins/qmldesigner/components/materialbrowser/materialbrowserview.cpp
* src/plugins/qmldesigner/components/navigator/choosefrompropertylistdialog.cpp
and compile fix in materialbrowserview.cpp
Change-Id: I686e7e93ded8ac1afc792942ded47cd9fe4341ed
Diffstat (limited to 'doc')
40 files changed, 342 insertions, 78 deletions
diff --git a/doc/qtdesignstudio/examples/doc/animationTutorial.qdoc b/doc/qtdesignstudio/examples/doc/animationTutorial.qdoc new file mode 100644 index 0000000000..d5b71b91bd --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/animationTutorial.qdoc @@ -0,0 +1,245 @@ +/**************************************************************************** +** +** Copyright (C) 2022 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. +** +****************************************************************************/ + +/*! + \page animation-tutorial.html + \ingroup gstutorials + \sa {Creating Timeline Animations} + + \title Timeline Animation Tutorial + \brief Illustrates how to create timeline animations and bind them to + properties in \QDS. + + \image animation-tutorial.gif + + The \e{Timeline Animation} tutorial illustrates how to create timeline animations + and bind them to properties in \QDS. First you create a keyframe animation + which you control the running state of with a switch in the UI. Next, you + create another keyframe animation where you use a slider in the UI to + control the position of the playhead. + + The starting point of this tutorial is the Animation Tutorial project, + you can download it from + \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/animation-tutorial/AnimationTutorial/Start} + {here}. + + You can download the completed project from + \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/animation-tutorial/AnimationTutorial/Completed} + {here}. + + This tutorial requires that you know the basics of \QDS, see + \l{Getting Started}. + + \section1 Creating a Timeline Animation + + First, you create an animation where the ball bearing continuously rotates + around its Y axis. + + \section2 Adding a Timeline and an Animation + + To add a timeline to your project: + + \list 1 + \li In the \uicontrol Timeline view, select + \inlineimage icons/plus.png + . + This creates a timeline and one animation. + \li On the \uicontrol {Animation Settings} tab in the + \uicontrol {Timeline Settings} dialog: + \list + \li Set \uicontrol Duration to 7500. + This sets the duration of the animation in milliseconds. + \li Select \uicontrol {Contiunous}. + This sets the animation to start over again when it reaches the + end. + \endlist + \image animation-tutorial-timeline-1.png + \li Select \uicontrol {Close}. + \endlist + + You can see the timeline in the \uicontrol Timeline and + \uicontrol Navigator views. + + \section2 Adding Keyframes + + Next, you add keyframes to animate the rotation of the ball bearing: + + \list 1 + \li In the \uicontrol Navigator view, select \e {ballbearing1}. + \li In the \uicontrol Properties view, select + \inlineimage icons/action-icon.png (Actions) + next to \uicontrol Rotation > \uicontrol {Y}. + \li Select \uicontrol {Insert Keyframe}. + \image animation-tutorial-insert-keyframe.png + \li In the \uicontrol Timeline view, select the + \uicontrol {Per Property Recording} button to start recording property + changes. + \image animation-tutorial-per-property-recording.png + \li In the \uicontrol Timeline view, move the playhead to the end of the + animation (frame 1000). + \li In the \uicontrol Properties view, set \uicontrol Rotation > + \uicontrol Z to 360. + This creates a second keyframe. + \li Select the \uicontrol {Per Property Recording} button to end the per + property recording. To preview the animation, drag the playhead along the + timeline. + \endlist + + \section2 Controlling the Running State of the Animation + + There is a toggle switch in the UI of this project. To use this switch to + control the running state of the animation: + + \list 1 + \li In the \uicontrol Navigator view, select \e {timelineAnimation}. + \li In the \uicontrol Connections view, go to the \uicontrol Bindings tab. + \li Select \inlineimage icons/plus.png + to create a binding. + \li For the binding you created, set: + \list + \li \uicontrol Property to \e {paused}. + \li \uicontrol {Source Item} to \e {switch1}. + \li \uicontrol {Source Property} to \e {checked}. + \endlist + \image animation-tutorial-binding.png + \endlist + + You can preview the animation and try the toggle switch in the live preview. + To run the live preview, select \key Alt + \key{P}. + + \section1 Creating a Timeline and Binding it to a Property + + Next, you create the exploded view animation of the ball bearing. You don't + want this animation to run automatically but instead you want to control it + with a slider in the UI. + + \section2 Adding a Timeline Inside a Component + + You create this animation inside the ball bearing component, to do this: + + \list 1 + \li In the \uicontrol Navigator view, select \e {ballBearing1}. + \li Select \key {F2} to go into the component. + \li In the \uicontrol Timeline view, select + \inlineimage icons/plus.png + to add a timeline and open the \uicontrol {Timeline Settings} dialog. + \li Select \inlineimage icons/minus.png + next to the \uicontrol {Animation Settings} tab to remove the animation + in this timeline. + You do not need an animation when you bind the timeline to a property. + \li Select \uicontrol {Close}. + \endlist + + \image animation-tutorial-timeline-2.png + + \section2 Adding Keyframes + + Now, you add keyframes for the different parts of the ball bearing: + + \list 1 + \li In the \uicontrol{Navigator} view, select \e{inner_race}. + \li In the \uicontrol Properties view, select + \inlineimage icons/action-icon.png (Actions) + next to \uicontrol Translation > \uicontrol Y. + \li Select \uicontrol {Insert Keyframe}. + \li In the \uicontrol Timeline view, select the + \uicontrol {Per Property Recording} button to start recording property + changes. + \li In the \uicontrol Timeline view, move the playhead to the end of the + animation (frame 1000). + \li In the \uicontrol Properties view, set \uicontrol Translation > + \uicontrol Y to 0,50. + \li Select the \uicontrol {Per Property Recording} button to end the per + property recording. + \li Next, you set the keyframe values for the other parts of the ball + bearing. For the following parts, set the \uicontrol Translation > + \uicontrol Y value for frame 1000: + \list + \li \e balls to 1,00. + \li \e retainer to 1,50. + \li \e shield_left to 1,80. + \li \e shield_right to -0,30. + \endlist + \image animation-tutorial-ballbearing-animation.png + \endlist + + You can preview the animation by dragging the playhead in the + \uicontrol Timeline view. + + \section2 Controlling the Animation with a Slider + + Now, you use the slider on the main screen to control the exploded + view animation that you created. + + To do this, you first need to define a property for the slider: + + \list 1 + \li In the \uicontrol Navigator view, select \e Node. + \li On the \uicontrol Properties tab in the \uicontrol Connections view, + select \inlineimage icons/plus.png + . + \li In the \uicontrol {Property Type} field, enter \e {Item}. + This field is a drop-down list, but you can also type text. + \li In the \uicontrol {Property Value} field, enter \e {null}. + \endlist + \image animation-tutorial-property.png + + Next, you set the property you just created to control the timeline + animation: + + \list 1 + \li In the \uicontrol {Timeline} view, select + \inlineimage icons/animation.png + . + \li In the \uicontrol {Expression binding field}, enter + \c {property0.value}. + \li Select \uicontrol {Close}. + \endlist + + Next, you go out from the component back to the main project and bind the + property to the slider: + + \list 1 + \li In the toolbar, select the \e {Screen01.ui.qml} breadcrumb. + \image animation-tutorial-breadcrumb.png + \li In the \uicontrol {Navigator} view, select \e {ballbearing1}. + \li In the \uicontrol {Connections} view, go to the + \uicontrol {Bindings} tab. + \li Select \inlineimage icons/plus.png + . + \li For the binding you just created: + \list + \li Set \uicontrol {Source Item} to \e {slider}. + \li Remove the value from \uicontrol {Source Property}. + \endlist + \image animation-tutorial-binding-2.png + \endlist + + \section1 Previewing + + Now, the animations are done. To preview and test your application, + select \key Alt + \key{P}. + +*/ diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial-ballbearing-animation.png b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-ballbearing-animation.png Binary files differnew file mode 100644 index 0000000000..916b2c97c7 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-ballbearing-animation.png diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial-binding-2.png b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-binding-2.png Binary files differnew file mode 100644 index 0000000000..d32c5be3d9 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-binding-2.png diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial-binding.png b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-binding.png Binary files differnew file mode 100644 index 0000000000..06648e6628 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-binding.png diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial-breadcrumb.png b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-breadcrumb.png Binary files differnew file mode 100644 index 0000000000..10f266e67e --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-breadcrumb.png diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial-insert-keyframe.png b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-insert-keyframe.png Binary files differnew file mode 100644 index 0000000000..511bab8642 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-insert-keyframe.png diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial-per-property-recording.png b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-per-property-recording.png Binary files differnew file mode 100644 index 0000000000..2f89cc584b --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-per-property-recording.png diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial-property.png b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-property.png Binary files differnew file mode 100644 index 0000000000..78d66e63ba --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-property.png diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial-timeline-1.png b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-timeline-1.png Binary files differnew file mode 100644 index 0000000000..f369fe746f --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-timeline-1.png diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial-timeline-2.png b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-timeline-2.png Binary files differnew file mode 100644 index 0000000000..93eac2e2de --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial-timeline-2.png diff --git a/doc/qtdesignstudio/examples/doc/images/animation-tutorial.gif b/doc/qtdesignstudio/examples/doc/images/animation-tutorial.gif Binary files differnew file mode 100644 index 0000000000..e663c6b685 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/animation-tutorial.gif diff --git a/doc/qtdesignstudio/images/add-local-custom-property.png b/doc/qtdesignstudio/images/add-local-custom-property.png Binary files differnew file mode 100644 index 0000000000..68b848f5aa --- /dev/null +++ b/doc/qtdesignstudio/images/add-local-custom-property.png diff --git a/doc/qtdesignstudio/images/add-new-property-dialog.png b/doc/qtdesignstudio/images/add-new-property-dialog.png Binary files differnew file mode 100644 index 0000000000..6aac047855 --- /dev/null +++ b/doc/qtdesignstudio/images/add-new-property-dialog.png diff --git a/doc/qtdesignstudio/images/custom-properties.png b/doc/qtdesignstudio/images/custom-properties.png Binary files differnew file mode 100644 index 0000000000..531e62f903 --- /dev/null +++ b/doc/qtdesignstudio/images/custom-properties.png diff --git a/doc/qtdesignstudio/src/components/qtquick-component-instances.qdoc b/doc/qtdesignstudio/src/components/qtquick-component-instances.qdoc index a6c84c7428..09f8d2e28b 100644 --- a/doc/qtdesignstudio/src/components/qtquick-component-instances.qdoc +++ b/doc/qtdesignstudio/src/components/qtquick-component-instances.qdoc @@ -29,7 +29,7 @@ custom properties on the \uicontrol {Properties} tab in the \l {Connections} view. \image qmldesigner-dynamicprops.png "Connections View Properties tab" - For more information, see \l{Specifying Dynamic Properties}. + For more information, see \l{Specifying Custom Properties}. \li To enable users to interact with the component instances, connect the instances to signals on the \uicontrol Connections tab in the \uicontrol {Connections} view. For example, you can specify what diff --git a/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc b/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc index 6fb0a6e99e..923428779b 100644 --- a/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc +++ b/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc @@ -41,7 +41,7 @@ \uicontrol Navigator or the \uicontrol {2D} view. \li Edit component properties in the \uicontrol Properties view. The available properties depend on the component type. You can - \l{Specifying Dynamic Properties}{add properties for + \l{Specifying Custom Properties}{add properties for components} on the \uicontrol {Properties} tab in the \uicontrol Connections view. \li To change the appearance and behavior of the component instances diff --git a/doc/qtdesignstudio/src/components/qtquick-data-models.qdoc b/doc/qtdesignstudio/src/components/qtquick-data-models.qdoc index a08a179752..6ecd695a2e 100644 --- a/doc/qtdesignstudio/src/components/qtquick-data-models.qdoc +++ b/doc/qtdesignstudio/src/components/qtquick-data-models.qdoc @@ -139,7 +139,7 @@ When you add a \l{GridView}{Grid View}, \l{ListView}{List View}, or \l{PathView}{Path View}, the ListModel and the delegate component that creates an instance for each item in the model are added automatically. - For grid and list views, you can edit the list model in \QC. + For grid and list views, you can edit the list model in \QDS. \image qtquick-designer-listview-preview.png "Preview of a list view" diff --git a/doc/qtdesignstudio/src/components/qtquick-images.qdoc b/doc/qtdesignstudio/src/components/qtquick-images.qdoc index 4c853d5e50..3d6879826c 100644 --- a/doc/qtdesignstudio/src/components/qtquick-images.qdoc +++ b/doc/qtdesignstudio/src/components/qtquick-images.qdoc @@ -28,7 +28,7 @@ \image qtquick-designer-image-type.png "Image component in different views" When you drag-and-drop an image file from \uicontrol Assets to \l Navigator - or the \l {2D} view, \QC automatically + or the \l {2D} view, \QDS automatically creates an instance of the Image component for you with the path to the image file set as the value of the \uicontrol Source field in \uicontrol Properties. diff --git a/doc/qtdesignstudio/src/components/qtquick-positioning.qdoc b/doc/qtdesignstudio/src/components/qtquick-positioning.qdoc index 4fdbbece9e..54857d9122 100644 --- a/doc/qtdesignstudio/src/components/qtquick-positioning.qdoc +++ b/doc/qtdesignstudio/src/components/qtquick-positioning.qdoc @@ -73,7 +73,7 @@ For more information on the JavaScript environment provided, see \l{Integrating QML and JavaScript}. - Bindings are a black box for \QC and using them might have a + Bindings are a black box for \QDS and using them might have a negative impact on performance, so consider setting anchors and margins for components, instead. For example, instead of setting \c {parent.width} for a component, you could anchor the component to its sibling components on the @@ -342,7 +342,7 @@ to right and top to bottom. Each component is positioned at the top-left corner of its cell with position (0, 0). - \QC generates the grid based on the positions of the child components in + \QDS generates the grid based on the positions of the child components in the \l {2D} view. You can modify the number of rows and columns in the \uicontrol Rows and \uicontrol Columns fields. diff --git a/doc/qtdesignstudio/src/developers/studio-designer-developer-workflow.qdoc b/doc/qtdesignstudio/src/developers/studio-designer-developer-workflow.qdoc index 96d0b4bfd6..1753da63f7 100644 --- a/doc/qtdesignstudio/src/developers/studio-designer-developer-workflow.qdoc +++ b/doc/qtdesignstudio/src/developers/studio-designer-developer-workflow.qdoc @@ -27,7 +27,7 @@ working Qt 6 application that you can build and run in Qt Creator using CMake. Therefore, you can open, build, and run the projects with Qt Creator. - \QDS continues to use the \e .qmlproject file format, while \QC uses a + \QDS continues to use the \e .qmlproject file format, while Qt Creator uses a \e CMakeLists.txt file as the project file. This enables you to share your project as a fully working C++ application with developers. @@ -46,9 +46,10 @@ \section1 Converting Project Structure for CMake - \QDS can generate \e CMakeLists.txt and other related files to use with \QC and to compile into - an executable application but only if the project has a certain folder structure. If you have a - \QDS QML project that doesn't have the CMake configuration, follow these steps to convert its + \QDS can generate \e CMakeLists.txt and other related files to use with + Qt Creator and to compile into an executable application but only if the + project has a certain folder structure. If you have a \QDS QML project that + doesn't have the CMake configuration, follow these steps to convert its file structure to the correct format. \list 1 diff --git a/doc/qtdesignstudio/src/overviews/qtquick-animation-overview.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-animation-overview.qdoc index 6011a2a497..ef7fccc3c7 100644 --- a/doc/qtdesignstudio/src/overviews/qtquick-animation-overview.qdoc +++ b/doc/qtdesignstudio/src/overviews/qtquick-animation-overview.qdoc @@ -46,7 +46,7 @@ \section2 Timeline and Keyframe Based Animation - Timeline animation is based on \e keyframes. In \QC, keyframes determine the + Timeline animation is based on \e keyframes. In \QDS, keyframes determine the value of the property of a \l{glossary_component}{component} at a certain time. Animating properties enables their values to move through intermediate values instead of immediately changing to the target value. diff --git a/doc/qtdesignstudio/src/overviews/qtquick-creating-ui-logic.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-creating-ui-logic.qdoc index c1227d8802..3aebd6ae17 100644 --- a/doc/qtdesignstudio/src/overviews/qtquick-creating-ui-logic.qdoc +++ b/doc/qtdesignstudio/src/overviews/qtquick-creating-ui-logic.qdoc @@ -114,7 +114,7 @@ \endif \row \li Adding custom properties for a particular component type - \li \l{Specifying Dynamic Properties} + \li \l{Specifying Custom Properties} \omit \row \li Adding properties for controlling states diff --git a/doc/qtdesignstudio/src/overviews/qtquick-production-quality-animation.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-production-quality-animation.qdoc index 28811b6a74..fcf1a4c455 100644 --- a/doc/qtdesignstudio/src/overviews/qtquick-production-quality-animation.qdoc +++ b/doc/qtdesignstudio/src/overviews/qtquick-production-quality-animation.qdoc @@ -48,7 +48,7 @@ \section1 Profiling UI Code You can use \l{Profiling QML Applications}{QML Profiler} that is integrated - into \QC to find causes for typical performance problems in your UI. For + into \QDS to find causes for typical performance problems in your UI. For example, your UI might be slow, unresponsive, or stuttering. Typically, such problems are caused by executing too much JavaScript in too few frames. All JavaScript must return before the GUI thread can proceed, and frames are diff --git a/doc/qtdesignstudio/src/overviews/qtquick-prototyping.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-prototyping.qdoc index a2edfa13c1..414e608a9c 100644 --- a/doc/qtdesignstudio/src/overviews/qtquick-prototyping.qdoc +++ b/doc/qtdesignstudio/src/overviews/qtquick-prototyping.qdoc @@ -73,7 +73,7 @@ \li \l {Importing 3D Assets} - You can import exported assets into \QC. For a list of formats + You can import exported assets into \QDS. For a list of formats supported by each \l{Qt Quick 3D} version, see the module documentation. diff --git a/doc/qtdesignstudio/src/overviews/qtquick-uis.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-uis.qdoc index a69e2eebb8..59eb00ab94 100644 --- a/doc/qtdesignstudio/src/overviews/qtquick-uis.qdoc +++ b/doc/qtdesignstudio/src/overviews/qtquick-uis.qdoc @@ -20,14 +20,14 @@ components, and states, you need. Create a descriptive wireframe and acquire a detailed UI specification before you start to make the process of creating the UI more efficient. - \QC enables you to turn your UI concept into a wireframe with + \QDS enables you to turn your UI concept into a wireframe with a scalable layout where all your screens and controls are in place. You can present your wireframe to developers and other stakeholders for discussion, review, and approval before continuing into the prototyping phase. \endtable - In \QC, you build UIs around the behavior of \l{glossary-component} + In \QDS, you build UIs around the behavior of \l{glossary-component} {components} and how they connect with one another. You can use preset components available in the \l Components view or combine them to create your own components. You can specify values for the \e properties of a diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc index 48c1999769..7f237dfc49 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc +++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc @@ -49,7 +49,7 @@ \li Edit component properties in the \l Properties view. The available properties depend on the component type. You can - \l{Specifying Dynamic Properties}{add properties for components} on + \l{Specifying Custom Properties}{add properties for components} on the \uicontrol Properties tab in the {Connections} view. \endlist diff --git a/doc/qtdesignstudio/src/qtdesignstudio-developer-topics.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-developer-topics.qdoc index 82f3b666b6..845e25b019 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-developer-topics.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-developer-topics.qdoc @@ -26,7 +26,7 @@ \li \l{Converting UI Projects to Applications} \QDS projects are useful for creating UIs. To use them for - application development in \QC, you have to convert + application development in Qt Creator, you have to convert them to Qt Quick Application projects that contain .pro, .cpp, and .qrc files. \li \l{Using External Tools} diff --git a/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc index 43333648d8..c7815bd349 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc @@ -19,7 +19,7 @@ \li \l {FAQ - Assets}{Assets} \li \l {FAQ - Components}{Components} \li \l {FAQ - Views}{Views} - \li \l {FAQ - Integration Between \QDS and \QC}{Integration Between \QDS and \QC} + \li \l {FAQ - Integration Between \QDS and Qt Creator}{Integration Between \QDS and Qt Creator} \li \l {FAQ - Performance}{Performance} \li \l {FAQ - Data Simulation}{Data Simulation} \endlist @@ -67,7 +67,7 @@ \section1 FAQ - Components - \section2 Can custom components be used? + \section2 Can I use custom components? Yes, you can create custom components and controls by using wizard templates or move component instances into separate files to turn them into new @@ -81,7 +81,7 @@ For more information, see \l {Importing 3D Assets}. - \section2 How to integrate custom C++ components into QDS? + \section2 How can I integrate custom C++ components into QDS? You must create your own QML module that contains the components and provides additional information about your components. For more information, @@ -99,21 +99,21 @@ For more information, see the \l {3D} view. - \section1 FAQ - Integration Between \QDS and \QC + \section1 FAQ - Integration Between \QDS and Qt Creator - \section2 Is there a way to automatically propagate name changes between \QDS and \QC? + \section2 Can I automatically propagate name changes between \QDS and Qt Creator? Unfortunately we do not automate renaming files between tools at the moment. If you decide to change the name of a property, alias, or signal in \QDS, - you need to manually change the name in \QC to maintain the connection. + you need to manually change the name in Qt Creator to maintain the connection. However, you can rename symbols in all files within a project. To rename a QML type in a project, select \uicontrol Tools > \uicontrol QML/JS > \uicontrol {Rename Symbol Under Cursor} or press \key Ctrl+Shift+R. For more information, see \l {Renaming Symbols}. - \section2 When turning your \QDS project into application in \QC, what is the best way to add .qml files? + \section2 How can I add .qml files to my project in Qt Creator? - Use the project wizard templates to create an application in \QC and copy + Use the project wizard templates to create an application in \QDS and copy your .qml files to the project folder. Then make some changes to the project configuration and source files, as instructed in \l {Converting UI Projects to Applications}. diff --git a/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc index 77d37f0dfa..77c63d5fe1 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc @@ -143,7 +143,7 @@ Navigator to add the properties on the \uicontrol Properties tab in the \l Connections view. - See \l {Specifying Dynamic Properties} for a detailed description of how + See \l {Specifying Custom Properties} for a detailed description of how to add a custom property. The name of the property and the data type need to match those of the send or receive property of the Simulink model. diff --git a/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc index 85c0ce5818..d26f96652c 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc @@ -197,7 +197,7 @@ \li \l{Preset Components} \li \l{Specifying Component Properties} \li \l{Adding Bindings Between Properties} - \li \l{Specifying Dynamic Properties} + \li \l{Specifying Custom Properties} \endlist \section1 Signal @@ -294,7 +294,7 @@ 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. + it, \QDS simply runs it again. \endomit */ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 089f908e3a..070bf4ae25 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -122,7 +122,7 @@ \list \li\l{Connecting Components to Signals} \li\l{Adding Bindings Between Properties} - \li\l{Specifying Dynamic Properties} + \li\l{Specifying Custom Properties} \endlist \li \l{Adding States} \endlist diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc index df0ae40b4c..806308869d 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc @@ -193,5 +193,5 @@ \image studio-custom-material-uniform-properties.png "Uniforms as properties in Connections view Properties tab" For more information about adding properties, see - \l{Specifying Dynamic Properties}. + \l{Specifying Custom Properties}. */ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-optimized-3d-scenes.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-optimized-3d-scenes.qdoc index 9ce91d3478..4032685223 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-optimized-3d-scenes.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-optimized-3d-scenes.qdoc @@ -12,7 +12,7 @@ \title Creating Optimized 3D Scenes - In \QC, you can use various means to create a 3D scene. Your choice of + In \QDS, you can use various means to create a 3D scene. Your choice of strategy should always depend on the target platform of your scene. The way the content of your scene is authored can have dramatic effects on the runtime performance of your UI. The Optimal 3D Scene described @@ -88,7 +88,7 @@ The scene graph is the hierarchy of nodes that describe the scene to be rendered. - In \QC, the scene graph is represented by the tree-like view in + In \QDS, the scene graph is represented by the tree-like view in \uicontrol Navigator. You can also view the hierarchy of nodes in the \l {Code} view. By minimizing the size of the scene graph, you can minimize the effort needed when running the scene. In terms of diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc index 2ea3ae6ede..0d61823fc6 100644 --- a/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc +++ b/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc @@ -9,10 +9,10 @@ \else \nextpage quick-connections-backend.html \endif + \sa {Specifying Component Properties} + \title Specifying Custom Properties - \title Specifying Dynamic Properties - - Each preset \l{glossary-component}{component} has a set of preset properties + Each \l{Preset Components}{preset component }has a set of preset properties that you can specify values for. You can add custom properties that would not otherwise exist for a particular \l{Component Types}{component type}. You bind the properties to dynamic expressions to define global properties @@ -33,49 +33,35 @@ should have an \e int or \e real property for speed to which the UI is bound. - You can add properties for components on the \uicontrol Properties tab in - in the \l {Connections} view. - - \image qmldesigner-dynamicprops.png "Custom properties in the Connections view Custom Properties tab" + \section1 Adding Properties for a Component - To add properties for a component: + To add a custom property for a component: \list 1 - \li Go to the \uicontrol Properties tab in the \l Connections view. + \li Go to the \uicontrol {Local Custom Properties} section in the + \uicontrol Properties view. \li Select the \inlineimage icons/plus.png - (\uicontrol Add) button to add a dynamic property for the currently - selected component. The component ID is displayed in the \uicontrol Item - column. - \li Double-click the value in the \uicontrol Property column to give a - name to the property. Property names must begin with a lower case - letter and can only contain letters, numbers, and underscores. - JavaScript \e {reserved words} are not valid property names. - \li Double-click the value in the \uicontrol {Property Type} column to - specify the \l{Supported Property Types}{type of the property}. - \li Double-click the value in the \uicontrol {Property Value} column - to specify the value of the property. + (\uicontrol Add) button to add a custom property for the currently + selected component. + \image add-local-custom-property.png + \li Set the \uicontrol Name and \uicontrol Type for the property. + \image add-new-property-dialog.png \endlist - Right-click a property and select \uicontrol {Open Binding Editor} in - the context menu to bind the value of the property to that of another one - or to data accessible in the application in \uicontrol {Binding Editor}. - For more information, see \l{Setting Bindings}. - - \image qmldesigner-binding-editor.png "Binding Editor" + \section1 Binding a Property Value - The properties you add for a component are displayed in the \l Properties - view when you select a component of that type in the \l Navigator or - \l {2D} view. + To bind the value of the property to that of another one or to data + accessible in the application. - \image qtquick-custom-properties.png "Custom properties in Properties view" - - For more information about setting property values in the - \l Properties view, see \l{Specifying Component Properties}. + \list 1 + \li In the \uicontrol Properties view, select + \inlineimage icons/action-icon.png + next to the property. + \li Select \uicontrol {Set Binding}. + \image qmldesigner-binding-editor.png "Binding Editor" + \endlist - \if defined(qtcreator) - For an example of using custom properties in an application, see - \l{Creating a Mobile Application}. - \endif + For more information, see \l{Setting Bindings}. \section1 Supported Property Types @@ -113,6 +99,9 @@ \li string \li Free form text string \row + \li TextureInput + \li Specifies a texture exposed to the shaders of a CustomMaterial or Effect. + \row \li url \li Resource locator, such as a file name. It can be either absolute, (\c http://qt-project.org), or relative (\c pics/logo.png). A @@ -122,5 +111,14 @@ \li variant \li Generic property type. For example, variant properties can store numbers, strings, objects, arrays, and functions. + \row + \li vector2d + \li Refers to a value with x and y attributes. + \row + \li vector3d + \li Refers to a value with x, y, and z attributes. + \row + \li vector4d + \li Refers to a value with x, y, z, and w attributes. \endtable */ diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-editor.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-editor.qdoc index 5f87102e66..d17dbcb003 100644 --- a/doc/qtdesignstudio/src/views/qtquick-connection-editor.qdoc +++ b/doc/qtdesignstudio/src/views/qtquick-connection-editor.qdoc @@ -26,7 +26,7 @@ the value of a property changes, the values of any properties that are bound to it are automatically updated accordingly. - \li \l{Specifying Dynamic Properties} + \li \l{Specifying Custom Properties} Each preset component has a set of preset properties that you can specify values for. You can add custom properties that would diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc index 94895ea3f2..69c2a78dc9 100644 --- a/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc +++ b/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc @@ -63,7 +63,7 @@ \li \uicontrol Properties \li Add custom properties that would not otherwise exist for a particular preset component or your own custom component. - \li \l{Specifying Dynamic Properties} + \li \l{Specifying Custom Properties} \if defined(qtcreator) \row \li \uicontrol Backends diff --git a/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc b/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc index c57558f6de..90735297f7 100644 --- a/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc +++ b/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc @@ -107,7 +107,7 @@ \section1 Locking Components When designing complex applications, it is easy to accidentally modify - the properties of a component in one of the \QC views in ways that lead to + the properties of a component in one of the \QDS views in ways that lead to surprising results. For example, the \uicontrol {2D} view can become crowded and other components can get in the way when you are trying to select or transform a particular component, so that you end up transforming @@ -115,7 +115,7 @@ To lock components that you are not currently editing and their children, click \inlineimage icons/lockon.png - in \uicontrol Navigator. Locked components cannot be handled in any \QC + in \uicontrol Navigator. Locked components cannot be handled in any \QDS views. You can unlock the components when you want to edit them again. \image qtquick-designer-navigator-lock.gif "Locking components in Navigator" diff --git a/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc index a7efc9d00b..d8f1f01d15 100644 --- a/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc +++ b/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc @@ -22,6 +22,26 @@ \image qmldesigner-element-properties.png "Rectangle and Text properties" + \section1 Custom Properties + + Custom Properties are properties that the user has added to the component. + + There are two types of custom properties: + + \table + \header + \li Custom Property Type + \li Description + \row + \li Local Custom Property + \li A property that has been added for a \l{Preset Components}{preset component}. + \row + \li Exposed Custom Property + \li A property that has been added inside a component. + \endtable + + \image custom-properties.png + \section1 Summary of Properties View Buttons The following table lists the \uicontrol Properties view buttons: diff --git a/doc/qtdesignstudio/src/views/qtquick-properties.qdoc b/doc/qtdesignstudio/src/views/qtquick-properties.qdoc index 6127c12283..d716932d94 100644 --- a/doc/qtdesignstudio/src/views/qtquick-properties.qdoc +++ b/doc/qtdesignstudio/src/views/qtquick-properties.qdoc @@ -29,7 +29,7 @@ another preset component in the field. If you have specified values for properties that are not supported by the - new component type, \QC offers to remove them for you. If you'd rather do + new component type, \QDS offers to remove them for you. If you'd rather do this yourself, you can select the \inlineimage icons/action-icon.png (\uicontrol Actions) menu next to the property name, and then select \uicontrol Reset to remove the property values before trying again. diff --git a/doc/qtdesignstudio/src/views/studio-workspaces.qdoc b/doc/qtdesignstudio/src/views/studio-workspaces.qdoc index e26f1ce8a8..a6a6d97dfb 100644 --- a/doc/qtdesignstudio/src/views/studio-workspaces.qdoc +++ b/doc/qtdesignstudio/src/views/studio-workspaces.qdoc @@ -8,7 +8,7 @@ \title Managing Workspaces - In the \uicontrol Design mode, you can arrange a set of \QC + In the \uicontrol Design mode, you can arrange a set of \QDS views as a \e workspace on the screen. To detach views: @@ -34,10 +34,10 @@ \section1 Saving Workspaces - The changes you make to a workspace are saved when you exit \QC. + The changes you make to a workspace are saved when you exit \QDS. Select \uicontrol View > \uicontrol Workspaces > \uicontrol Manage > \uicontrol {Restore last workspace on startup} - to restore the current workspace the next time you start \QC. + to restore the current workspace the next time you start \QDS. \image qtcreator-workspace-manager.png "Workspace Manager" |