Quickfire Tutorial

From database to RESTful web service to HTML5 in 10 minutes

Geertjan Wielenga
netbeans-logo-new

Using NetBeans IDE 7.3, Geertjan Wielenga shows us how to go from a database to Java RESTful web service to tools for working with HTML5, JavaScript, and CSS.

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.

Author
Geertjan Wielenga

Geertjan Wielenga

All Posts by Geertjan Wielenga

Geertjan Wielenga is a principal product manager in Oracle for NetBeans and has been a member of the NetBeans Team since 2004
Comments
comments powered by Disqus