Quickfire Tutorial

From database to RESTful web service to HTML5 in 10 minutes

Using NetBeans IDE 7.3, guest author and NetBeans team member Geertjan Wielenga shows us how to expose data from a database via a JAX-WS RESTful web service and how to consume the service in an HTML5 application, via a range of tools for working with HTML5, JavaScript, and CSS. All in 10 minutes.

[Update 14/1/2013] Since this article was written, a new version of NetBeans IDE has been released, which makes it possible to do the procedure described below in 5 minutes, instead of 10! Read about it here.

HTML is everywhere again. It almost feels like the ‘80’s and ‘90’s of the previous century. However, HTML is now “rich”, in the sense that a multitude of new and powerful JavaScript libraries are available to meet the client side development challenges of the day. Coupled with CSS for styling, front end development is well handled by the HTML/JavaScript/CSS trio.

What are the tool requirements when creating applications in this new/old world? Ideally, you’d have an editor that understands HTML5, JavaScript, and CSS. A JavaScript debugger would be handy too, as well as tools for switching between files of all three types. When deployed, it would be useful if you’d be able to switch between the editor and browser intuitively. A typical pain point is that you don’t know where elements running in a browser are defined back in your development environment. Conversely, it would be really useful to know where elements defined in a source file are rendered in the browser.

On top of all that, it would be really cool if you’d be able to leverage backend services defined in Java in your HTML5 applications. That way, you’d leverage your Java knowledge, while also being able to reuse existing systems in the new world of HTML5.

NetBeans IDE 7.3 comes bundled with each feature outlined above, together with all its other features, such as versioning system integration, and much more. Let’s put everything together in the context of a sample. From JavaScript, we’ll connect to a RESTful service that exposes data from a database. Then we’ll display that data in an HTML5 file, providing CRUD functionality for our users to change the data. For reference, you'll find all the relevant code at https://blogs.oracle.com/geertjan/resource/NetBeansJaxenter1Code.zip:

Start in the Services window, where you can register your database server, connect to your databases, and modify data as needed:

Now let’s begin. First, we’ll create the RESTful web services for exposing the data in our database.

Exposing the Data via a RESTful Web Service

The IDE comes with a set of project templates for getting started with a variety of technologies. We’ll create a new web application via the popular Maven build system, which is natively supported in the IDE. Maven projects are recognized as such by the presence of their POM file. Therefore, any existing Maven application can be opened into the IDE and no NetBeans artifacts are added to the source structure to force the IDE to recognize it.

Once we have created our Maven based application, we can use a wizard to connect to our database, from where it will generate our RESTful web services:

Click Next and select a database connection. The IDE then shows you all the tables in the database and you can choose which ones you want to expose:

An especially powerful feature of this wizard is the fact that it can update existing RESTful web services. In other words, had you gone through this wizard before, you’d be able to specify which of the classes you’d like to recreate and which you’d like to update. When updating, the wizard does not remove any code in the existing source file; it simply adds any relevant new code to it.

When the above wizard is completed, a RESTful web service is created for each of the selected database tables:  

Now we can expand the nodes you see above and deploy the application. Both XML and JSON payloads are supported by the generated RESTful web service. Here’s the result:

Let’s now display the above in an HTML5 application!

Consuming the Data in an HTML5 Application

NetBeans IDE 7.3 lets you create new HTML5 applications. But, as you can see in the dialog below, you can also create an application from existing sources. Any folder can be opened as an HTML5 application into the IDE in this way.

When Next is clicked, you can select multiple JavaScript libraries to include in your application:

Once the application has been created, another wizard can guide you through the creation of a JavaScript client for RESTful web services:

Existing RESTful web services, such as the project created in the previous section, can be selected. The wizard will then generate a JavaScript client that can receive the payload from the selected service:

Completing the wizard gives you the application shown below:

Run the application and you have the application with which this article started:

Moreover, you have a complete environment for developing the application further. Together with editors for HTML5, JavaScript, and CSS, the environment includes direct interaction between the editor and the Chrome browser (as well as a JavaFX-based embedded WebKit browser), the Nashorn JavaScript editor and debugger, and CSS style editors.

In summary, now you’re able to combine the best of several different worlds all in the same integrated development environment. Backend Java developers and frontend HTML5 developers all leveraging the same toolset saves time and cuts down on a lot of overhead. Putting the pieces of an application together in this way really lets you focus on your business requirements, rather than the tools. In an increasingly polymorphic world, NetBeans IDE 7.3 can unlock the best of all available technologies within a single environment.

Author Bio: 
Geertjan Wielenga is a principal product manager in Oracle for NetBeans and has been a member of the NetBeans Team for the past 7 years.

Geertjan Wielenga
Geertjan Wielenga

What do you think?

JAX Magazine - 2014 - 06 Exclucively for iPad users JAX Magazine on Android

Comments

Latest opinions