diff options
| author | Teppo Kurki <teppo.kurki@itmill.com> | 2009-01-27 14:09:26 +0000 |
|---|---|---|
| committer | Teppo Kurki <teppo.kurki@itmill.com> | 2009-01-27 14:09:26 +0000 |
| commit | f4668b3cc1422d16dec1f4646dd4d2de4116fa7d (patch) | |
| tree | 7625149d0a67648b6150f26a290644b3f4a006c8 /src/com/itmill/toolkit/demo | |
| parent | bd46ea00a706a1744ada6dc21a8eeac7902a22f4 (diff) | |
| download | vaadin-framework-f4668b3cc1422d16dec1f4646dd4d2de4116fa7d.tar.gz vaadin-framework-f4668b3cc1422d16dec1f4646dd4d2de4116fa7d.zip | |
Rest of the Layout Samples, finally.
svn changeset:6652/svn branch:trunk
Diffstat (limited to 'src/com/itmill/toolkit/demo')
10 files changed, 421 insertions, 0 deletions
diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java index d411e5d93e..38df382ce3 100644 --- a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java +++ b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java @@ -21,6 +21,8 @@ import com.itmill.toolkit.demo.sampler.features.dates.DateLocale; 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; @@ -28,6 +30,7 @@ import com.itmill.toolkit.demo.sampler.features.layouts.LayoutAlignment; 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; @@ -214,6 +217,9 @@ public class FeatureSet extends Feature { new LayoutAlignment(), // new ExpandingComponent(), // new SplitPanelBasic(), // + new WebLayout(), // + new ApplicationLayout(), // + new CustomLayouts(), // }); } } diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/ApplicationLayout.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/ApplicationLayout.java new file mode 100644 index 0000000000..1265dc76b5 --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/ApplicationLayout.java @@ -0,0 +1,41 @@ +package com.itmill.toolkit.demo.sampler.features.layouts;
+
+import com.itmill.toolkit.demo.sampler.APIResource;
+import com.itmill.toolkit.demo.sampler.Feature;
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;
+import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.VerticalLayout;
+
+public class ApplicationLayout extends Feature {
+
+ @Override
+ public String getName() {
+ return "Application-style layout";
+ }
+
+ @Override
+ public String getDescription() {
+ return "Application-style layout refers to a layout style where the"
+ + " Toolkit application is designed to look similar to a traditional"
+ + " desktop application. Basically this means that the application"
+ + " should usually fill the whole window with UI elements, and it"
+ + " should also resize gracefully and resonably."
+ + "<br>Please click the button for a demo in a new window.";
+ }
+
+ @Override
+ public APIResource[] getRelatedAPI() {
+ return new APIResource[] { new APIResource(HorizontalLayout.class),
+ new APIResource(VerticalLayout.class) };
+ }
+
+ @Override
+ public Class[] getRelatedFeatures() {
+ return new Class[] { WebLayout.class, CustomLayouts.class };
+ }
+
+ @Override
+ public NamedExternalResource[] getRelatedResources() {
+ return null;
+ }
+}
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/ApplicationLayout.png b/src/com/itmill/toolkit/demo/sampler/features/layouts/ApplicationLayout.png Binary files differnew file mode 100644 index 0000000000..dba279668a --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/ApplicationLayout.png diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/ApplicationLayoutExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/ApplicationLayoutExample.java new file mode 100644 index 0000000000..af3a17966f --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/ApplicationLayoutExample.java @@ -0,0 +1,135 @@ +package com.itmill.toolkit.demo.sampler.features.layouts;
+
+import java.net.URL;
+
+import com.itmill.toolkit.demo.sampler.ExampleUtil;
+import com.itmill.toolkit.terminal.ExternalResource;
+import com.itmill.toolkit.ui.AbstractSelect;
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.TabSheet;
+import com.itmill.toolkit.ui.Tree;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Window;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+
+public class ApplicationLayoutExample extends VerticalLayout {
+
+ private URL nativeWindowURL = null;
+ private Button b1;
+
+ public ApplicationLayoutExample() {
+ setSpacing(true);
+
+ b1 = new Button("Open a new window with Application Layout", this,
+ "openButtonClick");
+ addComponent(b1);
+
+ }
+
+ public void openButtonClick(ClickEvent event) {
+ if (nativeWindowURL == null) {
+ getApplication().addWindow(createWindow());
+ }
+ getApplication().getMainWindow().open(
+ new ExternalResource(nativeWindowURL), "_blank");
+ }
+
+ /*
+ * Create new window which contains the layout obtained from
+ * createDemoLayout()
+ */
+ private Window createWindow() {
+ // Create a new window and add it to the application
+ final Window w = new Window("Application Layout example");
+ getApplication().addWindow(w);
+ // Set the window's layout to the one we get from createDemoLayout()
+ w.setLayout(createDemoLayout());
+ // Set the layout's size full
+ w.getLayout().setSizeFull();
+
+ nativeWindowURL = w.getURL();
+ return w;
+ }
+
+ /*
+ * Creates the actual Layout
+ */
+ private HorizontalLayout createDemoLayout() {
+ // Create a new layout
+ HorizontalLayout demoLayout = new HorizontalLayout();
+ // Enable spacing in the layout
+ demoLayout.setSpacing(true);
+
+ // Create an example tree component, set to full size
+ Tree t = new Tree("Hardware Inventory", ExampleUtil
+ .getHardwareContainer());
+ t.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME);
+ t.setItemCaptionMode(AbstractSelect.ITEM_CAPTION_MODE_PROPERTY);
+ t.setSizeFull();
+
+ // Expand the whole tree
+ int itemId = t.getContainerDataSource().size();
+ for (int i = 0; i < itemId; i++) {
+ t.expandItemsRecursively(i);
+ }
+
+ // Create an example tabsheet component with some content
+ final TabSheet ts = new TabSheet();
+ final Label l1 = new Label(
+ "This window shows an example of a so called"
+ + " Application-style layout. You probably notice that the layout"
+ + " is quite similar to other examples present in the Sampler."
+ + " These examples include e.g. SplitPanel and Expanding Components."
+ + " Please select one of the other tabs to find out more about"
+ + " application-style layouting!");
+ l1.setSizeFull();
+ final Label l2 = new Label(
+ "Typical design principles for an Application-style layout"
+ + " follow the design of traditional applications, e.g."
+ + " you should fill the whole window with your UI elements."
+ + " You should also make it dynamic, so it handles resizing events"
+ + " reasonably. In Toolkit, this is generally"
+ + " achieved by calling setSizeFull() for a Component."
+ + " In this example you may notice that sizes of all the components"
+ + " and layouts are set to full. Additionally, an expand ratio is set"
+ + " to achieve reasonable component sizes.");
+ l2.setSizeFull();
+ final Label l3 = new Label(
+ "In some cases it is reasonable to set some of the"
+ + " sizes by hand, or at least set some limits to the sizes."
+ + " For example here an expand ratio of 1:4 has been set for the Tree"
+ + " Component and the layout containing the TabSheet component.");
+ l3.setSizeFull();
+
+ // Add tabs to TabSheet with appropriate captions
+ ts.addTab(l1);
+ ts.setTabCaption(l1, "Example of an Application-style layout");
+ ts.addTab(l2);
+ ts.setTabCaption(l2, "Principles");
+ ts.addTab(l3);
+ ts.setTabCaption(l3, "Exceptions");
+ // Set the TabSheet to full size.
+ ts.setSizeFull();
+
+ // Create a basic label
+ Label commentArea = new Label("Comment area: no comments");
+
+ // Create an additional VerticalLayout for the TabSheet and the Label
+ VerticalLayout tabsAndComments = new VerticalLayout();
+ tabsAndComments.setSizeFull();
+ tabsAndComments.addComponent(ts);
+ tabsAndComments.addComponent(commentArea);
+
+ // Add the components to the layout
+ demoLayout.addComponent(t);
+ demoLayout.addComponent(tabsAndComments);
+
+ // Set expand ratios to the components
+ demoLayout.setExpandRatio(t, 1);
+ demoLayout.setExpandRatio(tabsAndComments, 3);
+
+ return demoLayout;
+ }
+}
\ No newline at end of file diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/CustomLayouts.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/CustomLayouts.java new file mode 100644 index 0000000000..b9d9a2ad0a --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/CustomLayouts.java @@ -0,0 +1,44 @@ +package com.itmill.toolkit.demo.sampler.features.layouts;
+
+import com.itmill.toolkit.demo.sampler.APIResource;
+import com.itmill.toolkit.demo.sampler.Feature;
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;
+import com.itmill.toolkit.ui.CustomLayout;
+
+public class CustomLayouts extends Feature {
+
+ @Override
+ public String getName() {
+ return "Custom layout";
+ }
+
+ @Override
+ public String getDescription() {
+ return "With the CustomLayout component, you can write your layout"
+ + " as a template in XHTML that provides locations of any contained"
+ + " components. The layout template must be included in a theme. This"
+ + " separation allows the layout to be designed separately from code,"
+ + " for example using WYSIWYG web designer tools."
+ + "<br>The client-side engine of IT Mill Toolkit will replace contents"
+ + " of the location elements with the components. The components are"
+ + " bound to the location elements by the location identifier given to"
+ + " addComponent().";
+ }
+
+ @Override
+ public APIResource[] getRelatedAPI() {
+ return new APIResource[] { new APIResource(CustomLayout.class) };
+ }
+
+ @Override
+ public Class[] getRelatedFeatures() {
+ return new Class[] { WebLayout.class, ApplicationLayout.class };
+ }
+
+ @Override
+ public NamedExternalResource[] getRelatedResources() {
+ return new NamedExternalResource[] { new NamedExternalResource(
+ "XHTML for the custom layout", getThemeBase()
+ + "layouts/examplecustomlayout_forviewing.html") };
+ }
+}
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/CustomLayouts.png b/src/com/itmill/toolkit/demo/sampler/features/layouts/CustomLayouts.png Binary files differnew file mode 100644 index 0000000000..d5b8b25fba --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/CustomLayouts.png diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/CustomLayoutsExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/CustomLayoutsExample.java new file mode 100644 index 0000000000..89d06d28bc --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/CustomLayoutsExample.java @@ -0,0 +1,27 @@ +package com.itmill.toolkit.demo.sampler.features.layouts;
+
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.CustomLayout;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.VerticalLayout;
+
+public class CustomLayoutsExample extends VerticalLayout {
+
+ public CustomLayoutsExample() {
+ // Create the custom layout and set it as a component in
+ // the current layout
+ CustomLayout custom = new CustomLayout("examplecustomlayout");
+ addComponent(custom);
+
+ // Create components and bind them to the location tags
+ // in the custom layout.
+ TextField username = new TextField();
+ custom.addComponent(username, "username");
+
+ TextField password = new TextField();
+ custom.addComponent(password, "password");
+
+ Button ok = new Button("Login");
+ custom.addComponent(ok, "okbutton");
+ }
+}
\ No newline at end of file diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/WebLayout.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/WebLayout.java new file mode 100644 index 0000000000..fe9313d4e4 --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/WebLayout.java @@ -0,0 +1,40 @@ +package com.itmill.toolkit.demo.sampler.features.layouts;
+
+import com.itmill.toolkit.demo.sampler.APIResource;
+import com.itmill.toolkit.demo.sampler.Feature;
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;
+import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.VerticalLayout;
+
+public class WebLayout extends Feature {
+
+ @Override
+ public String getName() {
+ return "Web-style layout";
+ }
+
+ @Override
+ public String getDescription() {
+ return "Web-style layout refers to a layout style where the"
+ + " content 'pushes' the layout to a reasonable size."
+ + " In some cases you should also define some limits for"
+ + " this 'pushing' so that the layout will stay reasonable."
+ + "<br>Please click the button for a demo in a new window.";
+ }
+
+ @Override
+ public APIResource[] getRelatedAPI() {
+ return new APIResource[] { new APIResource(HorizontalLayout.class),
+ new APIResource(VerticalLayout.class) };
+ }
+
+ @Override
+ public Class[] getRelatedFeatures() {
+ return new Class[] { ApplicationLayout.class, CustomLayouts.class };
+ }
+
+ @Override
+ public NamedExternalResource[] getRelatedResources() {
+ return null;
+ }
+}
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/WebLayout.png b/src/com/itmill/toolkit/demo/sampler/features/layouts/WebLayout.png Binary files differnew file mode 100644 index 0000000000..df760c61b6 --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/WebLayout.png diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/WebLayoutExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/WebLayoutExample.java new file mode 100644 index 0000000000..c1da5ed530 --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/WebLayoutExample.java @@ -0,0 +1,128 @@ +package com.itmill.toolkit.demo.sampler.features.layouts;
+
+import java.net.URL;
+
+import com.itmill.toolkit.demo.sampler.ExampleUtil;
+import com.itmill.toolkit.terminal.ExternalResource;
+import com.itmill.toolkit.ui.AbstractSelect;
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.TabSheet;
+import com.itmill.toolkit.ui.Tree;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Window;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+
+public class WebLayoutExample extends VerticalLayout {
+
+ private URL nativeWindowURL = null;
+ private Button b1;
+
+ public WebLayoutExample() {
+ setSpacing(true);
+
+ b1 = new Button("Open a new window with Web Layout", this,
+ "openButtonClick");
+ addComponent(b1);
+
+ }
+
+ public void openButtonClick(ClickEvent event) {
+ if (nativeWindowURL == null) {
+ getApplication().addWindow(createWindow());
+ }
+ getApplication().getMainWindow().open(
+ new ExternalResource(nativeWindowURL), "_blank");
+ }
+
+ /*
+ * Create new window which contains the layout obtained from
+ * createDemoLayout()
+ */
+ private Window createWindow() {
+ // Create a new window and add it to the application
+ final Window w = new Window("Web Layout example");
+ getApplication().addWindow(w);
+ // Set the window's layout to the one we get from createDemoLayout()
+ w.setLayout(createDemoLayout());
+ // Set the layout's size undefined
+ w.getLayout().setSizeUndefined();
+
+ nativeWindowURL = w.getURL();
+ return w;
+ }
+
+ /*
+ * Creates the actual Layout
+ */
+ private HorizontalLayout createDemoLayout() {
+ // Create a new layout
+ HorizontalLayout demoLayout = new HorizontalLayout();
+ // Enable spacing in the layout
+ demoLayout.setSpacing(true);
+
+ // Create an example tree component, set to undefined size
+ Tree t = new Tree("Hardware Inventory", ExampleUtil
+ .getHardwareContainer());
+ t.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME);
+ t.setItemCaptionMode(AbstractSelect.ITEM_CAPTION_MODE_PROPERTY);
+ t.setSizeUndefined();
+
+ // Expand the whole tree
+ int itemId = t.getContainerDataSource().size();
+ for (int i = 0; i < itemId; i++) {
+ t.expandItemsRecursively(i);
+ }
+
+ // Create an example tabsheet component with some content
+ final TabSheet ts = new TabSheet();
+ final Label l1 = new Label(
+ "This window shows an example of a so called"
+ + " Web-style layout. You probably notice that the layout"
+ + " is quite different than the Application-style layout."
+ + " Please select one of the other tabs to find out more!");
+ l1.setSizeUndefined();
+ final Label l2 = new Label(
+ "Typical design principles for a Web-style layout"
+ + " state that the content should 'push' the layout"
+ + " to reach adequate proportions. In Toolkit, this is"
+ + " achieved by calling setSizeUndefined() for a Component."
+ + " In this example you may notice that the width of the Tree"
+ + " component is set by the content of it. Also, the width of"
+ + " the Tabsheet is set by the combined width of the tab captions.");
+ l2.setSizeUndefined();
+ final Label l3 = new Label(
+ "In some cases it is reasonable to set some of the"
+ + " sizes by hand, or at least set some limits to the sizes."
+ + " For example here the height of the TabSheet component has"
+ + " been set to a fixed 200 pixels. Also, in some cases setting"
+ + " the base layout of the window to be of undefined size does not"
+ + " produce very good results.");
+ l3.setSizeUndefined();
+ ts.addTab(l1);
+ ts.setTabCaption(l1, "Example of a Web-style layout");
+ ts.addTab(l2);
+ ts.setTabCaption(l2, "Principles");
+ ts.addTab(l3);
+ ts.setTabCaption(l3, "Exceptions");
+ // Set the TabSheet width undefined. Also set a defined height.
+ ts.setSizeUndefined();
+ ts.setHeight(200, UNITS_PIXELS);
+
+ // Create a basic label
+ Label commentArea = new Label("Comment area: no comments");
+
+ // Create an additional VerticalLayout for the TabSheet and the Label
+ VerticalLayout tabsAndComments = new VerticalLayout();
+ tabsAndComments.setSizeUndefined();
+ tabsAndComments.addComponent(ts);
+ tabsAndComments.addComponent(commentArea);
+
+ // Add the components to the layout
+ demoLayout.addComponent(t);
+ demoLayout.addComponent(tabsAndComments);
+
+ return demoLayout;
+ }
+}
\ No newline at end of file |
