|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- ---
- 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));
- ----
|