/**************************************************************************** ** ** 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. ** ****************************************************************************/ /*! \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 Projects view. 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. You can view the QML code of an ui.qml file in the \uicontrol {Text Editor} view. 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 \uicontrol {Form Editor} view 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 Projects view to open it. \note The visibility of views depends on the selected workspace. To open hidden views, select \uicontrol Window > \uicontrol Views in the Design mode. For more information, see \l {Managing Workspaces}. To modify \e Screen01.ui.qml in the \uicontrol {Form Editor}: \list 1 \li Select \e Rectangle in the \uicontrol Navigator view 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 view 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 \uicontrol {Form Editor} and modify its properties in the \uicontrol Properties view 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 in the \uicontrol {Form Editor} 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 in the \uicontrol {Form Editor}, 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 Form Editor" \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 Projects view to open it in the \uicontrol {Form Editor}. \li Drag and drop two instances of the PushButton type from the \uicontrol Library to the \uicontrol {Form Editor}. \image loginui1-library.png "Library 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 in the \uicontrol {Form Editor}. 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}. */