svn changeset:2379/svn branch:trunktags/6.7.0.beta1
@@ -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"); |
@@ -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); | |||
} |
@@ -7,12 +7,12 @@ import com.google.gwt.user.client.ui.*; | |||
/** | |||
* A regular GWT component without integration with IT Mill Toolkit. | |||
**/ | |||
public class OriginalColorPicker extends Composite implements ClickListener { | |||
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 OriginalColorPicker() { | |||
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", | |||
@@ -25,19 +25,15 @@ public class OriginalColorPicker extends Composite implements ClickListener { | |||
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); | |||
// 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 | |||
@@ -45,16 +41,15 @@ public class OriginalColorPicker extends Composite implements ClickListener { | |||
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 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. | |||
// Set initial color. This will be overridden with the value read from server. | |||
setColor("white"); | |||
// Composite GWT widgets must call initWidget(). |
@@ -4,7 +4,7 @@ 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 { | |||
public class ItkColorPicker extends GwtColorPicker implements Paintable { | |||
/** Set the CSS class name to allow styling. */ | |||
public static final String CLASSNAME = "example-colorpicker"; | |||
@@ -19,7 +19,7 @@ public class ClientColorPicker extends OriginalColorPicker implements Paintable | |||
* The constructor should first call super() to initialize the component | |||
* and then handle any initialization relevant to IT Mill Toolkit. | |||
**/ | |||
public ClientColorPicker() { | |||
public ItkColorPicker() { | |||
// The superclass has a lot of relevant initialization | |||
super(); | |||
@@ -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; | |||
} |