/**
* 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");
package com.itmill.toolkit.demo.colorpicker.gwt.client;\r
\r
-import com.google.gwt.core.client.GWT;\r
import com.google.gwt.user.client.ui.Widget;\r
-import com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker;\r
+import com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ItkColorPicker;\r
import com.itmill.toolkit.terminal.gwt.client.DefaultWidgetSet;\r
import com.itmill.toolkit.terminal.gwt.client.UIDL;\r
\r
public class WidgetSet extends DefaultWidgetSet {\r
public Widget createWidget(UIDL uidl) {\r
String className = resolveWidgetTypeName(uidl);\r
- if ("com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker"\r
+ if ("com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ItkColorPicker"\r
.equals(className))\r
- return new ClientColorPicker();\r
+ return new ItkColorPicker();\r
\r
return super.createWidget(uidl);\r
}\r
protected String resolveWidgetTypeName(UIDL uidl) {\r
String tag = uidl.getTag();\r
if ("colorpicker".equals(tag))\r
- return "com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker";\r
+ return "com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ItkColorPicker";\r
\r
return super.resolveWidgetTypeName(uidl);\r
}\r
+++ /dev/null
-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);
- }
-}
--- /dev/null
+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 <td> 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 <td> 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");
+ }
+}
--- /dev/null
+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);
+ }
+}
+++ /dev/null
-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 <td> 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 <td> 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");
- }
-}
-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;
+}
projects / vaadin-framework.git / commitdiff