--- title: Custom Layouts order: 14 layout: page --- [[layout.customlayout]] = Custom Layouts ifdef::web[] [.sampler] image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/custom-layout"] endif::web[] While it is possible to create almost any typical layout with the standard layout components, it is sometimes best to separate the layout completely from code. With the [classname]#CustomLayout# component, you can write your layout as a template in HTML that provides locations of any contained components. The layout template is included in a theme. This separation allows the layout to be designed separately from code, for example using WYSIWYG web designer tools such as Adobe Dreamweaver. A template is a HTML file located under [filename]#layouts# folder under a theme folder under the [filename]#/VAADIN/themes/# folder, for example, [filename]#/VAADIN/themes/__themename/layouts/mylayout.html__#. (Notice that the root path [filename]#/VAADIN/themes/# for themes is fixed.) A template can also be provided dynamically from an [classname]#InputStream#, as explained below. A template includes [literal]#++
++# elements with a [parameter]#location# attribute that defines the location identifier. All custom layout HTML-files must be saved using UTF-8 character encoding. [subs="normal"] ---- <table width="100%" height="100%"> <tr height="100%"> <td> <table align="center"> <tr> <td align="right">User&nbsp;name:</td> <td>**<div location="username"></div>**</td> </tr> <tr> <td align="right">Password:</td> <td>**<div location="password"></div>**</td> </tr> </table> </td> </tr> <tr> <td align="right" colspan="2"> **<div location="okbutton">**</div> </td> </tr> </table> ---- The client-side engine of Vaadin will replace contents of the location elements with the components. The components are bound to the location elements by the location identifier given to [methodname]#addComponent()#, as shown in the example below. [source, java] ---- Panel loginPanel = new Panel("Login"); CustomLayout content = new CustomLayout("layoutname"); content.setSizeUndefined(); loginPanel.setContent(content); loginPanel.setSizeUndefined(); // No captions for fields is they are provided in the template content.addComponent(new TextField(), "username"); content.addComponent(new TextField(), "password"); content.addComponent(new Button("Login"), "okbutton"); ---- The resulting layout is shown below in <>. [[figure.layout.customlayout]] .Example of a Custom Layout Component image::img/customlayout-example1.png[width=40%, scaledwidth=70%] You can use [methodname]#addComponent()# also to replace an existing component in the location given in the second parameter. In addition to a static template file, you can provide a template dynamically with the [classname]#CustomLayout# constructor that accepts an [classname]#InputStream# as the template source. For example: [source, java] ---- new CustomLayout(new ByteArrayInputStream("Template".getBytes())); ---- or [source, java] ---- new CustomLayout(new FileInputStream(file)); ---- ='admin-audit-listen-failed-login'>admin-audit-listen-failed-login Nextcloud server, a safe home for all your data: https://github.com/nextcloud/serverwww-data
aboutsummaryrefslogtreecommitdiffstats
path: root/core/Controller/OCJSController.php
blob: 379b08bf22ea968cb64701f777cd3066079623e8 (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