123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- package com.vaadin.tests.minitutorials.v71beta;
-
- import java.util.Arrays;
-
- import com.vaadin.annotations.Widgetset;
- import com.vaadin.server.Page;
- import com.vaadin.server.Page.Styles;
- import com.vaadin.server.VaadinRequest;
- import com.vaadin.shared.ui.ContentMode;
- import com.vaadin.shared.ui.MarginInfo;
- import com.vaadin.shared.ui.colorpicker.Color;
- 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;
-
- @Widgetset("com.vaadin.DefaultWidgetSet")
- 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.addValueChangeListener(event -> {
-
- // Get the new background color
- Color color = event.getValue();
-
- // Get the stylesheet of the page
- Styles styles = Page.getCurrent().getStyles();
-
- // inject the new background color
- styles.add(".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.addValueChangeListener(event -> {
-
- // Get the new text color
- Color color = event.getValue();
-
- // Get the stylesheet of the page
- Styles styles = Page.getCurrent().getStyles();
-
- // inject the new color as a style
- styles.add(".v-app .v-textarea.text-label { color:" + color.getCSS()
- + "; }");
- });
-
- return textColor;
- }
-
- /**
- * Creates a font family selection dialog
- */
- private Component createFontSelect() {
- final ComboBox<String> select = new ComboBox<>(null,
- Arrays.asList("Arial", "Helvetica", "Verdana", "Courier",
- "Times", "sans-serif"));
- select.setValue("Arial");
- select.setWidth("200px");
- select.setPlaceholder("Font");
- select.setDescription("Font");
- select.setEmptySelectionAllowed(false);
- select.addValueChangeListener(event -> {
- // Get the new font family
- String fontFamily = select.getValue();
-
- // Get the stylesheet of the page
- Styles styles = Page.getCurrent().getStyles();
-
- // inject the new font size as a style. We need .v-app to
- // override Vaadin's default styles here
- styles.add(".v-app .v-textarea.text-label { font-family:"
- + fontFamily + "; }");
- });
-
- return select;
- }
-
- /**
- * Creates a font size selection control
- */
- private Component createFontSizeSelect() {
-
- final ComboBox<Integer> select = new ComboBox<>(null,
- Arrays.asList(8, 9, 10, 12, 14, 16, 20, 25, 30, 40, 50));
- select.setWidth("100px");
- select.setValue(12);
- select.setPlaceholder("Font size");
- select.setDescription("Font size");
- select.setEmptySelectionAllowed(false);
- select.addValueChangeListener(event -> {
- // Get the new font size
- Integer fontSize = select.getValue();
-
- // Get the stylesheet of the page
- Styles styles = Page.getCurrent().getStyles();
-
- // inject the new font size as a style. We need .v-app to
- // override Vaadin's default styles here
- styles.add(".v-app .v-textarea.text-label { font-size:"
- + String.valueOf(fontSize) + "px; }");
- });
-
- return select;
- }
- }
|