--- title: Building the UI order: 2 layout: page --- [[application.architecture]] = Building the UI Vaadin Framework user interfaces are built hierarchically from components, so that the leaf components are contained within layout components and other component containers. Building the hierarchy starts from the top (or bottom - whichever way you like to think about it), from the [classname]#UI# class of the application. You normally set a layout component as the content of the UI and fill it with other components. [source, java] ---- public class MyHierarchicalUI extends UI { @Override protected void init(VaadinRequest request) { // The root of the component hierarchy VerticalLayout content = new VerticalLayout(); content.setSizeFull(); // Use entire window setContent(content); // Attach to the UI // Add some component content.addComponent(new Label("Hello! - How are you?", ContentMode.HTML)); Grid grid = new Grid<>(); grid.setCaption("My Grid"); grid.setItems(GridExample.generateContent()); grid.setSizeFull(); content.addComponent(grid); content.setExpandRatio(grid, 1); // Expand to fill } } ---- The component hierarchy is illustrated in <>. [[figure.application.architecture.schematic]] .Schematic diagram of the UI image::img/ui-schematic.png[width=80%, scaledwidth=100%] The actual UI is shown in <>. [[figure.application.architecture.example]] .Simple hierarchical UI image::img/ui-architecture-hierarchical.png[width=70%, scaledwidth=90%] Instead of building the layout in Java, you can also use a declarative design, as described later in <>. The examples given for the declarative layouts give exactly the same UI layout as built from the components above. The easiest way to create declarative designs is to use Vaadin Designer. The built-in components are described in <> and the layout components in <>. The example application described above just is, it does not do anything. User interaction is handled with event listeners, as described a bit later in <>. [[application.architecture.architecture]] == Application Architecture Once your application grows beyond a dozen or so lines, which is usually quite soon, you need to start considering the application architecture more closely. You are free to use any object-oriented techniques available in Java to organize your code in methods, classes, packages, and libraries. An architecture defines how these modules communicate together and what sort of dependencies they have between them. It also defines the scope of the application. The scope of this book, however, only gives a possibility to mention some of the most common architectural patterns in Vaadin applications. The subsequent sections describe some basic application patterns. For more information about common architectures, see <>, which discusses layered architectures, the Model-View-Presenter (MVP) pattern, and so forth. [[application.architecture.composition]] == Compositing Components User interfaces typically contain many user interface components in a layout hierarchy. Vaadin provides many layout components for laying contained components vertically, horizontally, in a grid, and in many other ways. You can extend layout components to create composite components. [source, java] ---- class MyView extends VerticalLayout { TextField entry = new TextField("Enter this"); Label display = new Label("See this"); Button click = new Button("Click This"); public MyView() { addComponent(entry); addComponent(display); addComponent(click); setSizeFull(); addStyleName("myview"); } } // Create an instance of MyView Layout myview = new MyView(); ---- While extending layouts is an easy way to make component composition, it is a good practice to encapsulate implementation details, such as the exact layout component used. Otherwise, the users of such a composite could begin to rely on such implementation details, which would make changes harder. For this purpose, Vaadin has the special wrappers [classname]#Composite# and [classname]#CustomComponent#, which hide the content representation. [source, java] ---- class MyView extends CustomComponent { TextField entry = new TextField("Enter this"); Label display = new Label("See this"); Button click = new Button("Click This"); public MyView() { Layout layout = new VerticalLayout(); layout.addComponent(entry); layout.addComponent(display); layout.addComponent(click); setCompositionRoot(layout); setSizeFull(); } } // Create an instance of MyView MyView myview = new MyView(); ---- For a more detailed description of [classname]#Composite# and [classname]#CustomComponent#, see <>. [[application.architecture.navigation]] == View Navigation While the simplest applications have just one __view__ (or __screen__), most of them often require several. Even in a single view, you often want to have sub-views, for example to display different content. <> illustrates a typical navigation between different top-level views of an application, and a main view with sub-views. [[figure.application.architecture.navigation]] .Navigation Between Views image::img/view-navigation-hi.png[width=80%, scaledwidth=100%] The [classname]#Navigator# described in <> is a view manager that provides a flexible way to navigate between views and sub-views, while managing the URI fragment in the page URL to allow bookmarking, linking, and going back in the browser history. Often Vaadin application views are part of something bigger. In such cases, you may need to integrate the Vaadin applications with the other website. You can use the embedding techniques described in <>. [[application.architecture.accessing]] == Accessing UI, Page, Session, and Service You can get the UI and the page to which a component is attached to with [methodname]#getUI()# and [methodname]#getPage()#. However, the values are [literal]#++null++# until the component is attached to the UI, and typically, when you need it in constructors, it is not. It is therefore preferable to access the current UI, page, session, and service objects from anywhere in the application using the static [methodname]#getCurrent()# methods in the respective [classname]#UI#, [classname]#Page#, [classname]#VaadinSession#, and [classname]#VaadinService# classes. [source, java] ---- // Set the default locale of the UI UI.getCurrent().setLocale(new Locale("en")); // Set the page title (window or tab caption) Page.getCurrent().setTitle("My Page"); // Set a session attribute VaadinSession.getCurrent().setAttribute("myattrib", "hello"); // Access the HTTP service parameters File baseDir = VaadinService.getCurrent().getBaseDirectory(); ---- You can get the page and the session also from a [classname]#UI# with [methodname]#getPage()# and [methodname]#getSession()# and the service from [classname]#VaadinSession# with [methodname]#getService()#. The static methods use the built-in ThreadLocal support in the classes. ifdef::web[] The pattern is described in <>. endif::web[] e/fix/handle_folders_copy_live_photos Nextcloud server, a safe home for all your data: https://github.com/nextcloud/serverwww-data
aboutsummaryrefslogtreecommitdiffstats
path: root/dist/settings-vue-settings-personal-info.js.license
blob: 04d77517bfe4cca620cf46b3b7a3d7959dd70f49 (plain) 
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
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327

SPDX-License-Identifier: MIT
SPDX-License-Identifier: ISC
SPDX-License-Identifier: GPL-3.0-or-later
SPDX-License-Identifier: BSD-3-Clause
SPDX-License-Identifier: Apache-2.0
SPDX-License-Identifier: AGPL-3.0-or-later
SPDX-License-Identifier: (MPL-2.0 OR Apache-2.0)
SPDX-FileCopyrightText: inherits developers
SPDX-FileCopyrightText: escape-html developers
SPDX-FileCopyrightText: debounce developers
SPDX-FileCopyrightText: catamphetamine <purecatamphetamine@gmail.com>
SPDX-FileCopyrightText: atomiks
SPDX-FileCopyrightText: assert developers
SPDX-FileCopyrightText: Varun A P
SPDX-FileCopyrightText: Tobias Koppers @sokra
SPDX-FileCopyrightText: Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)
SPDX-FileCopyrightText: T. Jameson Little <t.jameson.little@gmail.com>
SPDX-FileCopyrightText: Roman Shtylman <shtylman@gmail.com>
SPDX-FileCopyrightText: Roeland Jago Douma
SPDX-FileCopyrightText: Rob Cresswell <robcresswell@pm.me>
SPDX-FileCopyrightText: Raynos <raynos2@gmail.com>
SPDX-FileCopyrightText: Paul Vorbach <paul@vorba.ch> (http://paul.vorba.ch)
SPDX-FileCopyrightText: Paul Vorbach <paul@vorb.de> (http://vorb.de)
SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
SPDX-FileCopyrightText: Matt Zabriskie
SPDX-FileCopyrightText: Joyent
SPDX-FileCopyrightText: Jordan Harband <ljharb@gmail.com>
SPDX-FileCopyrightText: Jordan Harband
SPDX-FileCopyrightText: John-David Dalton <john.david.dalton@gmail.com> (http://allyoucanleet.com/)
SPDX-FileCopyrightText: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
SPDX-FileCopyrightText: Jeff Sagal <sagalbot@gmail.com>
SPDX-FileCopyrightText: Jacob Clevenger<https://github.com/wheatjs>
SPDX-FileCopyrightText: Iskren Ivov Chernev <iskren.chernev@gmail.com> (https://github.com/ichernev)
SPDX-FileCopyrightText: Iftekhar Rifat
SPDX-FileCopyrightText: Hypercontext
SPDX-FileCopyrightText: Guillaume Chau <guillaume.b.chau@gmail.com>
SPDX-FileCopyrightText: GitHub Inc.
SPDX-FileCopyrightText: Feross Aboukhadijeh
SPDX-FileCopyrightText: Evan You
SPDX-FileCopyrightText: Eugene Sharygin <eush77@gmail.com>
SPDX-FileCopyrightText: Eric Norris (https://github.com/ericnorris)
SPDX-FileCopyrightText: Dr.-Ing. Mario Heiderich, Cure53 <mario@cure53.de> (https://cure53.de/)
SPDX-FileCopyrightText: Denis Pushkarev
SPDX-FileCopyrightText: David Clark
SPDX-FileCopyrightText: Christoph Wurst
SPDX-FileCopyrightText: Chen Fengyuan
SPDX-FileCopyrightText: Austin Andrews
SPDX-FileCopyrightText: Anthony Fu <https://github.com/antfu>
SPDX-FileCopyrightText: Andris Reinman
SPDX-FileCopyrightText: @nextcloud/password-confirmation developers
SPDX-FileCopyrightText: @nextcloud/dialogs developers


This file is generated from multiple sources. Included packages:
- @floating-ui/core
	- version: 1.6.5
	- license: MIT
- @floating-ui/utils
	- version: 0.2.5
	- license: MIT
- @mdi/js
	- version: 7.4.47
	- license: Apache-2.0
- @nextcloud/auth
	- version: 2.4.0
	- license: GPL-3.0-or-later
- @nextcloud/axios
	- version: 2.5.1
	- license: GPL-3.0-or-later
- @nextcloud/browser-storage
	- version: 0.4.0
	- license: GPL-3.0-or-later
- @nextcloud/capabilities
	- version: 1.2.0
	- license: GPL-3.0-or-later
- @nextcloud/dialogs
	- version: 6.0.0
	- license: AGPL-3.0-or-later
- semver
	- version: 7.6.3
	- license: ISC
- @nextcloud/event-bus
	- version: 3.3.1
	- license: GPL-3.0-or-later
- @nextcloud/initial-state
	- version: 2.2.0
	- license: GPL-3.0-or-later
- @nextcloud/l10n
	- version: 3.1.0
	- license: GPL-3.0-or-later
- @nextcloud/logger
	- version: 3.0.2
	- license: GPL-3.0-or-later
- @nextcloud/router
	- version: 2.2.1
	- license: GPL-3.0-or-later
- @nextcloud/moment
	- version: 1.3.1
	- license: GPL-3.0-or-later
- @nextcloud/password-confirmation
	- version: 5.1.1
	- license: MIT
- @nextcloud/router
	- version: 3.0.1
	- license: GPL-3.0-or-later
- @nextcloud/vue-select
	- version: 3.25.1
	- license: MIT
- @nextcloud/vue
	- version: 8.17.1
	- license: AGPL-3.0-or-later
- @vueuse/components
	- version: 11.1.0
	- license: MIT
- @vueuse/core
	- version: 11.1.0
	- license: MIT
- @vueuse/shared
	- version: 11.1.0
	- license: MIT
- assert
	- version: 2.1.0
	- license: MIT
- available-typed-arrays
	- version: 1.0.7
	- license: MIT
- axios
	- version: 1.7.7
	- license: MIT
- base64-js
	- version: 1.5.1
	- license: MIT
- call-bind
	- version: 1.0.7
	- license: MIT
- charenc
	- version: 0.0.2
	- license: BSD-3-Clause
- console-browserify
	- version: 1.2.0
	- license: MIT
- core-js
	- version: 3.38.1
	- license: MIT
- cropperjs
	- version: 1.6.2
	- license: MIT
- crypt
	- version: 0.0.2
	- license: BSD-3-Clause
- css-loader
	- version: 6.11.0
	- license: MIT
- debounce
	- version: 2.1.0
	- license: MIT
- define-data-property
	- version: 1.1.4
	- license: MIT
- define-properties
	- version: 1.2.1
	- license: MIT
- dompurify
	- version: 3.1.6
	- license: (MPL-2.0 OR Apache-2.0)
- es-define-property
	- version: 1.0.0
	- license: MIT
- es-errors
	- version: 1.3.0
	- license: MIT
- escape-html
	- version: 1.0.3
	- license: MIT
- floating-vue
	- version: 1.0.0-beta.19
	- license: MIT
- focus-trap
	- version: 7.6.0
	- license: MIT
- for-each
	- version: 0.3.3
	- license: MIT
- function-bind
	- version: 1.1.2
	- license: MIT
- get-intrinsic
	- version: 1.2.4
	- license: MIT
- gopd
	- version: 1.0.1
	- license: MIT
- has-property-descriptors
	- version: 1.0.2
	- license: MIT
- has-proto
	- version: 1.0.3
	- license: MIT
- has-symbols
	- version: 1.0.3
	- license: MIT
- has-tostringtag
	- version: 1.0.2
	- license: MIT
- hasown
	- version: 2.0.2
	- license: MIT
- ieee754
	- version: 1.2.1
	- license: BSD-3-Clause
- inherits
	- version: 2.0.4
	- license: ISC
- is-arguments
	- version: 1.1.1
	- license: MIT
- is-buffer
	- version: 1.1.6
	- license: MIT
- is-callable
	- version: 1.2.7
	- license: MIT
- is-generator-function
	- version: 1.0.10
	- license: MIT
- is-nan
	- version: 1.3.2
	- license: MIT
- is-typed-array
	- version: 1.1.13
	- license: MIT
- libphonenumber-js
	- version: 1.11.9
	- license: MIT
- linkify-string
	- version: 4.1.3
	- license: MIT
- lodash.get
	- version: 4.4.2
	- license: MIT
- md5
	- version: 2.3.0
	- license: BSD-3-Clause
- moment
	- version: 2.30.1
	- license: MIT
- node-gettext
	- version: 3.0.0
	- license: MIT
- buffer
	- version: 6.0.3
	- license: MIT
- object-is
	- version: 1.1.6
	- license: MIT
- object-keys
	- version: 1.1.1
	- license: MIT
- object.assign
	- version: 4.1.5
	- license: MIT
- inherits
	- version: 2.0.3
	- license: ISC
- util
	- version: 0.10.4
	- license: MIT
- path
	- version: 0.12.7
	- license: MIT
- possible-typed-array-names
	- version: 1.0.0
	- license: MIT
- process
	- version: 0.11.10
	- license: MIT
- set-function-length
	- version: 1.2.2
	- license: MIT
- striptags
	- version: 3.2.0
	- license: MIT
- style-loader
	- version: 3.3.4
	- license: MIT
- tabbable
	- version: 6.2.0
	- license: MIT
- toastify-js
	- version: 1.12.0
	- license: MIT
- unist-builder
	- version: 4.0.0
	- license: MIT
- unist-util-is
	- version: 6.0.0
	- license: MIT
- unist-util-visit-parents
	- version: 6.0.1
	- license: MIT
- unist-util-visit
	- version: 5.0.0
	- license: MIT
- util
	- version: 0.12.5
	- license: MIT
- vue-cropperjs
	- version: 4.2.0
	- license: MIT
- vue-loader
	- version: 15.11.1
	- license: MIT
- vue-material-design-icons
	- version: 5.3.0
	- license: MIT
- vue
	- version: 2.7.16
	- license: MIT
- webpack
	- version: 5.94.0
	- license: MIT
- which-typed-array
	- version: 1.1.15
	- license: MIT
- nextcloud
	- version: 1.0.0
	- license: AGPL-3.0-or-later