NetBeans Web Toolkit - World Clock - Actions


In the previous article I started exploring the NetBeans Web Toolkit and I made a simple clock display.

Let's allow the user to change the city / timezone!

App with timezone screenshot

So first, we need to add a city property to our model:

    @Model(targetId = "", className = "ClockModel", properties = {
      @Property(name = "clock", type = String.class)
      @Property(name = "city", type = String.class)

Then we need some radio buttons which are bound to this property:

    <input type="radio" name="cityGroup" value="Europe/London" data-bind="checked: city">London
    <input type="radio" name="cityGroup" value="Europe/Paris" data-bind="checked: city"/>Paris
    <input type="radio" name="cityGroup" value="Asia/Tokyo" data-bind="checked: city"/>Tokyo

The radio button value will be set to the city property.

Next, we just need to take into account the current city while setting the date:

    private static void updateClock(ClockModel model) {
        Instant instant =;
        ZoneId zoneId = ZoneId.of(model.getCity());
        ZonedDateTime zdt = ZonedDateTime.ofInstant(instant, zoneId);

        model.setClock(DateTimeFormatter.ofPattern("dd/MM/yyyy - hh:mm:ss").format(zdt));

Next, I want to also add a button that shows the current date/time:

    <button data-bind="click: $root.currentLocale">Current time</button>

This will call currentLocale on our Clock class, which has to be static:

    static void currentLocale(ClockModel model) {

Note the @Function annotation and the fact that the 1st argument is our current model (there's no other way to get it otherwise).

The final version is at