From: Marko Grönroos Date: Wed, 26 Sep 2007 17:21:13 +0000 (+0000) Subject: Better styling and some renaming in ColorPicker. X-Git-Tag: 6.7.0.beta1~5954 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=68a244db42e8394a0f13c8016158794f52f3de98;p=vaadin-framework.git Better styling and some renaming in ColorPicker. svn changeset:2379/svn branch:trunk --- diff --git a/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java b/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java index 80475b7534..2321f22dd6 100644 --- a/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java +++ b/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java @@ -8,8 +8,6 @@ import com.itmill.toolkit.ui.Button.ClickEvent; /** * Demonstration application that shows how to use a simple * custom client-side GWT component, the ColorPicker. - * - * @author magi */ public class ColorPickerApplication extends com.itmill.toolkit.Application { Window main = new Window("Color Picker Demo"); diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java index d00e7db74a..1fbfa40bf8 100644 --- a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java +++ b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java @@ -1,17 +1,16 @@ package com.itmill.toolkit.demo.colorpicker.gwt.client; -import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.ui.Widget; -import com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker; +import com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ItkColorPicker; import com.itmill.toolkit.terminal.gwt.client.DefaultWidgetSet; import com.itmill.toolkit.terminal.gwt.client.UIDL; public class WidgetSet extends DefaultWidgetSet { public Widget createWidget(UIDL uidl) { String className = resolveWidgetTypeName(uidl); - if ("com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker" + if ("com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ItkColorPicker" .equals(className)) - return new ClientColorPicker(); + return new ItkColorPicker(); return super.createWidget(uidl); } @@ -19,7 +18,7 @@ public class WidgetSet extends DefaultWidgetSet { protected String resolveWidgetTypeName(UIDL uidl) { String tag = uidl.getTag(); if ("colorpicker".equals(tag)) - return "com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker"; + return "com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ItkColorPicker"; return super.resolveWidgetTypeName(uidl); } diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ClientColorPicker.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ClientColorPicker.java deleted file mode 100644 index 8d82f3ed8b..0000000000 --- a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ClientColorPicker.java +++ /dev/null @@ -1,74 +0,0 @@ -package com.itmill.toolkit.demo.colorpicker.gwt.client.ui; - -import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection; -import com.itmill.toolkit.terminal.gwt.client.Paintable; -import com.itmill.toolkit.terminal.gwt.client.UIDL; - -public class ClientColorPicker extends OriginalColorPicker implements Paintable { - - /** Set the CSS class name to allow styling. */ - public static final String CLASSNAME = "example-colorpicker"; - - /** Component identifier in UIDL communications. */ - String uidl_id; - - /** Reference to the server connection object. */ - ApplicationConnection client; - - /** - * The constructor should first call super() to initialize the component - * and then handle any initialization relevant to IT Mill Toolkit. - **/ - public ClientColorPicker() { - // The superclass has a lot of relevant initialization - super(); - - // This method call of the Paintable interface sets the component - // style name in DOM tree - setStyleName(CLASSNAME); - } - - /** - * This method must be implemented to update the client-side component from - * UIDL data received from server. - * - * This method is called when the page is loaded for the first time, and - * every time UI changes in the component are received from the server. - */ - public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { - // This call should be made first. Ensure correct implementation, - // but don't let container manage caption etc. - if (client.updateComponent(this, uidl, false)) - return; - - // Save reference to server connection object to be able to send - // user interaction later - this.client = client; - - // Save the UIDL identifier for the component - uidl_id = uidl.getId(); - - // Get value received from server and actualize it in the GWT component - setColor(uidl.getStringVariable("colorname")); - } - - /** Override the method to communicate the new value to server. */ - public void setColor(String newcolor) { - // Ignore if no change - if (newcolor.equals(currentcolor.getText())) - return; - - // Let the original implementation to do whatever it needs to do - super.setColor(newcolor); - - // Updating the state to the server can not be done before - // the server connection is known, i.e., before updateFromUIDL() - // has been called. - if (uidl_id == null || client == null) - return; - - // Communicate the user interaction parameters to server. This call will - // initiate an AJAX request to the server. - client.updateVariable(uidl_id, "colorname", newcolor, true); - } -} diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/GwtColorPicker.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/GwtColorPicker.java new file mode 100644 index 0000000000..f3b792baf3 --- /dev/null +++ b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/GwtColorPicker.java @@ -0,0 +1,83 @@ +package com.itmill.toolkit.demo.colorpicker.gwt.client.ui; + +import com.google.gwt.user.client.DOM; +import com.google.gwt.user.client.Element; +import com.google.gwt.user.client.ui.*; + +/** + * A regular GWT component without integration with IT Mill Toolkit. + **/ +public class GwtColorPicker extends Composite implements ClickListener { + + /** Currently selected color name to give client-side feedback to the user. */ + protected Label currentcolor = new Label(); + + public GwtColorPicker() { + // Create a 4x4 grid of buttons with names for 16 colors + Grid grid = new Grid(4,4); + String[] colors = new String[] {"aqua", "black", "blue", "fuchsia", + "gray", "green", "lime", "maroon", "navy", "olive", + "purple", "red", "silver", "teal", "white", "yellow"}; + int colornum = 0; + for (int i=0; i<4; i++) + for (int j=0; j<4; j++, colornum++) { + // Create a button for each color + Button button = new Button(colors[colornum]); + button.addClickListener(this); + + // Put the button in the Grid layout + grid.setWidget(i, j, button); + + // Set the button background colors. + DOM.setStyleAttribute(button.getElement(), "background", colors[colornum]); + + // For dark colors, the button label must be in white. + if ("black navy maroon blue purple".indexOf(colors[colornum]) != -1) + DOM.setStyleAttribute(button.getElement(), "color", "white"); + } + + // Create a panel with the color grid and currently selected color indicator + HorizontalPanel panel = new HorizontalPanel(); + panel.add(grid); + panel.add(currentcolor); + + // Set the class of the color selection feedback box to allow CSS styling. + // We need to obtain the DOM element for the current color label. + // This assumes that the element of the HorizontalPanel is + // the parent of the label element. Notice that the element has no parent + // before the widget has been added to the horizontal panel. + Element panelcell = DOM.getParent(currentcolor.getElement()); + DOM.setElementProperty(panelcell, "className", "colorpicker-currentcolorbox"); + + // Set initial color. This will be overridden with the value read from server. + setColor("white"); + + // Composite GWT widgets must call initWidget(). + initWidget(panel); + } + + /** Handles click on a color button. */ + public void onClick(Widget sender) { + // Use the button label as the color name to set + setColor(((Button) sender).getText()); + } + + /** Sets the currently selected color. */ + public void setColor(String newcolor) { + // Give client-side feedback by changing the color name in the label + currentcolor.setText(newcolor); + + // Obtain the DOM elements. This assumes that the element + // of the HorizontalPanel is the parent of the label element. + Element nameelement = currentcolor.getElement(); + Element cell = DOM.getParent(nameelement); + + // Give feedback by changing the background color + DOM.setStyleAttribute(cell, "background", newcolor); + DOM.setStyleAttribute(nameelement, "background", newcolor); + if ("black navy maroon blue purple".indexOf(newcolor) != -1) + DOM.setStyleAttribute(nameelement, "color", "white"); + else + DOM.setStyleAttribute(nameelement, "color", "black"); + } +} diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ItkColorPicker.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ItkColorPicker.java new file mode 100644 index 0000000000..54dedf2991 --- /dev/null +++ b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ItkColorPicker.java @@ -0,0 +1,74 @@ +package com.itmill.toolkit.demo.colorpicker.gwt.client.ui; + +import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection; +import com.itmill.toolkit.terminal.gwt.client.Paintable; +import com.itmill.toolkit.terminal.gwt.client.UIDL; + +public class ItkColorPicker extends GwtColorPicker implements Paintable { + + /** Set the CSS class name to allow styling. */ + public static final String CLASSNAME = "example-colorpicker"; + + /** Component identifier in UIDL communications. */ + String uidl_id; + + /** Reference to the server connection object. */ + ApplicationConnection client; + + /** + * The constructor should first call super() to initialize the component + * and then handle any initialization relevant to IT Mill Toolkit. + **/ + public ItkColorPicker() { + // The superclass has a lot of relevant initialization + super(); + + // This method call of the Paintable interface sets the component + // style name in DOM tree + setStyleName(CLASSNAME); + } + + /** + * This method must be implemented to update the client-side component from + * UIDL data received from server. + * + * This method is called when the page is loaded for the first time, and + * every time UI changes in the component are received from the server. + */ + public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { + // This call should be made first. Ensure correct implementation, + // but don't let container manage caption etc. + if (client.updateComponent(this, uidl, false)) + return; + + // Save reference to server connection object to be able to send + // user interaction later + this.client = client; + + // Save the UIDL identifier for the component + uidl_id = uidl.getId(); + + // Get value received from server and actualize it in the GWT component + setColor(uidl.getStringVariable("colorname")); + } + + /** Override the method to communicate the new value to server. */ + public void setColor(String newcolor) { + // Ignore if no change + if (newcolor.equals(currentcolor.getText())) + return; + + // Let the original implementation to do whatever it needs to do + super.setColor(newcolor); + + // Updating the state to the server can not be done before + // the server connection is known, i.e., before updateFromUIDL() + // has been called. + if (uidl_id == null || client == null) + return; + + // Communicate the user interaction parameters to server. This call will + // initiate an AJAX request to the server. + client.updateVariable(uidl_id, "colorname", newcolor, true); + } +} diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java deleted file mode 100644 index 0c110a86b2..0000000000 --- a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java +++ /dev/null @@ -1,88 +0,0 @@ -package com.itmill.toolkit.demo.colorpicker.gwt.client.ui; - -import com.google.gwt.user.client.DOM; -import com.google.gwt.user.client.Element; -import com.google.gwt.user.client.ui.*; - -/** - * A regular GWT component without integration with IT Mill Toolkit. - **/ -public class OriginalColorPicker extends Composite implements ClickListener { - - /** Currently selected color name to give client-side feedback to the user. */ - protected Label currentcolor = new Label(); - - public OriginalColorPicker() { - // Create a 4x4 grid of buttons with names for 16 colors - Grid grid = new Grid(4,4); - String[] colors = new String[] {"aqua", "black", "blue", "fuchsia", - "gray", "green", "lime", "maroon", "navy", "olive", - "purple", "red", "silver", "teal", "white", "yellow"}; - int colornum = 0; - for (int i=0; i<4; i++) - for (int j=0; j<4; j++, colornum++) { - // Create a button for each color - Button button = new Button(colors[colornum]); - button.addClickListener(this); - - // Set the button colors - if ("black navy maroon blue purple".indexOf(colors[colornum]) != -1) - DOM.setStyleAttribute(button.getElement(), "color", "white"); - DOM.setStyleAttribute(button.getElement(), "background", colors[colornum]); - - // These style settings could be left for CSS - DOM.setStyleAttribute(button.getElement(), "width", "60px"); - DOM.setStyleAttribute(button.getElement(), "height", "60px"); - DOM.setStyleAttribute(button.getElement(), "border", "none"); - DOM.setStyleAttribute(button.getElement(), "padding", "0px"); - - // Put the button in the Grid layout - grid.setWidget(i, j, button); - } - - // Create a panel with the color grid and currently selected color indicator - HorizontalPanel panel = new HorizontalPanel(); - panel.add(grid); - panel.add(currentcolor); - - // Format the current color feedback box. These could be set in the CSS - // as well. We need to obtain the DOM element for the current color - // label. This assumes that the element of the HorizontalPanel is - // the parent of the label element. - Element cell = DOM.getParent(currentcolor.getElement()); - DOM.setStyleAttribute(cell, "width", "240px"); - DOM.setStyleAttribute(cell, "textAlign", "center"); - DOM.setStyleAttribute(cell, "verticalAlign", "middle"); - - // Set initial color. This will be overridden with the value read from server. - setColor("white"); - - // Composite GWT widgets must call initWidget(). - initWidget(panel); - } - - /** Handles click on a color button. */ - public void onClick(Widget sender) { - // Use the button label as the color name to set - setColor(((Button) sender).getText()); - } - - /** Sets the currently selected color. */ - public void setColor(String newcolor) { - // Give client-side feedback by changing the color name in the label - currentcolor.setText(newcolor); - - // Obtain the DOM elements. This assumes that the element - // of the HorizontalPanel is the parent of the label element. - Element nameelement = currentcolor.getElement(); - Element cell = DOM.getParent(nameelement); - - // Give feedback by changing the background color - DOM.setStyleAttribute(cell, "background", newcolor); - DOM.setStyleAttribute(nameelement, "background", newcolor); - if ("black navy maroon blue purple".indexOf(newcolor) != -1) - DOM.setStyleAttribute(nameelement, "color", "white"); - else - DOM.setStyleAttribute(nameelement, "color", "black"); - } -} diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css b/src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css index 2737c77864..01194d1ef6 100644 --- a/src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css +++ b/src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css @@ -1,13 +1,20 @@ -td.example-colorpicker { - height: 100px; - width: 100px; - border: none; - padding: 0px; +/* Set style for the color picker table. */ +table.example-colorpicker { + border-collapse: collapse; + border: 0px; } -table.example-colorpicker { - height: 100px; - width: 100px; +/* Set color picker button style. */ +.example-colorpicker button { + height: 60px; + width: 60px; border: none; padding: 0px; } + +/* Set style for the right-hand sample box that shows the currently selected color. */ +td.colorpicker-currentcolorbox { + width: 240px; + text-align: center; + vertical-align: middle !important; +}