GWT Components - GWT Component Library

GWT Component Library
Collection of open-source widgets for Google Web Toolkit Widgets: Canvas Widget Round Corners Simple Calendar RateIt Control Script.aculo.us Effects Integration Auto-Completion Textbox Simple XML Parser Hyperlink with Image Tooltip Listener
The souce code is licensed under LGPL 2.1 license. You can leave your comments about this site here.
Tip: It is easy to use the source code published on this site without changing the package names. Create a new file called User.gwt.xml in com.gwt.components package. Place the following lines in it:
<module> <inherits name="com.google.gwt.core.Core"/> </module>

Then add <inherits name="com.gwt.components.User"/> to your module configuration file.
The souce code is licensed under LGPL 2.1 license. Contact Us
Canvas Widget
Author: Alexei Sokolov
Canvas widget with native support in Firefox, Safari and Opera 9. Support for Internet Exporer is provided by Google's ExplorerCanvas. How to use it: First, download ExplorerCanvas and include this code on your HTML host page:


Now you can use it in your GWT classes like this:
final Canvas ctx = new Canvas(200, 200); ctx.beginPath(); ctx.arc(75,75,50,0,(float)Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,(float)Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,(float)Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,(float)Math.PI*2,true); // Right eye ctx.stroke();
Note: Support for Gradients and Pattern is very limited in IE. You can leave your questions or comments here. Source code: Canvas.java:
/* Round Corners Widget for GWT Copyright (C) 2006 Alexei Sokolov http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client; import import import import import com.google.gwt.core.client.JavaScriptObject; com.google.gwt.user.client.DOM; com.google.gwt.user.client.Element; com.google.gwt.user.client.ui.Image; com.google.gwt.user.client.ui.Widget;
public class Canvas extends Widget { public static class DrawingStyle extends JavaScriptObject { protected DrawingStyle(int opaque) { super(opaque); } } public static class Gradient extends DrawingStyle { public Gradient(int opaque) { super(opaque); } protected static native void addColorStop(JavaScriptObject obj, float offset, String color) /*-{
Round Corners
Very cool round corners based on RuzeeBorders by Steffen Rusitschka.
How to use it: Add the following line to your HTML:
<head> <script language="javascript" src="ruzeeborders.js"></script> ... < /head>

You can get ruzeeborders.js here or here. Note: ruzeeborders.js is distributed under MIT license. Then in your java code your can use four different border styles:
HTML yourDiv = new HTML("Cool"); Borders.simpleBorder(yourDiv, 5 /* radius */);

or
Borders.glowBorder(yourDiv, 5 /* radius */, 4 /* width */, "#35e" /* color */);

or
Borders.shadowBorder(yourDiv, 5 /*radius */, 4 /* width */);

or
Borders.fadeBorder(yourDiv, 5 /* radius */, 4 /* width */);

Also, draw a border but only on the left and top sides of your element:
Borders.simpleBorder(yourDiv, 5 /* radius */, Borders.LEFT + Borders.TOP);

You can leave your questions or comments here. Source code: Borders.java:
/* Round Corners Widget for GWT Copyright (C) 2006 Alexei Sokolov http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client; import com.google.gwt.user.client.ui.UIObject; public class Borders { public static final public static final public static final public static final public static final public static final
int int int int int int
NONE = 0; LEFT = 1; TOP = 2; RIGHT = 4; BOTTOM = 8; ALL = LEFT + TOP + RIGHT + BOTTOM;
public static native void simpleBorder(UIObject obj, int radius) /*-{
Simple Calendar
Simple Calendar Widget. Put it inside Popup Panel to create a date picker. If you use attached CalendarWidget.css file your calendar will look like this:
How to use it:
final CalendarWidget calendar = new CalendarWidget(); calendar.addChangeListener(new ChangeListener() { public void onChange(Widget sender) { Window.alert("Date selected: " + calendar.getDate()); } }); yourPanel.add(calendar);
Please leave your questions or comments here. Source code: CalendarWidget.java:
/* Simple Calendar Widget for GWT Copyright (C) 2006 Alexei Sokolov http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client; import java.util.Date; import import import import import import import import import import import import import import com.google.gwt.user.client.DOM; com.google.gwt.user.client.Element; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.ChangeListener; com.google.gwt.user.client.ui.ChangeListenerCollection; com.google.gwt.user.client.ui.ClickListener; com.google.gwt.user.client.ui.Composite; com.google.gwt.user.client.ui.DockPanel; com.google.gwt.user.client.ui.Grid; com.google.gwt.user.client.ui.HTML; com.google.gwt.user.client.ui.HasAlignment; com.google.gwt.user.client.ui.HorizontalPanel; com.google.gwt.user.client.ui.SourcesChangeEvents; com.google.gwt.user.client.ui.Widget;
RateIt Widget
RateIt widget similar to netflix.com, and amazon.com star ratings. You can use mouse and keyboard (left, right, and number keys) to select rating. It can look like this. Note, you need to create images for a single star, not the whole thing.
How to use it:
final RateItWidget rateIt = new RateItWidget( 3.2/*current rating*/, 5 /*max rating */, whiteStarImg, yellowStarImg, whiteDonutImg, redDonutImg, redStarImg); rateIt.addChangeListener(new ChangeListener() { public void onChange(Widget sender) { // Do something here // Window.alert("User rating: " + rateIt.getUserRating()); } }); yourPanel.add(rateIt);
Or
Image[] ratingImages = new Image[] { new Image("starfull.gif"), new Image("star10pct.gif"), new Image("star20pct.gif"), new Image("star30pct.gif"), new Image("star40pct.gif"), new Image("star50pct.gif"), new Image("star60pct.gif"), new Image("star70pct.gif"), new Image("star80pct.gif"), new Image("star90pct.gif") }; final RateItWidget rateIt = new RateItWidget( 3.2 /*current rating*/, 5 /*max rating */, whiteStarImg, yellowStarImg, whiteDonutImg, redDonutImg, ratingImages); rateIt.addChangeListener(new ChangeListener() { public void onChange(Widget sender) { // Window.alert("User rating: " + rateIt.getUserRating()); } }); yourPanel.add(rateIt);
Please leave your questions or comments here. Source Code: RateItWidget.java:
/* RateIt Widget for GWT Copyright (C) 2006 Alexei Sokolov http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client; import import import import com.google.gwt.user.client.DOM; com.google.gwt.user.client.Element; com.google.gwt.user.client.ui.ChangeListener; com.google.gwt.user.client.ui.ChangeListenerCollection;
Script.aculo.us integration
This component allows you to use Script.aculo.us effects from GWT. Example:
Effects.Effect("Puff", uiObj);
More complex example:
Effects.Parallel( new Effects.Effect[] { Effects.Effect("Pulsate", uiObj, "{ sync:true, duration: 3.0 }"), Effects.Effect("SlideDown", uiObj, "{ sync:true, duration: 3.0 }") }, "{duration: 3.0}").addEffectListener( new Effects.EffectListenerAdapter() { public void onAfterFinish(Effect sender) { Window.alert("done"); } });
How to use it: You need to include prototype.js and scriptaculous.js in HEAD section of your HTML file.
<head> <script src="js/prototype.js" type="text/javascript" /> <script src="js/scriptaculous.js" type="text/javascript" /> ... </head>
Please leave your questions or comments here. Source code: Effects.java
/* Script.aculo.us Effects integration component for GWT Copyright (C) 2006 Alexei Sokolov http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client; import java.util.Iterator; import java.util.Vector; import com.google.gwt.core.client.JavaScriptObject; import com.google.gwt.user.client.Element; import com.google.gwt.user.client.ui.UIObject; public class Effects { public void void void } interface EffectListener { onBeforeUpdate(Effect sender); onAfterUpdate(Effect sender); onAfterFinish(Effect sender);
public static class EffectListenerAdapter implements EffectListener {
Auto-Completion Textbox
Author: Oliver Albers
How to use it:
final AutoCompleteTextBox box = new AutoCompleteTextBox(); box.setCompletionItems(new SimpleAutoCompletionItems( new String[]{ "apple", "ape", "anything", "else"}));
Alternatively, you can create your own implementation of CompletionItems interface (see below) to get a list of items using RPC. Updated 05/27/06. New version is up. Now with AutoCompleteTextArea. Please leave your questions or comments here. Source code: CompletionItems.java:
/* Auto-Completion Textbox for GWT Copyright (C) 2006 Oliver Albers http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client; public interface CompletionItems { /** * Returns an array of all completion items matching * @param match The user-entered text all compleition items have to match * @return Array of strings */ public String[] getCompletionItems(String match);
AutoCompleteTextBox.java:
/* Auto-Completion Textbox for GWT Copyright (C) 2006 Oliver Albers http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client; import import import import import import import com.google.gwt.user.client.ui.ChangeListener; com.google.gwt.user.client.ui.KeyboardListener; com.google.gwt.user.client.ui.ListBox; com.google.gwt.user.client.ui.PopupPanel; com.google.gwt.user.client.ui.RootPanel; com.google.gwt.user.client.ui.TextBox; com.google.gwt.user.client.ui.Widget;
public class AutoCompleteTextBox extends TextBox
Simple XML Parser

Author: musachy
Allows to parse XML with GWT, the js code is taken (with some modifications) from AJAXSLT. How to use:
String xml = "<element att=\"some attribute\">some text</element>"; Document doc = Document.xmlParse(xml); Node node0 = (Node)doc.getChildren().get(0); node0.getName(); // "element" node0.getValue(); // null node0.getAttribute("att"); // "some attribute" node0.getType(); // DOM_ELEMENT_NODE Node node1 = (Node)node.getChildNodes().get(0); node1.getName(); // #text node1.getValue(); // "some text" node1.getType(); // DOM_TEXT_NODE
Please leave your questions or comments here. Source code: Document.java:
/* Simple XML Parser for GWT Copyright (C) 2006 musachy http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client.xml; import java.util.ArrayList; import com.google.gwt.core.client.JavaScriptObject; public class Document { private ArrayList childNodes = new ArrayList(); public static final String DOM_ELEMENT_NODE = "DOM_ELEMENT_NODE"; public static final String DOM_TEXT_NODE = "DOM_TEXT_NODE"; Document() { } public static Document newDocument() { return new Document(); } public Node createNode(String name) { return new Node(DOM_ELEMENT_NODE, name, null, this); } public Node createTextNode(String value) { return new Node(DOM_TEXT_NODE, "#text", value, this); } public void appendChild(Node child) {
ImageHyperlink
Hyperlink which allows you to specify Image object as its content. Go ahead, implement your favority rollover effects with it. Please leave your questions or comments here. Source code: ImageHyperlink.java:
/* ImageHyperlink component for GWT Copyright (C) 2006 Alexei Sokolov http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client; import import import import import import import com.google.gwt.user.client.DOM; com.google.gwt.user.client.Event; com.google.gwt.user.client.ui.Hyperlink; com.google.gwt.user.client.ui.Image; com.google.gwt.user.client.ui.MouseListener; com.google.gwt.user.client.ui.MouseListenerCollection; com.google.gwt.user.client.ui.SourcesMouseEvents;
public class ImageHyperlink extends Hyperlink implements SourcesMouseEvents { private MouseListenerCollection mouseListeners; public ImageHyperlink(Image img) { this(img, ""); } public ImageHyperlink(Image img, String targetHistoryToken) { super(); DOM.appendChild(DOM.getFirstChild(getElement()), img.getElement()); setTargetHistoryToken(targetHistoryToken); sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS); } public void addMouseListener(MouseListener listener) { if (mouseListeners == null) mouseListeners = new MouseListenerCollection(); mouseListeners.add(listener); } public void removeMouseListener(MouseListener listener) { if (mouseListeners != null) mouseListeners.remove(listener); } public void onBrowserEvent(Event event) { super.onBrowserEvent(event); switch (DOM.eventGetType(event)) { case Event.ONMOUSEDOWN: case Event.ONMOUSEUP:
Tooltip Listener
Allows you to add tooltips (small help messages) to any component that support SourcesMouseEvents interface. How to use it:
Image img = new Image("image.gif"); img.addMouseListener( new TooltipListener( "your text", 5000 /* timeout in milliseconds*/,"yourcssclass"));
Please leave your questions or comments here. Source code: TooltipListener.java:
/* Tooltip component for GWT Copyright (C) 2006 Alexei Sokolov http://gwt.components.googlepages.com/ This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
package com.gwt.components.client; import import import import import com.google.gwt.user.client.Timer; com.google.gwt.user.client.ui.HTML; com.google.gwt.user.client.ui.MouseListenerAdapter; com.google.gwt.user.client.ui.PopupPanel; com.google.gwt.user.client.ui.Widget;
public class TooltipListener extends MouseListenerAdapter { private static final String DEFAULT_TOOLTIP_STYLE = "TooltipPopup"; private static final int DEFAULT_OFFSET_X = 10; private static final int DEFAULT_OFFSET_Y = 35; private static class Tooltip extends PopupPanel { private int delay; public Tooltip(Widget sender, int offsetX, int offsetY, final String text, final int delay, final String styleName) { super(true); this.delay = delay; HTML contents = new HTML(text); add(contents); int left = sender.getAbsoluteLeft() + offsetX; int top = sender.getAbsoluteTop() + offsetY; setPopupPosition(left, top); setStyleName(styleName); } public void show() { super.show(); Timer t = new Timer() {

GWT Components - GWT Component Library

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GWT Components - GWT Component Library

Uploaded by

Copyright:

Available Formats

GWT Component Library

<module> <inherits name="com.google.gwt.core.Core"/> </module>

The souce code is licensed under LGPL 2.1 license. Contact Us

The souce code is licensed under LGPL 2.1 license. Contact Us

Very cool round corners based on RuzeeBorders by Steffen Rusitschka.

How to use it: Add the following line to your HTML:

<head> <script language="javascript" src="ruzeeborders.js"></script> ... < /head>

HTML yourDiv = new HTML("Cool"); Borders.simpleBorder(yourDiv, 5 /* radius */);

Borders.glowBorder(yourDiv, 5 /* radius */, 4 /* width */, "#35e" /* color */);

Borders.shadowBorder(yourDiv, 5 /*radius */, 4 /* width */);

Borders.fadeBorder(yourDiv, 5 /* radius */, 4 /* width */);

Borders.simpleBorder(yourDiv, 5 /* radius */, Borders.LEFT + Borders.TOP);

int int int int int int

public static native void simpleBorder(UIObject obj, int radius) /*-{

The souce code is licensed under LGPL 2.1 license. Contact Us

How to use it:

The souce code is licensed under LGPL 2.1 license. Contact Us

How to use it:

The souce code is licensed under LGPL 2.1 license. Contact Us

public static class EffectListenerAdapter implements EffectListener {

The souce code is licensed under LGPL 2.1 license. Contact Us

How to use it:

public class AutoCompleteTextBox extends TextBox

The souce code is licensed under LGPL 2.1 license. Contact Us

Simple XML Parser

The souce code is licensed under LGPL 2.1 license. Contact Us

The souce code is licensed under LGPL 2.1 license. Contact Us

The souce code is licensed under LGPL 2.1 license. Contact Us

You might also like

Borders.glowBorder(yourDiv, 5 /* radius /, 4 / width /, "#35e" / color */);

Borders.shadowBorder(yourDiv, 5 /radius /, 4 /* width */);

Borders.fadeBorder(yourDiv, 5 /* radius /, 4 / width */);