bouwkamp.com

Today I moved the gwt.bouwkamp.com project to a new name: cobogw.org. I guess, it’s completely unpronounceable ;-), but I like abbreviations, the domain was free and the name isn’t used. That can be an issue nowadays. The new name is to better reflect the open source nature of the project (moving from a .com extension to a .org). The new project is hosted on google code, just as the old project was, http://code.google.com/p/cobogw/ (Or you can reach the project site via www.cobogw.org).

New release, GWT 1.5 support

I’ve released a packaged version of the cobogw project, which contains an easy to use jar file containing all widgets, source code and javadoc. With this release some new widgets are added and the jar file is also available as as GWT 1.5 compatible only version. You can find the zipped files at the download site. The new widgets/classes are:

• Rating - A widget that allows users to set ratings (demo).
• Span/TextNode - Widgets to add span an textnode tags to other widgets without overhead of additional div tags (demo).
• CSS - A helper class to help with CSS properties.

On the project site you can also find examples and javadoc documentation for existing and new widgets.

Let me know what you think of the new name and new widgets.

Probably anyone who uses the sql Date/Time or Timestamp classes and wants to use these in GWT needs wrap a custom implementation around these classes on the server side, because the java.sql classes are not supported by the current version of GWT (1.4.61). This is because for existing classes, like java.lang.String, GWT provides an emulated version. These are implemented for a large number of the java.lang objects among others, but not for these java.sql classes.

I had the same problem. I use Spring/Ibatis and maintained 2 data objects one on the server side used by Spring/Ibatis and on the client side which instead of the java.sql.Date used java.util.Date. The latter was used to communicate the data between the client and server.

When looking for a solution I found the problem was reported some time ago under issue 87 in the GWT issue tracker. But it’s marked with Priority-low. Furthermore, hibernate4gwt offers a solution, but I looked at the implementation of the emulated classes and missed some functionality. Therefore I wrote my own implementation to support java.sql.Date, java.sql.Time and java.sql.Timestamp to be fully compliant with the JRE classes (as far as is possible).

I prefer simplicity and packed the classes in a jar file, which you can simply place in your classpath to add support for the java.sql.Date, java.sql.Time and java.sql.Timestamp classes (presumingly you have already added User.gwt.xml to you module).

Download of the jar file, packed in a zip: cobogw.java.sql-1.0.zip

Because quality is important I created JUnit test cases to check the implementation. You can find the reports and test classes in my cobogw project repository.

I’ve been working with GWT for more than a year and still think it changed the playing field. Joel Spolsky wrote an article about how GMail can be compared to what happened to Lotus 1-2-3 and that Google should watch out for some SDK that will change the landscape. I think that SDK can be GWT. Here are some lessons I’ve learned:

• The GWT library takes away a lot of the burden of browser incompatibility related to JavaScript and therefor I don’t have to worry about browser JavaScript incompatibility. For new applications there are very few reasons to write your own JavaScript, unless you want to use a specific JavaScript or DOM element not accessible via GWT or want to integrate a some existing JavaScript code. Although when rewritten in GWT (i.e. Java) you can better debug the code.
• What GWT does for JavaScript it doesn’t do for CSS or HTML. Which means that you still have to work around any CSS or HTML specific browser incompatibilities. CSS and HTML knowledge is very much required. I wrote a CSS helper class that contains all possible items and works around the ‘float’ issue. I’ve not released it officially but you can find it here (make sure you have all files and inherit the CSS.gwt.xml (or Users.gwt.xml)).
• Programming GWT applications can be compared to writing classical GUI applications, like Java SWING applications.
• Websites are created by web designers, who understand HTML and CSS, but probably are less familiar with programming. In GWT the whole design must be rewritten in GWT widgets, and none of the HTML created in the design can be reused. This makes the design/develop process more complicated.
• In GWT there are two ways to set the style on HTML tags: programmatically and via CSS. The advantage of putting something in CSS is that it is easy to test your layout. I use the web developer extension in Firefox to dynamically alter the CSS style of an HTML page. When I’m satisfied with the style I hard code those properties that should not be changed, because when set differently they would break the layout. This makes reuse of the code more easy.
• GWT does add a different dimension to HTML design. Because you develop in widgets and less in terms of HTML tags the notion of what is considered bad and good use of HTML blurs. For example, tables are considered bad it is better to use divs, the same for innerHTML. But all is hidden behind widgets. It becomes something you don’t care about. Although you have to because of the style differences between browsers on divs and tables. Some widgets are based on tables and could be rewritten in divs, but I found this very hard. I did a rewrite of the TabPanel widget with only divs, but to the implementations only worked if I didn’t use ‘quicks mode’.
• With GWT you write in Java and debug your application in Java which makes it very easy to debug your code. Debugging is at Java language level, you are not debugging JavaScript. If you have custom JavaScript and you need to debug the JavaScript, you need to debug it using an external JavaScript debugger, which means you need to debug the generated code. I have not needed this, since I didn’t need any custom JavaScript, except for a few lines to set a very specific attribute not accessible via GWT.
• GWT does lock you in. This means once you’ve writing your application in GWT ‘Java’ you can’t easily move it to some other library. The lock in is comparable with when you write your application in a specific programming language. For example if you would write you application in C# it’s not easy to move to some other language or library. The lock in is not necessary a bad thing because GWT is based on open source software and is open source itself, which is a good thing.
• What is important to remember is that although you code Java for the client side it isn’t Java you’re writing. You are writing an application using Java syntax which is compiled to JavaScript. This is important to understand because it basically means you are writing in an unspecified language. This is partly true because in hosted mode your application runs as a Java program which means it really is Java. But eventually when you deploy your code it will be compiled to JavaScript. It also means that you can only use a very small set of the standard Java library, which is supplied with the GWT library.
• The GWT compiler is currently limited to Java 1.4 syntax (Java 1.5 syntax is planned for GWT version 1.5). However, this doesn’t limit you to use JAVA 1.5 or 6, you simply can’t use specific Java 1.5 syntax in the client code. For the server side you can use whatever Java (syntax/library) you want.

Last year I created a small widget to create rounded corners similar to those in Google mail and calendar. While working with the widget I updated the RoundedPanel Widget with several improvements and changes:

1. The height of the corners can be set. In the previous version this was set to 2. In the new version you can set an index between 1 and 9. I call this an index, not the height, because the real height is somewhat out of sync simply to get better looking rounded corners. For example using 9 will get an real height of 12px.
2. The color of the corner can be set via a method, setCornerColor. This method sets the background of the corner div’s. This method is helpful to programmatically change the colors.

I created a project on the Google code site where the the latest sources will be maintained as well as issues found and where I will release new widgets, like the VerticalTabPanel: http://code.google.com/p/com-bouwkamp-gwt/

The default TabPanel in GWT supports only a Horizontal TabBar. If you want to create a TabPanel which has a Vertical TabBar on the left side of the TabPanel you need to create a complete new implementation, because it is not possible to subclass the TabPanel class and modify the layout. Take the KitchenSink example. This is a Vertical TabPanel, but not implemented as one. With a VerticalTabPanel you can get the same layout.
The following 2 classes are modified versions of the TabPanel and the TabBar to display as a VerticalTabPanel:

VerticalTabPanel.java

VerticalTabBar.java

Notes:

The TabPanel and TabBar are based on the not yet released GWT 1.4 TabBar, which include the feature to add widgets to the tabBar.

Furthermore, I added the method getSelectedTabWidget which returns, just as it implies, the widget of the selected tab. This can be useful if you want to dynamically change the style on a selected tab, for example set a different background color.

Before I know it I’m almost 3 months further and no posts yet…. When I started developing an application with GWT I soon found out I needed a basic infrastructure to speed up the development.

Part of the infrastructure is the Java servlet engine and how it works. A good start is the Java servlet specification: servlet-2_4-fr-spec.pdf, which you can download here from the sun site. This describes all standard functionality, which you get from a servlet engine, like Tomcat.

I started with a basic look and feel similar to Google Mail and Google Calendar or also available in the GWT Kitchen Sink example. The features I want are the list on the left side, the main panels, a settings panel and a feedback panel at the top which is shown when errors occur or after some user action. To be able to develop my own application faster I first decided to build a basic framework that handles all these panels and to build my application up on this framework. That way I don’t have to worry about basic features and can focus on the features I want in my application. I plan to release the framework when its finished. I have no planning but I don’t hope it will take another 3 months…

The purpose of this blog originates from my interest in building web based applications (also referred to as AJAX or Web 2.0). Ever since Google released their Google Web Toolkit I have been interested in the possibilities of this new way of developing web based applications.

Initially I developed a small widget to get rounded corners (see: gwt.bouwkamp.com). But I started to think about developing a real life application based on this toolkit and see if this technology is up to that task. Because my interest in personal finance applications and the lack of good applications I decided that a web based personal finance application is a perfect case.
On this blog I hope to write about the progress, development (struggles;-), post idea’s and code.