mirror of
https://github.com/vaadin/framework.git
synced 2024-08-05 08:17:31 +02:00
1d127a0c7f
Fixes #8416
103 lines
3.4 KiB
Plaintext
103 lines
3.4 KiB
Plaintext
---
|
|
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]#++<div>++# elements with a [parameter]#data-location# or
|
|
[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 data-location="username"></div>**</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="right">Password:</td>
|
|
<td>**<div data-location="password"></div>**</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="right" colspan="2">
|
|
**<div data-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>>.
|
|
|
|
[[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("<b>Template</b>".getBytes()));
|
|
----
|
|
|
|
or
|
|
|
|
|
|
[source, java]
|
|
----
|
|
new CustomLayout(new FileInputStream(file));
|
|
----
|