*/
public static class Buttons extends FeatureSet {
public Buttons() {
- super("Buttons", new Feature[] {
- //
- new ButtonPush(), // basic
- new ButtonLink(), // link
- new ButtonSwitch(), // switch/checkbox
+ super(
+ "Buttons",
+ "Buttons",
+ "A button is one of the fundamental building blocks of any application.",
+ new Feature[] {
+ //
+ new ButtonPush(), // basic
+ new ButtonLink(), // link
+ new ButtonSwitch(), // switch/checkbox
- });
+ });
}
}
super(
"Links",
"Links",
- "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. Links can open new browser windows, and configure the amount of browser features shown, such as toolbar and addressbar.",
+ "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).",
new Feature[] {
//
new LinkCurrentWindow(), // basic
public static class Tabsheets extends FeatureSet {
public Tabsheets() {
- super("Tabsheets", new Feature[] {
- //
- new TabSheetIcons(), //
- new TabSheetScrolling(), //
- new TabSheetDisabled(), //
- });
+ super(
+ "Tabsheets",
+ "Tabsheets",
+ "A Tabsheet organizes multiple components so that only the one component associated with the currently selected 'tab' is shown. Typically a tab will contain a Layout, which in turn may contain many components.",
+ new Feature[] {
+ //
+ new TabSheetIcons(), //
+ new TabSheetScrolling(), //
+ new TabSheetDisabled(), //
+ });
}
}
public static class Accordions extends FeatureSet {
public Accordions() {
- super("Accordions", new Feature[] {
- //
- new AccordionIcons(), //
- new AccordionDisabled(), //
- });
+ super(
+ "Accordions",
+ "Accordions",
+ "An accordion component is a specialized case of a tabsheet."
+ + " Within an accordion, the tabs are organized vertically,"
+ + " and the content will be shown directly below the tab.",
+ new Feature[] {
+ //
+ new AccordionIcons(), //
+ new AccordionDisabled(), //
+ });
}
}
public static class Forms extends FeatureSet {
public Forms() {
- super(
- "Forms",
- "Forms",
+ super("Forms", "Forms",
"The Form -component provides a convenient way to organize"
- + " related fields visually.<br/><br/>It is most useful when connected"
- + " to a data source, and provides buffering and customization"
- + " features to support that scenario.",
- new Feature[] {
+ + " related fields visually.", new Feature[] {
//
new FormBasic(), //
new FormPojo(), //
super(
"Table (Grid)",
"Table (Grid)",
- "Also known as a (Data)Grid, Table can be used to show data in a tabular fashion. It's well suited for showing large datasets.",
+ "A Table, also known as a (Data)Grid, can be used to show data in a tabular fashion. It's well suited for showing large datasets.",
new Feature[] {
//
new TableHeaderIcons(), //
super(
"Texts",
"Texts",
- "A label is a simple component that allows you to add optionally formatted text components to your application.",
+ "A label is a simple component that allows you to add (optionally formatted) text components to your application.",
new Feature[] {
//
new LabelPlain(), //
super(
"Trees",
"Trees",
- "The Tree component allows a natural way to represent data that has hierarchical relationships, such as filesystems or message threads.",
+ "The Tree component provides a natural way to represent data that has hierarchical relationships, such as filesystems or message threads.",
new Feature[] {
//
new TreeSingleSelect(), //
\r
@Override\r
public String getDescription() {\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
+ return "You can disable, enable, hide and show accordion 'tabs'.";\r
}\r
\r
@Override\r
\r
@Override\r
public String getDescription() {\r
- return "An accordion component is a specialized case of a"\r
- + " tabsheet. Within an accordion, the tabs are organized"\r
- + " vertically, and the content will be shown directly"\r
- + " below the tab.";\r
+ return "The accordion 'tabs' can contain icons in addition to the caption.";\r
}\r
\r
@Override\r
import com.itmill.toolkit.demo.sampler.NamedExternalResource;
import com.itmill.toolkit.demo.sampler.features.blueprints.ProminentPrimaryAction;
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;
import com.itmill.toolkit.ui.Button;
public class ButtonLink extends Feature {
@Override
public String getDescription() {
- 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.";
+ return "A link-styled button works like a push button, but looks like"
+ + " a Link.<br/> It does not actually link somewhere, but"
+ + " triggers a server-side event, just like a regular button.";
}
@Override
@Override
public Class[] getRelatedFeatures() {
return new Class[] { ButtonPush.class, ButtonSwitch.class,
- LinkCurrentWindow.class, LinkNoDecorations.class,
- LinkSizedWindow.class, ProminentPrimaryAction.class,
+ LinkCurrentWindow.class, ProminentPrimaryAction.class,
FeatureSet.Links.class };
}
@Override
public String getDescription() {
- return "A basic push-button.";
+ return "A push-button, which can be considered a 'regular' button,"
+ + " returns to it's 'unclicked' state after emitting an event"
+ + " when the user clicks it.";
}
@Override
@Override
public String getDescription() {
- 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.";
+ return "A switch button works like a regular push button, triggering"
+ + " a server-side event, but it's state is 'sticky': the button"
+ + " toggles between it's on and off states, instead of popping"
+ + " right back out.<br/>Also know as a CheckBox.";
}
@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.form.FormBasic;
import com.itmill.toolkit.demo.sampler.features.notifications.NotificationError;
-import com.itmill.toolkit.ui.Component;
-import com.itmill.toolkit.ui.Window;
+import com.itmill.toolkit.ui.AbstractComponent;
public class Errors extends Feature {
}
public APIResource[] getRelatedAPI() {
- return new APIResource[] { new APIResource(Component.class),
- new APIResource(Window.Notification.class) };
+ return new APIResource[] { new APIResource(AbstractComponent.class) };
}
public Class[] getRelatedFeatures() {
// TODO link validation sample, form sample
- return new Class[] { NotificationError.class };
+ return new Class[] { Validation.class, FormBasic.class,
+ NotificationError.class };
}
public NamedExternalResource[] getRelatedResources() {
@Override
public Class[] getRelatedFeatures() {
- // TODO Auto-generated method stub
+ // TODO link embedded sample
return null;
}
@Override
public String getDescription() {
return "Most components can have a <i>description</i>,"
- + " which is shown as a <i>\"tooltip\"</i>.<br/>"
- + "Descriptions may have rich content.<br/>"
- + "Note that <i>description</i> is more generic term than"
- + " <i>tooltip</i> - a component might choose to show"
- + " the description in another way, if that's more appropriate"
- + " for that component.)";
+ + " which is shown as a <i>\"tooltip\"</i>."
+ + " Descriptions may have formatted ('rich') content.<br/>"
+ + "";
}
@Override
.setValue("Click <b>Edit my tooltip</b> to edit this tooltip, then <b>Apply</b>");
rte.setVisible(false); // hide editor initially
addComponent(rte);
- Button apply = new Button("Edit my tooltip",
- new Button.ClickListener() {
- public void buttonClick(ClickEvent event) {
- if (rte.isVisible()) {
- rte.setVisible(false);
- event.getButton().setDescription(
- (String) rte.getValue());
- event.getButton().setCaption("Edit my tooltip");
- } else {
- rte.setVisible(true);
- event.getButton().setCaption("Apply");
- }
- }
- });
+ Button apply = new Button("Edit tooltip", new Button.ClickListener() {
+ public void buttonClick(ClickEvent event) {
+ if (rte.isVisible()) {
+ rte.setVisible(false);
+ event.getButton().setDescription((String) rte.getValue());
+ event.getButton().setCaption("Edit tooltip");
+ } else {
+ rte.setVisible(true);
+ event.getButton().setCaption("Apply");
+ }
+ }
+ });
apply.setDescription((String) rte.getValue());
addComponent(apply);
public String getDescription() {\r
return "In this example, you can select a different locale"\r
+ " from the combo box and see how the calendar component"\r
- + " will be localized.";\r
+ + " is localized.";\r
}\r
\r
@Override\r
public String getDescription() {\r
return "In this example, you can select a different resolution"\r
+ " from the combo box and see how the calendar component"\r
- + " will change.";\r
+ + " changes.";\r
}\r
\r
@Override\r
@Override
public String getDescription() {
- return "";
+ return "A Form is most useful when connected to a data source, and"
+ + " provides buffering and customization features to support"
+ + " that scenario. <br/> Enter something and try discarding"
+ + " or applying.";
}
@Override
@Override
public String getDescription() {
- return "It can easily be used as a POJO or Bean editor by wrapping the"
+ return "A Form can easily be used as a POJO or Bean editor by wrapping the"
+ " bean using BeanItem. The basic functionality only requires"
+ " a couple of lines of code, then Validators and other"
+ " customizations can be applied to taste.";
@Override
public String getDescription() {
- return "";
+ return "By default, links open in the current browser window (use the browser back-button to get back).";
}
@Override
@Override
public String getDescription() {
- return "These links open a browser window without decorations.";
+ return "Links can open new browser windows, and configure the amount of browser features shown, such as toolbar and addressbar.<br/>These links open a browser window without decorations.";
}
@Override
@Override
public String getDescription() {
- return "These links open a small, prefixed size window without decorations.";
+ return "Links can configure the size of the opened window.<br/>These links open a small fixed size window without decorations.";
}
@Override
setSpacing(true);
setWidth(null); // layout will grow with content
- final TextField caption = new TextField("Caption");
+ final TextField caption = new TextField("Caption", "Message sent");
caption
.setDescription("Main info; a short caption-only notification is often most effective.");
caption.setWidth("200px");
addComponent(caption);
final RichTextArea description = new RichTextArea();
+ description.setValue("<p>to <i>john.doe@example.com</i></p>");
description.setCaption("Description");
description
.setDescription("Additional information; try to keep it short.");
@Override
public String getDescription() {
- return "<p>The <i>Error</i> variant is modal, and is to be used for"
+ return "<p>The <i>Error</i> notification is modal, and is to be used for"
+ " messages that must be seen by the user.<br/>"
+ " The <i>Error</i> message must be closed by clicking"
+ " the notification.</p><p>Candidates for an"
@Override
public String getDescription() {
- return "<p>The <i>Humanized</i> variant is an implementation of"
- + " the <i>transparent message</i> -pattern, and is meant"
+ return "<p>The <i>Humanized</i> notification is an implementation of"
+ + " the <i>transparent message</i> -pattern, and can be used"
+ " to indicate non-critical events while interrupting"
+ " the user as little as possible.<br/>"
+ "The <i>Humanized</i> message quickly fades away once"
- + " the user interacts with the application (e.g. moves"
- + " mouse, types)</p><p>Candidates for a"
+ + " the user interacts with the application (i.e. moves"
+ + " mouse, types)
.</p><p>Candidates for a"
+ " <i>Humanized</i> notification include 'XYZ saved',"
+ " 'Added XYZ', and other messages that the user can"
+ " safely ignore, once the application is familliar.</p>";
@Override
public String getDescription() {
- return "<p>The <i>Tray</i> variant shows up in the lower left corner,"
+ return "<p>The <i>Tray</i> notification shows up in the lower right corner,"
+ " and is meant to interrupt the user as little as possible"
+ " even if it's shown for a while. "
+ "The <i>Tray</i> message fades away after a few moments"
@Override
public String getDescription() {
- return "<p>The <i>Warning</i> variant is an implementation of"
+ return "<p>The <i>Warning</i> notification is an implementation of"
+ " the <i>transparent message</i> -pattern, and is meant"
+ " to interrupt the user as little as possible, while"
+ " still drawing the needed attention."
\r
@Override\r
public String getDescription() {\r
- return "The 'light' style version has less decorations than the regular Panel style.";\r
+ return "The 'light' panel has less decorations than the regular Panel style.";\r
\r
}\r
\r
@Override
public String getDescription() {
- return "Actions can be added to each row, and are show in the a"
+ return "Actions can be added to each row, and are show in a"
+ " context menu when right-clicking.";
}
\r
@Override\r
public String getDescription() {\r
- return "With a tabsheet component you also have the"\r
- + " ability to enable and disable as well as"\r
- + " show and hide specific tabs.";\r
+ return "Individual tabs can be enabled, disabled, hidden or visible.";\r
}\r
\r
@Override\r
\r
@Override\r
public String getDescription() {\r
- return "A tabsheet component with icons. Each tab can"\r
- + " contain any component. In this simple example"\r
- + " each tab contains a label."\r
- + "<br> You can also attach a listener to the tab"\r
- + " change event.";\r
+ return "Each tab can have an Icon in addition to the caption.";\r
}\r
\r
@Override\r
\r
@Override\r
public String getDescription() {\r
- return "A tabsheet component with too many tabs to display"\r
- + " within the width of the tabsheet. A scrolling"\r
- + "feature will be added to the tab bar automatically.";\r
+ return "If the tabs are to many to be shown at once, a scrolling control will appear automatically.";\r
}\r
\r
@Override\r
public String getDescription() {\r
return "In this example the content mode is set to"\r
+ " CONTENT_XHTML. This content mode assumes that the"\r
- + " content set to the label will be valid XHTML.";\r
+ + " content set to the label will be valid XHTML.<br/>"\r
+ + "Click the <i>Edit</i> button to edit the label content.";\r
}\r
\r
@Override\r
setSpacing(true);\r
setSizeUndefined(); // let layout grow with content\r
\r
- richText = new Label("<h1>Rich text label example</h1>"\r
- + "<p>In this example, the content mode is set to "\r
- + "<i>CONTENT_XHTML</i>.</p>"\r
- + "<p>This text can be edited with the Edit-button</p>");\r
+ richText = new Label(\r
+ "<h1>Rich text example</h1>"\r
+ + "<p>The <b>quick</b> brown fox jumps <sup>over</sup> the <b>lazy</b> dog.</p>"\r
+ + "<p>This text can be edited with the <i>Edit</i> -button</p>");\r
richText.setContentMode(Label.CONTENT_XHTML);\r
\r
addComponent(richText);\r
\r
@Override\r
public String getDescription() {\r
- return "A RichTextArea component allows editing XHTML"\r
- + " content. <br/>Click the edit button to open the"\r
- + " editor and the show button to show the edited"\r
- + " result as an XHTML label.";\r
+ return "The RichTextArea allows 'rich' formatting of the input.<br/>"\r
+ + "Click the <i>Edit</i> button to edit the label content"\r
+ + " with the RichTextArea.";\r
}\r
\r
@Override\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.Label;\r
+import com.itmill.toolkit.ui.TextField;\r
\r
public class TextArea extends Feature {\r
@Override\r
public String getName() {\r
- return "Textarea";\r
+ return "Text area";\r
}\r
\r
@Override\r
public String getDescription() {\r
- return "A multi-line Textfield component allows you to input"\r
- + " several lines of text."\r
+ return "A text field can be configured to allow multiple lines of input."\r
+ "<br>The amount of columns and lines can be set, and both are set here to"\r
+ " 20 characters. Note that this only affects the width and height of the"\r
+ " component, not the allowed length of input.";\r
\r
@Override\r
public APIResource[] getRelatedAPI() {\r
- return new APIResource[] { new APIResource(Label.class) };\r
+ return new APIResource[] { new APIResource(TextField.class) };\r
}\r
\r
@Override\r
public Class[] getRelatedFeatures() {\r
- return new Class[] { LabelPlain.class, LabelPreformatted.class,\r
- RichTextEditor.class };\r
+ return new Class[] { RichTextEditor.class, TextFieldSingle.class,\r
+ FeatureSet.Texts.class };\r
}\r
\r
@Override\r
public String getDescription() {\r
return "In this example, selecting items from the tree"\r
+ " is disabled. Instead, another method of selection"\r
- + " is used. Through ItemClickEvent we can update the"\r
+ + " is used. Using the ItemClickEvent, we can update the"\r
+ " label showing the selection."\r
+ "<br>Try to click your left, right and middle mouse"\r
- + "buttons on the tree items. Any modifier keys will"\r
+ + " buttons on the tree items. Any modifier keys will"\r
+ " also be detected.";\r
}\r
\r
@Override\r
public String getDescription() {\r
return "In this example, you can select multiple tree nodes"\r
- + " and delete your selection. Click a selected item again to de-select it.";\r
+ + " and delete the selected items. Click a selected item again to de-select it.";\r
}\r
\r
@Override\r
projects / vaadin-framework.git / commitdiff