</init-param>\r
</servlet>\r
\r
+ <servlet>
+ <servlet-name>CustomGwtComponentDemo</servlet-name>
+ <servlet-class>com.itmill.toolkit.terminal.gwt.server.ApplicationServlet</servlet-class>
+ <init-param>
+ <param-name>application</param-name>
+ <param-value>com.itmill.toolkit.demo.CustomGwtComponentDemo</param-value>
+ </init-param>
+ </servlet>
+
+ <servlet>
+ <servlet-name>ColorPickerApplication</servlet-name>
+ <servlet-class>com.itmill.toolkit.terminal.gwt.server.ApplicationServlet</servlet-class>
+ <init-param>
+ <param-name>application</param-name>
+ <param-value>com.itmill.toolkit.demo.colorpicker.ColorPickerApplication</param-value>
+ </init-param>
+ <init-param>
+ <param-name>widgetset</param-name>
+ <param-value>com.itmill.toolkit.demo.colorpicker.gwt.WidgetSet</param-value>
+ </init-param>
+ </servlet>
+
<servlet-mapping>\r
<servlet-name>Reservr</servlet-name>\r
<url-pattern>/Reservr/*</url-pattern>\r
<url-pattern>/KeyboardShortcut/*</url-pattern>\r
</servlet-mapping>\r
\r
+ <servlet-mapping>
+ <servlet-name>CustomGwtComponentDemo</servlet-name>
+ <url-pattern>/customgwt/*</url-pattern>
+ </servlet-mapping>
+
+ <servlet-mapping>
+ <servlet-name>ColorPickerApplication</servlet-name>
+ <url-pattern>/colorpicker/*</url-pattern>
+ </servlet-mapping>
+
<welcome-file-list>\r
<welcome-file>index.jsp</welcome-file>\r
<welcome-file>index.html</welcome-file>\r
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;
--- /dev/null
+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);
+ }
+ }
+}
--- /dev/null
+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);
+ }
+}
--- /dev/null
+<module>
+ <!-- Inherit the NoEntry version to avoid multiple entrypoints -->\r
+ <inherits name="com.itmill.toolkit.terminal.gwt.DefaultWidgetSetNoEntry" /> \r
+ \r
+ <!-- WidgetSet default theme -->
+ <stylesheet src="colorpicker/styles.css"/>
+
+ <!-- Entry point -->
+ <entry-point class="com.itmill.toolkit.demo.colorpicker.gwt.client.WidgetSet"/>
+
+</module>
--- /dev/null
+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.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
+ .equals(className))\r
+ return new ClientColorPicker();\r
+\r
+ return super.createWidget(uidl);\r
+ }\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
+\r
+ return super.resolveWidgetTypeName(uidl);\r
+ }\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 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");
+ }
+}
--- /dev/null
+td.example-colorpicker {
+ height: 100px;
+ width: 100px;
+ border: none;
+ padding: 0px;
+}
+
+table.example-colorpicker {
+ height: 100px;
+ width: 100px;
+ border: none;
+ padding: 0px;
+}
projects / vaadin-framework.git / commitdiff