}
.i-app-SamplerApplication .i-caption-feature-controls {
font-weight: bold;
- font-size: 16px;
+ font-size: 18px;
text-indent: 10px;
}
.i-app-SamplerApplication .feature-info {
line-height: 20px;
}
.i-app-SamplerApplication .feature-info .i-panel-caption {
- color: #def;
- font-size: 22px;
+ color: #fff;
+ font-size: 16px;
font-weight: bold;
line-height: 25px;
}
+/*
.i-app-SamplerApplication .feature-info .i-panel-content {
background: transparent url(finfofade.png) no-repeat 0px 5px;
}
+*/
.i-app-SamplerApplication .feature-info .i-caption {
font-weight: bold;
font-size: 16px;
}
.i-app-SamplerApplication .i-button-showcode {
- border-bottom: 1px solid #eee;
- padding-right: 10px;
+ border-bottom: 1px dotted #eee;
+ padding: 1px 0 1px 7px;
}
.i-app-SamplerApplication .i-button-showcode span {
- float: right;
+ color: #999;
text-decoration: none;
- font-style: italic;
+ font-style: italic;;
}
.i-app-SamplerApplication .i-button-showcode:hover span {
text-decoration: underline;
public class FeatureView extends HorizontalLayout {
- private static final String MSG_SHOW_SRC = "⊞ Show Java™ source";
- private static final String MSG_HIDE_SRC = "⊟ Hide Java™ source";
+ private static final String MSG_SHOW_SRC = "Show Java™ source »";
+ private static final String MSG_HIDE_SRC = "Hide Java™ source";
private Panel right;
private Panel left;
right.setWidth("350px");
right.setHeight("100%");
addComponent(right);
+ right.getLayout().setMargin(false, true, true, true);
controls = new VerticalLayout();
controls.setStyleName("feature-controls");
- controls.setCaption("Live example");
+ // controls.setCaption("Live example");
showCode = new Button(MSG_SHOW_SRC, new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
toggleSource();
showSource(false);
left.addComponent(controls);
+ controls.setCaption(feature.getName());
left.addComponent(getExampleFor(feature));
- right.setCaption(feature.getName());
+ right.setCaption("Description");
Label l = new Label(feature.getDescription());
l.setContentMode(Label.CONTENT_XHTML);
import com.itmill.toolkit.ui.Window;
import com.itmill.toolkit.ui.Button.ClickEvent;
import com.itmill.toolkit.ui.Button.ClickListener;
+import com.itmill.toolkit.ui.PopupView.PopupVisibilityEvent;
import com.itmill.toolkit.ui.UriFragmentUtility.FragmentChangedEvent;
import com.itmill.toolkit.ui.UriFragmentUtility.FragmentChangedListener;
// breadcrumbs
BreadCrumbs breadcrumbs = new BreadCrumbs();
+ Button previousSample;
+ Button nextSample;
+
SamplerWindow() {
// Main top/expanded-bottom layout
VerticalLayout mainExpand = new VerticalLayout();
}
});
+ // Previous sample
+ previousSample = createPrevButton();
+ nav.addComponent(previousSample);
+ nav.setComponentAlignment(previousSample, Alignment.MIDDLE_RIGHT);
+ // Next sample
+ nextSample = createNextButton();
+ nav.addComponent(nextSample);
+ nav.setComponentAlignment(nextSample, Alignment.MIDDLE_LEFT);
// "Search" combobox
// TODO add input prompt
Component search = createSearch();
nav.addComponent(search);
nav.setComponentAlignment(search, Alignment.MIDDLE_LEFT);
- // Previous sample
- Button b = createPrevButton();
- nav.addComponent(b);
- nav.setComponentAlignment(b, Alignment.MIDDLE_RIGHT);
- // Next sample
- b = createNextButton();
- nav.addComponent(b);
- nav.setComponentAlignment(b, Alignment.MIDDLE_LEFT);
-
// togglebar
// mainExpand.addComponent(toggleBar);
toggleBar.setHeight("40px");
rightLayout.addComponent(mainArea);
rightLayout.setExpandRatio(mainArea, 1);
- // Show / hide tree
- Component treeSwitch = createTreeSwitch();
- toggleBar.addComponent(treeSwitch);
- toggleBar.setExpandRatio(treeSwitch, 1);
- toggleBar.setComponentAlignment(treeSwitch, Alignment.MIDDLE_RIGHT);
-
// List/grid/coverflow
Component mode = createModeSwitch();
toggleBar.addComponent(mode);
toggleBar.setComponentAlignment(mode, Alignment.MIDDLE_RIGHT);
+ // Show / hide tree
+ Component treeSwitch = createTreeSwitch();
+ nav.addComponent(treeSwitch);
+ // toggleBar.setExpandRatio(treeSwitch, 1);
+ nav.setComponentAlignment(treeSwitch, Alignment.MIDDLE_RIGHT);
+
addListener(new CloseListener() {
public void windowClose(CloseEvent e) {
if (getMainWindow() != SamplerWindow.this) {
webAnalytics.trackPageview(path);
uriFragmentUtility.setFragment(path, false);
breadcrumbs.setPath(path);
+
+ previousSample.setEnabled(f != null);
+ nextSample.setEnabled(!allFeatures.isLastId(f));
+
updateFeatureList(currentList);
}
*/
private Component createSearch() {
- ComboBox search = new ComboBox();
+ final ComboBox search = new ComboBox();
search.setWidth("160px");
search.setNewItemsAllowed(false);
search.setFilteringMode(ComboBox.FILTERINGMODE_CONTAINS);
search.setNullSelectionAllowed(true);
search.setImmediate(true);
search.setContainerDataSource(allFeatures);
+ for (Iterator it = allFeatures.getItemIds().iterator(); it
+ .hasNext();) {
+ Object id = it.next();
+ if (id instanceof FeatureSet) {
+ search.setItemIcon(id, new ClassResource("folder.gif",
+ SamplerApplication.this));
+ }
+ }
search.addListener(new ComboBox.ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
Feature f = (Feature) event.getProperty().getValue();
}
});
// TODO add icons for section/sample
-
+ /*
+ * PopupView pv = new PopupView("", search) { public void
+ * changeVariables(Object source, Map variables) {
+ * super.changeVariables(source, variables); if (isPopupVisible()) {
+ * search.focus(); } } };
+ */
PopupView pv = new PopupView("", search);
+ pv.addListener(new PopupView.PopupVisibilityListener() {
+ public void popupVisibilityChange(PopupVisibilityEvent event) {
+ if (event.isPopupVisible()) {
+ search.focus();
+ }
+ }
+ });
pv.setWidth("22px");
pv.setHeight("22px");
pv.setStyleName("quickjump");
while (next != null && next instanceof FeatureSet) {
next = allFeatures.nextItemId(next);
}
- currentFeature.setValue(next);
+ if (next != null) {
+ currentFeature.setValue(next);
+ } else {
+ // could potentially occur if there is an empty section
+ showNotification("Last sample");
+ }
}
});
b.setWidth("22px");
currentFeature.setValue(prev);
}
});
+ b.setEnabled(false);
b.setWidth("22px");
b.setHeight("22px");
b.setIcon(new ThemeResource("sampler/prev.png"));
public void show(Component c) {
if (getCompositionRoot() != c) {
- c.setSizeFull();
+ // c.setSizeFull();
setCompositionRoot(c);
}
}
current += (i > 0 ? "/" : "") + parts[i];
Feature f = FeatureSet.FEATURES.getFeatureByPath(current);
link = new ActiveLink(f.getName(), new ExternalResource("#"
- + f.getPathName()));
+ + getPathFor(f)));
link.setData(f);
link.addListener(this);
layout.addComponent(link);
private class FeatureGrid extends Panel implements FeatureList {
- GridLayout grid = new GridLayout(5, 1);
+ GridLayout grid = new GridLayout(11, 1);
FeatureGrid() {
setSizeFull();
- getLayout().setWidth("100%");
- grid.setWidth("100%");
+ getLayout().setSizeUndefined();
+ // grid.setWidth("100%");
grid.setSpacing(true);
addComponent(grid);
setStyleName(Panel.STYLE_LIGHT);
Button b = new Button();
b.setStyleName(Button.STYLE_LINK);
b.addStyleName("screenshot");
- b.setIcon(new ClassResource(f.getClass(), f.getIconName(),
- SamplerApplication.this));
- b.setWidth("120px");
- b.setHeight("120px");
+ b.setIcon(new ClassResource(f.getClass(), "75-"
+ + f.getIconName(), SamplerApplication.this));
+ b.setWidth("75px");
+ b.setHeight("75px");
b.setDescription("<h3>" + f.getName() + "</h3>"
+ f.getDescription());
b.addListener(new Button.ClickListener() {
@Override
public String getDescription() {
- return "A link-styled button.";
+ return "A link-styled button; works like a Button but looks like a Link.<br/>"
+ + "I.e it does not actually link somewhere, but triggers a server-side event, just like a regular button.";
}
@Override
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.demo.sampler.features.blueprints.ProminentPrimaryAction;
import com.itmill.toolkit.ui.Button;
public class ButtonSwitch extends Feature {
@Override
public String getDescription() {
- return "A switch button.";
+ return "A switch button works like a regular button, triggering a server-side event, but it's state is 'sticky' - it toggles on or off, instead of popping right back out.<br/>Also know as a CheckBox.";
}
@Override
@Override
public Class[] getRelatedFeatures() {
- return new Class[] { ButtonPush.class, ButtonLink.class,
- ProminentPrimaryAction.class };
+ return new Class[] { ButtonPush.class, ButtonLink.class };
}
@Override
setSpacing(true);
Panel panel = new Panel("Configure this");
- panel.setComponentError(new UserError("This panel contains errors"));
+ panel.setComponentError(new UserError("'Input' contains an error"));
addComponent(panel);
TextField input = new TextField("Input");
@Override
public String getDescription() {
- return "An external link.";
+ return "An external link - this is the basic HTML-style link, changing"
+ + " the url of the browser w/o triggering a server-side event"
+ + " (like the link-styled Button).<br/> By default, links open"
+ + " in the current browser window.";
}
@Override
@Override
public String getDescription() {
- return "A link that opens a new window w/o decorations";
+ return "An basic HTML-style (external) link, opening a browser window"
+ + "w/o decorations. A Link changes"
+ + " the url of the browser w/o triggering a server-side event"
+ + " (like the link-styled Button).<br/> Links can open new"
+ + " browser windows, and configure the amount of browser"
+ + " features shown, such as toolbar and addressbar.";
}
@Override
@Override
public String getDescription() {
- return "A link that opens a small new window w/o decorations";
+ return "An basic HTML-style (external) link, opening a small window w/o"
+ + " decorations.<br/> A link changes"
+ + " the url of the browser w/o triggering a server-side event"
+ + " (like the link-styled Button).<br/> Links can open new"
+ + " browser windows, and configure the amount of browser"
+ + " features shown, such as toolbar and addressbar, and can also"
+ + " set the size of the window.";
}
@Override
public NotificationCustomExample() {
setSpacing(true);
+ setWidth(null); // layout will grow with content
final TextField caption = new TextField("Caption");
caption
final RichTextArea description = new RichTextArea();
description.setCaption("Description");
- description.setWidth("400px");
description
.setDescription("Additional information; try to keep it short.");
addComponent(description);
final Slider delay = new Slider("Delay (msec), -1 means click to hide");
delay
.setDescription("Delay before fading<br/>Pull all the way to the left to get -1, which means forever (click to hide).");
- delay.setWidth("400px");
+ delay.setWidth("100%"); // 'description' will push width
delay.setMin(Notification.DELAY_FOREVER);
delay.setMax(10000);
addComponent(delay);
public NotificationErrorExample() {
setSpacing(true);
+ setWidth(null); // layout will grow with content
final TextField caption = new TextField("Caption", "Upload failed");
caption.setWidth("200px");
public NotificationHumanizedExample() {
setSpacing(true);
+ setWidth(null); // layout will grow with content
final TextField caption = new TextField("Caption", "Document saved");
caption.setWidth("200px");
public NotificationTrayExample() {
setSpacing(true);
+ setWidth(null); // layout will grow with content
final TextField caption = new TextField("Caption", "New message");
caption.setWidth("200px");
public NotificationWarningExample() {
setSpacing(true);
+ setWidth(null); // layout will grow with content
final TextField caption = new TextField("Caption", "Upload canceled");
caption.setWidth("200px");
\r
@Override\r
public String getDescription() {\r
- return "A drop-down selection component with single item selection."\r
- + " A 'contains' filter has been used with this combo box,"\r
+ return "A drop-down selection component with single item selection.<br/>"\r
+ + " A 'contains' filter has been used in this example,"\r
+ " so you can key in some text and only the options"\r
- + " containing your input will be shown.";\r
+ + " containing your input will be shown.<br/>"\r
+ + " Because there are so many options, they are loaded on-demand"\r
+ + " (\"lazy-loading\") from the server when paging or"\r
+ + " filtering. This behavior is built-in and requires no extra"\r
+ + " code.";\r
}\r
\r
@Override\r
\r
@Override\r
public String getDescription() {\r
- return "A drop-down selection component with single item selection."\r
- + " This selection box also allows you to input your own"\r
- + " choice. Your input will also be added to the selection"\r
- + " of available choices.";\r
+ return "A drop-down selection component with single item selection.<br/>"\r
+ + " This example also allows you to input your own"\r
+ + " choice - your input will be added to the selection"\r
+ + " of available choices. This behavior is built-in and can"\r
+ + " be enabled with one method call. Note that by using this"\r
+ + " feature, one can easily create <i>suggestion box</i> -type"\r
+ + " inputs that for example remembers the users previous input,"\r
+ + " or provides suggestions from a list of popular choices."\r
+ + " Configured like this (and optionally with a filter), the"\r
+ + " ComboBox can be a powerful alternative to TextField.";\r
}\r
\r
@Override\r
@Override\r
public String getDescription() {\r
return "A drop-down selection component with single item selection."\r
- + " No special features used in this example";\r
+ + " Shown here is the most basic variant, which basically"\r
+ + " provides the same functionality as a NativeSelect with"\r
+ + " added lazy-loading if there are many options.<br/>"\r
+ + " See related examples for more advanced features.";\r
}\r
\r
@Override\r
\r
@Override\r
public String getDescription() {\r
- return "A drop-down selection component with single item selection."\r
- + " A 'starts with' filter has been used with this combo box,"\r
- + " so you can key in the beginning of your selection to narrow"\r
- + " down the amount of choices.";\r
+ return "A drop-down selection component with single item selection.<br/>"\r
+ + " A 'starts-with' filter has been used in this example,"\r
+ + " so you can key in some text and only the options"\r
+ + " beginning with your input will be shown.<br/>"\r
+ + " Because there are so many options, they are loaded on-demand"\r
+ + " (\"lazy-loading\") from the server when paging or"\r
+ + " filtering. This behavior is built-in and requires no extra"\r
+ + " code.";\r
}\r
\r
@Override\r
@Override\r
public String getDescription() {\r
return "A simple list select component with multiple item selection."\r
- + " A null selection is also allowed in this example."\r
- + "<br>You can select multiple items from the list by holding"\r
+ + " You can allow or disallow <i>null selection</i> - i.e the"\r
+ + " possibility to make an empty selection. Null selection is"\r
+ + " allowed in this example.<br/>"\r
+ + "You can select multiple items from the list by holding"\r
+ " the CTRL of SHIFT key while clicking the items.";\r
}\r
\r
\r
@Override\r
public String getDescription() {\r
- return "A simple list select component with single item selection."\r
- + " A null selection is not allowed in this example.";\r
+ return "A simple list select component with single item selection.<br/>"\r
+ + " You can allow or disallow <i>null selection</i> - i.e the"\r
+ + " possibility to make an empty selection. Null selection is"\r
+ + " not allowed in this example.";\r
}\r
\r
@Override\r
package com.itmill.toolkit.demo.sampler.features.selects;\r
\r
+import java.util.Arrays;\r
+import java.util.List;\r
+\r
import com.itmill.toolkit.data.Property;\r
import com.itmill.toolkit.data.Property.ValueChangeEvent;\r
import com.itmill.toolkit.ui.ListSelect;\r
public class ListSelectSingleExample extends VerticalLayout implements\r
Property.ValueChangeListener {\r
\r
- private static final String[] cities = new String[] { "Berlin", "Brussels",\r
- "Helsinki", "Madrid", "Oslo", "Paris", "Stockholm" };\r
+ private static final List cities = Arrays.asList(new String[] { "Berlin",\r
+ "Brussels", "Helsinki", "Madrid", "Oslo", "Paris", "Stockholm" });\r
\r
public ListSelectSingleExample() {\r
setSpacing(true);\r
\r
- ListSelect l = new ListSelect("Please select a city");\r
- for (int i = 0; i < cities.length; i++) {\r
- l.addItem(cities[i]);\r
- }\r
- l.setRows(7);\r
- l.setNullSelectionAllowed(false);\r
- l.setValue("Berlin");\r
- l.setImmediate(true);\r
- l.addListener(this);\r
-\r
- addComponent(l);\r
+ // 'Shorthand' constructor - also supports data binding using Containers\r
+ ListSelect citySelect = new ListSelect("Please select a city", cities);\r
+\r
+ citySelect.setRows(7); // perfect length in out case\r
+ citySelect.setNullSelectionAllowed(false); // user can not 'unselect'\r
+ citySelect.select("Berlin"); // select this by default\r
+ citySelect.setImmediate(true); // send the change to the server at once\r
+ citySelect.addListener(this); // react when the user selects something\r
+\r
+ addComponent(citySelect);\r
}\r
\r
/*\r
- * Shows a notification when a selection is made.\r
+ * Shows a notification when a selection is made. The listener will be\r
+ * called whenever the value of the component changes, i.e when the user\r
+ * makes a new selection.\r
*/\r
public void valueChange(ValueChangeEvent event) {\r
getWindow().showNotification("Selected city: " + event.getProperty());\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.NativeSelect;\r
\r
\r
@Override\r
public String getDescription() {\r
- return "A native selection component provides a simple drop-down list for selecting one item.";\r
+ return "A NativeSelect is a a simple drop-down list"\r
+ + " for selecting one item. It is called <i>native</i>"\r
+ + " because it uses the look and feel from the browser in use.<br/>"\r
+ + " The ComboBox component is a much more versatile variant,"\r
+ + " but without the native look and feel.<br/>"\r
+ + " From a usability standpoint, you might also want to"\r
+ + " consider using a ListSelect in single-select-mode, so that"\r
+ + " the user can see all options right away.";\r
+\r
}\r
\r
@Override\r
\r
@Override\r
public Class[] getRelatedFeatures() {\r
- return new Class[] { ListSelectSingle.class, ListSelectMultiple.class,\r
- TwinColumnSelect.class };\r
+ return new Class[] { ComboBoxPlain.class, ListSelectSingle.class,\r
+ FeatureSet.Selects.class };\r
}\r
\r
@Override\r
public class TabSheetIconsExample extends VerticalLayout implements\r
TabSheet.SelectedTabChangeListener {\r
\r
+ // Icons for the table\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 TabSheetIconsExample() {\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
-\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
\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
+\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
addComponent(t);\r
projects / vaadin-framework.git / commitdiff
