From 0df7796d601e2bdc118371b06a4aa33a03b80ad1 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Wed, 9 Jun 2021 17:33:56 +0200 Subject: [PATCH] Doc: Add an overview of creating UI logic in Qt Quick Fixes: QDS-4499 Change-Id: I5a095d31988f114d29aa20c35c5edf02891bb824 Reviewed-by: Thomas Hartmann Reviewed-by: Jarko Vihriala Reviewed-by: Brook Cronin --- .../qtquick/qtquick-creating-ui-logic.qdoc | 146 ++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 doc/qtcreator/src/qtquick/qtquick-creating-ui-logic.qdoc diff --git a/doc/qtcreator/src/qtquick/qtquick-creating-ui-logic.qdoc b/doc/qtcreator/src/qtquick/qtquick-creating-ui-logic.qdoc new file mode 100644 index 00000000000..9141b442c75 --- /dev/null +++ b/doc/qtcreator/src/qtquick/qtquick-creating-ui-logic.qdoc @@ -0,0 +1,146 @@ +/**************************************************************************** +** +** Copyright (C) 2021 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 qtquick-creating-ui-logic.html + \previouspage qtquick-prototyping.html + \nextpage studio-simulation-overview.html + + \title Creating UI Logic + + Turn your wireframe into an interactive prototype by adding UI logic that + enables your components to apply actions or react to mock data from backend + systems to simulate complex experiences. + + Create connections between the UI components to enable them to communicate + with each other. For example, how should the appearance of a button change + on a mouse click and which action should the UI perform in response to the + \e signal that is emitted upon the mouse click. + + You can 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 by emitting a signal that indicates a change in the value. + + To reference a property of a component from another component, you can + create \l{Adding Property Aliases}{property aliases} that hold a reference + to another property. Unlike an ordinary property definition, which + allocates a new, unique storage space for the property, a property + alias connects the newly declared property (called the + \e {aliasing property}) as a direct reference to an existing property + (the \e {aliased property}). Any content that is data-driven should be + exported as a public property of the relevant component. For example, + a speedometer should have a property for speed to which the UI is bound. + + You can declare various \l{Adding States}{UI states} that describe how + property values change from a base state. States can be a useful way of + organizing your UI logic. You can associate transitions with components + to define how their properties will animate when they change due to a + state change. + + \if defined(qtdesignstudio) + The \l{Log In UI - Part 3} example illustrates using states to create + two UI screens and signals emitted by buttons to apply the states. + The button components also switch states when they are pressed down. + + \image loginui3.gif "Clicking buttons to switch between screens" + \endif + + Using property aliases and states to create the differences in your + component instances enables you to reuse components instead of duplicating + them. Thus, the components do not need to be processed as completely new + component types. This reduces the loading and compilation time as well as + the package size of the final application. + + The preset \l{UI Controls}{UI controls} have default properties and states + that you can modify. If you need additional properties, you can turn + instances of the controls into custom components and specify new properties + for them. + + \if defined(qtdesignstudio) + To have your UI perform certain operations, you might need to write + JavaScript expressions for conditions or convert numbers to strings. + To make this easier, \QDS provides preset components called + \l{Logic Helpers}{logic helpers}. They are invisible components that + you can use in connection with controls, such as a \l {slider-control} + {Slider} or \l {Check Box}. + + Logic helpers are available for binding property values using the boolean + AND, NOT, and OR operators, as well as for mapping numbers and numerical + ranges. In addition, you can synchronize the property values of two + components bi-directionally. + + The logic helper example uses property binding, states, and logic helpers + to implement the UI logic. + + \image studio-logic-helper-combining-example.gif "Logic helper example application" + \endif + + The following table summarizes some typical use cases with links to more + information. + + \table + \header + \li To Learn About + \li Go To + \row + \li Responding to application events + \li \l{Connecting Components to Signals} + \row + \li Formatting connections + \li \l{Adding Actions and Assignments} + \row + \li Dynamically changing the behavior of a component + \li \l{Adding Bindings Between Properties} + \row + \li Formatting property bindings + \li \l{Setting Bindings} + \row + \li Referencing a property of a component from another component + \li \l{Adding Property Aliases} + \row + \li Referencing a state from within a specific component + \li \l{Adding States} + \row + \li Switching to a state when a particular property changes + \li \l{Applying States} + \row + \li Using preset UI controls that have default properties and states + \li \l{UI Controls} + \if defined(qtdesignstudio) + \row + \li Creating conditional conditions + \li \l{Logic Helpers} + \endif + \row + \li Adding custom properties for a particular component type + \li \l{Specifying Dynamic Properties} + \omit + \row + \li Adding properties for controlling states + \li TODO + \endomit + \endtable +*/