From 2af72ba9636bec70046394c41744f89ce4572e35 Mon Sep 17 00:00:00 2001 From: Ilia Motornyi Date: Thu, 3 Dec 2015 14:59:05 +0000 Subject: Revert "Merge branch 'documentation'" This reverts commit f6874bde3d945c8b2d1b5c17ab50e2d0f1f8ff00. Change-Id: I67ee1c30ba3e3bcc3c43a1dd2e73a822791514bf --- documentation/layout/layout-customlayout.asciidoc | 100 ---------------------- 1 file changed, 100 deletions(-) delete mode 100644 documentation/layout/layout-customlayout.asciidoc (limited to 'documentation/layout/layout-customlayout.asciidoc') 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]#++
++# 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[] - -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)); ----- - - - -- cgit v1.2.3