GWT Widget Library Close to a 0.1.6 Release

There has been a lot of work going in to the GWT Widget Library lately, and I wanted to provide a preview of what it will include.

New Canvas widget

George Georgovassilis added a Canvas widget to the library that uses VML on Internet Explorer and the canvas tag on Firefox, Opera, and Safari. After the launch of the initial implementation you can expect to see incremental enhancements down the road.

Calendar Widgets

The existing CalendarPanel has had some performance improvements including one that can cut the rendering time in half. In addition to this there is a new SimpleCalendar widget that builds on the CalendarPanel by providing controls for navigating. The SimpleCalendar is accompanied by several stylesheets to make it easy to use out of the box.

Depending on the timing you may also see the addition of an EventCalendar. The EventCalendar widget will display one or more calenders with a list of events below the calendars. A single set of controls will be provided to advance the series of calenders. So for example you may display three calendars to represent the quarter, then be able to navigate forward and back full quarters.

HTMLInclude Widget

You can think of the HTMLInclude widget as the core HTML widget with one small difference, you supply the URL of the content instead of in-lining the content in your application. The benefit is that your code is no longer cluttered with long strings of HTML content, and you can change the content without needing to recompile your application.

Beyond this there has been a reasonable amount of house cleaning and bug fixing, including providing an updated Maven 2 POM file to make it easy to download and compile the library from the source.

There is no schedule, but I hope to have this released no later than the end of January. If you interested in a sneak peak please feel free to download and build from the source, the trunk is always kept in a fairly stable condition.


Library Home Page
Subversion Repository

Presentation: GWT Tools Panel

As mentioned in a prior post I had the opportunity to be a part of the GWT Tools Panel at the recent conference hosted by Peason. That session was just made available online for those unable to attend the conference.



You can find this presentation and others from the conference on YouTube.

See A Need, Fill A Need

The title refers to the animated movie Robots. In the movie Rodney, a robot with aspirations, goes to the big city to become an inventor. His motto is "see a need, fill a need". I have been trying to do the same thing with the GWT Widget Library, trying to fill the need where I know there is one. Based on some polling a few weeks ago the biggest need is for more widgets. 68% of those polled asked for more widgets above all else. With those results I started to focus my efforts on just widgets, and with some help from people like Adam Tacy, we have introduced quite a few in the last couple versions.

The question I want to ask is, what other widgets do you want to see added to the GWT-WL?

Please let us know what you want us to build, we need some more ideas. Leave a comment below and we will add it to the wish list.

Thanks.

CJD seeks FOL

Our world is a strange place. I started the GWT Widget Library with the intention of giving my code away for free. But I have found that it isn't quite that simple. You can't just give it away, you must license it.

I often find myself driving down the road, and see a pile of used baby toys with a sign that says "FREE". I now look at it a little differently. What I see is a lawsuit waiting to happen. Perhaps the person trying to get rid of the old toys (contributor) should have left a license next to the pile of junk, requiring a signature before a wanting individual (recipient) takes it away.

The cryptic title of this entry was meant to express a similar message as the wanted ads in the paper. In this case it means "Confused Java Developer seeks Friendly OpenSource Lawyer".

With the GWT Widget Library I have tried to protect myself by affixing the Apache 2.0 License, which allows for openness, and protects me from various litigation. The next problem is managing contributions to the library. I started looking at Individual Contributor License Agreements (ICLA), but from what I see, there aren't any agreements that I can just grab and reuse. Each agreement is specific in who is receiving the contribution, and in all cases that I have seen it is either a corporation or a foundation.

Do I need to start a foundation to allow for me to use ICLAs? Perhaps not, but then there is the issue with who's name appears as the copyright holder. Some contributors thus far have wanted there name to be there as a sort of recognition. I can understand this, after all, who want to look at a piece of source code that they contributed and at the top of the file see "Copyright Robert Hanson". I'll be honest, I don't want my name there. I feel that my name there takes away from the recognition that the original author deserves. But if I don't hold the copyright, how does that limit me down the road as other developers fix bugs and extend the contributed code.

It is a mess for sure. What can't "FREE" be free?

I have no solutions, only rants. I may decide to add a donation button to the GWT Widget Library SourceForge project so that I can pay for some legal advice, or maybe I will try to do some research myself (probably a bad idea).

So, with that said, I am open to suggestions... and donations... and free legal advice (with attribution of course).

Calculator Widgets for GWT

One of the latest additions to the GWT Widget Library (GWT-WL) is a small set of calculator tools and widgets. This article will look at how you can use them in your project, beginning with the simplest use case and then working our way to building custom implementations.

PopupCalcButton

The PopupCalcButton is a widget that allows you to add a pop-up calculator tool to any TextBox. The code for this is very compact, so the easiest way to describe it's usage is to start with an example (or view the working demo).

TextBox calcTextBox = new TextBox();
Button showCalcBtn = new Button("Show Calc");
PopupCalcPanel calc =
new PopupCalcPanel(calcTextBox, showCalcBtn);

RootPanel.get().add(calcTextBox);
RootPanel.get().add(showCalcBtn);
RootPanel.get().add(calc);

We need to create a TextBox widget to recieve the calculated value, and a Button to activate the pop-up calculator. The flow of events starts when a user clicks the "Show Calc" button, which will display the calculator just below the TextBox widget. The user can use the calculator to calculate a result, then clicks a button in the calcluator labeled "DONE" to close the calculator and copy the result to our TextArea.

The PopupCalcPanel requires a reference to both the TextBox and Botton widgets. It will add event handlers to the Button for the calculator to appear, and uses the TextBox for positioning and to place the calculated total. The PopupCalcPanel provides no other options other than CSS tweaks.

The GWT-WL includes a single default CSS stylesheet for all calculator widgets shipped with the library. The stylesheet includes all of the style classes used by the widgets. To use the default you will need to add the following in the of your HTML code.

<link rel="stylesheet" type="text/css"
href="style/gwl-calcPanel.css">

SimpleCalcPanel

The SimpleCalcPanel uses a variation of the Template design pattern, and is meant to allow for easy customization by extending the class. By default it will render a TextBox, the calculator display, and a simple calculator keypad. You may make come cosmetic changes to the calculator using CSS without having to write your own subclass.

SimpleCalcPanel calcPanel = new SimpleCalcPanel();
RootPanel.get("example").add(calcPanel);

The SimpleCalcPanel has two public methods, getValue() and clearValue(). All other methods are protected, and cannot be accessed without subclassing the widget.

Extending SimpleCalcPanel

You can customize the SimpleCalcPanel by subclassing it and overriding one or more of it's methods. When the class is created it internally calls the init() method. You may override the init method, but in most case this is not recommended. The init() method for SimpleCalcPanel is below.

protected void init ()
{
TextBox textDisplay = createTextDisplay();
createCalc(createDisplayListener(textDisplay), textDisplay);
setKeyboardListener(textDisplay);
initComplete();
}

The init() method itself does very little work, and delegates the setup work to other methods in the class. Depending on what you are trying to do, you will override the methods that init() calls so that you can customize some part of the setup. You may, for example, want to use your own KeyboardListener for custom shortcuts, or use a text display other then a simple TextBox so that you can color the output red for negative numbers.

One of the methods that can be overridden is the buildCalcLayout(CalcEngine, TextBox) method. This method is called as part of the initialization, but not by init() directly. It is called as part of the createCalc() call. This method allows you to create the widgets that make up the display, including buttons, panels, and any other widgets you need. The only widget that you won't create is the TextBox calculator display, which is passed to the method. If you override this method you will need to add the TextBox to the panel yourself, or call the method in the super class.

Here is an extended example which extends the SimpleCalcPanel by adding a Hex/Decimal selector. This requires a custom TextBox for the display which can be toggled to show hex or decimal values. We also override the buildCalcLayout method so that we can add the new controls.

package org.hanson.gwt.client;

import org.gwtwidgets.client.ui.SimpleCalcPanel;
import org.gwtwidgets.client.util.CalcEngine;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RadioButton;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;


public class MyApplication implements EntryPoint
{

public void onModuleLoad ()
{
RootPanel.get().add(new HexCalcPanel());
}


class HexCalcDisplay extends TextBox
{
public boolean isHexMode = false;

public void setText (String text)
{
  if (isHexMode) {
    double num = Double.parseDouble(text);
    String hexString = Integer.toHexString((int) num);
    hexString = hexString.toUpperCase();
    super.setText(hexString);
  }
  else {
    super.setText(text);
  }
}
}

class HexCalcPanel extends SimpleCalcPanel
{
private HexCalcDisplay textBox;

protected TextBox createTextDisplay ()
{
  textBox = new HexCalcDisplay();
  textBox.setStyleName("simpleCalcDisplay");
  return textBox;
}

protected void buildCalcLayout (
    final CalcEngine calcEngine,
    TextBox textDisplay)
{
  RadioButton dec = new RadioButton("output", "Dec");
  dec.setChecked(true);
  dec.addClickListener(new ClickListener(){
    public void onClick (Widget sender)
    {
      textBox.isHexMode = false;
      calcEngine.refreshDisplay();
    }
  });

  RadioButton hex = new RadioButton("output", "Hex");
  hex.addClickListener(new ClickListener(){
    public void onClick (Widget sender)
    {
      textBox.isHexMode = true;
      calcEngine.refreshDisplay();
    }
  });

  HorizontalPanel opts = new HorizontalPanel();
  opts.add(dec);
  opts.add(hex);
  add(opts);

  super.buildCalcLayout(calcEngine, textDisplay);
}
}
}

The CalcEngine

In some cases you will need to customize the control beyond what the SimpleCalcPanel allows. At the very heart of the calculator is the CalcEngine. The CalcEngine keeps track of the state of the calculator, the contents of the display, and the contents of the total register. It allows you to override methods for many of the operators, and gives you a programmatic way to refresh the display. It also has utility methods to adding number and operator buttons to your display. It is in every sense the heart of the system.

I believe that in most cases you will not need to override any of the CalcEngine methods, more likely you will use it as the core of your own calculator panel. In the future you can expect to see new functions added here in the core, which can then be used by calculator panels. The obvious enhancements include the addition of trigonometric and algebraic functions.

Conclusion

The calculator widget and engine set allows for ease of use, ease of extension, and the ability to create highly customized calculators. Future extensions will expand on it's potential, hopefully leading to productive components.

Coding SVG With GWT

If you have been reading my prior posts you will know that I have a strong interest in GWT, and have been doing a lot of work with it, even in production systems. GWT is the acronym for the Google Web Toolkit. It allows a developer to write code in Java, and have it compiled to JavaScript that can run in any modern browser. For more details check out the GWT site, and check out my prior posts.

Introduction

The Scalable Vector Graphics (SVG) specification 1.1 has been a W3C Recommendation for over three years now. Firefox 1.5 introduced a built-in SVG rendering engine, and Adobe has an SVG plug-in available for Internet Explorer. This article explains how you can use the SVG support contained in GWT Widget Library o.o.5 to render SVG elements, and how you can make your page compatible with both Firefox and Internet Explorer 6.

SVGPanel Widget

The first widget you always need to create to render SVG graphics is the SVGPanel widget. When you create this widget you need to specify the width and height or the drawing area.

SVGPanel sp = new SVGPanel(500, 300);

This panel, once created, becomes a factory for other components. This works similar to the XML DOM. In this initial release you can create circles, rectangles, ellipses, and paths.

SVGRectangle rect = p.createRectangle(x, y, width, height);
SVGCircle circle = p.createCircle(cx, cy, radius);
SVGEllipse ellipse = p.createEllipse(cx, cy, rx, ry);
SVGPath path = p.createPath(x, y);

Creating a widget this was does not add it to the drawing. You still need to add the SVGPanel via the add() method.

SVGRectangle, SVGCircle, and SVGEllipse

Once created you can set additional attributes to these objects. For all of these you may set the fill color, stroke color, fill opacity, stroke opacity, and stroke width. Each of these objects will also have attributes specific to the object type. For example, you can change the radius of a circle after it's creation, and you may extend a path by adding additional points.

Each method that sets the attribute of an object will return the object itself. This allows you to chain the setting of attributes. The only trick is that some methods belong to the super class SVGBasicShape, which will return an instance of SVGBasicShape, and not the specific subclass. So you just need to be sure to set your widget specific attributes first, followed by the attributes that belong to the super class.

Below are some concrete examples, which show off the various attributes.

p.add(p.createRectangle(0, 0, 500, 300)
.setStroke(Color.DARK_GRAY)
.setStrokeWidth(2)
.setFill(Color.LIGHT_GRAY));

p.add(p.createEllipse(250, 225, 150, 70)
.setStroke(Color.RED)
.setStrokeWidth(1)
.setFill(Color.BLUE));

p.add(p.createCircle(420, 225, 60)
.setFill(Color.BLACK)
.setStrokeWidth(15)
.setStroke(Color.WHITE));

SVGPath Widget

The path widget deserves special attention. You create a path widget by specifying the initial point on the path. From this initial point you can add additional points by drawing either straight lines or curves. You may also move the current point to include multiple lines, for example the inner and outter circles of a doughnut. You may leave the path open, or close it to create a shape. The curves may be cubic Bezier, quadratic Bezier, or elliptical arcs. Each line or curve may be specified using either absolute coordinates, or coordinates relative to the current point. I suggest reading through the path portion of the SVG specification for details on using each of the curves.

The example below draws a hexagon using relative lineTo commands, coloring the shape with red translucent fill, and an orange border.

p.add(p.createPath(150, 190)
.relLineTo(10, 0)
.relLineTo(4, 8)
.relLineTo(-4, 8)
.relLineTo(-10, 0)
.relLineTo(-4, -8)
.closePath()
.setFill(Color.RED)
.setFillOpacity(50)
.setStroke(Color.ORANGE)
.setStrokeWidth(1));

Here is another path that creates an upside-down tear-drop shape, with a translucent yellow fill.

p.add(p.createPath(250, 225)
.relMoveTo(-25, -25)
.relCurveToC(0, -25, 50, -25, 50, 0)
.relLineTo(-25, 50)
.closePath()
.setFill(Color.YELLOW)
.setFillOpacity(50)
.setStroke(Color.BLACK)
.setStrokeWidth(1));

Gradients

You may also create linear gradients that can be used to fill a widget, or in place of a stroke color. Gradients consist of one or more "stops". Each stop contains a color, and optionally an opacity . For each stop you specify the color value, and the SVG engine will transition the color/opacity between stops.

The following gradient will color a widget from red to blue. The first value of each stop is the percentage across the widget. 0% being the left-most point on the widget, to 100% being the right-most point.

SVGLinearGradient grad = p.createLinearGradient()
.addStop(0, Color.RED)
.addStop(100, Color.BLUE);

You may also change the vector of the gradient to something other then left ro right. For example, you might want to color a widget from the top to the bottom. Here is the same gradient which will color from top to bottom instead of left to right. The values are percentages of the objects width and height. Specifically this vector definition starts at 0%,0%(x,y) to 0%,100%(x.y).

SVGLinearGradient grad = p.createLinearGradient()
.addStop(0, Color.RED)
.addStop(100, Color.BLUE)
.setVector(0, 0, 0, 100);

Gradients are not widgets, so you do not add them to the SVGPanel, you just use them. Also notice that each method returns the object instance allowing you to chain method calls.

Working in the Google Hosted Browser

Good luck, it doesn't seem to work. If you are able to get this to work, I would be very interested in the solution. For development I have been compiling the Java code to JavaScript, then testing in Firefox and IE.

Setting up your HTML and Deployment

One of the trickest parts I found was trying to get the SVG content to render in both Firefox 1.5 and Internet Explorer 6. If you are using Iinternet Explorer you will need to first download and install the SVG Viewer plug-in from Adobe. I also strongly suggest reading the Inline SVG page on the SVG Wiki, it will explain in detail how to get everything working across browsers.

Below is the HTML template that I have been using.

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>SVG Component Example</title>
<meta name="'gwt:module'"
  content="'org.gwtwidgets.examples.svg.Project'">

<object id="AdobeSVG"
  classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2">
</object>
<?import namespace="svg" implementation="#AdobeSVG"?>

</head>
<body>
<script type="text/javascript" src="gwt.js">
</script>
</body>
</html>

Firefox requires that the page be either XML or XHTML, requiring the XHTML namespace definition. This is because Firefox uses a different parser for XML and HTML, and the XML parser is the one that understands SVG.

Internet Explorer requires the svg namespace declaration, as well as the