feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Improve the UI tutorial

Browse Source 
Change the arrangement of texts,
update images

Fixes: QDS-7761
Change-Id: I63447ce34a72e2a2df7c18053276ba1362386c00
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Pranta Dastider
2022-10-04 12:08:11 +02:00
committed by Pranta Ghosh Dastider
parent a902729b35
commit 0645a8aef3
3 changed files with 161 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 67 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-project.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 34 KiB

624
doc/qtdesignstudio/examples/doc/loginui1.qdoc
View File

@@ -30,23 +30,18 @@
\title Log In UI - Components \title Log In UI - Components
\brief Illustrates how to use wizard templates to create a simple UI \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 \image loginui1.jpg
\e{Log In UI - Components} is the first in a series of tutorials that build \e{Log In UI - Components} is the first tutorial in a series of tutorials
on each other to illustrate how to use \QDS to create a simple UI with some that describes how to use the \QDS wizard templates to create a project and
basic UI components, such as pages, buttons, and fields. The first tutorial a button UI control, and how to modify the files generated by the wizard
in the series describes how to use the \QDS wizard templates to create a templates to design the UI.
project and a button UI control, and how to modify the files generated by
the wizard templates to wireframe the UI.
You can donwnload the completed project from You can donwnload the completed project from
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui1}{here}. \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 \section1 Creating the UI Project
For the purposes of this tutorial, you will use the empty wizard template. 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. \li Set \uicontrol Width to 720 and \uicontrol Height to 1280.
You can change the screen size later in \l Properties. You can change the screen size later in \l Properties.
\endlist \endlist
\li Select \uicontrol Create to create the project. \li Select \uicontrol Create to create the project.
\endlist \endlist
@@ -79,7 +75,7 @@
The wizard constructs the \e Screen01 \l{glossary-component}{component} The wizard constructs the \e Screen01 \l{glossary-component}{component}
using instances of a \l{basic-rectangle}{Rectangle} component that forms 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, \note The visibility of views depends on the selected workspace,
so your \QDS might look somewhat different from the above image. so your \QDS might look somewhat different from the above image.
@@ -87,13 +83,318 @@
in the \uicontrol Design mode. For more information about moving in the \uicontrol Design mode. For more information about moving
views around, see \l {Managing Workspaces}. views around, see \l {Managing Workspaces}.
\section2 Learn More - Projects and Files 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.
\QDS creates a set of boilerplate files and folders that you need to create 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
instance to create a tag line using a custom font. You will add the font
as an asset and set it to be used in the properties of the component.
In addition, you will import a background image and logo as assets and
add them to the page as instances of the \l{Images}{Image} component.
You can download the logo and the background image from here:
\list
\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://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}
{Benjamin DeYoung} on \l{https://unsplash.com}{Unsplash}.
\endlist
You can download the font from
\l{https://fonts.google.com/specimen/Titillium+Web#standard-styles}
{Titillium Web ExtraLight font} or use Arial as a substitute.
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.
\li Select \uicontrol OK.
\endlist
To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \uicontrol {2D}
view toolbar or press \key {Alt+P}.
The \e Screen01.ui.qml file that the wizard template created for you should
be open in the \uicontrol Design mode. If it is not, you can double-click it
in the \uicontrol Projects view to open it.
To modify the \e Screen01 component in the \uicontrol {2D} view:
\list 1
\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
value of \l Properties > \uicontrol Image > \uicontrol Source.
\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 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
in \uicontrol Navigator to move the text as the last item in the
component tree structure. The text should then appear on top
of the background.
\li Edit text properties in \uicontrol Properties:
\list a
\li In \uicontrol Component > \uicontrol ID, enter the ID
\e tagLine.
\li In \uicontrol Character > \uicontrol Text, enter the tag
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, 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
\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 \uicontrol {2D} view
and live preview:
\image loginui1-main-page.jpg "Modified UI in the Design mode"
You can resize the preview dialog to display the whole screen.
\section1 Creating a Push Button
You can use another wizard template to create a push button and to add it to
the project. The wizard template creates a reusable button component that
appears in \uicontrol Components > \uicontrol {My Components}.
You can drag-and-drop it to \l Navigator to create button instances and
modify their properties in the \uicontrol Properties view to change their
appearance and functionality.
If you cannot use the wizard template nor the preset
button controls available in \uicontrol Components >
\uicontrol {Qt Quick Controls} to create the kind of push button that you
want, you can create your button from scratch using default components. For
more information, see \l {Creating Buttons} and
\l {Creating Scalable Buttons and Borders}.
To create a push button by using the wizard template:
\list 1
\li Select \uicontrol File > \uicontrol {New File} >
\uicontrol {Qt Quick Controls} >
\uicontrol {Custom Button} > \uicontrol Choose.
\li In the \uicontrol {Component name} field, enter a name for your
button component: \e {EntryField}.
\li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
the button UI file, \e EntryField.ui.qml.
\endlist
Your button should now look something like this in the \uicontrol Design
mode:
\image loginui1-button.png "Button in the Design mode."
\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.
\section1 Styling the Button
You can now modify the properties of the EntryField component to your
liking. To make the changes apply to all the EntryField instances, you
must make them in the \e EntryField.ui.qml file.
The Custom Button wizard template adds a \e normal state and a \e down state
to change the button background and text color when the button is clicked.
You will now change the colors in all states. When you make changes to the
button in the \e base state, they are automatically applied to the other
states. However, the property values that have been explicitly changed in
the \e normal or \e down state are not changed automatically and you have
to either reset them to the base state or set them separately in that state.
To change the button property values:
\list 1
\li Select \e control in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button
width (\uicontrol W) to \e 500 and height (\uicontrol H)
to \e 100, to match the width of the tag line.
\li In the \uicontrol Control section, deselect the \uicontrol Hover
check box because we don't want the hover effect for the button.
\li Select \e buttonBackground in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Rectangle > \uicontrol {Fill color}, set the color to
transparent light gray (\e #28e7e7e7) in \uicontrol Hex. You can
also use the \l{Picking Colors}{color picker} to set the color.
\li In \uicontrol {Border Color}, select white (\e #ffffff).
\li In \uicontrol Radius, enter \e 50 to give the button
rounded corners.
\li Select \e textItem in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Character > \uicontrol Font, select
\e {Titillium Web ExtraLight}.
\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
align the text horizontally to the left.
\li In \uicontrol Padding > \uicontrol Horizontal >
\uicontrol Left, set the padding in the field between background
border and text to \e 50.
\image loginui1-text-properties-button.png "Text properties"
\li In the \uicontrol States view, select the \e normal state and
repeat the changes in the background color and text properties,
as necessary. Repeat for the \e down state.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
Your button should now look something like this:
\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.
\section1 Adding Entry Fields to the UI
You will now add EntryField instances to the UI and modify their properties.
\list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects
to open it in the \uicontrol {2D} view.
\li Drag-and-drop two instances of the EntryField component from
\uicontrol Components > \uicontrol {My Components} to the rectangle
in \uicontrol Navigator.
\image loginui1-library.jpg "My Components tab of Components view"
\li Select the first EntryField instance in \uicontrol Navigator
to modify its ID and text in \uicontrol Properties.
\li In \uicontrol Component > \uicontrol ID, enter \e username.
\li In \uicontrol {Button Content} > \uicontrol Text, enter
\e {Username or Email} and select \uicontrol tr to mark the text
\l {Internationalization and Localization with Qt Quick}
{translatable}.
\li Select the second EntryField instance, and change its ID to
\e password and text to \e Password. Again, mark the text
translatable.
\li Move the cursor on the selected button instance to make the
selection icon appear. You can now drag the button instance
to another position in the \uicontrol {2D} view. Use the
guidelines to align the button instances below the tag line:
\image loginui1-align-buttons.jpg
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
\section1 Creating Another Button
We want to center-align the text of two additional push buttons and use
brighter colors for them, so we create a second button component as
instructed in \l{Creating a Push Button}. This time we call it
\e PushButton.
To make the changes apply to all the PushButton instances, you
must make them in the \e PushButton.ui.qml file.
To change the button property values:
\list 1
\li Select \e control in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button
width (\uicontrol W) to \e 500 and height (\uicontrol H)
to \e 100.
\li In the \uicontrol Control section, deselect the \uicontrol Hover
check box because we don't want the hover effect for the button.
\li Select \e buttonBackground in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Rectangle > \uicontrol {Border color}, select the
green used in the logo (\e #41cd52).
\li In \uicontrol Radius, enter \e 50 to give the button rounded
corners.
\li Select \e textItem in \uicontrol Navigator to display
its properties in \uicontrol Properties.
\li In \uicontrol Character > \uicontrol Font, select
\e {Titillium Web ExtraLight}.
\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.
\li Repeat for the \e down state. However, in \uicontrol Rectangle >
\uicontrol {Fill color}, set the color to green (\e #41cd52) to
turn the button background green when the button is pressed down.
Also, in \uicontrol Text > \uicontrol Character >
\uicontrol {Text color}, keep the text color as white (\e #ffffff).
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
\section1 Adding Push Buttons to the UI
You will now add PushButton instances to the UI and modify their properties.
\list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects
to open it in the \uicontrol {2D} view.
\li Drag-and-drop two instances of the PushButton component from
\uicontrol Components > \uicontrol {My Components} to the rectangle
in \uicontrol Navigator.
\li Drag the button instances to the bottom of the background image in
the \uicontrol {2D} view. Use the guidelines to align the button
instances horizontally with the entry fields.
\li Select the first PushButton instance in \uicontrol Navigator
to modify its ID and text label in \uicontrol Properties.
\li In \uicontrol Component > \uicontrol ID, enter \e login.
\li In \uicontrol {Button Content} > \uicontrol Text, enter
\e Continue and select \uicontrol tr to mark the text
translatable.
\li Select the second PushButton instance, and change its ID to
\e createAccount and text label to \e {Create Account}. Again,
mark the text translatable.
\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 \uicontrol {2D} view and live preview:
\image loginui1-ready.jpg "The finished UI in the 2D view"
\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. a UI. The files are listed in the \l{File System} view.
\image loginui1-project-files.png \image loginui1-project-files.png
\list \list
\li The \e {loginui1.qmlproject} project file defines that all \li The \e {loginui1.qmlproject} project file defines that all
component, JavaScript, and image files in the project folder belong component, JavaScript, and image files in the project folder belong
@@ -124,103 +425,14 @@
\e EventListSimulator.qml files are not used in this example, so \e EventListSimulator.qml files are not used in this example, so
you can ignore them for now. you can ignore them for now.
\endlist \endlist
\l{UI Files}{UI files} define a hierarchy of components with a \l{UI Files}{UI files} define a hierarchy of components with a
highly-readable, structured layout. Every UI file consists of two parts: highly-readable, structured layout. Every UI file consists of two parts:
an imports section and an component declaration section. The components and an imports section and an component declaration section. The components and
functionality most common to UIs are provided in the \c QtQuick import. You 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. can view the code of a \e .ui.qml file in the \l{Code} view.
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 \section2 Components
You will now change the values of the properties of the \l Text component
instance to create a tag line using a custom font. You will add the font
as an asset and set it to be used in the properties of the component.
In addition, you will import a background image and logo as assets and
add them to the page as instances of the \l{Images}{Image} component.
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}
{qt_logo_green_128x128px.png}
\li \l{https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/images/adventurePage.jpg}
{Background image} (\e adventurePage.jpg)
Photo by \l{https://unsplash.com/photos/a2MgJdG6UvE}
{Benjamin DeYoung} on \l{https://unsplash.com}{Unsplash}.
\endlist
You can download the font from
\l{https://fonts.google.com/specimen/Titillium+Web#standard-styles}
{Titillium Web ExtraLight font} or use Arial as a substitute.
To add the assets:
\list 1
\li Select \uicontrol Assets > \inlineimage icons/plus.png
.
\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.
\li Select \uicontrol OK.
\endlist
To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \uicontrol {2D}
view toolbar or press \key {Alt+P}.
The \e Screen01.ui.qml file that the wizard template created for you should
be open in the \uicontrol Design mode. If it is not, you can double-click it
in the \uicontrol Projects view to open it.
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.
\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
value of \l Properties > \uicontrol Image > \uicontrol Source.
\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.
\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
in \uicontrol Navigator to move the text as the last item in the
component tree structure. The text should then appear on top
of the background.
\li Edit text properties in \uicontrol Properties:
\list a
\li In \uicontrol Component > \uicontrol ID, enter the ID
\e tagLine.
\li In \uicontrol Character > \uicontrol Text, enter the tag
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 {Text color}, set the text color to white
(\e #ffffff).
\endlist
\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 \uicontrol {2D} view
and live preview:
\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 \QDS provides preset \l{glossary-component}{components} for creating
UIs, including components for creating and animating visual components, UIs, including components for creating and animating visual components,
@@ -287,40 +499,7 @@
component, also available in \uicontrol Components > component, also available in \uicontrol Components >
\uicontrol {Default Components} > \uicontrol Basic. \uicontrol {Default Components} > \uicontrol Basic.
\section1 Creating a Push Button \section2 UI Controls
You can use another wizard template to create a push button and to add it to
the project. The wizard template creates a reusable button component that
appears in \uicontrol Components > \uicontrol {My Components}.
You can drag-and-drop it to \l Navigator to create button instances and
modify their properties in the \uicontrol Properties view to change their
appearance and functionality.
If you cannot use the wizard template nor the preset
button controls available in \uicontrol Components >
\uicontrol {Qt Quick Controls} to create the kind of push button that you
want, you can create your button from scratch using default components. For
more information, see \l {Creating Buttons} and
\l {Creating Scalable Buttons and Borders}.
To create a push button by using the wizard template:
\list 1
\li Select \uicontrol File > \uicontrol {New File} >
\uicontrol {Qt Quick Controls} >
\uicontrol {Custom Button} > \uicontrol Choose.
\li In the \uicontrol {Component name} field, enter a name for your
button component: \e {EntryField}.
\li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
the button UI file, \e EntryField.ui.qml.
\endlist
Your button should now look something like this in the \uicontrol Design
mode:
\image loginui1-button.png "Button in the Design mode."
\section2 Learn More - UI Controls
The \e {Custom Button} wizard template creates a button component The \e {Custom Button} wizard template creates a button component
based on the \l {Button} control in the \l {Qt Quick Controls} module. It based on the \l {Button} control in the \l {Qt Quick Controls} module. It
@@ -336,174 +515,7 @@
\skipto import \skipto import
\printuntil Controls \printuntil Controls
Next, you will change the appearance of the EntryField component by \section2 Component IDs
modifying its properties.
\section1 Styling the Button
You can now modify the properties of the EntryField component to your
liking. To make the changes apply to all the EntryField instances, you
must make them in the \e EntryField.ui.qml file.
The Custom Button wizard template adds a \e normal state and a \e down state
to change the button background and text color when the button is clicked.
You will now change the colors in all states. When you make changes to the
button in the \e base state, they are automatically applied to the other
states. However, the property values that have been explicitly changed in
the \e normal or \e down state are not changed automatically and you have
to either reset them to the base state or set them separately in that state.
To change the button property values:
\list 1
\li Select \e control in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button
width (\uicontrol W) to \e 500 and height (\uicontrol H)
to \e 100, to match the width of the tag line.
\li In the \uicontrol Control section, deselect the \uicontrol Hover
check box because we don't want the hover effect for the button.
\li Select \e buttonBackground in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Rectangle > \uicontrol {Fill color}, set the color to
transparent light gray (\e #28e7e7e7) in \uicontrol Hex. You can
also use the \l{Picking Colors}{color picker} to set the color.
\li In \uicontrol {Border Color}, select white (\e #ffffff).
\li In \uicontrol Radius, enter \e 50 to give the button
rounded corners.
\li Select \e textItem in \uicontrol Navigator to display 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
(\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
align the text horizontally to the left.
\li In \uicontrol Padding > \uicontrol Horizontal >
\uicontrol Left, set the padding in the field between background
border and text to \e 50.
\image loginui1-text-properties-button.png "Text properties"
\li In the \uicontrol States view, select the \e normal state and
repeat the changes in the background color and text properties,
as necessary. Repeat for the \e down state.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
Your button should now look something like this:
\image loginui1-entry-field-styled.jpg "Modified button in the 2D view"
Next, you will add instances of the \e EntryField component to the
\e Screen01 component and modify their properties.
\section1 Adding Entry Fields to the UI
You will now add EntryField instances to the UI and modify their properties.
\list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects
to open it in the \uicontrol {2D} view.
\li Drag-and-drop two instances of the EntryField component from
\uicontrol Components > \uicontrol {My Components} to the rectangle
in \uicontrol Navigator.
\image loginui1-library.jpg "My Components tab of Components view"
\li Select the first EntryField instance in \uicontrol Navigator
to modify its ID and text in \uicontrol Properties.
\li In \uicontrol Component > \uicontrol ID, enter \e username.
\li In \uicontrol {Button Content} > \uicontrol Text, enter
\e {Username or Email} and select \uicontrol tr to mark the text
\l {Internationalization and Localization with Qt Quick}
{translatable}.
\li Select the second EntryField instance, and change its ID to
\e password and text to \e Password. Again, mark the text
translatable.
\li Move the cursor on the selected button instance to make the
selection icon appear. You can now drag the button instance
to another position in the \uicontrol {2D} view. Use the
guidelines to align the button instances below the tag line:
\image loginui1-align-buttons.jpg
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
\section1 Creating Another Button
We want to center-align the text of two additional push buttons and use
brighter colors for them, so we create a second button component as
instructed in \l{Creating a Push Button}. This time we call it
\e PushButton.
To make the changes apply to all the PushButton instances, you
must make them in the \e PushButton.ui.qml file.
To change the button property values:
\list 1
\li Select \e control in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button
width (\uicontrol W) to \e 500 and height (\uicontrol H)
to \e 100.
\li In the \uicontrol Control section, deselect the \uicontrol Hover
check box because we don't want the hover effect for the button.
\li Select \e buttonBackground in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Rectangle > \uicontrol {Border color}, select the
green used in the logo (\e #41cd52).
\li In \uicontrol Radius, enter \e 50 to give the button rounded
corners.
\li Select \e textItem in \uicontrol Navigator to display
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 {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.
\li Repeat for the \e down state. However, in \uicontrol Rectangle >
\uicontrol {Fill color}, set the color to green (\e #41cd52) to
turn the button background green when the button is pressed down.
Also, in \uicontrol Text > \uicontrol Character >
\uicontrol {Text color}, keep the text color as white (\e #ffffff).
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
\section1 Adding Push Buttons to the UI
You will now add PushButton instances to the UI and modify their properties.
\list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects
to open it in the \uicontrol {2D} view.
\li Drag-and-drop two instances of the PushButton component from
\uicontrol Components > \uicontrol {My Components} to the rectangle
in \uicontrol Navigator.
\li Drag the button instances to the bottom of the background image in
the \uicontrol {2D} view. Use the guidelines to align the button
instances horizontally with the entry fields.
\li Select the first PushButton instance in \uicontrol Navigator
to modify its ID and text label in \uicontrol Properties.
\li In \uicontrol Component > \uicontrol ID, enter \e login.
\li In \uicontrol {Button Content} > \uicontrol Text, enter
\e Continue and select \uicontrol tr to mark the text
translatable.
\li Select the second PushButton instance, and change its ID to
\e createAccount and text label to \e {Create Account}. Again,
mark the text translatable.
\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 \uicontrol {2D} view and live preview:
\image loginui1-ready.jpg "The finished UI in the 2D view"
\section2 Learn More - Component IDs
Each component and each instance of a component has an \e ID that uniquely 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. identifies it and enables other components' properties to be bound to it.