private Feature currentFeature;
public FeatureView() {
-
+ setSizeFull();
setWidth("100%");
setMargin(true);
setSpacing(true);
right.setStyleName(Panel.STYLE_LIGHT);
right.addStyleName("feature-info");
right.setWidth("369px");
+ right.setHeight("100%");
addComponent(right);
controls = new VerticalLayout();
\r
import com.itmill.toolkit.demo.sampler.APIResource;\r
import com.itmill.toolkit.demo.sampler.Feature;\r
+import com.itmill.toolkit.demo.sampler.FeatureSet;\r
import com.itmill.toolkit.demo.sampler.NamedExternalResource;\r
import com.itmill.toolkit.ui.Accordion;\r
\r
\r
@Override\r
public String getDescription() {\r
- return "With an accordion component you can disable, enable,"\r
- + " hide and show tabs, similary to a tabsheet.";\r
+ return "An accordion component is a specialized case of a"\r
+ + " tabsheet, with vertically organized tabs."\r
+ + " With an accordion component you can also disable, enable,"\r
+ + " hide and show tabs, similar to a tabsheet.";\r
}\r
\r
@Override\r
\r
@Override\r
public Class[] getRelatedFeatures() {\r
- return new Class[] { AccordionIcons.class };\r
+ return new Class[] { AccordionIcons.class, FeatureSet.Tabsheets.class };\r
}\r
\r
@Override\r
private Label l2;\r
private Label l3;\r
\r
+ private static final ThemeResource icon1 = new ThemeResource(\r
+ "icons/action_save.gif");\r
+ private static final ThemeResource icon2 = new ThemeResource(\r
+ "icons/comment_yellow.gif");\r
+ private static final ThemeResource icon3 = new ThemeResource(\r
+ "icons/icon_info.gif");\r
+\r
public AccordionDisabledExample() {\r
setSpacing(true);\r
\r
l2 = new Label("There are no saved notes.");\r
l3 = new Label("There are currently no issues.");\r
\r
- ThemeResource i1 = new ThemeResource("icons/action_save.gif");\r
- ThemeResource i2 = new ThemeResource("icons/comment_yellow.gif");\r
- ThemeResource i3 = new ThemeResource("icons/icon_info.gif");\r
-\r
a = new Accordion();\r
- a.setHeight(400, UNITS_PIXELS);\r
- a.setWidth(400, UNITS_PIXELS);\r
- a.addTab(l1, "Saved actions", i1);\r
- a.addTab(l2, "Notes", i2);\r
- a.addTab(l3, "Issues", i3);\r
+ a.setHeight("300px");\r
+ a.setWidth("400px");\r
+ a.addTab(l1, "Saved actions", icon1);\r
+ a.addTab(l2, "Notes", icon2);\r
+ a.addTab(l3, "Issues", icon3);\r
a.addListener(this);\r
\r
b1 = new Button("Disable 'Notes' tab");\r
\r
import com.itmill.toolkit.demo.sampler.APIResource;\r
import com.itmill.toolkit.demo.sampler.Feature;\r
+import com.itmill.toolkit.demo.sampler.FeatureSet;\r
import com.itmill.toolkit.demo.sampler.NamedExternalResource;\r
import com.itmill.toolkit.ui.Accordion;\r
\r
\r
@Override\r
public Class[] getRelatedFeatures() {\r
- return new Class[] { AccordionDisabled.class };\r
+ return new Class[] { AccordionDisabled.class,\r
+ FeatureSet.Tabsheets.class };\r
}\r
\r
@Override\r
public class AccordionIconsExample extends HorizontalLayout implements\r
Accordion.SelectedTabChangeListener {\r
\r
+ private static final ThemeResource icon1 = new ThemeResource(\r
+ "icons/action_save.gif");\r
+ private static final ThemeResource icon2 = new ThemeResource(\r
+ "icons/comment_yellow.gif");\r
+ private static final ThemeResource icon3 = new ThemeResource(\r
+ "icons/icon_info.gif");\r
+\r
private Accordion a;\r
\r
public AccordionIconsExample() {\r
Label l2 = new Label("There are no saved notes.");\r
Label l3 = new Label("There are currently no issues.");\r
\r
- ThemeResource i1 = new ThemeResource("icons/action_save.gif");\r
- ThemeResource i2 = new ThemeResource("icons/comment_yellow.gif");\r
- ThemeResource i3 = new ThemeResource("icons/icon_info.gif");\r
-\r
a = new Accordion();\r
- a.setHeight(400, UNITS_PIXELS);\r
- a.setWidth(400, UNITS_PIXELS);\r
- a.addTab(l1, "Saved actions", i1);\r
- a.addTab(l2, "Notes", i2);\r
- a.addTab(l3, "Issues", i3);\r
+ a.setHeight("300px");\r
+ a.setWidth("400px");\r
+ a.addTab(l1, "Saved actions", icon1);\r
+ a.addTab(l2, "Notes", icon2);\r
+ a.addTab(l3, "Issues", icon3);\r
a.addListener(this);\r
\r
addComponent(a);\r
\r
import com.itmill.toolkit.demo.sampler.APIResource;\r
import com.itmill.toolkit.demo.sampler.Feature;\r
+import com.itmill.toolkit.demo.sampler.FeatureSet;\r
import com.itmill.toolkit.demo.sampler.NamedExternalResource;\r
+import com.itmill.toolkit.ui.Layout;\r
import com.itmill.toolkit.ui.Panel;\r
\r
public class PanelBasic extends Feature {\r
\r
@Override\r
public String getDescription() {\r
- return "Panel is a simple container for one component."\r
- + " A caption can optionally be added."\r
- + "<br>A panel typically contains a layout component"\r
- + " where the other components can be added.";\r
+ return "Panel is a simple container that supports scrolling.<br/>"\r
+ + " It's internal layout (by default VerticalLayout) can be"\r
+ + " configured or exchanged to get desired results. Components"\r
+ + " that are added to the Panel will in effect be added to the"\r
+ + " layout.";\r
\r
}\r
\r
@Override\r
public APIResource[] getRelatedAPI() {\r
- return new APIResource[] { new APIResource(Panel.class) };\r
+ return new APIResource[] { new APIResource(Panel.class),\r
+ new APIResource(Layout.class) };\r
}\r
\r
@Override\r
public Class[] getRelatedFeatures() {\r
- return new Class[] { PanelLight.class };\r
+ return new Class[] { PanelLight.class, FeatureSet.Layouts.class };\r
}\r
\r
@Override\r
\r
public class PanelBasicExample extends VerticalLayout implements ClickListener {\r
\r
- private Panel p1;\r
- private Panel p2;\r
+ private Panel panel;\r
\r
public PanelBasicExample() {\r
setSpacing(true);\r
\r
- // First panel uses layout in which the components are added\r
- VerticalLayout vl = new VerticalLayout();\r
- Label l = new Label("Push the button to toggle caption.");\r
+ // Panel 1 - with caption\r
+ panel = new Panel("This is a standard Panel");\r
+ panel.setHeight("200px"); // we want scrollbars\r
+\r
+ // let's adjust the panels default layout (a VerticalLayout)\r
+ VerticalLayout layout = (VerticalLayout) panel.getLayout();\r
+ layout.setMargin(true); // we want a margin\r
+ layout.setSpacing(true); // and spacing between components\r
+ addComponent(panel);\r
+\r
+ // Let's add a few rows to provoke scrollbars:\r
+ for (int i = 0; i < 20; i++) {\r
+ panel.addComponent(new Label(\r
+ "The quick brown fox jumps over the lazy dog."));\r
+ }\r
+\r
+ // Caption toggle:\r
Button b = new Button("Toggle caption");\r
b.addListener(this);\r
- vl.setSpacing(true);\r
- vl.addComponent(l);\r
- vl.addComponent(b);\r
- p1 = new Panel("This is a standard Panel");\r
- p1.setLayout(vl);\r
-\r
- // We add the Label component directly to the second panel\r
- p2 = new Panel();\r
- p2.addComponent(new Label("This is a standard panel without caption."));\r
-\r
- addComponent(p1);\r
- addComponent(p2);\r
+ addComponent(b);\r
+\r
}\r
\r
public void buttonClick(ClickEvent event) {\r
- if (p1.getCaption().equals("")) {\r
- p1.setCaption("This is a standard Panel");\r
+ if (panel.getCaption().equals("")) {\r
+ panel.setCaption("This is a standard Panel");\r
} else {\r
- p1.setCaption("");\r
+ panel.setCaption("");\r
}\r
}\r
}\r
\r
import com.itmill.toolkit.demo.sampler.APIResource;\r
import com.itmill.toolkit.demo.sampler.Feature;\r
+import com.itmill.toolkit.demo.sampler.FeatureSet;\r
import com.itmill.toolkit.demo.sampler.NamedExternalResource;\r
+import com.itmill.toolkit.ui.Layout;\r
import com.itmill.toolkit.ui.Panel;\r
\r
public class PanelLight extends Feature {\r
@Override\r
public String getName() {\r
- return "Panel - Light style";\r
+ return "Panel, light style";\r
}\r
\r
@Override\r
public String getDescription() {\r
- return "A lighter style for the Panel component is"\r
- + " also available.";\r
+ return "Panel is a simple container that supports scrolling.<br/>"\r
+ + " It's internal layout (by default VerticalLayout) can be"\r
+ + " configured or exchanged to get desired results. Components"\r
+ + " that are added to the Panel will in effect be added to the"\r
+ + " layout.<br/>"\r
+ + "The 'light' version has less decorations than the regular one.";\r
\r
}\r
\r
@Override\r
public APIResource[] getRelatedAPI() {\r
- return new APIResource[] { new APIResource(Panel.class) };\r
+ return new APIResource[] { new APIResource(Panel.class),\r
+ new APIResource(Layout.class) };\r
}\r
\r
@Override\r
public Class[] getRelatedFeatures() {\r
- return new Class[] { PanelBasic.class };\r
+ return new Class[] { PanelBasic.class, FeatureSet.Layouts.class };\r
}\r
\r
@Override\r
\r
public class PanelLightExample extends VerticalLayout implements ClickListener {\r
\r
- private Panel p;\r
+ private Panel panel;\r
\r
public PanelLightExample() {\r
setSpacing(true);\r
\r
- // First panel uses layout in which the components are added\r
- VerticalLayout vl = new VerticalLayout();\r
- Label l = new Label("Push the button to toggle style.");\r
- Button b = new Button("Toggle style");\r
+ setSpacing(true);\r
+\r
+ // Panel 1 - with caption\r
+ panel = new Panel("This is a light Panel");\r
+ panel.setStyleName(Panel.STYLE_LIGHT);\r
+ panel.setHeight("200px"); // we want scrollbars\r
+\r
+ // let's adjust the panels default layout (a VerticalLayout)\r
+ VerticalLayout layout = (VerticalLayout) panel.getLayout();\r
+ layout.setMargin(true); // we want a margin\r
+ layout.setSpacing(true); // and spacing between components\r
+ addComponent(panel);\r
+\r
+ // Let's add a few rows to provoke scrollbars:\r
+ for (int i = 0; i < 20; i++) {\r
+ panel.addComponent(new Label(\r
+ "The quick brown fox jumps over the lazy dog."));\r
+ }\r
+\r
+ // Caption toggle:\r
+ Button b = new Button("Toggle caption");\r
b.addListener(this);\r
- vl.setSpacing(true);\r
- vl.addComponent(l);\r
- vl.addComponent(b);\r
- p = new Panel("This is a light Panel");\r
- p.setStyleName("light");\r
- p.setLayout(vl);\r
-\r
- addComponent(p);\r
+ addComponent(b);\r
}\r
\r
public void buttonClick(ClickEvent event) {\r
- if (p.getStyleName().contains("light")) {\r
- p.removeStyleName("light");\r
- p.setCaption("This is a standard Panel");\r
+ if (panel.getCaption().equals("")) {\r
+ panel.setCaption("This is a standard Panel");\r
} else {\r
- p.setStyleName("light");\r
- p.setCaption("This is a light Panel");\r
+ panel.setCaption("");\r
}\r
}\r
}\r
import com.itmill.toolkit.ui.AbstractSelect;\r
import com.itmill.toolkit.ui.ComboBox;\r
import com.itmill.toolkit.ui.VerticalLayout;\r
-import com.itmill.toolkit.ui.AbstractSelect.Filtering;\r
\r
public class ComboBoxNewItemsExample extends VerticalLayout implements\r
Property.ValueChangeListener, AbstractSelect.NewItemHandler {\r
l.addItem(cities[i]);\r
}\r
\r
- l.setFilteringMode(Filtering.FILTERINGMODE_OFF);\r
l.setNewItemsAllowed(true);\r
l.setNewItemHandler(this);\r
l.setImmediate(true);\r
\r
public class TabSheetDisabledExample extends VerticalLayout implements\r
TabSheet.SelectedTabChangeListener, Button.ClickListener {\r
+ private static final ThemeResource icon1 = new ThemeResource(\r
+ "icons/action_save.gif");\r
+ private static final ThemeResource icon2 = new ThemeResource(\r
+ "icons/comment_yellow.gif");\r
+ private static final ThemeResource icon3 = new ThemeResource(\r
+ "icons/icon_info.gif");\r
\r
private TabSheet t;\r
- private Button b1;\r
- private Button b2;\r
- private Label l1;\r
- private Label l2;\r
- private Label l3;\r
+ private Button toggleEnabled;\r
+ private Button toggleVisible;\r
+ private VerticalLayout l1;\r
+ private VerticalLayout l2;\r
+ private VerticalLayout l3;\r
\r
public TabSheetDisabledExample() {\r
setSpacing(true);\r
\r
- l1 = new Label("There are no previously saved actions.");\r
- l2 = new Label("There are no saved notes.");\r
- l3 = new Label("There are currently no issues.");\r
-\r
- ThemeResource i1 = new ThemeResource("icons/action_save.gif");\r
- ThemeResource i2 = new ThemeResource("icons/comment_yellow.gif");\r
- ThemeResource i3 = new ThemeResource("icons/icon_info.gif");\r
+ // Tab 1 content\r
+ l1 = new VerticalLayout();\r
+ l1.setMargin(true);\r
+ l1.addComponent(new Label("There are no previously saved actions."));\r
+ // Tab 2 content\r
+ l2 = new VerticalLayout();\r
+ l2.setMargin(true);\r
+ l2.addComponent(new Label("There are no saved notes."));\r
+ // Tab 3 content\r
+ l3 = new VerticalLayout();\r
+ l3.setMargin(true);\r
+ l3.addComponent(new Label("There are currently no issues."));\r
\r
t = new TabSheet();\r
- t.setHeight(400, UNITS_PIXELS);\r
- t.setWidth(400, UNITS_PIXELS);\r
- t.addTab(l1, "Saved actions", i1);\r
- t.addTab(l2, "Notes", i2);\r
- t.addTab(l3, "Issues", i3);\r
+ t.setHeight("200px");\r
+ t.setWidth("400px");\r
+ t.addTab(l1, "Saved actions", icon1);\r
+ t.addTab(l2, "Notes", icon2);\r
+ t.addTab(l3, "Issues", icon3);\r
t.addListener(this);\r
\r
- b1 = new Button("Disable 'Notes' tab");\r
- b2 = new Button("Hide 'Issues' tab");\r
- b1.addListener(this);\r
- b2.addListener(this);\r
+ toggleEnabled = new Button("Disable 'Notes' tab");\r
+ toggleEnabled.addListener(this);\r
+\r
+ toggleVisible = new Button("Hide 'Issues' tab");\r
+ toggleVisible.addListener(this);\r
\r
HorizontalLayout hl = new HorizontalLayout();\r
hl.setSpacing(true);\r
- hl.addComponent(b1);\r
- hl.addComponent(b2);\r
+ hl.addComponent(toggleEnabled);\r
+ hl.addComponent(toggleVisible);\r
\r
addComponent(t);\r
addComponent(hl);\r
}\r
\r
public void buttonClick(ClickEvent event) {\r
- if (b1.equals(event.getButton())) { // b1 clicked\r
- if (l2.isEnabled()) {\r
- l2.setEnabled(false);\r
- b1.setCaption("Enable 'Notes' tab");\r
- } else {\r
- l2.setEnabled(true);\r
- b1.setCaption("Disable 'Notes' tab");\r
- }\r
- } else { // b2 clicked\r
- if (l3.isVisible()) {\r
- l3.setVisible(false);\r
- b2.setCaption("Show 'Issues' tab");\r
- } else {\r
- l3.setVisible(true);\r
- b2.setCaption("Hide 'Issues' tab");\r
- }\r
+ if (toggleEnabled.equals(event.getButton())) {\r
+ // toggleEnabled clicked\r
+ l2.setEnabled(!l2.isEnabled());\r
+ toggleEnabled.setCaption((l2.isEnabled() ? "Disable" : "Enable")\r
+ + " 'Notes' tab");\r
+\r
+ } else {\r
+ // toggleVisible clicked\r
+ l3.setVisible(!l3.isVisible());\r
+ toggleVisible.setCaption((l3.isVisible() ? "Hide" : "Show")\r
+ + " 'Issues' tab");\r
+\r
}\r
t.requestRepaint();\r
}\r
public class TabSheetScrollingExample extends VerticalLayout implements\r
TabSheet.SelectedTabChangeListener {\r
\r
+ private static final ThemeResource icon1 = new ThemeResource(\r
+ "icons/action_save.gif");\r
+ private static final ThemeResource icon2 = new ThemeResource(\r
+ "icons/comment_yellow.gif");\r
+ private static final ThemeResource icon3 = new ThemeResource(\r
+ "icons/icon_info.gif");\r
+\r
private TabSheet t;\r
\r
public TabSheetScrollingExample() {\r
- Label l1 = new Label("There are no previously saved actions.");\r
- Label l2 = new Label("There are no saved notes.");\r
- Label l3 = new Label("There are currently no issues.");\r
- Label l4 = new Label("There are no comments.");\r
- Label l5 = new Label("There is no new feedback.");\r
-\r
- ThemeResource i1 = new ThemeResource("icons/action_save.gif");\r
- ThemeResource i2 = new ThemeResource("icons/comment_yellow.gif");\r
- ThemeResource i3 = new ThemeResource("icons/icon_info.gif");\r
+ // Tab 1 content\r
+ VerticalLayout l1 = new VerticalLayout();\r
+ l1.setMargin(true);\r
+ l1.addComponent(new Label("There are no previously saved actions."));\r
+ // Tab 2 content\r
+ VerticalLayout l2 = new VerticalLayout();\r
+ l2.setMargin(true);\r
+ l2.addComponent(new Label("There are no saved notes."));\r
+ // Tab 3 content\r
+ VerticalLayout l3 = new VerticalLayout();\r
+ l3.setMargin(true);\r
+ l3.addComponent(new Label("There are currently no issues."));\r
+ // Tab 4 content\r
+ VerticalLayout l4 = new VerticalLayout();\r
+ l4.setMargin(true);\r
+ l4.addComponent(new Label("There are no comments."));\r
+ // Tab 5 content\r
+ VerticalLayout l5 = new VerticalLayout();\r
+ l5.setMargin(true);\r
+ l5.addComponent(new Label("There is no new feedback."));\r
\r
t = new TabSheet();\r
- t.setHeight(400, UNITS_PIXELS);\r
- t.setWidth(400, UNITS_PIXELS);\r
- t.addTab(l1, "Saved actions", i1);\r
- t.addTab(l2, "Notes", i2);\r
- t.addTab(l3, "Issues", i3);\r
- t.addTab(l4, "Comments", i2);\r
- t.addTab(l5, "Feedback", i2);\r
+ t.setHeight("200px");\r
+ t.setWidth("400px");\r
+ t.addTab(l1, "Saved actions", icon1);\r
+ t.addTab(l2, "Notes", icon2);\r
+ t.addTab(l3, "Issues", icon3);\r
+ t.addTab(l4, "Comments", icon2);\r
+ t.addTab(l5, "Feedback", icon2);\r
t.addListener(this);\r
\r
addComponent(t);\r