From database to RESTful web service to HTML5 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.
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.
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.
Completing the wizard gives you the application shown below:
Run the application and you have the application with which this article started:
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.
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.