diff options
author | Pranta Dastider <pranta.dastider@qt.io> | 2022-10-04 12:08:11 +0200 |
---|---|---|
committer | Pranta Ghosh Dastider <pranta.dastider@qt.io> | 2022-10-12 13:36:48 +0000 |
commit | 0645a8aef341ef01628bb05fae4c54fc54297e24 (patch) | |
tree | 103644d011148a71644535ff0359bc13b8f7649a | |
parent | a902729b35cea630dd33fa66a857df76e0c301d3 (diff) |
QmlDesigner: Improve the UI tutorial
Change the arrangement of texts,
update images
Fixes: QDS-7761
Change-Id: I63447ce34a72e2a2df7c18053276ba1362386c00
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
-rw-r--r-- | doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg | bin | 58564 -> 68266 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/examples/doc/images/loginui1-project.png | bin | 41456 -> 35138 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/examples/doc/loginui1.qdoc | 310 |
3 files changed, 161 insertions, 149 deletions
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg Binary files differindex 999959b20b..4dc8e4e910 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-project.png b/doc/qtdesignstudio/examples/doc/images/loginui1-project.png Binary files differindex 93ca7c6c8c..28984175b9 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-project.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-project.png diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc index c9739bdb2a..718f919f0e 100644 --- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc @@ -30,23 +30,18 @@ \title Log In UI - Components \brief Illustrates how to use wizard templates to create a simple UI - wireframe that contains a text label, images, and push buttons. + that contains a text label, images, and push buttons. \image loginui1.jpg - \e{Log In UI - Components} is the first in a series of tutorials 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. The first tutorial - in the series describes how to use the \QDS wizard templates to create a - project and a button UI control, and how to modify the files generated by - the wizard templates to wireframe the UI. + \e{Log In UI - Components} is the first tutorial in a series of tutorials + that describes how to use the \QDS wizard templates to create a project and + a button UI control, and how to modify the files generated by the wizard + templates to design the UI. You can donwnload the completed project from \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui1}{here}. - The \e {Learn More} sections provide additional information about the - tasks performed by the wizards and about other basic tasks and concepts. - \section1 Creating the UI Project For the purposes of this tutorial, you will use the empty wizard template. @@ -69,6 +64,7 @@ \li Set \uicontrol Width to 720 and \uicontrol Height to 1280. You can change the screen size later in \l Properties. \endlist + \li Select \uicontrol Create to create the project. \endlist @@ -79,7 +75,7 @@ The wizard constructs the \e Screen01 \l{glossary-component}{component} using instances of a \l{basic-rectangle}{Rectangle} component that forms - the background and a \l Text component that displays some text. + the background, a \l Button, and a \l Text component that displays some text. \note The visibility of views depends on the selected workspace, so your \QDS might look somewhat different from the above image. @@ -87,53 +83,14 @@ in the \uicontrol Design mode. For more information about moving views around, see \l {Managing Workspaces}. - \section2 Learn More - Projects and Files - - \QDS creates a set of boilerplate files and folders that you need to create - a UI. The files are listed in the \l{File System} view. - - \image loginui1-project-files.png - - \list - \li The \e {loginui1.qmlproject} project file defines that all - component, JavaScript, and image files in the project folder belong - to the project. Therefore, you do not need to individually list 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 is a custom component created by - the wizard template. For more information, see \l {UI Files}. - - By default, this is the main file in the project, but you can - change that in the .qmlproject file. While the custom component - is a good starting point for new users, you don't have to use it. - Specifically, if you export and import designs using \QB, your main - file is most likely called something else. For more information, - see \l {Exporting from Design Tools}. - \li The \e CMakeLists.txt project configuration file allowing you to - share your project as a fully working C++ application with - developers. - \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 \e {Constants.qml} and - \e {DirectoryFontLoader.qml} files that specify a font loader - and a \e qmldir module definition file that declares the Constant - component. For more information, see - \l {Module Definition qmldir Files}. The \e EventListModel.qml and - \e EventListSimulator.qml files are not used in this example, so - you can ignore them for now. - \endlist + You should remove this \l Button for now from the UI + to have a clean workspace. You'll add this later in the course of the tutorial. + Then you shall know how to modify and adjust it as you need. - \l{UI Files}{UI files} define a hierarchy of components with a - highly-readable, structured layout. Every UI file consists of two parts: - an imports section and an component declaration section. The components and - functionality most common to UIs are provided in the \c QtQuick import. You - can view the code of a \e .ui.qml file in the \l{Code} view. + To remove this Button, just select it and press \key {Backspace}. Next, you will edit the values of the properties of the component instances to create the main page of the UI. - \section1 Creating the Main Page You will now change the values of the properties of the \l Text component @@ -145,9 +102,9 @@ You can download the logo and the background image from here: \list - \li \l{https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/images/qt_logo_green_128x128px.png} + \li \l{https://git.qt.io/public-demos/qtdesign-studio/-/blob/master/tutorial%20projects/Loginui1/content/images/qt_logo_green_128x128px.png} {qt_logo_green_128x128px.png} - \li \l{https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/images/adventurePage.jpg} + \li \l{https://git.qt.io/public-demos/qtdesign-studio/-/blob/master/tutorial%20projects/Loginui1/content/images/adventurePage.jpg} {Background image} (\e adventurePage.jpg) Photo by \l{https://unsplash.com/photos/a2MgJdG6UvE} @@ -161,7 +118,8 @@ To add the assets: \list 1 \li Select \uicontrol Assets > \inlineimage icons/plus.png - . + (Select \uicontrol View > \uicontrol Views > \uicontrol Assets to enable it, + if you can't find it). \li Select the asset files, and then select \uicontrol Open. \li Select the location where the files will be saved in the \uicontrol {Add Resources} dialog. @@ -180,8 +138,8 @@ To modify the \e Screen01 component in the \uicontrol {2D} view: \list 1 - \li Drag-and-drop the background image from \uicontrol Assets to the - rectangle in \l Navigator. + \li Drag-and-drop the background image (1) from \uicontrol Assets to the + \l{basic-rectangle}{Rectangle} (2) in \l Navigator. \image loginui1-library-assets.jpg "Assets view" \li \QDS automatically creates an instance of the \l{Images}{Image} component for you with the path to the image file set as the @@ -189,7 +147,7 @@ \image loginui1-image-properties.png "Image properties" \li Drag-and-drop the Qt logo from \uicontrol Assets to the rectangle in \uicontrol Navigator and move it to the top-center of the - background image in \uicontrol the {2D} view. + background image in the \uicontrol {2D} view. \li Select \e Text in \uicontrol Navigator and drag it below the logo in the \uicontrol {2D} view. If the text is hidden behind the background, select \inlineimage icons/navigator-arrowdown.png @@ -204,8 +162,8 @@ line: \e {Are you ready to explore?}. \image loginui1-text-properties.png "Text properties" \li In \uicontrol Font, select \e {Titillium Web ExtraLight}. - \li In \uicontrol Size, set the font size of the tag line to - \e 50 pixels (\uicontrol px). + \li In \uicontrol Size, first select the scale to pixels (\uicontrol px), + then set font size of the tag line to \e 50 (\uicontrol px). \li In \uicontrol {Text color}, set the text color to white (\e #ffffff). \endlist @@ -219,74 +177,6 @@ \image loginui1-main-page.jpg "Modified UI in the Design mode" You can resize the preview dialog to display the whole screen. - - \section2 Learn More - Components - - \QDS provides preset \l{glossary-component}{components} for creating - UIs, including components for creating and animating visual components, - receiving user input, and creating data models and views. - - To be able to use the functionality of preset components, the wizard template - adds the following \e import statements to the UI files (.ui.qml) that it - creates: - - \quotefromfile Loginui1/content/Screen01.ui.qml - \skipto import - \printuntil Controls - - You can view the import statements in the \uicontrol {Code} view. - - The \l Components view lists the components in each module that are - supported by \QDS. You can use the basic components to create your own - components, and they will be listed in \uicontrol {My Components}. - This section is only visible if you have created custom components. - - The \l {basic-rectangle}{Rectangle}, \l Text, and \l {Images}{Image} - components used in this tutorial are based on the \l Item component. - It is the base component for all visual elements, with implementation - of basic functions and properties, such as component type, ID, position, - size, and visibility. - - For more information, see \l{Use Case - Visual Elements In QML}. For - descriptions of all components, see \l{All QML Types} in the Qt reference - documentation. - - \section3 Regtangle Properties - - The default \l {basic-rectangle}{Rectangle} component is used for drawing - shapes with four sides and four corners. You can fill rectangles either with - a solid fill color or a gradient. You can specify the border color separately. - By setting the value of the radius property, you can create shapes with - rounded corners. - - If you want to specify the radius of each corner separately, you can use the - \l{studio-rectangle}{Rectangle} component from the - \uicontrol {Qt Quick Studio Components} module instead of the basic rectangle - component. It is available in \uicontrol Components - > \uicontrol {Qt Quick Studio Components}. - - \section3 Text Properties - - The \l Text component is used for adding static text to the UI, such as - titles and labels. You can select the font to use and specify extensive - properties for each text component, such as size in points or pixels, - weight, style, and spacing. - - If you want to create a label with a background, use the \l Label component - from the \uicontrol {Qt Quick Controls} module instead of the Text component. - - \section3 Image Properties - - The \l {Images}{Image} component is used for adding images to the UI in several - supported formats, including bitmap formats such as PNG and JPEG and vector - graphics formats such as SVG. To add an image to \uicontrol Assets, select - \inlineimage icons/plus.png - , and then select the image file. - - If you need to display animated images, use the \l {Animated Image} - component, also available in \uicontrol Components > - \uicontrol {Default Components} > \uicontrol Basic. - \section1 Creating a Push Button You can use another wizard template to create a push button and to add it to @@ -320,21 +210,9 @@ \image loginui1-button.png "Button in the Design mode." - \section2 Learn More - UI Controls - - The \e {Custom Button} wizard template creates a button component - based on the \l {Button} control in the \l {Qt Quick Controls} 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 - properties and functionality inherited from the Button component 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 control, the wizard template - adds the following \e import statements to the \e EntryField.ui.qml file: - - \quotefromfile Loginui1/content/EntryField.ui.qml - \skipto import - \printuntil Controls + \note To open the \uicontrol States view, select it from + \uicontrol View > \uicontrol Views > \uicontrol States, if + it is not available by default. Next, you will change the appearance of the EntryField component by modifying its properties. @@ -375,8 +253,8 @@ properties in \uicontrol Properties. \li In \uicontrol Character > \uicontrol Font, select \e {Titillium Web ExtraLight}. - \li In \uicontrol Size, set the font size to \e 34 pixels - (\uicontrol px). + \li In \uicontrol Size, first select the scale to pixels (\uicontrol px), + then set font size to \e 34 (\uicontrol px). \li In \uicontrol {Text color}, set the text color to white (\e #ffffff). \li In \uicontrol {Alignment H}, select the \uicontrol Left button to @@ -396,6 +274,10 @@ \image loginui1-entry-field-styled.jpg "Modified button in the 2D view" + \note Do not edit the the value of \uicontrol Text in the \uicontrol Character + property, because this will break the connection, and later you won't be able + to change the text in \uicontrol {Button Content} > \uicontrol Text. + Next, you will add instances of the \e EntryField component to the \e Screen01 component and modify their properties. @@ -459,7 +341,8 @@ its properties in \uicontrol Properties. \li In \uicontrol Character > \uicontrol Font, select \e {Titillium Web ExtraLight}. - \li In \uicontrol Size, set the font size to \e 34 pixels. + \li In \uicontrol Size, first select the scale to pixels (\uicontrol px), + then set font size to \e 34 (\uicontrol px). \li In \uicontrol {Text color}, set the text color to \e #41cd52. \li In the \uicontrol States view, select the \e normal state and repeat the changes, as necessary. @@ -503,7 +386,136 @@ \image loginui1-ready.jpg "The finished UI in the 2D view" - \section2 Learn More - Component IDs + \section1 Learn More + The \e {Learn More} sections provide additional information about the + tasks performed by the wizards and about other basic tasks and concepts. + + \section2 Projects and Files + \QDS creates a set of files and folders that you need to create + a UI. The files are listed in the \l{File System} view. + + \image loginui1-project-files.png + \list + \li The \e {loginui1.qmlproject} project file defines that all + component, JavaScript, and image files in the project folder belong + to the project. Therefore, you do not need to individually list 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 is a custom component created by + the wizard template. For more information, see \l {UI Files}. + + By default, this is the main file in the project, but you can + change that in the .qmlproject file. While the custom component + is a good starting point for new users, you don't have to use it. + Specifically, if you export and import designs using \QB, your main + file is most likely called something else. For more information, + see \l {Exporting from Design Tools}. + \li The \e CMakeLists.txt project configuration file allowing you to + share your project as a fully working C++ application with + developers. + \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 \e {Constants.qml} and + \e {DirectoryFontLoader.qml} files that specify a font loader + and a \e qmldir module definition file that declares the Constant + component. For more information, see + \l {Module Definition qmldir Files}. The \e EventListModel.qml and + \e EventListSimulator.qml files are not used in this example, so + you can ignore them for now. + \endlist + \l{UI Files}{UI files} define a hierarchy of components with a + highly-readable, structured layout. Every UI file consists of two parts: + an imports section and an component declaration section. The components and + functionality most common to UIs are provided in the \c QtQuick import. You + can view the code of a \e .ui.qml file in the \l{Code} view. + + + \section2 Components + + \QDS provides preset \l{glossary-component}{components} for creating + UIs, including components for creating and animating visual components, + receiving user input, and creating data models and views. + + To be able to use the functionality of preset components, the wizard template + adds the following \e import statements to the UI files (.ui.qml) that it + creates: + + \quotefromfile Loginui1/content/Screen01.ui.qml + \skipto import + \printuntil Controls + + You can view the import statements in the \uicontrol {Code} view. + + The \l Components view lists the components in each module that are + supported by \QDS. You can use the basic components to create your own + components, and they will be listed in \uicontrol {My Components}. + This section is only visible if you have created custom components. + + The \l {basic-rectangle}{Rectangle}, \l Text, and \l {Images}{Image} + components used in this tutorial are based on the \l Item component. + It is the base component for all visual elements, with implementation + of basic functions and properties, such as component type, ID, position, + size, and visibility. + + For more information, see \l{Use Case - Visual Elements In QML}. For + descriptions of all components, see \l{All QML Types} in the Qt reference + documentation. + + \section3 Regtangle Properties + + The default \l {basic-rectangle}{Rectangle} component is used for drawing + shapes with four sides and four corners. You can fill rectangles either with + a solid fill color or a gradient. You can specify the border color separately. + By setting the value of the radius property, you can create shapes with + rounded corners. + + If you want to specify the radius of each corner separately, you can use the + \l{studio-rectangle}{Rectangle} component from the + \uicontrol {Qt Quick Studio Components} module instead of the basic rectangle + component. It is available in \uicontrol Components + > \uicontrol {Qt Quick Studio Components}. + + \section3 Text Properties + + The \l Text component is used for adding static text to the UI, such as + titles and labels. You can select the font to use and specify extensive + properties for each text component, such as size in points or pixels, + weight, style, and spacing. + + If you want to create a label with a background, use the \l Label component + from the \uicontrol {Qt Quick Controls} module instead of the Text component. + + \section3 Image Properties + + The \l {Images}{Image} component is used for adding images to the UI in several + supported formats, including bitmap formats such as PNG and JPEG and vector + graphics formats such as SVG. To add an image to \uicontrol Assets, select + \inlineimage icons/plus.png + , and then select the image file. + + If you need to display animated images, use the \l {Animated Image} + component, also available in \uicontrol Components > + \uicontrol {Default Components} > \uicontrol Basic. + + \section2 UI Controls + + The \e {Custom Button} wizard template creates a button component + based on the \l {Button} control in the \l {Qt Quick Controls} 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 + properties and functionality inherited from the Button component 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 control, the wizard template + adds the following \e import statements to the \e EntryField.ui.qml file: + + \quotefromfile Loginui1/content/EntryField.ui.qml + \skipto import + \printuntil Controls + + \section2 Component IDs Each component and each instance of a component has an \e ID that uniquely identifies it and enables other components' properties to be bound to it. |