bouwkamp.com

On 3 Februari 2009 Google launched their new “custom buttons” in Gmail. The idea and creation process behind these buttons were described in the blog post Recreating the button at stopdesign.com, who were part of the process to develop these buttons. The buttons were designed for the following reason:

The buttons are designed to look very similar to basic HTML input buttons. But they can handle multiple interactions with one basic design. The buttons we’re using are imageless, and they’re created entirely using HTML and CSS, plus some JavaScript to manage the behavior. They’re also easily skinnable with a few lines of CSS, which was a key factor now that Gmail has themes.

Unfortunately, as with many UI widgets created by Google, these are not made publicly available via their GWT framework. Therefor I decided to recreate the button in GWT. I’ll describe some of the JavaScript and CSS issue I faced and how these were solved. If you want to go straight to the button and demo here are the relevant links: download, demo. Javadoc: Button and ButtonBar

Example of using the button in GWT

Design

The Button widget has been designed to look as close as possible to the look and feel of the Google button (read: pixel perfect). To make the usage of button easy it has same class interface as the PushButton widget from the GWT library, this makes it easy to replace existing buttons with the new Button widget. Additional there are several methods to easily change the color, size or text/button ratio. For the color I added a method that based on a hue and saturation value calculates all colors needed. This makes it easy to change the color of the button.

The button is constructed with nested <div> element’s. You can easily see this when you view the button with your favorite browser code inspector tool. Eventually I ended up with one <div> element less than in the Google button, which didn’t effect the layout as far as I my tests concluded.

JavaScript and CSS issues and fixes

After the basic reverse engineering I fixed the specific browser support issues, mainly related to the inline-block support. In the process the free browser testing service browsershots.org was of great help. But service only helps you with layout issues, not if the effects and actions work correctly. The Internet Explorer Application Compatibility VPC Image make it possible to test different versions of Internet Explorer. In the end I only didn’t fix IE 6 issues yet. Here are some details regarding the major issues:

DOCTYPE

It turned out that to display the button correctly in Internet Explorer 7 you need to set a DOCTYPE. It doesn’t matter which one, you just need one. So don’t forget to set one!

display:inline-block

What is interesting about the google button, is the use of the display property value inline-block. This property can be used to position block elements horizontally without having to float them. Because browser support has been very poor and using it is was not recommended. But newer browsers do support it and it won’t be long before you can safely use this property value.

Of the major browsers, support in Internet Explorer 7 can be achieved via the hasLayout trick, used in the button widget by setting display:inline and zoom:1 instead of display:inline-block. In the cobogw library there is a method CSS#setInlineBlock that will take care of different browser implementations.

Unselectable button text

If you check the Google button you will see that’s it’s not possible to select the text. Making text unselectable is normally not considered good practice, but in this case a normal button is also not selectable. But making something unselectable differs almost is all browsers. In the cobogw library there is a method CSS#setSelectable to take care of different browsers.

A small related issue is with Opera. In Opera when a user selects an element with a tab index it gets a different background color. For Opera 9.5 and later this can be removed via the CSS3 pseudo element ::selection. However, I didn’t find any way to set this via JavaScript, which means you need to set this in your own CSS file. This is documented in the Button JavaDoc.

Fire click event

A <button> element triggers a click event in case the user hits the space bar or the return key. However, a <div> element doesn’t have this behavior so programmatically a click event must triggered when the user hits one of those keys. It turns out this is also browser specific. IE does support the JavaScript method click() on the <div>. In the other browsers you need to do somewhat more. In short, you need to create a MouseEvents and call the dispatchEvent method on the <div> element with the a click event object.

For most other use cases it should not be needed to fire events that are normally only triggered by user interaction. If you find yourself doing such and are not creating ‘low’ level widgets like buttons you probably should reconsider your code. A method fireClickEvent that takes care of different browser implementations is available in the cobowg library to fire a mouse click event.

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.

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.