In "From database to RESTful web service to HTML5 in 10 minutes", published near the beginning of this year, I described a set of tools that lets you expose data from a database via RESTful Web Services to an HTML5/Backbone.js/CSS front-end. And all this was done in 10 minutes.

You then had the basis of a complex application that already had your data integrated, and already had a basic user interface for you to get started with. The templates used were configurable - meaning that you could include your own company styles and logos and the application contained a set of best practices for organizations creating hybrid Java/HTML5 applications, which is still a relatively new combination of technologies.

You started by creating a Maven-based Java EE 7 application containing JPA entity classes and RESTful Web Services, all of which were generated via wizards and templates in NetBeans IDE. Then you created an HTML5 application in which you used tools in NetBeans IDE to generate a Backbone.js front-end from the Java EE backend. That was all well and good, but left several people wondering why they couldn't create their HTML5 front-end directly within their Java EE 7 application. In this article, I'll show how this can be achieved in NetBeans IDE 7.4, thus shortening the development cycle from 10 minutes to about 5.

Using the Java EE Platform

As before, start in the Services window, where you can register your database server, connect to your databases, and modify data as needed.

Next, create a new Maven Java Web Application, of course, without needing to install a Maven plugin into NetBeans IDE, because Maven support in NetBeans IDE is just there out of the box as soon as you start the IDE.

Click Next and provide the Maven properties relevant to your project, e.g., the Group ID and Version information.

When you complete the wizard, you have a brand new Maven Java Web project, ready to roll with Java EE 7 registered in the POM and visualized in the logical view in the IDE.

Next, let's generate our RESTful Web Services! The nice thing about convention over configuration is that tool providers know exactly where all the folders and files need to be created and what they need to contain, simply by following the conventions. We have our database, so we can point to it and let all the code be generated from there, while being able to tweak the templates used where needed.

Click Next and notice all the tables in the selected database are shown.

Select the table of interest, and the tables with foreign key relationships on the selected table will be automatically selected too:

You can then define the package where the classes will be created. Notice that when the database changes, you can come back into this wizard and regenerate all the code because you'll be able to select "Update" instead of "New", which will add new properties to the generated JPA entity classes, without removing anything you already added there.

On the final page of the wizard, specify where the RESTful Web Services will be created:

Completing the wizard, you now have a rather neat Maven Java Web application, a firm basis for whatever user interface you need to create:

Notice that the POM shows a graph of your Maven dependencies, which can be exported to an image to impress your boss with:

Combining @javax.ws.rs.ApplicationPath("webresources") in the "ApplicationConfig" class with the @Path("com.mycompany.customermanager.customer") in the "CustomerFacadeREST" class, you can browse to your payload in the browser, after deploying the application:

The "findAll" method is automatically invoked via our RESTful call, which we can tweak to the following to return JSON, as shown above, instead of XML:

@GET
@Override
@Produces({"application/json"})
public List<Customer> findAll() {
        return super.findAll();
}

Now we're ready to create our HTML5 front-end. Use the "RESTful JavaScript Client" wizard to do so, as shown below, in the same application as where you created all the files above:

After specifying that you want a Backbone.js front-end, together with a JQuery Tablesorter UI, and the related JavaScript libraries, you're good to go:

Notice that when you click the second Browse button, the available RESTful Web Services will be shown for you to select:

Click Next and specify the name of the HTML file that will reference your JavaScript client:

Now your Backbone.js front-end is complete, browse through it, read the code, and understand what's been created as the basis of your application.

In the toolbar, select the browser where you'd like to deploy the application:

If you deploy the application to a Chrome browser that has the NetBeans plugin install, you'll see a NetBeans icon that lets you switch to different form factors to check how your user interface will look on different platforms:

When you choose "Inspect in NetBeans Mode", you can see where items defined in the browser are defined back in the IDE:

Similarly, you can browse the live DOM view in the IDE and see where matching items are defined back in the browser.

Aside from the above, you can use the Java debugger and the JavaScript debugger at the same time to debug the front-end and back-end simultaneously. Also be aware that changes you make in Chrome Developer Tools will automatically be saved back in your files in the IDE. Yes, that's round tripping between NetBeans IDE to Chrome Developer Tools.

As you can see from the above, the time taken to get to the end of this article is significantly reduced from the previous version. Why? Simply because you can now integrate HTML5 front-ends into your Maven Java Web applications. Now you can choose whether you'd like a JSF front-end (via PrimeFaces or Vaadin, for example) or a JavaScript front-end via Backbone.js or some other JavaScript library. The choice is yours and depends on your skill sets and business needs. Whichever approach you choose, NetBeans IDE is there to help you from start to finish!