Wednesday 13 June 2012

GWT 2.4 custom widget for editing time

I had to take some time to make a "showcase" of the GWT basics. So, I started to think about something that make sense to someone to see and also useful for me. I remembered my self, not so long ago, trying to find a widget for time edition, so I told my self, why not to seize the time for that.

Maybe, I just failed to find the solution to time edition over the Internet, so I will say that I couldn't find the widget.

I started by planning what to do to show a little bit of all of the basic aspects of GWT programing. To do so it seemed to me essential to develop a widget, listening events and fire events, use generics, some low level manipulation of DOM and CSS through GWT elements, and some other peculiarities.

My idea is to present my way of doing a custom widget in a very fast way. This widget will get a java.util.Date and it will allow the developer to show and edit the time. So it will have to status(showing and editing), by capturing the focus event it will change from showing to editing. Once editing, the user is allowed to enter it typing the hour and minutes, or simply by using the arrow keys, up and down.



To control the typing, I will write a "Named inner class" to show one of the approaches to add event handlers.

As you can see, this spaghetti of code would be improved, but it aims to prevent the user to "type" an invalid time. To do so, it listens the key down event and prevents the character to be written, by stopping the event to be triggered.

Doing corrections to the key pressed, allowing or preventing to be changed, setting the next position of the cursor, data entry can be controlled.
Another thing to notice, is that the left and right arrows are permitted to rise, so the user can move freely through the widget.

The AM / PM(refering to before midday(AM) and after midday(PM)) is also managed ether by doing click onto it or using the arrows up and down on the hour.

I have code this enum to keep the logic of AM/PM as much encapsulated as possible. That way you can ask the enum "instance" to give you its opposite value.
Lets go for the constructor. Here is where I show the three different ways of adding an implementation of an event handler interface. Depending on the use you are going to give to that classes, if you will prefer a named inner class, an anonymous inner class or just doing the Composite to implement whatever event you want to handle.

I intended to get this widget independent of CSS setting to be shown properly, while I show some GWT code to manipulate the the look and feel. I have coded this method to do so.

What I meant here was to set the basic gwt-TextBox to my widget and make some changes to it and fix some padding and border defaults to make it look better. I know that you guys can make this look better so give me some tips.

There is something else to play with. I have discovered that GWT has implemented the Timer class that does the same as JRE java.util.Timer class almost ever since.
So I decided to put the clock ticking. To do so, I had to create a class extending Timer and then override the run method.

Because I don't want to boring you with so much details, I will paste the whole thing, and you can ask whatever you want...

Hope you like it!!