Added CSS Inject / ColorPicker tutorial #11360

Change-Id: Iacafb3c4e26c4ff1a258eff466cfd18508d8ff0c

1 files changed, 234 insertions, 0 deletions

diff --git a/uitest/src/com/vaadin/tests/widgetset/client/minitutorials/v71beta/CSSInjectWithColorpicker.java b/uitest/src/com/vaadin/tests/widgetset/client/minitutorials/v71beta/CSSInjectWithColorpicker.java
new file mode 100644
index 0000000000..4ac85ab231
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/widgetset/client/minitutorials/v71beta/CSSInjectWithColorpicker.java
@@ -0,0 +1,234 @@
+package com.vaadin.tests.widgetset.client.minitutorials.v71beta;
+
+import java.util.Arrays;
+
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
+import com.vaadin.server.Page;
+import com.vaadin.server.Page.StyleSheet;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.shared.ui.MarginInfo;
+import com.vaadin.shared.ui.colorpicker.Color;
+import com.vaadin.shared.ui.label.ContentMode;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.ColorPicker;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.components.colorpicker.ColorChangeEvent;
+import com.vaadin.ui.components.colorpicker.ColorChangeListener;
+
+public class CSSInjectWithColorpicker extends UI {
+
+    @Override
+    protected void init(VaadinRequest request) {
+
+        // Create a text editor
+        Component editor = createEditor("Lorem ipsum dolor sit amet, lacus pharetra sed, sit a "
+                        + "tortor. Id aliquam lorem pede, orci ut enim metus, diam nulla mi "
+                        + "suspendisse tempor tortor. Eleifend lorem proin, morbi vel diam ut. "
+                        + "Tempor est tellus vitae, pretium condimentum facilisis sit. Sagittis "
+                        + "quam, ac urna eros est cras id cras, eleifend eu mattis nec."
+                        +"Lorem ipsum dolor sit amet, lacus pharetra sed, sit a "
+                        + "tortor. Id aliquam lorem pede, orci ut enim metus, diam nulla mi "
+                        + "suspendisse tempor tortor. Eleifend lorem proin, morbi vel diam ut. "
+                        + "Tempor est tellus vitae, pretium condimentum facilisis sit. Sagittis "
+                        + "quam, ac urna eros est cras id cras, eleifend eu mattis nec."
+                        + "Lorem ipsum dolor sit amet, lacus pharetra sed, sit a "
+                        + "tortor. Id aliquam lorem pede, orci ut enim metus, diam nulla mi "
+                        + "suspendisse tempor tortor. Eleifend lorem proin, morbi vel diam ut. "
+                        + "Tempor est tellus vitae, pretium condimentum facilisis sit. Sagittis "
+                        + "quam, ac urna eros est cras id cras, eleifend eu mattis nec."
+                        + "Lorem ipsum dolor sit amet, lacus pharetra sed, sit a "
+                        + "tortor. Id aliquam lorem pede, orci ut enim metus, diam nulla mi "
+                        + "suspendisse tempor tortor. Eleifend lorem proin, morbi vel diam ut. "
+                        + "Tempor est tellus vitae, pretium condimentum facilisis sit. Sagittis "
+                        + "quam, ac urna eros est cras id cras, eleifend eu mattis nec.");
+
+        
+        VerticalLayout content = new VerticalLayout(editor);
+        content.setMargin(true);
+        setContent(content);
+    }
+
+    /**
+     * Creates a text editor for visually editing text
+     * 
+     * @param text
+     *            The text editor
+     * @return
+     */
+    private Component createEditor(String text) {
+
+        Panel editor = new Panel("Text Editor");
+        editor.setWidth("580px");
+
+        VerticalLayout panelContent = new VerticalLayout();
+        panelContent.setSpacing(true);
+        panelContent.setMargin(new MarginInfo(true, false, false, false));
+        editor.setContent(panelContent);
+
+        // Create the toolbar
+        HorizontalLayout toolbar = new HorizontalLayout();
+        toolbar.setSpacing(true);
+        toolbar.setMargin(new MarginInfo(false, false, false, true));
+
+        // Create the font family selector
+        toolbar.addComponent(createFontSelect());
+
+        // Create the font size selector
+        toolbar.addComponent(createFontSizeSelect());
+
+        // Create the text color selector
+        toolbar.addComponent(createTextColorSelect());
+
+        // Create the background color selector
+        toolbar.addComponent(createBackgroundColorSelect());
+
+        panelContent.addComponent(toolbar);
+        panelContent.setComponentAlignment(toolbar, Alignment.MIDDLE_LEFT);
+
+        // Spacer between toolbar and text
+        panelContent.addComponent(new Label("<hr/>", ContentMode.HTML));
+
+        // The text to edit
+        TextArea textLabel = new TextArea(null, text);
+        textLabel.setWidth("100%");
+        textLabel.setHeight("200px");
+        
+        // IMPORTANT: We are here setting the style name of the label, we are going to use this in our injected styles to target the label
+        textLabel.setStyleName("text-label");
+        
+        panelContent.addComponent(textLabel);
+
+        return editor;
+    }
+
+    /**
+     * Creates a background color select dialog
+     */
+    private Component createBackgroundColorSelect() {
+        ColorPicker bgColor = new ColorPicker("Background", Color.WHITE);
+        bgColor.setWidth("110px");
+        bgColor.setCaption("Background");
+        bgColor.addColorChangeListener(new ColorChangeListener() {
+
+            @Override
+            public void colorChanged(ColorChangeEvent event) {
+
+                // Get the new background color
+                Color color = event.getColor();
+
+                // Get the stylesheet of the page
+                StyleSheet styles = Page.getCurrent().getStyleSheet();
+
+                // inject the new background color
+                styles.inject(".v-app .v-textarea.text-label { background-color:"
+                        + color.getCSS() + "; }");
+            }
+        });
+        return bgColor;
+    }
+
+    /**
+     * Create a text color selction dialog
+     */
+    private Component createTextColorSelect() {
+
+        // Colorpicker for changing text color
+        ColorPicker textColor = new ColorPicker("Color", Color.BLACK);
+        textColor.setWidth("110px");
+        textColor.setCaption("Color");
+        textColor.addColorChangeListener(new ColorChangeListener() {
+
+            @Override
+            public void colorChanged(ColorChangeEvent event) {
+
+                // Get the new text color
+                Color color = event.getColor();
+
+                // Get the stylesheet of the page
+                StyleSheet styles = Page.getCurrent().getStyleSheet();
+
+                // inject the new color as a style
+                styles.inject(".v-app .v-textarea.text-label { color:"
+                        + color.getCSS() + "; }");
+            }
+        });
+
+        return textColor;
+    }
+
+    /**
+     * Creates a font family selection dialog
+     */
+    private Component createFontSelect() {
+        final ComboBox select = new ComboBox(null, Arrays.asList("Arial",
+                "Helvetica", "Verdana", "Courier", "Times", "sans-serif"));
+        select.setValue("Arial");
+        select.setWidth("200px");
+        select.setInputPrompt("Font");
+        select.setDescription("Font");
+        select.setImmediate(true);
+        select.setNullSelectionAllowed(false);
+        select.setNewItemsAllowed(false);
+
+        select.addValueChangeListener(new ValueChangeListener() {
+
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                // Get the new font family
+                String fontFamily = select.getValue().toString();
+
+                // Get the stylesheet of the page
+                StyleSheet styles = Page.getCurrent().getStyleSheet();
+
+                // inject the new font size as a style. We need .v-app to
+                // override Vaadin's default styles here
+                styles.inject(".v-app .v-textarea.text-label { font-family:"
+                        + fontFamily + "; }");
+            }
+        });
+
+        return select;
+    }
+
+    /**
+     * Creates a font size selection control
+     */
+    private Component createFontSizeSelect() {
+
+        final ComboBox select = new ComboBox(null, Arrays.asList(8, 9, 10,
+                12, 14, 16, 20, 25, 30, 40, 50));
+        select.setWidth("100px");
+        select.setValue(12);
+        select.setInputPrompt("Font size");
+        select.setDescription("Font size");
+        select.setImmediate(true);
+        select.setNullSelectionAllowed(false);
+        select.setNewItemsAllowed(false);
+        select.addValueChangeListener(new ValueChangeListener() {
+            
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                // Get the new font size
+                Integer fontSize = (Integer) select.getValue();
+
+                // Get the stylesheet of the page
+                StyleSheet styles = Page.getCurrent().getStyleSheet();
+
+                // inject the new font size as a style. We need .v-app to
+                // override Vaadin's default styles here
+                styles.inject(".v-app .v-textarea.text-label { font-size:"
+                        + String.valueOf(fontSize) + "px; }");
+            }
+        });
+
+        return select;
+    }
+}