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
277
278
279
280
281
282
283
284
285
286
287
288
289
|
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\page design-viewer-single-page-navigation.html
\previouspage qt-design-viewer.html
\nextpage studio-exporting-and-importing.html
\title Creating a Single Page Navigation Web Application
This example 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
To set up the project:
\list 1
\li
In \QDS, create a new project where you set:
\list
\li \uicontrol Preset to \uicontrol Desktop > \uicontrol Launcher.
\li \uicontrol Resolution to 1024 x 768.
\li \uicontrol {Target Version} to 6.2.
\endlist
\li In \uicontrol Navigator:
\list
\li Select and delete \e Text.
\li Select \e Rectangle and in \uicontrol Properties, set
\uicontrol {Fill color} to #ffffff.
\endlist
\endlist
\section1 Adding Components
Next, add the needed components to create the structure for your web
application.
Add the \uicontrol {QtQuick Layouts} module:
\list 1
\li In \uicontrol Components, select
\inlineimage icons/plus.png
\li Select \uicontrol {QtQuick.Layouts}.
\endlist
To add the structure for the web application,
drag and drop the following components from \uicontrol Components
to \e rectangle in \uicontrol Navigator.
\list
\li \uicontrol Rectangle
\list
\li \uicontrol Rectangle
\list
\li \uicontrol Row
\list
\li \uicontrol Button
\li \uicontrol Button
\li \uicontrol Button
\endlist
\endlist
\li \uicontrol Flickable
\list
\li \uicontrol ColumnLayout
\endlist
\endlist
\endlist
\image web-navigation-components.png
\section1 Creating the Pages
Next, create the separate pages for your web application. In this example,
you create pages for \e Home, \e {About Us}, and \e {Contact Us}.
You create each page as a separate component and then add it 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 \uicontrol {Qt Quick File}.
\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
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
\inlineimage icons/action-icon.png
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
\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 drop-down 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
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
\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
\li Select \e columnLayout in Navigator and in \uicontrol Properties:
\list
\li Next to \uicontrol Size > \uicontrol W and \uicontrol Size >
\uicontrol H, select \inlineimage icons/action-icon.png
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 \inlineimage icons/action-icon.png
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
\inlineimage icons/action-icon-binding.png
next to \uicontrol Width and select \uicontrol {Set Binding}.
\li Enter \c {Window.width}
\image web-navigation-size-binding.png
\li Repeat step 2 and 3 for \uicontrol Height and set the value to
\c {Window.height}.
\endlist
\section1 Creating the Navigation
The final step is to create the navigation for the web page. To do this, use 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 \inlineimage icons/action-icon-binding.png
next to \uicontrol Width and select \uicontrol {Set Binding}.
\li Enter \c {parent.width}.
\image web-navigation-size-binding-2.png
\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 the 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.
*/
|
