diff options
Diffstat (limited to 'documentation/layout/layout-customlayout.asciidoc')
| -rw-r--r-- | documentation/layout/layout-customlayout.asciidoc | 100 |
1 files changed, 0 insertions, 100 deletions
diff --git a/documentation/layout/layout-customlayout.asciidoc b/documentation/layout/layout-customlayout.asciidoc deleted file mode 100644 index e5acff75d1..0000000000 --- a/documentation/layout/layout-customlayout.asciidoc +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Custom Layouts -order: 14 -layout: page ---- - -[[layout.customlayout]] -= Custom Layouts - -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]#WebContent/VAADIN/themes/# folder, for example, -[filename]#WebContent/VAADIN/themes/__themename/layouts/mylayout.html__#. -(Notice that the root path [filename]#WebContent/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]#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>>. - -[[figure.layout.customlayout]] -.Example of a Custom Layout Component -image::img/customlayout-example1.png[] - -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)); ----- - - - |