Introducing the gwt-timepicker

March 21st, 2011 Javier Ochoa, Consultant (email the author)

This entry is part 5 of 9 in the series Developing GWT Applications

As Javascript has become more powerful over the years, user input fields have evolved to be more innovative and intuitive. One particular example is a time-picker, which has been around in JQuery for a while now. Imagine you are working in a room reservation system and you want your user to pick hours and minutes to reserve a room. JQuery has jQuery.timepickr.js:

This is exactly what I mimicked using GWT widgets: FocusPanel, PopupPanels, InlineLabels and mouse handlers.

Using the GWT Time-Picker Widget

Using the Time-Picker widget is very easy, all you have to do is:

1. Include the jar in your classpath: gwt-timepicker-0.1.jar

2. Add this line to your gwt.xml file:

<inherits name="com.summatech.gwt.GwtTimepicker"/>

3. And use it as a widget in your “views”:

HourMinutePicker hourMinutePicker =
    new HourMinutePicker(PickerFormat._12_HOUR);
 RootPanel.get().add(hourMinutePicker);

To see it in action, check out this demo:

Implementation

These are the simple steps to get an idea of the code behind this implementation:

1. The triggers for time selection are three mouse over handlers for what I call “suffix” (AM/PM), hours and minutes.

2. On each of these handlers I calculate three variables, workingSuffix, workingHour and workingMinute to call the refreshWidget method:

refreshWidget(suffix, hour, minute);

3. And there is where the magic happens. The refreshWidget hides/shows panels and re-calculates positions depending on the suffix or hour selected. And this happens on every mouse move to a different label.

* The exact positioning of the hours and minutes panel is calculated considering the parent widget. This is a simple diagram of how the positioning of hours is calculated:

Here we have two FlowPanels: one with the Suffix labels and one with the Hour labels. The refreshWidget method fixes the left of the hour panel as follows:

hourPanel.left = suffixLabel.left + (suffixLabel.offsetWidth/2) – (hourPanel.offsetWidth/2); //pseudocode

This I think is the more complicated part of this widget. The rest is easy to follow as it is using regular click, focus and blur handlers with a mix of a flow panels, one pop-up panel and one focus panel.

Feel free to leave your comments!

Be Sociable, Share!

Entry Filed under: Uncategorized

14 Comments Add your own

1. Ashton | March 28th, 2011 at 11:53 am

Hey Javier,

Just wanted to say I successfully added your widget to my project and it works very well. I think I am going to try to bundle it into into a DateTimePicker widget using the standard GWT DatePicker and then try to create a consistent style and behavior for:

getTimestamp, etc
getHour,minute,year,etc
show
hide

If I find anything interesting, I will let you know

Thanks!
-Ashton
2. Javier Ochoa | March 29th, 2011 at 9:40 am

Sounds great! The year/month/day picker might have some good uses as well… let me know how it goes.
3. Ashton | March 29th, 2011 at 3:12 pm

So I was able to successfully able to combine this into a PopupWidget which combined the HourMinutePicker, a custom CustomDatePicker (to add controls to select year and month), and Three buttons/labels (Today, Close, Save)

I made DateTimePicker (extends Popup and wraps all the widgets) implement HasValueChangeHandler so we can add a ValueChangeHandler to the widget (I only check for a value change when the “save” button is clicked so it doesn’t fire events before the user is able to select both date and time..)

Also implements HasValue so it will work easily with my User input Validation framework.

My implementation is more of a hack but it doesnt provide a nice way to bundle it into a single widget.

I should probably have implemented HasCloseHandlers as well which would could throw a custom event that stores the current value and whether or not it was changed (giving the user flexibility to use either event)

Thanks again!
4. Hauke | March 30th, 2011 at 9:58 am

Nice, thank you.

But… even in 24 hour format there is an AM/PM selection on first level (like in JQuery). That is weird and a showstopper for me.
5. Javier Ochoa | March 30th, 2011 at 10:29 am

Well, in that case would you like the 24 hour labels to appear but no AM/PM? That sounds like a good addition. Will add this as an improvement in the google project.

thx.
6. Liz | March 31st, 2011 at 10:17 am

do you guys recommend any solid staffing company’s that may know of some great java developers to work with me on a year long project for fannie mae? its happening in pittsburgh – i like this thread.
7. Rick Kotermanski | April 1st, 2011 at 4:45 am

Hi Liz – thanks for the post. If you could send an email to info@summa-tech.com with your contact information, we can follow up with you.
8. Chris | June 21st, 2011 at 1:00 pm

This is a great time picker. I have a couple of suggestions that you could consider adding.
One is a setValue method, so that the control can be pre-filled with a value.

Also, it would be handy to be able to get hour and minute values separately. I know it’s easy enough to use getMinutes and do the math, but it would be convenient to have something like getHour and getMinute. These can then be used to set the hour and minute in a Date object.
9. Javier Ochoa | July 7th, 2011 at 3:04 pm

That sound like a good feature to add. Will try to add those soon. I’ll keep you posted

thx
10. Enrique Rodriguez | July 12th, 2011 at 9:30 pm

Because the time picker module inherits the Standard theme, I’m seeing the Standard theme’s CSS in my app. Can you remove that ‘inherits’ statement? Or is there some way I can override that? I looked at several other open-source GWT modules out there and none of them require the inheritance of a theme.
11. Javier Ochoa | July 12th, 2011 at 10:16 pm

Right. I did forget about removing the standard theme. Now it should be good, I’ve uploaded a new version in the project home: http://code.google.com/p/gwt-timepicker/

This also contains the setTime, getMinute and getHour methods that Chris asked for.
12. Enrique Rodriguez | July 15th, 2011 at 1:38 pm

Thanks for the quick turnaround! New release (0.2) fixed my Standard theme problem. For anyone with the same problem: updating the library and clearing the browser won’t clear the theme from dev; run a GWT Compile on the project.
13. Andrew | February 12th, 2012 at 11:27 am

I’d also include a default constructor to make it easy to include in a layout using UI Binder. I have created a UiFactory method to do that, but it could be easier.
14. Javier Ochoa | February 28th, 2012 at 10:07 pm

Yep. that sounds like a good idea, will be adding that shortly.

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>