-<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
+<!-- \r
+ This customlayout uses inline styles and images as well. Notice that the\r
+ URLs are relatice to the layout, which means you can open the layout offline\r
+ in a WYSIWYG editor (or browser), and the images will work.\r
+ -->\r
+\r
+<table width="400px" align="center" cellspacing="10"\r
+ style="color: #fff; padding: 20px; background: #31629E url(../sampler/sample-desc-bg.png) repeat-x">\r
+ <tr>\r
+ <td colspan="2">\r
+ <h1 style="margin-top: 0;">Login</h1>\r
+ <td>\r
+ </tr>\r
+ <tr>\r
+ <td align="right">User name:</td>\r
+ <td>\r
+ <div location="username"></div>\r
+ </td>\r
+ </tr>\r
+ <tr>\r
+ <td align="right">Password:</td>\r
+ <td>\r
+ <div location="password"></div>\r
+ </td>\r
+ </tr>\r
+ <tr>\r
+ <td align="right" colspan="2">\r
+ <div location="okbutton" style="padding: 10px;"></div>\r
+ </td>\r
+ </tr>\r
+ <tr>\r
+ <td colspan="2" style="padding: 7px; background-color: #4172AE">\r
+ <IMG align="absbottom" src="../icons/icon_info.gif" /> This\r
+ information is in the layout.\r
+ <td>\r
+ </tr>\r
+</table>\r
+\r
+++ /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.terminal.ThemeResource;
public final class ExampleUtil {
+ public static final String lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut massa eget erat dapibus sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a augue. Praesent non elit. Duis sapien dolor, cursus eget, pulvinar eget, eleifend a, est. Integer in nunc. Vivamus consequat ipsum id sapien. Duis eu elit vel libero posuere luctus. Aliquam ac turpis. Aenean vitae justo in sem iaculis pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sit amet mi. "
+ + "<br/>"
+ + "Aenean auctor, mi sit amet ultricies pulvinar, dui urna adipiscing odio, ut faucibus odio mauris eget justo. Mauris quis magna quis augue interdum porttitor. Sed interdum, tortor laoreet tincidunt ullamcorper, metus velit hendrerit nunc, id laoreet mauris arcu vitae est. Nulla nec nisl. Mauris orci nibh, tempor nec, sollicitudin ac, venenatis sed, lorem. Quisque dignissim tempus erat. Maecenas molestie, pede ac ultrices interdum, felis neque vulputate quam, in sodales felis odio quis mi. Aliquam massa pede, pharetra quis, tincidunt quis, fringilla at, mauris. Vestibulum a massa. Vestibulum luctus odio ut quam. Maecenas congue convallis diam. Cras urna arcu, vestibulum vitae, blandit ut, laoreet id, risus. Ut condimentum, arcu sit amet placerat blandit, augue nibh pretium nunc, in tempus sem dolor non leo. Etiam fringilla mauris a odio. Nunc lorem diam, interdum eget, lacinia in, scelerisque sit amet, purus. Nam ornare. "
+ + "<br/>"
+ + "Donec placerat dui ut orci. Phasellus quis lacus at nisl elementum cursus. Cras bibendum egestas nulla. Phasellus pulvinar ullamcorper odio. Etiam ipsum. Proin tincidunt. Aliquam aliquet. Etiam purus odio, commodo sed, feugiat volutpat, scelerisque molestie, velit. Aenean sed sem sit amet libero sodales ultrices. Donec dictum, arcu sed iaculis porttitor, est mauris pulvinar purus, sit amet porta purus neque in risus. Mauris libero. Maecenas rhoncus. Morbi quis nisl. "
+ + "<br/>"
+ + "Vestibulum laoreet tortor eu elit. Cras euismod nulla eu sapien. Sed imperdiet. Maecenas vel sapien. Nulla at purus eu diam auctor lobortis. Donec pede eros, lacinia tincidunt, tempus eu, molestie nec, velit. Nullam ipsum odio, euismod non, aliquet nec, consequat ac, felis. Duis fermentum mauris sed justo. Suspendisse potenti. Praesent at libero sit amet ipsum imperdiet fermentum. Aliquam enim nisl, dictum id, lacinia sit amet, elementum posuere, ipsum. Integer luctus dictum libero. Pellentesque sed pede sed nisl bibendum porttitor. Phasellus tempor interdum nisi. Mauris nec magna. Phasellus massa pede, vehicula sed, ornare at, ullamcorper ut, nisl. Sed turpis nisl, hendrerit sit amet, consequat id, auctor nec, arcu. Quisque fringilla tincidunt massa. In eleifend, nulla sed mollis vestibulum, mauris orci facilisis ante, id pharetra dolor ipsum vitae sem. Integer dictum. "
+ + "<br/>"
+ + "Nunc ut odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris tellus, dapibus vel, hendrerit vel, sollicitudin ut, ligula. Ut justo metus, accumsan placerat, ultrices sit amet, congue at, nulla. Integer in quam. Cras sollicitudin mattis magna. Vestibulum neque eros, egestas ut, tincidunt vel, ullamcorper non, ligula. Vivamus eu lacus. Donec rhoncus metus et odio. Donec est. Nulla facilisi. Suspendisse potenti. Etiam tempor pede nec ante. Vestibulum adipiscing velit vel neque. "
+ + "<br/>"
+ + "Quisque ornare erat rhoncus lectus. Donec vitae ante at enim mollis egestas. Mauris convallis. Fusce convallis, nisl eu sagittis suscipit, risus ligula aliquam libero, in imperdiet neque mi non risus. Aenean dictum ultricies risus. Praesent ut ligula vitae purus ornare auctor. Cras tellus mauris, adipiscing ac, dignissim auctor, faucibus in, sem. Cras mauris libero, pharetra sit amet, lacinia eu, vehicula eleifend, sapien. Donec ac tellus. Sed eros dui, vulputate vel, auctor pharetra, tincidunt at, ipsum. Duis at dolor ac leo condimentum pulvinar. Donec molestie, dolor et fringilla elementum, nibh nibh iaculis orci, eu elementum odio turpis et odio. Phasellus fermentum, justo id placerat egestas, arcu nunc molestie ante, non imperdiet ligula lectus sed erat. Quisque sed ligula. Sed ac nulla. Nullam massa. "
+ + "<br/>"
+ + "Sed a purus. Mauris non nibh blandit neque cursus scelerisque. Quisque ultrices sem nec dolor. Donec non diam ut dui consequat venenatis. Nullam risus massa, egestas in, facilisis tristique, molestie sed, mi. Duis euismod turpis sit amet quam. Vestibulum ornare felis eget dolor. Phasellus ac urna vel sapien lacinia adipiscing. Donec egestas felis id mi. Sed erat. Vestibulum porta vulputate neque. Maecenas scelerisque, sem id sodales pretium, sem mauris rhoncus magna, at scelerisque tortor mauris nec dui. Nullam blandit rhoncus velit. Nam accumsan, enim id vestibulum feugiat, lorem nibh placerat urna, eget laoreet diam tortor at lorem. Suspendisse imperdiet consectetur dolor. ";
private static final String[] iso3166 = new String[] { "AFGHANISTAN", "AF",
"ÅLAND ISLANDS", "AX", "ALBANIA", "AL", "ALGERIA", "DZ",
"AMERICAN SAMOA", "AS", "ANDORRA", "AD", "ANGOLA", "AO",
new VerticalLayoutBasic(), //
new HorizontalLayoutBasic(), //
new GridLayoutBasic(), //
-
new LayoutAlignment(), //
new ExpandingComponent(), //
new SplitPanelBasic(), //
- new WebLayout(), //
new ApplicationLayout(), //
+ new WebLayout(), //
new CustomLayouts(), //
});
}
\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
+ return "It can be helpful to distinguish between <i>web-style</i> and"\r
+ + " <i>application-style</i> layouting (although this is a"\r
+ + " simplification). Both styles are supported, and can be used"\r
+ + " simultaneously.<br/> Application-style layouting uses relatively"\r
+ + " -sized components, growing dynamically with the window, and"\r
+ + " causing scrollbars to appear on well-defined areas within the"\r
+ + " window."\r
+ + "<br/>Try resizing the window to see how the content reacts.";\r
}\r
\r
@Override\r
package com.itmill.toolkit.demo.sampler.features.layouts;\r
\r
-import java.net.URL;\r
+import java.util.Iterator;\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.Panel;\r
+import com.itmill.toolkit.ui.Table;\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
+import com.itmill.toolkit.ui.Window.CloseEvent;\r
\r
public class ApplicationLayoutExample extends VerticalLayout {\r
\r
- private URL nativeWindowURL = null;\r
- private Button b1;\r
+ Window win = new ApplicationLayoutWindow();\r
+ Button open = new Button("Open sample in subwindow");\r
\r
public ApplicationLayoutExample() {\r
- setSpacing(true);\r
+ setMargin(true);\r
+\r
+ // We'll open this example in a separate window, configure it\r
+ win.setWidth("70%");\r
+ win.setHeight("70%");\r
+ win.center();\r
+ // Allow opening window again when closed\r
+ win.addListener(new Window.CloseListener() {\r
+ public void windowClose(CloseEvent e) {\r
+ open.setEnabled(true);\r
+ }\r
+ });\r
+\r
+ // 'open sample' button\r
+ addComponent(open);\r
+ open.addListener(new Button.ClickListener() {\r
+ public void buttonClick(ClickEvent event) {\r
+ getWindow().addWindow(win);\r
+ open.setEnabled(false);\r
+ }\r
+ });\r
+ addComponent(new Label(\r
+ ("Don't worry: the content of the window is not supposed to make sense...")));\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
+ class ApplicationLayoutWindow extends Window {\r
+ ApplicationLayoutWindow() {\r
+ // Our main layout is a horizontal layout\r
+ HorizontalLayout main = new HorizontalLayout();\r
+ main.setSizeFull();\r
+ setLayout(main);\r
+\r
+ // Tree to the left\r
+ Panel treePanel = new Panel(); // for scrollbars\r
+ treePanel.setStyleName(Panel.STYLE_LIGHT);\r
+ treePanel.setHeight("100%");\r
+ treePanel.setWidth(null);\r
+ treePanel.getLayout().setSizeUndefined();\r
+ addComponent(treePanel);\r
+\r
+ Tree tree = new Tree();\r
+ tree.setContainerDataSource(ExampleUtil.getHardwareContainer());\r
+ tree.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME);\r
+ for (Iterator it = tree.rootItemIds().iterator(); it.hasNext();) {\r
+ tree.expandItemsRecursively(it.next());\r
+ }\r
+ treePanel.addComponent(tree);\r
+\r
+ // vertically divide the right area\r
+ VerticalLayout left = new VerticalLayout();\r
+ left.setSizeFull();\r
+ addComponent(left);\r
+ main.setExpandRatio(left, 1.0f); // use all available space\r
+\r
+ // table on top\r
+ Table tbl = new Table();\r
+ tbl.setWidth("100%");\r
+ tbl.setContainerDataSource(ExampleUtil.getISO3166Container());\r
+ tbl.setSortDisabled(true);\r
+ tbl.setPageLength(7);\r
+ left.addComponent(tbl);\r
+\r
+ // Label on bottom\r
+ Panel textPanel = new Panel(); // for scrollbars\r
+ textPanel.setStyleName(Panel.STYLE_LIGHT);\r
+ textPanel.setSizeFull();\r
+ left.addComponent(textPanel);\r
+ left.setExpandRatio(textPanel, 1.0f); // use all available space\r
+\r
+ Label text = new Label(ExampleUtil.lorem, Label.CONTENT_XHTML);\r
+ text.setWidth("500px"); // some limit is good for text\r
+ textPanel.addComponent(text);\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
- // Enable margins in the layout\r
- demoLayout.setMargin(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
\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
+ return "The CustomLayout allows you to make a layout in regular HTML,"\r
+ + " using styles and embedding images to suit your needs."\r
+ + " You can even make the layout using a WYSIWYG editor.<br/>"\r
+ + " Marking an area in the HTML as a named <i>location</i>"\r
+ + " will allow you to replace that area with a component later."\r
+ + "<br/>HTML prototypes can often be quickly converted into a"\r
+ + " working application this way, providing a clear path from"\r
+ + " design to implementation.";\r
}\r
\r
@Override\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
+ "Layout HTML (view source)", getThemeBase()\r
+ + "layouts/examplecustomlayout.html") };\r
}\r
}\r
public class CustomLayoutsExample extends VerticalLayout {\r
\r
public CustomLayoutsExample() {\r
+ setMargin(true);\r
+\r
// Create the custom layout and set it as a component in\r
// the current layout\r
CustomLayout custom = new CustomLayout("examplecustomlayout");\r
custom.addComponent(username, "username");\r
\r
TextField password = new TextField();\r
+ password.setSecret(true);\r
custom.addComponent(password, "password");\r
\r
Button ok = new Button("Login");\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
+ return "It can be helpful to distinguish between <i>web-style</i> and"\r
+ + " <i>application-style</i> layouting (although this is a"\r
+ + " simplification). Both styles are supported, and can be used"\r
+ + " simultaneously.<br/> Web-style layouting allows the content"\r
+ + " to dictate the size of the components by \"pushing\" the"\r
+ + " size, causing scrollbars to appear for the whole window"\r
+ + " when needed. This can be achieved by not setting the size"\r
+ + " for components, or setting an absolute size (e.g 200px)."\r
+ + "<br/>Try resizing the window to see how the content reacts.";\r
}\r
\r
@Override\r
package com.itmill.toolkit.demo.sampler.features.layouts;\r
\r
-import java.net.URL;\r
+import java.util.Iterator;\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.Table;\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
+import com.itmill.toolkit.ui.Window.CloseEvent;\r
\r
public class WebLayoutExample extends VerticalLayout {\r
\r
- private URL nativeWindowURL = null;\r
- private Button b1;\r
+ Window win = new WebLayoutWindow();\r
+ Button open = new Button("Open sample in subwindow");\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
+ setMargin(true);\r
+\r
+ // We'll open this example in a separate window, configure it\r
+ win.setWidth("70%");\r
+ win.setHeight("70%");\r
+ win.center();\r
+ // Allow opening window again when closed\r
+ win.addListener(new Window.CloseListener() {\r
+ public void windowClose(CloseEvent e) {\r
+ open.setEnabled(true);\r
+ }\r
+ });\r
+\r
+ // 'open sample' button\r
+ addComponent(open);\r
+ open.addListener(new Button.ClickListener() {\r
+ public void buttonClick(ClickEvent event) {\r
+ getWindow().addWindow(win);\r
+ open.setEnabled(false);\r
+ }\r
+ });\r
+\r
+ addComponent(new Label(\r
+ ("Don't worry: the content of the window is not supposed to make sense...")));\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
+ class WebLayoutWindow extends Window {\r
+ WebLayoutWindow() {\r
+ // Our main layout is a horiozontal layout\r
+ HorizontalLayout main = new HorizontalLayout();\r
+ main.setMargin(true);\r
+ main.setSpacing(true);\r
+ setLayout(main);\r
+\r
+ // Tree to the left\r
+ Tree tree = new Tree();\r
+ tree.setContainerDataSource(ExampleUtil.getHardwareContainer());\r
+ tree.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME);\r
+ for (Iterator it = tree.rootItemIds().iterator(); it.hasNext();) {\r
+ tree.expandItemsRecursively(it.next());\r
+ }\r
+ addComponent(tree);\r
+\r
+ // vertically divide the right area\r
+ VerticalLayout left = new VerticalLayout();\r
+ left.setSpacing(true);\r
+ addComponent(left);\r
+\r
+ // table on top\r
+ Table tbl = new Table();\r
+ tbl.setWidth("500px");\r
+ tbl.setContainerDataSource(ExampleUtil.getISO3166Container());\r
+ tbl.setSortDisabled(true);\r
+ tbl.setPageLength(7);\r
+ left.addComponent(tbl);\r
+\r
+ // Label on bottom\r
+ Label text = new Label(ExampleUtil.lorem, Label.CONTENT_XHTML);\r
+ text.setWidth("500px"); // some limit is good for text\r
+ left.addComponent(text);\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 and margins in the layout\r
- demoLayout.setSpacing(true);\r
- demoLayout.setMargin(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
+\r
}
\ No newline at end of file
projects / vaadin-framework.git / commitdiff
