--- /dev/null
+<table width="100%" height="100%">\r
+ <tr height="100%">\r
+ <td>\r
+ <table align="center">\r
+ <tr>\r
+ <td align="right">User name:</td>\r
+ <td><div location="username"></div></td>\r
+ </tr>\r
+ <tr>\r
+ <td align="right">Password:</td>\r
+ <td><div location="password"></div></td>\r
+ </tr>\r
+ </table>\r
+ </td>\r
+ </tr>\r
+ <tr>\r
+ <td align="right" colspan="2"><div location="okbutton"></div></td>\r
+ </tr>\r
+</table>
\ No newline at end of file
--- /dev/null
+<pre>\r
+<table width="100%" height="100%">\r
+ <tr height="100%">\r
+ <td>\r
+ <table align="center">\r
+ <tr>\r
+ <td align="right">User&nbsp;name:</td>\r
+ <td><div location="username"></div></td>\r
+ </tr>\r
+ <tr>\r
+ <td align="right">Password:</td>\r
+ <td><div location="password"></div></td>\r
+ </tr>\r
+ </table>\r
+ </td>\r
+ </tr>\r
+ <tr>\r
+ <td align="right" colspan="2"><div location="okbutton"></div></td>\r
+ </tr>\r
+</table>\r
+</pre>
\ No newline at end of file
import com.itmill.toolkit.demo.sampler.features.dates.DatePopup;
import com.itmill.toolkit.demo.sampler.features.dates.DateResolution;
import com.itmill.toolkit.demo.sampler.features.form.FormBasic;
+import com.itmill.toolkit.demo.sampler.features.layouts.ApplicationLayout;
+import com.itmill.toolkit.demo.sampler.features.layouts.CustomLayouts;
import com.itmill.toolkit.demo.sampler.features.layouts.ExpandingComponent;
import com.itmill.toolkit.demo.sampler.features.layouts.GridLayoutBasic;
import com.itmill.toolkit.demo.sampler.features.layouts.HorizontalLayoutBasic;
import com.itmill.toolkit.demo.sampler.features.layouts.LayoutSpacing;
import com.itmill.toolkit.demo.sampler.features.layouts.SplitPanelBasic;
import com.itmill.toolkit.demo.sampler.features.layouts.VerticalLayoutBasic;
+import com.itmill.toolkit.demo.sampler.features.layouts.WebLayout;
import com.itmill.toolkit.demo.sampler.features.link.LinkCurrentWindow;
import com.itmill.toolkit.demo.sampler.features.link.LinkNoDecorations;
import com.itmill.toolkit.demo.sampler.features.link.LinkSizedWindow;
new LayoutAlignment(), //
new ExpandingComponent(), //
new SplitPanelBasic(), //
+ new WebLayout(), //
+ new ApplicationLayout(), //
+ new CustomLayouts(), //
});
}
}
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.layouts;\r
+\r
+import com.itmill.toolkit.demo.sampler.APIResource;\r
+import com.itmill.toolkit.demo.sampler.Feature;\r
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
+\r
+public class ApplicationLayout extends Feature {\r
+\r
+ @Override\r
+ public String getName() {\r
+ return "Application-style layout";\r
+ }\r
+\r
+ @Override\r
+ public String getDescription() {\r
+ return "Application-style layout refers to a layout style where the"\r
+ + " Toolkit application is designed to look similar to a traditional"\r
+ + " desktop application. Basically this means that the application"\r
+ + " should usually fill the whole window with UI elements, and it"\r
+ + " should also resize gracefully and resonably."\r
+ + "<br>Please click the button for a demo in a new window.";\r
+ }\r
+\r
+ @Override\r
+ public APIResource[] getRelatedAPI() {\r
+ return new APIResource[] { new APIResource(HorizontalLayout.class),\r
+ new APIResource(VerticalLayout.class) };\r
+ }\r
+\r
+ @Override\r
+ public Class[] getRelatedFeatures() {\r
+ return new Class[] { WebLayout.class, CustomLayouts.class };\r
+ }\r
+\r
+ @Override\r
+ public NamedExternalResource[] getRelatedResources() {\r
+ return null;\r
+ }\r
+}\r
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.layouts;\r
+\r
+import java.net.URL;\r
+\r
+import com.itmill.toolkit.demo.sampler.ExampleUtil;\r
+import com.itmill.toolkit.terminal.ExternalResource;\r
+import com.itmill.toolkit.ui.AbstractSelect;\r
+import com.itmill.toolkit.ui.Button;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
+import com.itmill.toolkit.ui.Label;\r
+import com.itmill.toolkit.ui.TabSheet;\r
+import com.itmill.toolkit.ui.Tree;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
+import com.itmill.toolkit.ui.Window;\r
+import com.itmill.toolkit.ui.Button.ClickEvent;\r
+\r
+public class ApplicationLayoutExample extends VerticalLayout {\r
+\r
+ private URL nativeWindowURL = null;\r
+ private Button b1;\r
+\r
+ public ApplicationLayoutExample() {\r
+ setSpacing(true);\r
+\r
+ b1 = new Button("Open a new window with Application Layout", this,\r
+ "openButtonClick");\r
+ addComponent(b1);\r
+\r
+ }\r
+\r
+ public void openButtonClick(ClickEvent event) {\r
+ if (nativeWindowURL == null) {\r
+ getApplication().addWindow(createWindow());\r
+ }\r
+ getApplication().getMainWindow().open(\r
+ new ExternalResource(nativeWindowURL), "_blank");\r
+ }\r
+\r
+ /*\r
+ * Create new window which contains the layout obtained from\r
+ * createDemoLayout()\r
+ */\r
+ private Window createWindow() {\r
+ // Create a new window and add it to the application\r
+ final Window w = new Window("Application Layout example");\r
+ getApplication().addWindow(w);\r
+ // Set the window's layout to the one we get from createDemoLayout()\r
+ w.setLayout(createDemoLayout());\r
+ // Set the layout's size full\r
+ w.getLayout().setSizeFull();\r
+\r
+ nativeWindowURL = w.getURL();\r
+ return w;\r
+ }\r
+\r
+ /*\r
+ * Creates the actual Layout\r
+ */\r
+ private HorizontalLayout createDemoLayout() {\r
+ // Create a new layout\r
+ HorizontalLayout demoLayout = new HorizontalLayout();\r
+ // Enable spacing in the layout\r
+ demoLayout.setSpacing(true);\r
+\r
+ // Create an example tree component, set to full size\r
+ Tree t = new Tree("Hardware Inventory", ExampleUtil\r
+ .getHardwareContainer());\r
+ t.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME);\r
+ t.setItemCaptionMode(AbstractSelect.ITEM_CAPTION_MODE_PROPERTY);\r
+ t.setSizeFull();\r
+\r
+ // Expand the whole tree\r
+ int itemId = t.getContainerDataSource().size();\r
+ for (int i = 0; i < itemId; i++) {\r
+ t.expandItemsRecursively(i);\r
+ }\r
+\r
+ // Create an example tabsheet component with some content\r
+ final TabSheet ts = new TabSheet();\r
+ final Label l1 = new Label(\r
+ "This window shows an example of a so called"\r
+ + " Application-style layout. You probably notice that the layout"\r
+ + " is quite similar to other examples present in the Sampler."\r
+ + " These examples include e.g. SplitPanel and Expanding Components."\r
+ + " Please select one of the other tabs to find out more about"\r
+ + " application-style layouting!");\r
+ l1.setSizeFull();\r
+ final Label l2 = new Label(\r
+ "Typical design principles for an Application-style layout"\r
+ + " follow the design of traditional applications, e.g."\r
+ + " you should fill the whole window with your UI elements."\r
+ + " You should also make it dynamic, so it handles resizing events"\r
+ + " reasonably. In Toolkit, this is generally"\r
+ + " achieved by calling setSizeFull() for a Component."\r
+ + " In this example you may notice that sizes of all the components"\r
+ + " and layouts are set to full. Additionally, an expand ratio is set"\r
+ + " to achieve reasonable component sizes.");\r
+ l2.setSizeFull();\r
+ final Label l3 = new Label(\r
+ "In some cases it is reasonable to set some of the"\r
+ + " sizes by hand, or at least set some limits to the sizes."\r
+ + " For example here an expand ratio of 1:4 has been set for the Tree"\r
+ + " Component and the layout containing the TabSheet component.");\r
+ l3.setSizeFull();\r
+\r
+ // Add tabs to TabSheet with appropriate captions\r
+ ts.addTab(l1);\r
+ ts.setTabCaption(l1, "Example of an Application-style layout");\r
+ ts.addTab(l2);\r
+ ts.setTabCaption(l2, "Principles");\r
+ ts.addTab(l3);\r
+ ts.setTabCaption(l3, "Exceptions");\r
+ // Set the TabSheet to full size.\r
+ ts.setSizeFull();\r
+\r
+ // Create a basic label\r
+ Label commentArea = new Label("Comment area: no comments");\r
+\r
+ // Create an additional VerticalLayout for the TabSheet and the Label\r
+ VerticalLayout tabsAndComments = new VerticalLayout();\r
+ tabsAndComments.setSizeFull();\r
+ tabsAndComments.addComponent(ts);\r
+ tabsAndComments.addComponent(commentArea);\r
+\r
+ // Add the components to the layout\r
+ demoLayout.addComponent(t);\r
+ demoLayout.addComponent(tabsAndComments);\r
+\r
+ // Set expand ratios to the components\r
+ demoLayout.setExpandRatio(t, 1);\r
+ demoLayout.setExpandRatio(tabsAndComments, 3);\r
+\r
+ return demoLayout;\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.layouts;\r
+\r
+import com.itmill.toolkit.demo.sampler.APIResource;\r
+import com.itmill.toolkit.demo.sampler.Feature;\r
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;\r
+import com.itmill.toolkit.ui.CustomLayout;\r
+\r
+public class CustomLayouts extends Feature {\r
+\r
+ @Override\r
+ public String getName() {\r
+ return "Custom layout";\r
+ }\r
+\r
+ @Override\r
+ public String getDescription() {\r
+ return "With the CustomLayout component, you can write your layout"\r
+ + " as a template in XHTML that provides locations of any contained"\r
+ + " components. The layout template must be included in a theme. This"\r
+ + " separation allows the layout to be designed separately from code,"\r
+ + " for example using WYSIWYG web designer tools."\r
+ + "<br>The client-side engine of IT Mill Toolkit will replace contents"\r
+ + " of the location elements with the components. The components are"\r
+ + " bound to the location elements by the location identifier given to"\r
+ + " addComponent().";\r
+ }\r
+\r
+ @Override\r
+ public APIResource[] getRelatedAPI() {\r
+ return new APIResource[] { new APIResource(CustomLayout.class) };\r
+ }\r
+\r
+ @Override\r
+ public Class[] getRelatedFeatures() {\r
+ return new Class[] { WebLayout.class, ApplicationLayout.class };\r
+ }\r
+\r
+ @Override\r
+ public NamedExternalResource[] getRelatedResources() {\r
+ return new NamedExternalResource[] { new NamedExternalResource(\r
+ "XHTML for the custom layout", getThemeBase()\r
+ + "layouts/examplecustomlayout_forviewing.html") };\r
+ }\r
+}\r
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.layouts;\r
+\r
+import com.itmill.toolkit.ui.Button;\r
+import com.itmill.toolkit.ui.CustomLayout;\r
+import com.itmill.toolkit.ui.TextField;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
+\r
+public class CustomLayoutsExample extends VerticalLayout {\r
+\r
+ public CustomLayoutsExample() {\r
+ // Create the custom layout and set it as a component in\r
+ // the current layout\r
+ CustomLayout custom = new CustomLayout("examplecustomlayout");\r
+ addComponent(custom);\r
+\r
+ // Create components and bind them to the location tags\r
+ // in the custom layout.\r
+ TextField username = new TextField();\r
+ custom.addComponent(username, "username");\r
+\r
+ TextField password = new TextField();\r
+ custom.addComponent(password, "password");\r
+\r
+ Button ok = new Button("Login");\r
+ custom.addComponent(ok, "okbutton");\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.layouts;\r
+\r
+import com.itmill.toolkit.demo.sampler.APIResource;\r
+import com.itmill.toolkit.demo.sampler.Feature;\r
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
+\r
+public class WebLayout extends Feature {\r
+\r
+ @Override\r
+ public String getName() {\r
+ return "Web-style layout";\r
+ }\r
+\r
+ @Override\r
+ public String getDescription() {\r
+ return "Web-style layout refers to a layout style where the"\r
+ + " content 'pushes' the layout to a reasonable size."\r
+ + " In some cases you should also define some limits for"\r
+ + " this 'pushing' so that the layout will stay reasonable."\r
+ + "<br>Please click the button for a demo in a new window.";\r
+ }\r
+\r
+ @Override\r
+ public APIResource[] getRelatedAPI() {\r
+ return new APIResource[] { new APIResource(HorizontalLayout.class),\r
+ new APIResource(VerticalLayout.class) };\r
+ }\r
+\r
+ @Override\r
+ public Class[] getRelatedFeatures() {\r
+ return new Class[] { ApplicationLayout.class, CustomLayouts.class };\r
+ }\r
+\r
+ @Override\r
+ public NamedExternalResource[] getRelatedResources() {\r
+ return null;\r
+ }\r
+}\r
--- /dev/null
+package com.itmill.toolkit.demo.sampler.features.layouts;\r
+\r
+import java.net.URL;\r
+\r
+import com.itmill.toolkit.demo.sampler.ExampleUtil;\r
+import com.itmill.toolkit.terminal.ExternalResource;\r
+import com.itmill.toolkit.ui.AbstractSelect;\r
+import com.itmill.toolkit.ui.Button;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
+import com.itmill.toolkit.ui.Label;\r
+import com.itmill.toolkit.ui.TabSheet;\r
+import com.itmill.toolkit.ui.Tree;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
+import com.itmill.toolkit.ui.Window;\r
+import com.itmill.toolkit.ui.Button.ClickEvent;\r
+\r
+public class WebLayoutExample extends VerticalLayout {\r
+\r
+ private URL nativeWindowURL = null;\r
+ private Button b1;\r
+\r
+ public WebLayoutExample() {\r
+ setSpacing(true);\r
+\r
+ b1 = new Button("Open a new window with Web Layout", this,\r
+ "openButtonClick");\r
+ addComponent(b1);\r
+\r
+ }\r
+\r
+ public void openButtonClick(ClickEvent event) {\r
+ if (nativeWindowURL == null) {\r
+ getApplication().addWindow(createWindow());\r
+ }\r
+ getApplication().getMainWindow().open(\r
+ new ExternalResource(nativeWindowURL), "_blank");\r
+ }\r
+\r
+ /*\r
+ * Create new window which contains the layout obtained from\r
+ * createDemoLayout()\r
+ */\r
+ private Window createWindow() {\r
+ // Create a new window and add it to the application\r
+ final Window w = new Window("Web Layout example");\r
+ getApplication().addWindow(w);\r
+ // Set the window's layout to the one we get from createDemoLayout()\r
+ w.setLayout(createDemoLayout());\r
+ // Set the layout's size undefined\r
+ w.getLayout().setSizeUndefined();\r
+\r
+ nativeWindowURL = w.getURL();\r
+ return w;\r
+ }\r
+\r
+ /*\r
+ * Creates the actual Layout\r
+ */\r
+ private HorizontalLayout createDemoLayout() {\r
+ // Create a new layout\r
+ HorizontalLayout demoLayout = new HorizontalLayout();\r
+ // Enable spacing in the layout\r
+ demoLayout.setSpacing(true);\r
+\r
+ // Create an example tree component, set to undefined size\r
+ Tree t = new Tree("Hardware Inventory", ExampleUtil\r
+ .getHardwareContainer());\r
+ t.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME);\r
+ t.setItemCaptionMode(AbstractSelect.ITEM_CAPTION_MODE_PROPERTY);\r
+ t.setSizeUndefined();\r
+\r
+ // Expand the whole tree\r
+ int itemId = t.getContainerDataSource().size();\r
+ for (int i = 0; i < itemId; i++) {\r
+ t.expandItemsRecursively(i);\r
+ }\r
+\r
+ // Create an example tabsheet component with some content\r
+ final TabSheet ts = new TabSheet();\r
+ final Label l1 = new Label(\r
+ "This window shows an example of a so called"\r
+ + " Web-style layout. You probably notice that the layout"\r
+ + " is quite different than the Application-style layout."\r
+ + " Please select one of the other tabs to find out more!");\r
+ l1.setSizeUndefined();\r
+ final Label l2 = new Label(\r
+ "Typical design principles for a Web-style layout"\r
+ + " state that the content should 'push' the layout"\r
+ + " to reach adequate proportions. In Toolkit, this is"\r
+ + " achieved by calling setSizeUndefined() for a Component."\r
+ + " In this example you may notice that the width of the Tree"\r
+ + " component is set by the content of it. Also, the width of"\r
+ + " the Tabsheet is set by the combined width of the tab captions.");\r
+ l2.setSizeUndefined();\r
+ final Label l3 = new Label(\r
+ "In some cases it is reasonable to set some of the"\r
+ + " sizes by hand, or at least set some limits to the sizes."\r
+ + " For example here the height of the TabSheet component has"\r
+ + " been set to a fixed 200 pixels. Also, in some cases setting"\r
+ + " the base layout of the window to be of undefined size does not"\r
+ + " produce very good results.");\r
+ l3.setSizeUndefined();\r
+ ts.addTab(l1);\r
+ ts.setTabCaption(l1, "Example of a Web-style layout");\r
+ ts.addTab(l2);\r
+ ts.setTabCaption(l2, "Principles");\r
+ ts.addTab(l3);\r
+ ts.setTabCaption(l3, "Exceptions");\r
+ // Set the TabSheet width undefined. Also set a defined height.\r
+ ts.setSizeUndefined();\r
+ ts.setHeight(200, UNITS_PIXELS);\r
+\r
+ // Create a basic label\r
+ Label commentArea = new Label("Comment area: no comments");\r
+\r
+ // Create an additional VerticalLayout for the TabSheet and the Label\r
+ VerticalLayout tabsAndComments = new VerticalLayout();\r
+ tabsAndComments.setSizeUndefined();\r
+ tabsAndComments.addComponent(ts);\r
+ tabsAndComments.addComponent(commentArea);\r
+\r
+ // Add the components to the layout\r
+ demoLayout.addComponent(t);\r
+ demoLayout.addComponent(tabsAndComments);\r
+\r
+ return demoLayout;\r
+ }\r
+}
\ No newline at end of file
projects / vaadin-framework.git / commitdiff
