Ut enim ad minim veniam, quis nostrud exercitation
Morbi fringilla convallis sapien, id pulvinar odio volutpat.Vivamus sagittis lacus vel augue laoreet rutrum faucibus.Donec sed odio operae, eu vulputate felis rhoncus.At nos hinc posthac, sitientis piros Afros.Tu quoque, Brute, fili mi, nihil timor populi, nihil!
Gallia est omnis divisa in partes tres, quarum.Praeterea iter est quasdam res quas ex communi.Cum ceteris in veneratione tui montes, nascetur mus.Quam temere in vitiis, legem sancimus haerentia.Idque Caesaris facere voluntate liceret: sese habere.
Contra legem facit qui id facit quod lex prohibet Tityre, tu patulae recubans sub tegmine fagi dolor.Tityre, tu patulae recubans sub tegmine fagi dolor.Prima luce, cum quibus mons aliud consensu ab eo.Quid securi etiam tamquam eu fugiat nulla pariatur.Fabio vel iudice vincam, sunt in culpa qui officia.Nihil hic munitissimus habendi senatus locus, nihil horum?
Plura mihi bona sunt, inclinet, amari petere vellent.Integer legentibus erat a ante historiarum dapibus.Quam diu etiam furor iste tuus nos eludet?Nec dubitamus multa iter quae et nos invenerat.Quisque ut dolor gravida, placerat libero vel, euismod.Quae vero auctorem tractata ab fiducia dicuntur.",
+ AbstractErrorMessage.ContentMode.HTML, ErrorLevel.CRITICAL));
+ row.addComponent(label);
+
+ label = new Label("Error message only");
+ label.setComponentError(new UserError("Something terrible has happened"));
+ row.addComponent(label);
+
+ return root;
+ }
+
+ VerticalLayout components(int num) {
+ menuItems.clear();
+
+ final VerticalLayout root = new VerticalLayout();
+ root.setWidth("33.333%");
+ root.setMargin(true);
+ root.addStyleName("components");
+ root.addStyleName("color-context" + num);
+
+ labels(root);
+ buttonsAndLinks(root);
+ textfields(root);
+ textareas(root);
+ comboboxes(root);
+ menubars(root);
+ checkboxes(root);
+ optiongroups(root);
+ datefields(root);
+ panels(root);
+ trees(root);
+ tables(root);
+ treetables(root);
+ sliders(root);
+ splitpanels(root);
+ tabsheets(root);
+ colorpickers(root);
+ accordions(root);
+ nativeselects(root);
+
+ return root;
+ }
+
+ void nativeselects(VerticalLayout root) {
+ HorizontalLayout row = addSection(root, "Native Selects",
+ Category.Selection_Components, null);
+
+ NativeSelect select = new NativeSelect("Drop Down Select");
+ row.addComponent(select);
+
+ ListSelect list = new ListSelect("List Select");
+ list.setNewItemsAllowed(true);
+ row.addComponent(list);
+
+ TwinColSelect tcs = new TwinColSelect("TwinCol Select");
+ tcs.setLeftColumnCaption("Left Column");
+ tcs.setRightColumnCaption("Right Column");
+ tcs.setNewItemsAllowed(true);
+ row.addComponent(tcs);
+
+ TwinColSelect tcs2 = new TwinColSelect("Sized TwinCol Select");
+ tcs2.setLeftColumnCaption("Left Column");
+ tcs2.setRightColumnCaption("Right Column");
+ tcs2.setNewItemsAllowed(true);
+ tcs2.setWidth("280px");
+ tcs2.setHeight("200px");
+ row.addComponent(tcs2);
+
+ for (int i = 1; i <= 10; i++) {
+ select.addItem("Option " + i);
+ list.addItem("Option " + i);
+ tcs.addItem("Option " + i);
+ tcs2.addItem("Option " + i);
+ }
+ }
+
+ void accordions(VerticalLayout root) {
+ HorizontalLayout row = addSection(root, "Accordions",
+ Category.Component_Containers, null);
+ row.setWidth("100%");
+
+ Accordion ac = new Accordion();
+ row.addComponent(ac);
+ ac.addTab(new VerticalLayout() {
+ {
+ setMargin(true);
+ addComponent(new Label(
+ "Fabio vel iudice vincam, sunt in culpa qui officia. Ut enim ad minim veniam, quis nostrud exercitation."));
+ }
+ }, "First Caption", icon(false));
+ ac.addTab(new VerticalLayout() {
+ {
+ setMargin(true);
+ addComponent(new Label(
+ "Gallia est omnis divisa in partes tres, quarum."));
+ }
+ }, "Second Caption", icon(false));
+ ac.addTab(new VerticalLayout() {
+ {
+ setMargin(true);
+ addComponent(new Label(
+ "Nihil hic munitissimus habendi senatus locus, nihil horum? Sed haec quis possit intrepidus aestimare tellus."));
+ }
+ }, "Third Caption", icon(false));
+ ac.addTab(new VerticalLayout() {
+ {
+ setMargin(true);
+ addComponent(new Label(
+ "Inmensae subtilitatis, obscuris et malesuada fames. Quisque ut dolor gravida, placerat libero vel, euismod."));
+ }
+ }, "Custom Caption Style", icon(false)).setStyleName("color1");
+ }
+
+ void tabsheets(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Tabs", Category.Component_Containers, null);
+ row.setWidth("100%");
+
+ final VerticalLayout wrap = new VerticalLayout();
+ wrap.setSpacing(true);
+ row.addComponent(wrap);
+
+ final CheckBox closable = new CheckBox("Closable");
+ closable.setImmediate(true);
+ wrap.addComponent(closable);
+
+ final CheckBox overflow = new CheckBox("Overflow");
+ overflow.setImmediate(true);
+ wrap.addComponent(overflow);
+
+ final CheckBox icon = new CheckBox("Icons");
+ icon.setImmediate(true);
+ wrap.addComponent(icon);
+
+ ValueChangeListener update = new ValueChangeListener() {
+ @Override
+ public void valueChange(ValueChangeEvent event) {
+ wrap.removeAllComponents();
+
+ wrap.addComponents(closable, overflow, icon);
+
+ wrap.addComponent(getTabSheet("Normal", null,
+ closable.getValue(), overflow.getValue(),
+ icon.getValue()));
+ wrap.addComponent(getTabSheet("Centered tabs", "centered-tabs",
+ closable.getValue(), overflow.getValue(),
+ icon.getValue()));
+ wrap.addComponent(getTabSheet("Equal-width tabs",
+ "equal-width-tabs", closable.getValue(),
+ overflow.getValue(), icon.getValue()));
+ wrap.addComponent(getTabSheet("Icons on top + padded tabbar",
+ "icons-on-top padded-tabbar", closable.getValue(),
+ overflow.getValue(), icon.getValue()));
+ wrap.addComponent(getTabSheet("Only selected tab is closable",
+ "selected-closable", closable.getValue(),
+ overflow.getValue(), icon.getValue()));
+ }
+ };
+ closable.addValueChangeListener(update);
+ overflow.addValueChangeListener(update);
+ icon.addValueChangeListener(update);
+
+ // Generate initial view
+ icon.setValue(true);
+ }
+
+ void splitpanels(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Split Panels", Category.Component_Containers,
+ null);
+
+ HorizontalSplitPanel sp = new HorizontalSplitPanel();
+ sp.setWidth("200px");
+ sp.setHeight(null);
+ sp.setFirstComponent(new Label(
+ "Fictum, deserunt mollit anim laborum astutumque!"));
+ sp.setSecondComponent(new Label(
+ "Non equidem invideo, miror magis posuere velit aliquet."));
+ row.addComponent(sp);
+
+ VerticalSplitPanel sp2 = new VerticalSplitPanel();
+ sp2.setWidth("200px");
+ sp2.setHeight("6em");
+ sp2.setFirstComponent(new Label(
+ "Fictum, deserunt mollit anim laborum astutumque!"));
+ sp2.setSecondComponent(new Label(
+ "Non equidem invideo, miror magis posuere velit aliquet."));
+ row.addComponent(sp2);
+
+ sp = new HorizontalSplitPanel();
+ sp.setWidth("200px");
+ sp.setHeight("200px");
+ sp.addStyleName("small");
+ sp.setFirstComponent(new Label(
+ "Fictum, deserunt mollit anim laborum astutumque!"));
+ sp.setSecondComponent(new Label(
+ "Non equidem invideo, miror magis posuere velit aliquet."));
+ row.addComponent(sp);
+
+ sp2 = new VerticalSplitPanel();
+ sp2.setWidth("200px");
+ sp2.setHeight("6em");
+ sp2.addStyleName("small");
+ sp2.setFirstComponent(new Label(
+ "Fictum, deserunt mollit anim laborum astutumque!"));
+ sp2.setSecondComponent(new Label(
+ "Non equidem invideo, miror magis posuere velit aliquet."));
+ row.addComponent(sp2);
+ }
+
+ void sliders(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Sliders", Category.Basic_Components, null);
+
+ Slider slider = new Slider("Horizontal");
+ slider.setValue(50.0);
+ row.addComponent(slider);
+
+ slider = new Slider("Horizontal, sized");
+ slider.setValue(50.0);
+ slider.setWidth("200px");
+ row.addComponent(slider);
+
+ slider = new Slider("Vertical");
+ slider.setValue(50.0);
+ slider.setOrientation(SliderOrientation.VERTICAL);
+ row.addComponent(slider);
+
+ slider = new Slider("Vertical, sized");
+ slider.setValue(50.0);
+ slider.setOrientation(SliderOrientation.VERTICAL);
+ slider.setHeight("200px");
+ row.addComponent(slider);
+
+ slider = new Slider("Disabled");
+ slider.setValue(50.0);
+ slider.setEnabled(false);
+ row.addComponent(slider);
+ }
+
+ void tables(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Tables", Category.Selection_Components, null);
+ row.setWidth("100%");
+
+ VerticalLayout wrap = new VerticalLayout();
+ wrap.setSpacing(true);
+ row.addComponent(wrap);
+
+ Table table = getTable("Normal");
+ wrap.addComponent(table);
+
+ table = getTable("Sized & Footer");
+ table.setWidth("100%");
+ table.setColumnExpandRatio("Lorem", 1.0f);
+ table.setColumnExpandRatio("Foo", 1.0f);
+ table.setColumnExpandRatio("Bar", 1.0f);
+ table.setFooterVisible(true);
+ table.setColumnFooter("Lorem", "lorem");
+ table.setColumnFooter("Foo", "foo");
+ table.setColumnFooter("Bar", "bar");
+ wrap.addComponent(table);
+ }
+
+ void treetables(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "TreeTables", Category.Selection_Components,
+ null);
+ row.setWidth("100%");
+
+ VerticalLayout wrap = new VerticalLayout();
+ wrap.setSpacing(true);
+ row.addComponent(wrap);
+
+ TreeTable table = getTreeTable("Normal");
+ wrap.addComponent(table);
+ }
+
+ void trees(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Tree", Category.Selection_Components, null);
+ Tree tree = new Tree();
+ tree.setSelectable(true);
+ tree.setMultiSelect(true);
+ tree.setContainerDataSource(generateContainer(10, true));
+ tree.setDragMode(TreeDragMode.NODE);
+ row.addComponent(tree);
+ tree.setItemCaptionPropertyId(CAPTION_PROPERTY);
+ tree.setItemIconPropertyId(ICON_PROPERTY);
+ tree.expandItem(firstItemId);
+ // TODO fix the issue that tree selection focuses the component (and
+ // then scrolls to that component)
+ // tree.select(firstItemId);
+ tree.setItemIcon(firstItemId, icon(false));
+
+ tree.setDropHandler(new DropHandler() {
+ @Override
+ public AcceptCriterion getAcceptCriterion() {
+ return AcceptAll.get();
+ }
+
+ @Override
+ public void drop(DragAndDropEvent event) {
+ Notification.show(event.getTransferable().toString());
+ }
+ });
+
+ // Add actions (context menu)
+ tree.addActionHandler(this);
+ }
+
+ void panels(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Panels & Layout panels",
+ Category.Component_Containers, null);
+
+ Panel panel = new Panel("Normal");
+ panel.setIcon(icon(false));
+ panel.setContent(panelContent());
+ row.addComponent(panel);
+
+ panel = new Panel("Sized");
+ panel.setIcon(icon(false));
+ panel.setWidth("10em");
+ panel.setHeight("250px");
+ panel.setContent(panelContent());
+ row.addComponent(panel);
+
+ panel = new Panel("Custom Caption");
+ panel.setIcon(icon(false));
+ panel.addStyleName("color1");
+ panel.setContent(panelContent());
+ row.addComponent(panel);
+
+ panel = new Panel("Custom Caption");
+ panel.setIcon(icon(false));
+ panel.addStyleName("color2");
+ panel.setContent(panelContent());
+ row.addComponent(panel);
+
+ panel = new Panel("Custom Caption");
+ panel.setIcon(icon(false));
+ panel.addStyleName("color3");
+ panel.setContent(panelContent());
+ row.addComponent(panel);
+
+ panel = new Panel("Borderless style");
+ panel.setIcon(icon(false));
+ panel.addStyleName("borderless");
+ panel.setContent(panelContent());
+ row.addComponent(panel);
+
+ panel = new Panel("Well style");
+ panel.setIcon(icon(false));
+ panel.addStyleName("well");
+ panel.setContent(panelContent());
+ row.addComponent(panel);
+
+ CssLayout layout = new CssLayout();
+ layout.setIcon(icon(false));
+ layout.setCaption("Panel style layout");
+ layout.addStyleName("card");
+ layout.addComponent(panelContent());
+ row.addComponent(layout);
+
+ layout = new CssLayout();
+ layout.setIcon(icon(false));
+ layout.setCaption("Well style layout");
+ layout.addStyleName("well");
+ layout.addComponent(panelContent());
+ row.addComponent(layout);
+ }
+
+ void datefields(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Date Fields", Category.Inputs, null);
+
+ DateField date = new DateField("Default resolution");
+ date.setValue(new Date());
+ row.addComponent(date);
+
+ date = new DateField("Default resolution, explicit size");
+ date.setValue(new Date());
+ row.addComponent(date);
+ date.setWidth("260px");
+ date.setHeight("60px");
+
+ date = new DateField("Second resolution");
+ date.setValue(new Date());
+ date.setResolution(Resolution.SECOND);
+ row.addComponent(date);
+
+ date = new DateField("Minute resolution");
+ date.setValue(new Date());
+ date.setResolution(Resolution.MINUTE);
+ row.addComponent(date);
+
+ date = new DateField("Hour resolution");
+ date.setValue(new Date());
+ date.setResolution(Resolution.HOUR);
+ row.addComponent(date);
+
+ date = new DateField("Disabled");
+ date.setValue(new Date());
+ date.setResolution(Resolution.HOUR);
+ date.setEnabled(false);
+ row.addComponent(date);
+
+ date = new DateField("Day resolution");
+ date.setValue(new Date());
+ date.setResolution(Resolution.DAY);
+ row.addComponent(date);
+
+ date = new DateField("Month resolution");
+ date.setValue(new Date());
+ date.setResolution(Resolution.MONTH);
+ row.addComponent(date);
+
+ date = new DateField("Year resolution");
+ date.setValue(new Date());
+ date.setResolution(Resolution.YEAR);
+ row.addComponent(date);
+
+ date = new DateField("Custom color");
+ date.setValue(new Date());
+ date.setResolution(Resolution.DAY);
+ date.addStyleName("color1");
+ row.addComponent(date);
+
+ date = new DateField("Custom color");
+ date.setValue(new Date());
+ date.setResolution(Resolution.DAY);
+ date.addStyleName("color2");
+ row.addComponent(date);
+
+ date = new DateField("Custom color");
+ date.setValue(new Date());
+ date.setResolution(Resolution.DAY);
+ date.addStyleName("color3");
+ row.addComponent(date);
+
+ date = new DateField("Small");
+ date.setValue(new Date());
+ date.setResolution(Resolution.DAY);
+ date.addStyleName("small");
+ row.addComponent(date);
+
+ date = new DateField("Large");
+ date.setValue(new Date());
+ date.setResolution(Resolution.DAY);
+ date.addStyleName("large");
+ row.addComponent(date);
+
+ date = new DateField("Week numbers");
+ date.setValue(new Date());
+ date.setResolution(Resolution.DAY);
+ date.setLocale(new Locale("fi", "fi"));
+ date.setShowISOWeekNumbers(true);
+ row.addComponent(date);
+
+ date = new DateField("US locale");
+ date.setValue(new Date());
+ date.setResolution(Resolution.SECOND);
+ date.setLocale(new Locale("en", "US"));
+ row.addComponent(date);
+
+ date = new DateField("Custom format");
+ date.setValue(new Date());
+ date.setDateFormat("E dd/MM/yyyy");
+ row.addComponent(date);
+ }
+
+ void optiongroups(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Option Groups", Category.Selection_Components,
+ null);
+
+ OptionGroup options = new OptionGroup("Choose one, explicit width");
+ options.setWidth("200px");
+ options.addItem("Option One");
+ Item two = options
+ .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
+ options.addItem("Option Three");
+ options.select("Option One");
+ options.setItemIcon("Option One", icon(false));
+ options.setItemIcon(two, icon(false));
+ options.setItemIcon("Option Three", icon(true));
+ row.addComponent(options);
+
+ options = new OptionGroup("Choose many, explicit width");
+ options.setMultiSelect(true);
+ options.setWidth("200px");
+ options.addItem("Option One");
+ two = options
+ .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
+ options.addItem("Option Three");
+ options.select("Option One");
+ options.setItemIcon("Option One", icon(false));
+ options.setItemIcon(two, icon(false));
+ options.setItemIcon("Option Three", icon(true));
+ row.addComponent(options);
+ }
+
+ void checkboxes(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Check Boxes", Category.Inputs, null);
+
+ CheckBox check = new CheckBox("Checked", true);
+ row.addComponent(check);
+
+ check = new CheckBox(
+ "Checked, explicit width, so that the caption should wrap",
+ true);
+ row.addComponent(check);
+ check.setWidth("150px");
+
+ check = new CheckBox("Not checked");
+ row.addComponent(check);
+
+ check = new CheckBox(null, true);
+ check.setDescription("No caption");
+ row.addComponent(check);
+
+ check = new CheckBox("Custom color", true);
+ check.addStyleName("color1");
+ row.addComponent(check);
+
+ check = new CheckBox("Custom color", true);
+ check.addStyleName("color2");
+ check.setIcon(icon(false));
+ row.addComponent(check);
+
+ check = new CheckBox("With Icon", true);
+ check.setIcon(icon(false));
+ row.addComponent(check);
+
+ check = new CheckBox();
+ check.setIcon(icon(true));
+ row.addComponent(check);
+
+ check = new CheckBox("Small", true);
+ check.addStyleName("small");
+ row.addComponent(check);
+
+ check = new CheckBox("Large", true);
+ check.addStyleName("large");
+ row.addComponent(check);
+ }
+
+ void menubars(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Menu Bars", Category.Basic_Components, null);
+ row.setWidth("100%");
+ row.addComponent(getMenuBar());
+ }
+
+ void comboboxes(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Combo Boxes", Category.Selection_Components,
+ null);
+
+ Container generatedContainer = generateContainer(200, false);
+ ComboBox combo = new ComboBox("Normal");
+ combo.setInputPrompt("You can type here");
+ combo.setContainerDataSource(generatedContainer);
+ combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
+ combo.setItemIconPropertyId(ICON_PROPERTY);
+ row.addComponent(combo);
+
+ combo = new ComboBox("Explicit size");
+ combo.setInputPrompt("You can type here");
+ combo.addItem("Option One");
+ combo.addItem("Option Two");
+ combo.addItem("Option Three");
+ combo.setWidth("260px");
+ combo.setHeight("60px");
+ row.addComponent(combo);
+
+ combo = new ComboBox("Disabled");
+ combo.setInputPrompt("You can type here");
+ combo.addItem("Option One");
+ combo.addItem("Option Two");
+ combo.addItem("Option Three");
+ combo.setEnabled(false);
+ row.addComponent(combo);
+
+ combo = new ComboBox("Custom color");
+ combo.setInputPrompt("You can type here");
+ combo.setContainerDataSource(generatedContainer);
+ combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
+ combo.setItemIconPropertyId(ICON_PROPERTY);
+ combo.addStyleName("color1");
+ row.addComponent(combo);
+
+ combo = new ComboBox("Custom color");
+ combo.setInputPrompt("You can type here");
+ combo.setContainerDataSource(generatedContainer);
+ combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
+ combo.setItemIconPropertyId(ICON_PROPERTY);
+ combo.addStyleName("color2");
+ row.addComponent(combo);
+
+ combo = new ComboBox("Custom color");
+ combo.setInputPrompt("You can type here");
+ combo.setContainerDataSource(generatedContainer);
+ combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
+ combo.setItemIconPropertyId(ICON_PROPERTY);
+ combo.addStyleName("color3");
+ row.addComponent(combo);
+
+ combo = new ComboBox("Small");
+ combo.setInputPrompt("You can type here");
+ combo.addItem("Option One");
+ combo.addItem("Option Two");
+ combo.addItem("Option Three");
+ combo.addStyleName("small");
+ row.addComponent(combo);
+
+ combo = new ComboBox("Large");
+ combo.setInputPrompt("You can type here");
+ combo.addItem("Option One");
+ combo.addItem("Option Two");
+ combo.addItem("Option Three");
+ combo.addStyleName("large");
+ row.addComponent(combo);
+ }
+
+ void textareas(final VerticalLayout root) {
+ HorizontalLayout row;
+ row = addSection(root, "Text Areas", Category.Inputs, null);
+
+ TextArea ta = new TextArea("Normal");
+ ta.setInputPrompt("Write your commentâ¦");
+ row.addComponent(ta);
+
+ ta = new TextArea("Focused");
+ ta.setInputPrompt("Write your commentâ¦");
+ ta.addStyleName("focused");
+ row.addComponent(ta);
+
+ ta = new TextArea("Custom color");
+ ta.addStyleName("color1");
+ ta.setInputPrompt("Write your commentâ¦");
+ row.addComponent(ta);
+
+ ta = new TextArea("Custom color, read-only");
+ ta.addStyleName("color2");
+ ta.setValue("Field value, spanning multiple lines of text");
+ ta.setReadOnly(true);
+ row.addComponent(ta);
+
+ ta = new TextArea("Custom color, inline icon");
+ ta.addStyleName("color3");
+ ta.setValue("Inline icon not really workingâ¦");
+ ta.addStyleName("inline-icon");
+ ta.setIcon(icon(false));
+ row.addComponent(ta);
+
+ ta = new TextArea("Small");
+ ta.addStyleName("small");
+ ta.setInputPrompt("Write your commentâ¦");
+ row.addComponent(ta);
+
+ ta = new TextArea("Large");
+ ta.addStyleName("large");
+ ta.setInputPrompt("Write your commentâ¦");
+ row.addComponent(ta);
+
+ ta = new TextArea("Borderless");
+ ta.addStyleName("borderless");
+ ta.setInputPrompt("Write your commentâ¦");
+ row.addComponent(ta);
+ }
+
+ void textfields(final VerticalLayout root) {
+ HorizontalLayout row = addSection(root, "Text Fields", Category.Inputs,
+ null);
+
+ TextField tf = new TextField("Normal");
+ tf.setInputPrompt("First name");
+ tf.setIcon(icon(false));
+ row.addComponent(tf);
+
+ tf = new TextField("Focused");
+ tf.setInputPrompt("Last name");
+ tf.addStyleName("focused");
+ row.addComponent(tf);
+
+ tf = new TextField("Custom color");
+ tf.setInputPrompt("Email");
+ tf.addStyleName("color1");
+ row.addComponent(tf);
+
+ tf = new TextField("User Color");
+ tf.setInputPrompt("Gender");
+ tf.addStyleName("color2");
+ row.addComponent(tf);
+
+ tf = new TextField("Themed");
+ tf.setInputPrompt("Age");
+ tf.addStyleName("color3");
+ row.addComponent(tf);
+
+ tf = new TextField("Read-only");
+ tf.setInputPrompt("Nationality");
+ tf.setValue("Finnish");
+ tf.setReadOnly(true);
+ row.addComponent(tf);
+
+ tf = new TextField("Small");
+ tf.setValue("Field value");
+ tf.addStyleName("small");
+ row.addComponent(tf);
+
+ tf = new TextField("Large");
+ tf.setValue("Field value");
+ tf.addStyleName("large");
+ tf.setIcon(icon(true));
+ row.addComponent(tf);
+
+ tf = new TextField("Icon inside");
+ tf.setInputPrompt("Ooh, an icon");
+ tf.addStyleName("inline-icon");
+ tf.setIcon(icon(false));
+ row.addComponent(tf);
+
+ tf = new TextField("16px supported by default");
+ tf.setInputPrompt("Image icon");
+ tf.addStyleName("inline-icon");
+ tf.setIcon(icon(true, 16));
+ row.addComponent(tf);
+
+ tf = new TextField();
+ tf.setValue("Font, no caption");
+ tf.addStyleName("inline-icon");
+ tf.setIcon(icon(false));
+ row.addComponent(tf);
+
+ tf = new TextField();
+ tf.setValue("Image, no caption");
+ tf.addStyleName("inline-icon");
+ tf.setIcon(icon(true, 16));
+ row.addComponent(tf);
+
+ CssLayout group = new CssLayout();
+ group.addStyleName("v-component-group");
+ row.addComponent(group);
+
+ tf = new TextField();
+ tf.setInputPrompt("Grouped with a button");
+ tf.addStyleName("inline-icon");
+ tf.setIcon(icon(false));
+ tf.setWidth("260px");
+ group.addComponent(tf);
+
+ Button button = new Button("Do It");
+ // button.addStyleName("primary");
+ group.addComponent(button);
+
+ tf = new TextField("Borderless");
+ tf.setInputPrompt("Write hereâ¦");
+ tf.addStyleName("inline-icon");
+ tf.addStyleName("borderless");
+ tf.setIcon(icon(false));
+ row.addComponent(tf);
+ }
+
+ void buttonsAndLinks(final VerticalLayout root) {
+ HorizontalLayout row = addSection(root, "Buttons",
+ Category.Basic_Components, null);
+
+ Button button = new Button("Normal");
+ row.addComponent(button);
+
+ button = new Button("Focused");
+ button.addStyleName("focus");
+ row.addComponent(button);
+
+ button = new Button("Pressed");
+ button.addStyleName("active");
+ button.addStyleName("focus");
+ row.addComponent(button);
+
+ button = new Button("Disabled");
+ button.setEnabled(false);
+ row.addComponent(button);
+
+ button = new Button("Primary");
+ button.addStyleName("primary");
+ row.addComponent(button);
+
+ button = new Button("Friendly");
+ button.addStyleName("friendly");
+ row.addComponent(button);
+
+ button = new Button("Danger");
+ button.addStyleName("danger");
+ row.addComponent(button);
+
+ // button = new Button("Custom");
+ // button.addStyleName("color2");
+ // row.addComponent(button);
+ //
+ // button = new Button("User Color");
+ // button.addStyleName("color3");
+ // row.addComponent(button);
+ //
+ // button = new Button("Themed");
+ // button.addStyleName("color4");
+ // row.addComponent(button);
+ //
+ // button = new Button("Alternate");
+ // button.addStyleName("color5");
+ // row.addComponent(button);
+ //
+ // button = new Button("Other");
+ // button.addStyleName("color6");
+ // row.addComponent(button);
+
+ button = new Button("Small");
+ button.addStyleName("small");
+ button.setIcon(icon(false));
+ row.addComponent(button);
+
+ button = new Button("Large");
+ button.addStyleName("large");
+ button.addStyleName("icon-align-right");
+ button.setIcon(icon(false));
+ row.addComponent(button);
+
+ button = new Button("Image icon");
+ button.setIcon(icon(true, 16));
+ row.addComponent(button);
+
+ button = new Button("Image icon");
+ button.addStyleName("icon-align-right");
+ button.setIcon(icon(true));
+ row.addComponent(button);
+
+ button = new Button("Photos");
+ button.setIcon(icon(false));
+ row.addComponent(button);
+
+ button = new Button();
+ button.setIcon(icon(false));
+ button.addStyleName("icon");
+ row.addComponent(button);
+
+ button = new Button("Borderless");
+ button.setIcon(icon(false));
+ button.addStyleName("borderless");
+ row.addComponent(button);
+
+ button = new Button("Link style");
+ button.setIcon(icon(false));
+ button.addStyleName("link");
+ row.addComponent(button);
+
+ button = new Button("Icon on right");
+ button.setIcon(icon(false));
+ button.addStyleName("icon-align-right");
+ row.addComponent(button);
+
+ CssLayout group = new CssLayout();
+ group.addStyleName("v-component-group");
+ row.addComponent(group);
+
+ button = new Button("One");
+ group.addComponent(button);
+ button = new Button("Two");
+ group.addComponent(button);
+ button = new Button("Three");
+ group.addComponent(button);
+
+ NativeButton nbutton = new NativeButton("Native");
+ row.addComponent(nbutton);
+
+ Link link = new Link("Link to vaadin.com", new ExternalResource(
+ "https://vaadin.com"));
+ row.addComponent(link);
+
+ link = new Link("Custom color", new ExternalResource(
+ "https://vaadin.com"));
+ link.addStyleName("color3");
+ link.setIcon(icon(false));
+ row.addComponent(link);
+
+ link = new Link("Small", new ExternalResource("https://vaadin.com"));
+ link.addStyleName("small");
+ row.addComponent(link);
+
+ link = new Link("Large", new ExternalResource("https://vaadin.com"));
+ link.addStyleName("large");
+ row.addComponent(link);
+
+ link = new Link(null, new ExternalResource("https://vaadin.com"));
+ link.setIcon(icon(false));
+ row.addComponent(link);
+ }
+
+ void colorpickers(final VerticalLayout root) {
+ HorizontalLayout row = addSection(root, "Color Pickers",
+ Category.Inputs, null);
+
+ ColorPicker cp = new ColorPicker();
+ cp.setDefaultCaptionEnabled(true);
+ cp.setIcon(icon(false));
+ cp.setComponentError(new UserError("Test error"));
+ row.addComponent(cp);
+
+ cp = new ColorPicker();
+ cp.setPopupStyle(PopupStyle.POPUP_SIMPLE);
+ cp.setTextfieldVisibility(true);
+ row.addComponent(cp);
+ }
+
+ void labels(final VerticalLayout root) {
+ addSection(root, "Labels", Category.Basic_Components, null);
+
+ Label large = new Label(
+ "Large type for introductory text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+ large.addStyleName("large");
+ root.addComponent(large);
+
+ Label h2 = new Label("Subtitle");
+ h2.addStyleName("h2");
+ root.addComponent(h2);
+
+ Label normal = new Label(
+ "Normal type for plain text, with a regular link. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.",
+ ContentMode.HTML);
+ root.addComponent(normal);
+
+ Label h3 = new Label("Small Title");
+ h3.addStyleName("h3");
+ root.addComponent(h3);
+
+ Label small = new Label(
+ "Small type for additional text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+ small.addStyleName("small");
+ root.addComponent(small);
+
+ Label h4 = new Label("Section Title");
+ h4.addStyleName("h4");
+ root.addComponent(h4);
+
+ normal = new Label(
+ "Normal type for plain text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+ root.addComponent(normal);
+
+ h4 = new Label("Spinner");
+ h4.addStyleName("h4");
+ root.addComponent(h4);
+
+ Label spinnerDesc = new Label(
+ "Below is a Label with a custom style name, for which the spinner mixin is added.");
+ spinnerDesc.addStyleName("small");
+ root.addComponent(spinnerDesc);
+
+ Label spinner = new Label();
+ spinner.addStyleName("spinner");
+ root.addComponent(spinner);
+ }
+
+ HorizontalLayout addSection(VerticalLayout root, String title,
+ Category category, String description) {
+ String id = title.toLowerCase().replace(" ", "-");
+
+ Label h1 = new Label(title);
+ h1.addStyleName("h1");
+ h1.setId("" + id);
+ root.addComponent(h1);
+
+ if (description != null) {
+ Label desc = new Label(description + "
", ContentMode.HTML);
+ root.addComponent(desc);
+ }
+
+ Link link = new Link(title, new ExternalResource("#" + id));
+
+ ArrayList items = menuItems.get(category);
+ if (items == null) {
+ items = new ArrayList();
+ menuItems.put(category, items);
+ }
+ items.add(link);
+
+ HorizontalLayout row = new HorizontalLayout();
+ row.addStyleName("wrapping");
+ row.setSpacing(true);
+ root.addComponent(row);
+ return row;
+ }
+
+ private Component windowContents(boolean scrollable) {
+ VerticalLayout root = new VerticalLayout();
+
+ HorizontalLayout footer = new HorizontalLayout();
+ footer.setWidth("100%");
+ footer.setSpacing(true);
+ footer.addStyleName("v-window-bottom-toolbar");
+
+ Label footerText = new Label("Footer text");
+ footerText.setSizeUndefined();
+
+ Button ok = new Button("OK");
+ ok.addStyleName("primary");
+
+ Button cancel = new Button("Cancel");
+
+ footer.addComponents(footerText, ok, cancel);
+ footer.setExpandRatio(footerText, 1);
+
+ Component content = null;
+ if (scrollable) {
+ Panel panel = new Panel();
+ panel.setSizeFull();
+ panel.addStyleName("borderless");
+ VerticalLayout l = new VerticalLayout();
+ l.addComponent(new Label(
+ "
Subtitle
Quam diu etiam furor iste tuus nos eludet? Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ut enim ad minim veniam, quis nostrud exercitation. Quae vero auctorem tractata ab fiducia dicuntur.
Quisque ut dolor gravida, placerat libero vel, euismod. Etiam habebis sem dicantur magna mollis euismod. Nihil hic munitissimus habendi senatus locus, nihil horum? Curabitur est gravida et libero vitae dictum. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.