example using jMaki and RESTful Web Services
http-equiv="content-type">
a Dynamic Ajax table example using jMaki
and RESTful Web Services on Glassfish
This Sample Catalog app demonstrates a RESTful Web Service, coded using
JAX-RS: Java API
for RESTful Web Services (JSR-311) and
href="http://java.sun.com/javaee/technologies/persistence.jsp">Java
Persistence API,
which provides a list
of customers, and a jMaki
client which gets and displays the Web Service responses in
a dynamic Ajax table.
href="https://techdayscode.dev.java.net/servlets/ProjectDocumentList?folderID=9370&expandFolder=9370&folderID=7555">Download
the jMaki Sample Application Code
jMaki is an Ajax framework
that
provides a lightweight model for creating JavaScript centric
Ajax-enabled web applications. jMaki provides wrapped
href="http://developers.sun.com/docs/web/swdp/r1/tutorial/doc/p13.html">
widgets that can be used as JavaServer Pages tags, as JavaServer
Faces components, within a Phobos application, or with PHP. This sample
applicaton uses jMaki with JavaServer Pages.
JAX-RS provides a
standardized API for building RESTful web services in Java. Central to
the RESTful architecture is the concept of resources identified by
universal resource identifiers (URIs). The API provides a set of
annotations which you can add to Plain Old Java Objects (POJOs)
to expose web resources identified by URIs .
Explanation of the usage of jMaki and JAX-RS in a sample Catalog
Application
The image below shows the Customer Listing page, which allows the user
to
page through a list of customers.
height="369" width="453">
jMaki dataTable widget
With jMaki and JavaServer Pages, you can easily include wrapped
widgets
from ajax toolkits into a JavaServer Page as a custom JSP tag.
href="http://www.netbeans.org/kb/55/framework-adding-support.html">With
the Netbeans jMaki plugin you can drag jMaki widgets from the
Palette into a JSP. jMaki standardizes widget data and event models
to simplify the
programming model and to simplify interactions between widgets.
The sample application's index.jsp page uses a jMaki yahoo.dataTable
widget to display a list of
customers in a dynamic table.
The jMaki table widgets (there is also a jMaki dojo table
widget) are useful when you want to show a set of
results in tabular data on a web page. Table widgets provide
sortable columns, row selection, and they can
be updated using jMaki publish subscribe events.
In the List.jsp
web page the dataTable is defined as shown below: (Note:
style="color: rgb(204, 0, 0); font-weight: bold;">Red colors
are for jMaki
tags or variables,
and Green
for my code
or variables)
Code Sample from: |
|
To determine the data format and events for the
table you can refer to the
href="http://wiki.java.net/bin/view/Projects/jMakiTableDataModel">jMaki
Table Data Model or look at
the widget.json file for the table widget. This file is located in the
resources/yahoo/dataTable directory.
The service
attribute references the
style="color: rgb(204, 0, 0); font-weight: bold;"> style="color: rgb(0, 102, 0);">customers/jMakiTable style="color: rgb(204, 0, 0); font-weight: bold;"> style="color: rgb(0, 102, 0);"> RESTful webservice
which returns the data to be
included
in the table. The data for the table should be a
JSON object containing an object of
columns and an array of row arrays. The column names need a unique id
which is then used in the data to associate it with a given row. An
example for a table of companies is shown below:
Code Sample from: |
'state' : 'CA'} |
The
style="color: rgb(204, 0, 0); font-weight: bold;">subscribe= style="color: rgb(204, 0, 0);">" style="font-weight: bold; color: rgb(204, 0, 0);">/table style="color: rgb(204, 0, 0);">"attribute specifies a topic that events can be
sent to. Publish and subscribe events can be used to tie widgets
together (more on this later).
RESTful Web Services with JAX-RS
The dataTable's
style="color: rgb(204, 0, 0); font-weight: bold;">serviceattribute references the style="font-weight: bold;"> URI
style="color: rgb(204, 0, 0); font-weight: bold;"> style="color: rgb(0, 102, 0);">webresources/customers/jMakiTable style="color: rgb(204, 0, 0); font-weight: bold;"> style="color: rgb(0, 102, 0);"> for the style="color: rgb(204, 0, 0); font-weight: bold;"> style="color: rgb(0, 102, 0);">customers jMakiTable RESTful web service. The customers
style="color: rgb(204, 0, 0); font-weight: bold;"> style="color: rgb(0, 102, 0);">RESTful webservice was generated using Netbeans 6.1 as explained in the href="http://www.netbeans.org/kb/61/websvc/rest.html">Generating
RESTful Web Services from Entity Classes tutorial.
Using Netbeans 6.1 you can generate JPA Entity Classes from Database
tables, then you can Generate RESTful Web Services from Entity
Classes, and then you can test the Web Services with a browser
interface. The customers
style="color: rgb(204, 0, 0); font-weight: bold;"> style="color: rgb(0, 102, 0);">RESTful webservice was generated from the customer data table which comes already
created in the Java DB with Netbeans. I added the jMakiTable
method to the generated customers Web Service, in order to return
the customers in the jMaki table format. I followed the jMakiBackend
example which comes with Jersey
(the JAX-RS reference implementation)
which is expained in Japods blog: href="http://blogs.sun.com/japod/entry/jmaki_widgets_talking_to_jersey">jMaki
Widgets Talking To Jersey Resources In JSON.
Below is a snippet from the
style="color: rgb(0, 102, 0); font-weight: bold;">CustomersResource.javaclass which was generated by the Netbeans "Generate RESTful Web
Services
from Entity Classes" feature :
Code Sample from: .java |
CustomersConvertercusts |
The CustomersResource
represents a list of customers. The
style="color: rgb(0, 102, 0); font-weight: bold;">CustomersResource get methodreturns a list of Customer objects in JSON
format.
- To address a resource in REST you specify its URI.
isstyle="color: rgb(0, 0, 153); font-weight: bold;">@Path
a JAX-RS annotation that identifies the URI path for the resource. For
theCustomersResource
the URI path is/style="color: rgb(0, 0, 153); font-weight: bold;"> style="color: rgb(0, 102, 0);">customers/.style="color: rgb(0, 0, 153);">
specifiesstyle="font-weight: bold;">@GET
that the
method supports the HTTP GET method.get
style="color: rgb(0, 0, 153); font-weight: bold;">
specifies the MIME types that a method can produce.@ProduceMime
Here,
the annotation specifies that thestyle="color: rgb(0, 102, 0); font-weight: bold;">get
method returns aJSONArrayobject. The
class is a JAXBstyle="color: rgb(0, 102, 0); font-weight: bold;">CustomersConverter
annotated class which is used to marshal a list of Customer objects
into XML or href="http://wikis.sun.com/display/Jersey/JSON+support+in+JAXB">JSON
format. Thestyle="font-weight: bold; color: rgb(0, 102, 0);">getEntities
methodstyle="color: rgb(0, 102, 0); font-weight: bold;">
returns a list of Customer entity objects and is explained
below.style="color: rgb(0, 0, 153); font-weight: bold;">
specifies@QueryParam
input parameters for methods. When the method is invoked, the
input value will be injected into the corresponding input
argument.style="color: rgb(0, 0, 153); font-weight: bold;">
specifies a default value for an arguement if no@DefaultValue
input
value is given.
Here is an example of an HTTP request for this Web Service:
| Request: GET http://host/jMakiRest/webresources/customers/?start=0 |
Here is an example of an HTTP response for this Web Service:
| Received: {"customers": {"@uri":"http://host/jMakiRest/webresources/customers/", "customer":[ {"@uri":"http://host/jMakiRest/webresources/customers/1/", "name":"JumboCom", "city":"Fort Lauderdale", "state":"FL", "zip":"33015"}, {"@uri":"http://host/jMakiRest/webresources/customers/2/", "name":"Livermore Enterprises", "city":"Miami", "state":"FL", "zip":"33055"} ] } } |
Below is the
style="color: rgb(0, 102, 0); font-weight: bold;">getTable method from the
CustomersResource.java style="color: rgb(0, 102, 0); font-weight: bold;"> style="color: rgb(0, 102, 0); font-weight: bold;">class, which returns a list of Customers in the jMaki JSON
table format.
Code Sample from: .java |
|
The
getTable
method calls the style="color: rgb(0, 102, 0); font-weight: bold;">CustomersResourcegetmethod, explained above, to get a list of Customer Entities which
are used to create a
style="color: rgb(0, 102, 0); font-weight: bold;">CustomerTableModelclass. The
style="color: rgb(0, 102, 0); font-weight: bold;">CustomerTableModelclass is a JAXB annotated
class, used to marshal a list of Customer objects into the jMaki
JSON table format. A snippet of the
style="color: rgb(0, 102, 0); font-weight: bold;">CustomerTableModelclass is shown below:
style="color: rgb(0, 102, 0); font-weight: bold;">CustomerTableModel.java style="font-weight: bold; color: rgb(204, 0, 0);"> style="color: rgb(0, 0, 153); font-weight: bold;">
@XmlRootElement
public class CustomerTableModel {
public static class JMakiTableHeader {
public String style="font-weight: bold;">id;
public String style="font-weight: bold;">label;
public
JMakiTableHeader(String id,
String
label) {
this.id = id;
this.label = label;
}
}
public List<JMakiTableHeader> style="font-weight: bold;">columns =
initHeaders();
public List<CustomerConverter> style="font-weight: bold;">rows;
style="font-weight: bold;"> . ..
style="color: rgb(0, 0, 153); font-weight: bold;"> style="font-family: monospace;">
Java Persistence Query API
The CustomersResource
style="color: rgb(0, 102, 0); font-weight: bold;"> getEntities
method
uses the Java Persistence APIstyle="color: rgb(204, 0, 0);">
Query style="color: rgb(204, 0, 0); font-weight: bold;"> objectto return a list of
customers. Code Sample from: .java |
query.setMaxResults(max); return query. |
The Java
Persistence
href="http://java.sun.com/javaee/5/docs/api/javax/persistence/Query.html">Query
APIs are used to create and execute queries that can return a
list of results. The JPA Query interface provides
support for pagination via the setFirstResult() and setMaxResults()
methods: query.
style="color: rgb(0, 0, 0);">setMaxResults(int maxResult)
sets the maximum number of results to retrieve.
style="font-family: mon;"> query.
style="color: rgb(0, 0, 0);">setFirstResult(int startPosition)
sets the position of the first result to retrieve.
In the code below, we show the
style="color: rgb(0, 102, 0); font-weight: bold;">Customerentity class which maps to the CUSTOMER table that stores the
customer instances. This is a
typical Java Persistence entity object. There are two requirements for
an entity:
- annotating the class with an
style="font-weight: bold; color: rgb(0, 0, 153);">@Entity
annotation.
- annotating the primary key identifier with
@Id
Because the fields name, description.... are basic mappings from the
object fields to columns of the same name in the database table, they
don't have to be annotated.
For more information on Netbeans and JPA see href="http://www.apress.com/book/bookDisplay.html?bID=10093"> href="http://www.netbeans.org/kb/55/persistence.html">basics of
developing a web application using Java™ Persistence API.
Code Sample from: style="color: rgb(0, 102, 0); font-weight: bold;">Customer.java |
@Id
|
style="font-weight: bold;">jMaki Publish Subscribe events
jMaki publish subscribe events tie widgets actions together. The sample
app
uses two jMaki
style="color: rgb(204, 0, 0); font-weight: bold;">yahoo.button widgetswhich publish to the
/button/previous,/button/next style="color: rgb(204, 0, 0); font-weight: bold;">topics
style="font-weight: bold;">when the respective button is clicked:
Code Sample from: |
|
Events in jMaki are handled by
href="https://ajax.dev.java.net/introGlue.html">jMaki Glue , which
href="https://ajax.dev.java.net/introGlue.html"> allows JavaScript
components to talk to each
other. You put function listeners which Subscribe to topics that your
widgets Publish to in a file called glue.js (to read more about this
see A practical
guide to jMaki Events ).
Connecting the listener to the handler
The listener handler for the
style="color: rgb(0, 102, 0); font-weight: bold;">/button/next style="color: rgb(204, 0, 0); font-weight: bold;">topic style="color: rgb(0, 102, 0); font-weight: bold;">isshown below. First you declare the topic to listen to and then the
listener function which will handle the notification. The
style="color: rgb(0, 102, 0); font-weight: bold;">/button/next listenerhandler increments the page number and then calls the
style="color: rgb(0, 102, 0); font-weight: bold;">getNextPagefuntion.
style="font-weight: bold;">glue.jsvar page= 0;
var start= 0;
var batchSize=4;
jmaki.subscribe(" style="color: rgb(0, 102, 0); font-weight: bold;">/button/next",
function(args) {
page =page + 1;
style="color: rgb(0, 102, 0); font-weight: bold;">getNextPage(page);
});
jmaki.subscribe(" style="color: rgb(0, 102, 0); font-weight: bold;">/button/previous",
function(args) {
page =page - 1;
if (page < 0) page = 0;
style="color: rgb(0, 102, 0); font-weight: bold;">getNextPage(page);
});
function getNextPage(page)
{
start = page * batchSize;
style="color: rgb(204, 0, 0); font-weight: bold;">jmaki.doAjax({method:
"POST",
style="color: rgb(204, 0, 0); font-weight: bold;">url: " style="color: rgb(0, 102, 0); font-weight: bold;">webresources/customers/?start="+encodeURIComponent(start),
style="color: rgb(204, 0, 0); font-weight: bold;">callback :
function(req)
{
style="color: rgb(0, 102, 0); font-weight: bold;"> style="font-family: monospace;">var
respObj = eval('('+ req.responseText +')');
style="color: rgb(0, 0, 0);">
var rows = respObj.customers.customer;
jmaki.publish(" style="color: rgb(0, 102, 0); font-weight: bold;">/table/ style="color: rgb(204, 0, 0); font-weight: bold;">clear", { });
for(j=0;j<rows.length;j++) {
var row = rows[j];
jmaki.publish("/ style="color: rgb(0, 102, 0);">table/ style="color: rgb(204, 0, 0); font-weight: bold;">addRow",{
value:
row
});
}
style="color: rgb(204, 0, 0); font-weight: bold;">
}
});
}
The getNextPage
function uses
style="color: rgb(204, 0, 0); font-weight: bold;">jmaki.doAjax,whichprovides an easy way to make an XMLHttpRequest, to call the
style="color: rgb(0, 102, 0); font-weight: bold;">/customers/RESTfulWeb Service passing the start index as a URI
parameter. The
style="color: rgb(204, 0, 0); font-weight: bold;">callback functionuses
eval to convert the XMLHttpRequest responseinto a JSON object. Then
style="color: rgb(204, 0, 0); font-weight: bold;">jmaki.publishis called to publish the returned
style="color: rgb(0, 102, 0); font-weight: bold;">customerJSON objects to the
style="font-weight: bold; color: rgb(0, 102, 0);">/table/ style="color: rgb(204, 0, 0); font-weight: bold;">addRow topic.The
yahoo.dataTable
widget subscribes to the style="color: rgb(204, 0, 0);"> style="color: rgb(204, 0, 0); font-weight: bold;"> style="color: rgb(0, 102, 0); font-weight: bold;">table topic.Subscribe events allow you to manipulate a given instance of a widget.
The event names are appended to the the subscribe topic name following
a "/". For example "
style="font-weight: bold; color: rgb(0, 102, 0);">/table/ style="color: rgb(204, 0, 0); font-weight: bold;">addRow"will call the
style="color: rgb(204, 0, 0); font-weight: bold;">yahoo.dataTable
href="http://wiki.java.net/bin/view/Projects/jMakiTableDataModel">addRowfunction which will add the payload value passed to the widget to
the the table. This will cause the returned
style="color: rgb(0, 102, 0); font-weight: bold;">customerJSON object to be displayed in the table on the html page.
Conclusion
This concludes the sample application which demonstrates a
RESTful Web Service, coded using
JAX-RS: Java API
for RESTful Web Services (JSR-311) ,
which provides a list
of customers, and a jMaki
client which gets and displays the Web Service responses in
a dynamic Ajax table.
Configuration of the Application
for jMaki, JPA, Netbeans 6.1 and Glassfish V2
- Download
and install NetBeans 6.1 bundled with GlassFish V2
- Alternatively you can
href="https://glassfish.dev.java.net/public/downloadsindex.html">Download
and install GlassFish V2 separately. - Download
and install the href="http://www.netbeans.org/kb/55/framework-adding-support.html">jMaki
plug-in in the NetBeans update center.
Open and Run the Sample code:
- Download the
href="https://techdayscode.dev.java.net/servlets/ProjectDocumentList?folderID=9370&expandFolder=9370&folderID=7555">sample
code and extract its contents. You should now see the newly
extracted directory as<sample_install_dir>/jmakiRest,
where<sample_install_dir>is the directory where
you installed the sample package. For example, if you extracted the
contents toC:\on a Windows machine, then your newly
created directory should be atC:\jmakiRest.
- Start the NetBeans IDE. Click Open Project in the File menu and
select thejmakiRestdirectory you just
unzipped.
- Build the project as follows:
- Right click the
jmakiRestnode in
the
Projects window.
- Select Clean and Build Project.
- Right click the
- Run the project as follows:
- Right click the
jmakiRestnode in
the
Projects window.
- Select Run Project.
- Right click the
When you run the project, your browser should display the opening page
of the Sample Application (at
http://localhost:8080/jmakiRest/).
If you want to create your own jMaki
application:
- check out Arun Gupta's
href="http://blogs.sun.com/arungupta/entry/dynamic_data_in_jmaki_widgets">blog
and screencasts. href="http://blogs.sun.com/arungupta/entry/dynamic_data_in_jmaki_widgets">
References:
-
href="http://blogs.sun.com/enterprisetechtips/entry/implementing_restful_web_services_in">Implementing
RESTful Web Services in Java - Generating
RESTful Web Services from Entity Classes tutorial - Jersey
(the JAX-RS reference implementation) -
href="http://blogs.sun.com/japod/entry/jmaki_widgets_talking_to_jersey">jMaki
Widgets Talking To Jersey Resources In JSON.
- jMaki project
- jMaki book
-
href="http://blogs.sun.com/arungupta/entry/dynamic_data_in_jmaki_widgets">Dynamic
Data in jMaki Widgets Using JPA
- basics
of
developing a web application using Java™ Persistence API. -
target="bpcatalog">Java
Persistence reference page on GlassFish Project - Java
EE tutorial, for good tutorial on JPA - Pro
EJB 3: Java Persistence API book
- Login or register to post comments
- Printer-friendly version
- caroljmcdonald's blog
- 2245 reads





