diff options
25 files changed, 121 insertions, 1 deletions
diff --git a/documentation/components/chapter-components.asciidoc b/documentation/components/chapter-components.asciidoc index 9d908ae64c..36e0287e30 100644 --- a/documentation/components/chapter-components.asciidoc +++ b/documentation/components/chapter-components.asciidoc @@ -4,7 +4,6 @@ This chapter provides an overview and a detailed description of all non-layout components in Vaadin. - include::components-overview.asciidoc[leveloffset=+2] include::components-interfaces.asciidoc[leveloffset=+2] diff --git a/documentation/components/components-button.asciidoc b/documentation/components/components-button.asciidoc index 93eddfe845..59ab380348 100644 --- a/documentation/components/components-button.asciidoc +++ b/documentation/components/components-button.asciidoc @@ -7,6 +7,12 @@ layout: page [[components.button]] = [classname]#Button# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/button"] +endif::web[] + + The [classname]#Button# component is normally used for initiating some action, such as finalizing input in forms. When the user clicks a button, a [classname]#Button.ClickEvent# is fired, which can be handled with a diff --git a/documentation/components/components-calendar.asciidoc b/documentation/components/components-calendar.asciidoc index 19f91d8553..0bc2791088 100644 --- a/documentation/components/components-calendar.asciidoc +++ b/documentation/components/components-calendar.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.calendar]] = [classname]#Calendar# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/dates/dates-calendar] +endif::web[] + The [classname]#Calendar# component allows organizing and displaying calendar events. The main features of the calendar include: diff --git a/documentation/components/components-checkbox.asciidoc b/documentation/components/components-checkbox.asciidoc index f03aae03c5..95a60cd5fa 100644 --- a/documentation/components/components-checkbox.asciidoc +++ b/documentation/components/components-checkbox.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.checkbox]] = [classname]#CheckBox# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/other/check-box] +endif::web[] + [classname]#CheckBox# is a two-state selection component that can be either checked or unchecked. The caption of the check box will be placed right of the actual check box. Vaadin provides two ways to create check boxes: individual diff --git a/documentation/components/components-combobox.asciidoc b/documentation/components/components-combobox.asciidoc index e21ff100d0..f119cfbc40 100644 --- a/documentation/components/components-combobox.asciidoc +++ b/documentation/components/components-combobox.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.combobox]] = [classname]#ComboBox# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/combo-box] +endif::web[] + [classname]#ComboBox# is a selection component allows selecting an item from a drop-down list. The component also has a text field area, which allows entering search text by which the items shown in the drop-down list are filtered. Common diff --git a/documentation/components/components-datefield.asciidoc b/documentation/components/components-datefield.asciidoc index 6c4b836e26..0f15a0f6ad 100644 --- a/documentation/components/components-datefield.asciidoc +++ b/documentation/components/components-datefield.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.datefield]] = Date and Time Input with [classname]#DateField# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/dates/popup-date-field] +endif::web[] + The [classname]#DateField# component provides the means to display and input date and time. The field comes in two variations: [classname]#PopupDateField#, with a numeric input box and a popup calendar view, and diff --git a/documentation/components/components-grid.asciidoc b/documentation/components/components-grid.asciidoc index 98210eb860..e2013b8daa 100644 --- a/documentation/components/components-grid.asciidoc +++ b/documentation/components/components-grid.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.grid]] = [classname]#Grid# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid] +endif::web[] + ((("[classname]#Grid#"))) [classname]#Grid# is many things, and perhaps the most versatile and powerful component in Vaadin. Like [classname]#Table#, it allows presenting and editing diff --git a/documentation/components/components-label.asciidoc b/documentation/components/components-label.asciidoc index 9de3fc47da..115de5b376 100644 --- a/documentation/components/components-label.asciidoc +++ b/documentation/components/components-label.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.label]] = [classname]#Label# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-presentation/label] +endif::web[] + [classname]#Label# component displays non-editable text. This text can be used for short simple labels or for displaying long text, such as paragraphs. The text can be formatted in HTML or as preformatted text, depending on the diff --git a/documentation/components/components-link.asciidoc b/documentation/components/components-link.asciidoc index 35012212b6..b2da97a39f 100644 --- a/documentation/components/components-link.asciidoc +++ b/documentation/components/components-link.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.link]] = [classname]#Link# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/link] +endif::web[] + The [classname]#Link# component allows making hyperlinks. References to locations are represented as resource objects, explained in <<dummy/../../../framework/application/application-resources#application.resources,"Images diff --git a/documentation/components/components-listselect.asciidoc b/documentation/components/components-listselect.asciidoc index 900147ef1c..24f1bebc03 100644 --- a/documentation/components/components-listselect.asciidoc +++ b/documentation/components/components-listselect.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.listselect]] = [classname]#ListSelect# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/list-select] +endif::web[] + The [classname]#ListSelect# component is list box that shows the selectable items in a vertical list. If the number of items exceeds the height of the component, a scrollbar is shown. The component allows both single and multiple diff --git a/documentation/components/components-menubar.asciidoc b/documentation/components/components-menubar.asciidoc index ea984dc0e0..c70b16497d 100644 --- a/documentation/components/components-menubar.asciidoc +++ b/documentation/components/components-menubar.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.menubar]] = [classname]#MenuBar# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/menu-bar] +endif::web[] + The [classname]#MenuBar# component allows creating horizontal dropdown menus, much like the main menu in desktop applications. diff --git a/documentation/components/components-nativeselect.asciidoc b/documentation/components/components-nativeselect.asciidoc index f27c797eb9..2b0bea66f7 100644 --- a/documentation/components/components-nativeselect.asciidoc +++ b/documentation/components/components-nativeselect.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.nativeselect]] = [classname]#NativeSelect# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/drop-down-menu] +endif::web[] + [classname]#NativeSelect# is a drop-down selection component implemented with the native selection input of web browsers, using the HTML [literal]#++<select>++# element. diff --git a/documentation/components/components-optiongroup.asciidoc b/documentation/components/components-optiongroup.asciidoc index 8c66db64c4..8c4c0e2963 100644 --- a/documentation/components/components-optiongroup.asciidoc +++ b/documentation/components/components-optiongroup.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.optiongroup]] = [classname]#OptionGroup# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/option-group] +endif::web[] + [classname]#OptionGroup# is a selection component that allows selection from a group of radio buttons in single selection mode. In multiple selection mode, the items show up as check boxes. The common selection component features are diff --git a/documentation/components/components-passwordfield.asciidoc b/documentation/components/components-passwordfield.asciidoc index c8a8c220ba..1280de7529 100644 --- a/documentation/components/components-passwordfield.asciidoc +++ b/documentation/components/components-passwordfield.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.passwordfield]] = [classname]#PasswordField# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/password-field] +endif::web[] + The [classname]#PasswordField# is a variant of [classname]#TextField# that hides the typed input from visual inspection. diff --git a/documentation/components/components-popupview.asciidoc b/documentation/components/components-popupview.asciidoc index a26d15d951..8f67c392d8 100644 --- a/documentation/components/components-popupview.asciidoc +++ b/documentation/components/components-popupview.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.popupview]] = [classname]#PopupView# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/popup-view] +endif::web[] + The [classname]#PopupView# component allows opening a pop-up view either by clicking on a link or programmatically. The component has two representations: a minimized textual representation and the popped-up content. The view can contain diff --git a/documentation/components/components-progressbar.asciidoc b/documentation/components/components-progressbar.asciidoc index 4e50ae1b43..389855babf 100644 --- a/documentation/components/components-progressbar.asciidoc +++ b/documentation/components/components-progressbar.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.progressbar]] = [classname]#ProgressBar# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/progress-bar] +endif::web[] + The [classname]#ProgressBar# component allows displaying the progress of a task graphically. The progress is specified as a floating-point value between 0.0 and 1.0. diff --git a/documentation/components/components-richtextarea.asciidoc b/documentation/components/components-richtextarea.asciidoc index 6d71757c9c..ff354cfe8d 100644 --- a/documentation/components/components-richtextarea.asciidoc +++ b/documentation/components/components-richtextarea.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.richtextarea]] = [classname]#RichTextArea# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/rich-text-area] +endif::web[] + The [classname]#RichTextArea# field allows entering or editing formatted text. The toolbar provides all basic editing functionalities. The text content of [classname]#RichTextArea# is represented in HTML format. diff --git a/documentation/components/components-slider.asciidoc b/documentation/components/components-slider.asciidoc index cc0198baa5..a2c99f4b5c 100644 --- a/documentation/components/components-slider.asciidoc +++ b/documentation/components/components-slider.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.slider]] = [classname]#Slider# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/other/slider] +endif::web[] + The [classname]#Slider# is a vertical or horizontal bar that allows setting a numeric value within a defined range by dragging a bar handle with the mouse. The value is shown when dragging the handle. diff --git a/documentation/components/components-table.asciidoc b/documentation/components/components-table.asciidoc index e39e85079a..43d5653868 100644 --- a/documentation/components/components-table.asciidoc +++ b/documentation/components/components-table.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.table]] = [classname]#Table# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/table] +endif::web[] + ((("[classname]#Table#", id="term.components.table", range="startofrange"))) diff --git a/documentation/components/components-textarea.asciidoc b/documentation/components/components-textarea.asciidoc index 7811c7ba4b..2c219cc8dc 100644 --- a/documentation/components/components-textarea.asciidoc +++ b/documentation/components/components-textarea.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.textarea]] = [classname]#TextArea# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/text-area] +endif::web[] + [classname]#TextArea# is a multi-line version of the [classname]#TextField# component described in <<dummy/../../../framework/components/components-textfield#components.textfield,"TextField">>. diff --git a/documentation/components/components-textfield.asciidoc b/documentation/components/components-textfield.asciidoc index 016ced3c58..db3d93aeba 100644 --- a/documentation/components/components-textfield.asciidoc +++ b/documentation/components/components-textfield.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.textfield]] = [classname]#TextField# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/text-field] +endif::web[] + ((("[classname]#TextField#", id="term.components.textfield", range="startofrange"))) [classname]#TextField# is one of the most commonly used user interface diff --git a/documentation/components/components-tree.asciidoc b/documentation/components/components-tree.asciidoc index d32ce8d19b..d983049576 100644 --- a/documentation/components/components-tree.asciidoc +++ b/documentation/components/components-tree.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.tree]] = [classname]#Tree# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/tree] +endif::web[] + The [classname]#Tree# component allows a natural way to represent data that has hierarchical relationships, such as filesystems or message threads. The [classname]#Tree# component in Vaadin works much like the tree components of diff --git a/documentation/components/components-treetable.asciidoc b/documentation/components/components-treetable.asciidoc index 97e53cdf76..15db0cdd3d 100644 --- a/documentation/components/components-treetable.asciidoc +++ b/documentation/components/components-treetable.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.treetable]] = [classname]#TreeTable# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/tree-table] +endif::web[] + [classname]#TreeTable# is an extension of the [classname]#Table# component with support for a tree-like hierarchy in the first column. As with [classname]#Tree#, the hierarchy is determined by the parent-children diff --git a/documentation/components/components-twincolselect.asciidoc b/documentation/components/components-twincolselect.asciidoc index ad0305970a..f87e4ec993 100644 --- a/documentation/components/components-twincolselect.asciidoc +++ b/documentation/components/components-twincolselect.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.twincolselect]] = [classname]#TwinColSelect# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/list-builder] +endif::web[] + The [classname]#TwinColSelect# field provides a multiple selection component that shows two lists side by side, with the left column containing unselected items and the right column the selected items. The user can select items from diff --git a/documentation/components/components-upload.asciidoc b/documentation/components/components-upload.asciidoc index d03b89fef9..fa984e0db8 100644 --- a/documentation/components/components-upload.asciidoc +++ b/documentation/components/components-upload.asciidoc @@ -7,6 +7,11 @@ layout: page [[components.upload]] = [classname]#Upload# +ifdef::web[] +[.sampler] +image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/other/upload] +endif::web[] + The [classname]#Upload# component allows a user to upload files to the server. It displays a file name entry box, a file selection button, and an upload submit button. The user can either write the filename in the text area or click the |