1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
|
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\ingroup gstutorials
\page design-viewer-single-page-navigation.html
\brief Illustrates how to create a single-page navigation web
application that you can run in Qt Design Viewer.
\title Creating a single-page navigation web application
This tutorial explains how you can create a single-page navigation web
application suitable to run in Qt Design Viewer. In this project,
you create the structure and navigation for the web application.
\section1 Setting up the project
In the \QDS Welcome screen, select \uicontrol {Create Project}.
Then, in the \uicontrol Presets tab, select > \uicontrol Desktop > \uicontrol Launcher,
and set:
\list
\li \uicontrol Resolution to 1024 x 768.
\li \uicontrol {Qt Target Version} to 6.2.
\endlist
Next, remove the unneeded components from the new project.
In \uicontrol Navigator:
\list 1
\li Select and delete \e Text.
\li Select \e Rectangle and in \uicontrol Properties, set
\uicontrol {Fill color} to #ffffff.
\endlist
\section1 Adding components
Next, add the needed components to create the structure for your
web application.
First, to add the needed components to \uicontrol Components, add the
\uicontrol {QtQuick Layouts} module to your project:
\list 1
\li In \uicontrol Components, select
\imageplus.
\li Select \uicontrol {QtQuick.Layouts}.
\endlist
Next, drag the following components from \uicontrol Components to
\uicontrol Navigator:
\list 1
\li A \uicontrol Rectangle to the root \e Rectangle.
\li A \uicontrol Row component to the new \e rectangle component.
\li Three \uicontrol Button components to \e Row.
\li A \uicontrol Flickable to the new \e rectangle.
\li A \uicontrol {Column Layout} to \e Flickable.
\endlist
\image web-navigation-components.png {The added components in the Navigator view.}
\section1 Creating the pages
Next, create separate pages for \e Home, \e {About Us}, and \e {Contact Us} pages of
your web application. Create each page as a separate component and then add ithem to
the main application.
To create the first page:
\list 1
\li Go to \uicontrol File > \uicontrol {New File}.
\li On the \uicontrol {Qt Quick Files} tab,
select the \uicontrol {Qt Quick File} wizard template.
\li Select \uicontrol {Choose} and enter a name, for example, \e Page1.
\li Set \uicontrol {Root Item} to \e Rectangle.
\endlist
\image {web-navigation-new-file.png} {Creating a new page using the Qt Quick File wizard template.}
When you have created the new page, select \e rectangle in
\uicontrol Navigator, and in the \uicontrol Properties view:
\list
\li Set \uicontrol Size > \uicontrol H to 1024.
\li Next to \uicontrol Size > \uicontrol W, select
\imageactionicon, and select \uicontrol Reset.
\endlist
Next, create a header for the page:
\list 1
\li From \uicontrol Components, drag a \uicontrol Text component
to \e Rectangle in \uicontrol Navigator.
\li In \uicontrol Properties, go to the \uicontrol Text tab and set:
\list
\li \uicontrol Text to \e Welcome.
\li \uicontrol {Style Name} to Bold.
\li \uicontrol Size to 32 px.
\endlist
\li On the \uicontrol Layout tab set the anchors and margins to:
\list
\li Top, 100
\li Left, 50
\endlist
\image {web-navigation-page-margins.png} {Setting the anchors and margins in the Layout tab of the Properties view.}
\endlist
Now, with the first page done, create two more pages in the same way. For these
pages, set the text to \e {About Us} and \e {Contact Us} respectively.
You can change the file that you are working on from the dropdown menu in the
toolbar. Now, select \e Screen01.ui.qml from this menu to go back to your
main page.
\image {web-navigation-change-file.png} {Changing between files using the dropdown menu.} {Changing the file in top toolbar.}
You can see the pages you created under \uicontrol {My Components} in the
\uicontrol Components view. To edit a component, right-click it in
\uicontrol Components and select \uicontrol {Edit Component}
\image {web-navigation-page-components.png} {The newly created pages in My Components in the Components view.}
\section1 Organizing the pages
To organize the pages vertically:
\list 1
\li From \uicontrol Components, drag each of the pages to
\e columnLayout in \uicontrol Navigator.
\image {web-navigation-components-2.png} {The added components in the Navigator view.}
\li Select \e columnLayout in Navigator and in \uicontrol Properties:
\list
\li Next to \uicontrol Size > \uicontrol W and \uicontrol Size >
\uicontrol H, select \imageactionicon
and select \uicontrol Reset.
\li Set \uicontrol {Column Spacing} to 0.
\endlist
\li Select \e flickable in \uicontrol Navigator, and in \uicontrol Properties:
\list
\li Next to \uicontrol Size > \uicontrol W and \uicontrol Size >
\uicontrol H, select \imageactionicon
and select \uicontrol Reset.
\li Set \uicontrol {Content size} > \uicontrol H to 3072.
\li On the \uicontrol Layout tab, select
\uicontrol {Fill parent component}.
\endlist
\endlist
You must also create a scrollbar to scroll the web application. You create
vertical and horizontal scrollbars that are visible only when the content
doesn't fit in the window, similar to web browser scrollbars.
To create the scrollbar, go to the \uicontrol Code view and enter the scrollbar
code inside the \e Flickable component:
\code
Flickable {
id: flickable
anchors.fill: parent
contentHeight: 3072
ScrollBar.vertical: ScrollBar {
policy: flickable.contentHeight > flickable.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
width: 20
}
ScrollBar.horizontal: ScrollBar {
policy: flickable.contentWidth > flickable.width ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
height: 20
}
...
\endcode
To align the scrollbar to the right and bottom side of the window, set the height and width of
the main rectangle, so that it adapts to the window size:
\list 1
\li In \uicontrol Navigator, select \e Rectangle.
\li In \uicontrol Properties, select
\imageactioniconbinding
next to \uicontrol Width and select \uicontrol {Set Binding}.
\li Enter \c {Window.width}
\image {web-navigation-size-binding.png} {Window.width set in Binding Editor.}
\li Repeat step 2 and 3 for \uicontrol Height and set the value to
\c {Window.height}.
\endlist
\section1 Creating the navigation
For the final step of the tutorial, create the navigation for the web page using the buttons
that you created earlier.
First, create an animation to use when scrolling between the different pages:
\list 1
\li From \uicontrol Components, drag a \uicontrol {Number Animation} to
\e Rectangle in \uicontrol Navigator.
\li In \uicontrol Properties, set:
\list
\li \uicontrol Target to \e flickable.
\li \uicontrol Property to \e contentY.
\li \uicontrol Duration to \e 200.
\endlist
\endlist
Next, connect the buttons to the number animation to scroll the content
vertically to the correct place:
\list 1
\li In \uicontrol Navigator, select \e rectangle and in \uicontrol Properties
set:
\list
\li \uicontrol Height to 40.
\li \uicontrol {Fill color} to #e0e0e0.
\li \uicontrol {Z stack} to 1.
\endlist
\li Select \imageactioniconbinding
next to \uicontrol Width and select \uicontrol {Set Binding}.
\li Enter \c {parent.width}.
\image {web-navigation-size-binding-2.png} {parent.width set in Binding Editor.}
\li In \uicontrol Navigator:
\list 1
\li Select \e Button and on the \uicontrol Button tab in \uicontrol Properties,
set \uicontrol Text to \e {Home}.
\li Select \e Button1 and on the \uicontrol Button tab in \uicontrol Properties,
set \uicontrol Name to \e {About Us}.
\li Select \e Button2 and on the \uicontrol Button tab in \uicontrol Properties,
set \uicontrol Name to \e {Contact Us}.
\endlist
\li In \uicontrol Code, enter \e connections for each of the buttons to run
the number animation when pressed.
\code
Button {
id: button
text: qsTr("Home")
Connections {
target: button
onPressed: {
numberAnimation.to = 0
numberAnimation.start()
}
}
}
Button {
id: button1
text: qsTr("About Us")
Connections {
target: button1
onPressed: {
numberAnimation.to = 1024
numberAnimation.start()
}
}
}
Button {
id: button2
text: qsTr("Contact Us")
Connections {
target: button2
onPressed: {
numberAnimation.to = 2048
numberAnimation.start()
}
}
}
\endcode
\endlist
\section1 Previewing the application
To preview your application in \uicontrol {Live Preview}, select \key Alt + \key P. You
can also go to \uicontrol File > \uicontrol {Share Application Online} to
share and preview your application in a web browser.
*/
|
