NetBeans Web Toolkit

2018/08/25

According to the documentation the HTML/Java API is "an alternative to Swing and JavaFX for creating applications with a graphical user interface."

I'm going to first start by rebranding it to the NetBeans Web Toolkit (NBWT). People might have heard about Google Web Toolkit and I think it's a better parallel.

What's the NetBeans Web Toolkit good for? To write cross-platform web-like apps in a mix of Java for the 'backend' and plain-old HTML / CSS for the UI. And there's a Java-Javascript bridge to help you.

The HTML UI will generally be in a browser, but what's interesting for existing Java desktop apps (NetBeans Platform-based or not) is that the UI here could be a JavaFX embedded web view. This creates a migration path from the desktop to the browser while keeping existing code intact.

Here is the simplest demo app I could come up with: something that shows you the date.

The full source code is at https://github.com/emilianbold/nbwt-clock-demo

The HTML is very basic. You show the clock and you use Knockout bindings to make sure the clock gets updated:

<div data-bind="text: clock">Is this thing on?</div>

Next, with a @Model annotation I auto-generate a model for my clock, I instantiate it, bind it and start a timer to update the clock.

import net.java.html.json.Model;
import net.java.html.json.Property;

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

    public static void setUp() {
        ClockModel model = new ClockModel();
        model.setClock("Please wait...");
        model.applyBindings();
        
        Timer timer = new Timer(true);
        timer.scheduleAtFixedRate(new TimerTask() {
            @Override
            public void run() {
                model.setClock(new Date().toString());
            }
        }, 0, 1000);
    }
}

and finally I just load the HTML and bootstrap my Java class with a simple call:

FXBrowsers.load(browser, Main.class.getResource("index.html"), Clock.class, "setUp");

Of course, to create the window there is some more scaffolding but that's the gist of it. You just need 3 Maven dependencies:

org.netbeans.html:net.java.html.boot.fx
org.netbeans.html:net.java.html.json and
org.netbeans.html:ko4j

And you have to remember to call the code generator:

<build>
        <plugins>
            <plugin>
                <groupId>org.netbeans.html</groupId>
                <artifactId>html4j-maven-plugin</artifactId>
                <lt;lt;version>1.5.1<lt;lt;/version>
                <executions>
                    <execution>
                        <id>generator</id>
                        <goals>
                            <goal>process-js-annotations</goal>
                        </goals>
                    </execution>
                </executions>            
            </plugin>
        </plugins>
...
</build>