From b8073831d91ec9cf91d8651d995fd5d5cbbb173a Mon Sep 17 00:00:00 2001 From: =?utf8?q?Marko=20Gr=C3=B6nroos?= Date: Fri, 21 Sep 2007 13:34:29 +0000 Subject: [PATCH] Added ColorPicker demo application. svn changeset:2368/svn branch:trunk --- WebContent/WEB-INF/web.xml | 32 +++++++ build/bin/compile-gwt-components | 4 +- .../toolkit/demo/colorpicker/ColorPicker.java | 51 +++++++++++ .../colorpicker/ColorPickerApplication.java | 50 +++++++++++ .../demo/colorpicker/gwt/WidgetSet.gwt.xml | 11 +++ .../colorpicker/gwt/client/WidgetSet.java | 26 ++++++ .../gwt/client/ui/ClientColorPicker.java | 74 ++++++++++++++++ .../gwt/client/ui/OriginalColorPicker.java | 88 +++++++++++++++++++ .../gwt/public/colorpicker/styles.css | 13 +++ 9 files changed, 348 insertions(+), 1 deletion(-) create mode 100644 src/com/itmill/toolkit/demo/colorpicker/ColorPicker.java create mode 100644 src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java create mode 100644 src/com/itmill/toolkit/demo/colorpicker/gwt/WidgetSet.gwt.xml create mode 100644 src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java create mode 100644 src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ClientColorPicker.java create mode 100644 src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java create mode 100644 src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css diff --git a/WebContent/WEB-INF/web.xml b/WebContent/WEB-INF/web.xml index 1ddc6ac9c4..6b13d8943e 100644 --- a/WebContent/WEB-INF/web.xml +++ b/WebContent/WEB-INF/web.xml @@ -193,6 +193,28 @@ + + CustomGwtComponentDemo + com.itmill.toolkit.terminal.gwt.server.ApplicationServlet + + application + com.itmill.toolkit.demo.CustomGwtComponentDemo + + + + + ColorPickerApplication + com.itmill.toolkit.terminal.gwt.server.ApplicationServlet + + application + com.itmill.toolkit.demo.colorpicker.ColorPickerApplication + + + widgetset + com.itmill.toolkit.demo.colorpicker.gwt.WidgetSet + + + Reservr /Reservr/* @@ -288,6 +310,16 @@ /KeyboardShortcut/* + + CustomGwtComponentDemo + /customgwt/* + + + + ColorPickerApplication + /colorpicker/* + + index.jsp index.html diff --git a/build/bin/compile-gwt-components b/build/bin/compile-gwt-components index 3fb5f9c8f4..e450f42993 100755 --- a/build/bin/compile-gwt-components +++ b/build/bin/compile-gwt-components @@ -14,4 +14,6 @@ else fi rm -r ../../WebContent/ITK-INF/widgetsets/com.itmill.toolkit.terminal.gwt.DefaultWidgetSet/* -java $JVMVARS -cp "../../src:../gwt/gwt/gwt-user.jar:../gwt/gwt/gwt-dev-$PLATFORM.jar" com.google.gwt.dev.GWTCompiler -out "../../WebContent/ITK-INF/widgetsets" "$@" com.itmill.toolkit.terminal.gwt.DefaultWidgetSet -style DETAILED; +#java $JVMVARS -cp "../../src:../gwt/gwt/gwt-user.jar:../gwt/gwt/gwt-dev-$PLATFORM.jar" com.google.gwt.dev.GWTCompiler -out "../../WebContent/ITK-INF/widgetsets" "$@" com.itmill.toolkit.terminal.gwt.DefaultWidgetSet -style DETAILED; +java $JVMVARS -cp "../../src:../gwt/gwt/gwt-user.jar:../gwt/gwt/gwt-dev-$PLATFORM.jar" com.google.gwt.dev.GWTCompiler -out "../../WebContent/ITK-INF/widgetsets" "$@" com.itmill.toolkit.demo.colorpicker.gwt.WidgetSet -style DETAILED; +#java $JVMVARS -cp "../../src:../gwt/gwt/gwt-user.jar:../../lib/reservr/googlemaps_gwt.jar:../gwt/gwt/gwt-dev-$PLATFORM.jar" com.google.gwt.dev.GWTCompiler -out "../../WebContent/ITK-INF/widgetsets" "$@" com.itmill.toolkit.demo.reservation.gwt.WidgetSet -style DETAILED; diff --git a/src/com/itmill/toolkit/demo/colorpicker/ColorPicker.java b/src/com/itmill/toolkit/demo/colorpicker/ColorPicker.java new file mode 100644 index 0000000000..f21e73ac80 --- /dev/null +++ b/src/com/itmill/toolkit/demo/colorpicker/ColorPicker.java @@ -0,0 +1,51 @@ +package com.itmill.toolkit.demo.colorpicker; + +import java.util.Map; +import com.itmill.toolkit.terminal.PaintException; +import com.itmill.toolkit.terminal.PaintTarget; +import com.itmill.toolkit.ui.*; + +public class ColorPicker extends AbstractField { + + public ColorPicker() { + super(); + setValue(new String("white")); + } + + /** The property value of the field is an Integer. */ + public Class getType() { + return String.class; + } + + /** Tag is the UIDL element name for client-server communications. */ + public String getTag() { + return "colorpicker"; + } + + /** Encode the property value of the field from RGB components. */ + public void setColor(String newcolor) { + setValue(new String(newcolor)); + } + + /** Decode the property value of the field to RGB components. */ + public String getColor() { + return (String) getValue(); + } + + /* Paint (serialize) the component for the client. */ + public void paintContent(PaintTarget target) throws PaintException { + // Superclass writes any common attributes in the paint target. + super.paintContent(target); + + // Set any values as variables of the paint target. + target.addVariable(this, "colorname", getColor()); + } + + public void changeVariables(Object source, Map variables) { + // Sets the currently selected color + if (variables.containsKey("colorname") && !isReadOnly()) { + String newValue = (String) variables.get("colorname"); + setValue(newValue,true); + } + } +} diff --git a/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java b/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java new file mode 100644 index 0000000000..80475b7534 --- /dev/null +++ b/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java @@ -0,0 +1,50 @@ +package com.itmill.toolkit.demo.colorpicker; + +import com.itmill.toolkit.data.Property.ValueChangeEvent; +import com.itmill.toolkit.data.Property.ValueChangeListener; +import com.itmill.toolkit.ui.*; +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"); + + /* The custom component. */ + ColorPicker colorselector = new ColorPicker(); + + /* Another component. */ + Label colorname; + + public void init() { + setMainWindow(main); + setTheme("demo"); + + // Listen for value change events in the custom component, + // triggered when user clicks a button to select another color. + colorselector.addListener(new ValueChangeListener() { + public void valueChange(ValueChangeEvent event) { + // Provide some server-side feedback + colorname.setValue("Selected color: " + colorselector.getColor()); + } + }); + main.addComponent(colorselector); + + // Add another component to give feedback from server-side code + colorname = new Label("Selected color: "+colorselector.getColor()); + main.addComponent(colorname); + + // Server-side manipulation of the component state + Button button = new Button("Set to white"); + button.addListener(new Button.ClickListener() { + public void buttonClick(ClickEvent event) { + colorselector.setColor("white"); + } + }); + main.addComponent(button); + } +} diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/WidgetSet.gwt.xml b/src/com/itmill/toolkit/demo/colorpicker/gwt/WidgetSet.gwt.xml new file mode 100644 index 0000000000..b38b30ae21 --- /dev/null +++ b/src/com/itmill/toolkit/demo/colorpicker/gwt/WidgetSet.gwt.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java new file mode 100644 index 0000000000..d00e7db74a --- /dev/null +++ b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java @@ -0,0 +1,26 @@ +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.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" + .equals(className)) + return new ClientColorPicker(); + + return super.createWidget(uidl); + } + + protected String resolveWidgetTypeName(UIDL uidl) { + String tag = uidl.getTag(); + if ("colorpicker".equals(tag)) + return "com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker"; + + 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 new file mode 100644 index 0000000000..8d82f3ed8b --- /dev/null +++ b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ClientColorPicker.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 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/OriginalColorPicker.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java new file mode 100644 index 0000000000..0c110a86b2 --- /dev/null +++ b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java @@ -0,0 +1,88 @@ +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 new file mode 100644 index 0000000000..2737c77864 --- /dev/null +++ b/src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css @@ -0,0 +1,13 @@ +td.example-colorpicker { + height: 100px; + width: 100px; + border: none; + padding: 0px; +} + +table.example-colorpicker { + height: 100px; + width: 100px; + border: none; + padding: 0px; +} -- 2.39.5