diff options
Diffstat (limited to 'doc/qtdesignstudio/examples/doc/loginui1.qdoc')
| -rw-r--r-- | doc/qtdesignstudio/examples/doc/loginui1.qdoc | 53 |
1 files changed, 27 insertions, 26 deletions
diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc index 976c4923a44..78bc2192b56 100644 --- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc @@ -41,6 +41,9 @@ 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 + \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. @@ -54,24 +57,19 @@ To create a project: \list 1 - \li Select \uicontrol File > \uicontrol {New Project} > - \uicontrol General > \uicontrol {Qt Quick Application - Empty} > - \uicontrol Choose. - \li In the \uicontrol Name field, enter the project name: \e {loginui1}. - When naming your own projects, keep in mind that they cannot be - easily renamed later. - \li In the \uicontrol {Create in} field, enter the path to the folder - where you want to store the project files. You can move project - folders later without problems. - \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 the initial - size of the UI. In this tutorial, we use the predefined size - \e {720 x 1280 (HD)} (portrait) instead of the default size - (landscape). You can easily change the screen size later in - \l Properties. - \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create - the project. + \li Select \uicontrol File > \uicontrol {New Project}. + \li In the \uicontrol Presets tab, select \uicontrol General > + \uicontrol {Empty}. + \li In the \uicontrol Details tab: + \list + \li Enter \e Loginui1 as the name for the project. Keep in mind + that projects cannot be easily renamed later. + \li Select the path for the project files. You can move project + folders later. + \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 Your project should now look something like this in the \uicontrol Design @@ -92,7 +90,7 @@ \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 Projects view. + a UI. The files are listed in the \l{File System} view. \image loginui1-project-files.png @@ -112,6 +110,9 @@ 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. @@ -230,7 +231,7 @@ adds the following \e import statements to the UI files (.ui.qml) that it creates: - \quotefromfile loginui1/Screen01.ui.qml + \quotefromfile Loginui1/Content/Screen01.ui.qml \skipto import \printuntil Controls @@ -333,7 +334,7 @@ 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/EntryField.ui.qml + \quotefromfile Loginui1/Content/EntryField.ui.qml \skipto import \printuntil Controls @@ -364,7 +365,7 @@ 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 the button background in \uicontrol Navigator to display its + \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 @@ -372,7 +373,7 @@ \li In \uicontrol {Border Color}, select white (\e #ffffff). \li In \uicontrol Radius, enter \e 50 to give the button rounded corners. - \li Select the text component in \uicontrol Navigator to display its + \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}. @@ -382,7 +383,7 @@ (\e #ffffff). \li In \uicontrol {Alignment H}, select the \uicontrol Left button to align the text horizontally to the left. - \li In the \uicontrol Padding section > \uicontrol Horizontal > + \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" @@ -450,13 +451,13 @@ 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 the button background in \uicontrol Navigator to display its + \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 the the text component in \uicontrol Navigator to display + \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}. |