Carol McDonald's Blog 2008-04-29T03:35:33Z tag:weblogs.java.net,2008:/blog/caroljmcdonald/61 Movable Type Copyright (c) 2008, caroljmcdonald Sample Store Catalog using using Groovy and Grails 2008-04-29T03:35:33Z 2008-04-29T03:35:16Z tag:weblogs.java.net,2008:/blog/caroljmcdonald/61.9626 2008-04-29T03:35:16Z This Catalog Sample app demonstrates the usage of Groovy and Grails to implement pagination of data sets for a Store Catalog. caroljmcdonald carol.mcdonald@sun.com Web Applications grailsexample

Sample Store Catalog using using Groovy and Grails



This Catalog Sample app demonstrates the usage of Groovy and Grails to implement pagination of data sets for a Store Catalog.
download Catalog sample code

Overview of the Technologies and Frameworks in the Sample Application

Grails aims to bring the "coding by convention" paradigm to Groovy. It's an open-source web application framework that leverages the Groovy language and complements Java Web development.

Groovy is an agile and dynamic language for the Java Virtual Machine, it compiles to Java bytecode, and it combines popular features from languages such as Smalltalk, Python, and Ruby.

Grails is a Model-View-Controller based framework that simplifies the development of  web applications by reducing the need for configuration files and by generating a lot of the things needed in a database-backed Web application.

mvc.gif



The Sample Application

The sample application displays an online catalog of pets sold in a pet store. The image below shows the Catalog Listing page, which allows a user to page through a list of items in a store.

  listpet.jpg


The Model - Grails Domain Classes

The Model is your application's persistent business domain objects. A Grails domain object instance represents a row in a database table.  The command grails create-domain-class Item generates the Item.groovy class shown below corresponding to the item table.

After model code generation you have to add the domain object's attributes and relationships. The Item class has a many-to-one relationship with the Address class. In Grails hasMany is the many end of a many-to-one  relationship.


Code Sample from: domain\Item.groovy

class Item {
  Long id
  String name
  String description
  String imageurl
  String imagethumburl
  BigDecimal price
  Address address
}
   

 
Code Sample from: domain\Address.groovy

class Address {
  Long id
  String street1
  String street2
  String city
  String state
  String zip
  float latitude
  float longitude
  static hasMany = [item:Item]
}
   


classrel.gif

SQL  Sample for items table

CREATE TABLE item (
 id BIGINT NOT NULL,
 product_id BIGINT NOT NULL,
 name VARCHAR(30) NOT NULL,
 description VARCHAR(500) NOT NULL,
 imageurl VARCHAR(55),
 imagethumburl VARCHAR(55),
 price DECIMAL(14,2) NOT NULL,
 address_id BIGINT NOT NULL,
 primary key (id),
 foreign key (address_id) references address(id),
 foreign key (product_id) references product(id)
);
   

Groovy with Grails dynamically generates getters and setters and the dynamic methods Item.save(), Item.delete(),  Item.list(), Item.get() to retrieve/update data from/to the db table.

Grails Object Relational Mapping (GORM) is currently built on top of Hibernate but you don't have to know Hibernate to use it ( Grails  1.1 will support  the Java Persistence API) .


The Controller

Controllers handle incoming http requests, interact with the model to get data and to process requests,  invoke the correct view, and direct domain data to the view for display.  In Grails, http requests are handled by Controller classes which are made up of one or more action methods that are executed on request and then either render a Groovy Server Page or redirect to another action. Grails routes requests to the controller action which corresponds to the URL mapping for the request. In Grails the default mapping from URL to action method follows this convention: http://host/app/controller/action/id .  For example the URL http://host/catalog/item/list calls the list action method in the item controller class shown below.     Grails Scaffolding provides a series of standardized Controller action methods for listing, showing, creating, updating, and deleting objects of a class.  These standardized actions come with both controller logic and default view Groovy Server Pages. The command generate-all Item generates the Item controller and the List, Show, Create, Edit Groovy Server Pages for the Item domain object. The ItemController list action renders a view with a paginated list of item objects.

Code Sample from: grails-app\controllers\ItemController.groovy

class ItemController {

  def index = { redirect(action:list,params:params) }

  def list = {
    if(!params.max) params.max = 10
    [ itemList: Item.list( params ) ]
  }
. . .

When a URL has a controller but no action (e.g. http://localhost:8080/catalog/item/  ), Grails defaults to the index action. In the ItemController code the  index action method redirects to the list action.  The ItemController list action method calls the Item.list() method which returns an ArrayList of item objects retrieved from the item database table . If there are more than params.max objects in the table, Grails creates next and previous pagination links automatically. The itemList variable  is automatically made available to the view by the framework.

After executing code, actions usually render a GSP in the views directory corresponding to the name of the controller and action, for example the list action will render the grails-app\views\item\list.gsp .

The View

The view layer generates a web page, using data from domain objects provided by the controller. In Grails, the view is rendered using Groovy Server Pages. Below is part of the list.gsp for the Catalog application (note I modified the html table format from the default generated).


Code Sample from: grails-app\views\item\list.gsp

<table>
   <thead>
     <tr>
        <g:sortableColumn property="name" title="Name" />
        <g:sortableColumn property="imagethumburl" title="Photo" />
        <g:sortableColumn property="price" title="Price" />
     </tr>
   </thead>
   <tbody>
     <g:each in="${itemList}" status="i" var="item">
        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
           <td>
             <g:link action="show" id="${item.id}">
                ${item.name?.encodeAsHTML()}</g:link>
           </td>
           <td>
             <img src="${createLinkTo(dir:'images',file:item.imagethumburl)}"/>
           </td>
           <td>${item.price?.encodeAsHTML()}</td>
        </tr>
     </g:each>
  </tbody>
 </table>

<div class="paginateButtons">
 <g:paginate total="${Item.count()}" />
</div>

The view uses instance variables set by the controller to access the data it needs to render the GSP.

GSP has a GroovyTagLib similar to the  JSP tag library. <g: are GroovyTags.
  
<g:sortableColumn
       The sortableColumn tag renders a sortable column to support sorting in tables.

<g:each in="${itemList}" status="i" var="item">
loops through each object in the itemList variable, which is an ordered ArrayList of Item model objects,  and assigns each Item model object to the item variable.
 
<g:link action="show" id="${item.id}">${item.name?.encodeAsHTML()}</g:link> 
the <g:link> GroovyTag creates an html anchor tag href based on the action, id, controller parameters specified. In this example it generates a link to the item/show/id action which when clicked will display the corresponding item details. For example this line will generate the following HTML for the variable item: 
<a href="/catalog/item/show/2">Friendly Cat</a>
<img src="${createLinkTo(dir:'images',file:item.imagethumburl)}"/> 
The createLinkTo tag generates an HTML link for the item's imagethumburl attribute. 

${item.price?.encodeAsHTML()}
displays the value of the  item 's price attribute as escaped HTML text.

<g:paginate total="${Item.count()}" />
The paginate tag creates next/previous buttons and a breadcrumb trail to allow pagination of results using the Item.count() domain method.

The Show Action Method

In Grails the mapping for the URL http://host/item/show/1  ( http://host/controller/action/id )  will route to the show action in the ItemController passing 1 to the method as the id of the params parameter hash. The show action of the ItemController class is shown below. The ItemController show action renders a view showing the details of the item object corresponding to the id parameter.

Code Sample from: grails-app\controllers\ItemController.groovy

 def show = {
   def item = Item.get( params.id )

   if(!item) {
      flash.message = "Item not found with id ${params.id}"
      redirect(action:list)
   }
   else { return [ item : item ] }
 }

The show action method  calls the Item.get() method which queries the items table returning the item instance variable corresponding to the item with the attribute id (primary key) equal to the  id parameter. This is the equivalent of the following sql : select * from items where id='1' . The item variable is automatically made available to the Show view by the framework.

The Show View GSP

After executing code in the action, the show action renders the app/views/item/show.gsp . Below is the GSP for the item show view :


Code Sample from: grails-app\views\item\show.gsp

<h2> Detail of item</h2>

<table>
<tbody>
    <tr class="prop">
      <td valign="top" class="name">Name:</td>                          
      <td valign="top" class="value">${item.name}</td>                          
    </tr>                   
    <tr class="prop">
        <td valign="top" class="name">
           Description:
        </td>                           
        <td valign="top" class="value">
           ${item.description}
        </td>                          
    </tr>                       
    <tr class="prop">
        <td valign="top" class="name">Imageurl:</td>                          
        <td valign="top" class="value">
            <img src="${createLinkTo(dir:'images',file:item.imageurl)}" />
        </td>                           
    </tr>                                           
    <tr class="prop">
        <td valign="top" class="name">Price:</td>                           
        <td valign="top" class="value">$ ${item.price}</td>                           
    </tr>
    <tr class="prop">
        <td valign="top" class="name">Address:</td>                           
        <td valign="top" class="value">
          ${item?.address?.street1}, ${item?.address?.city},    
          ${item?.address?.state}
        </td>                          
    </tr>                       
</tbody>
</table>  


${item.description}
displays the value of the  item 's description attribute.
<img src="${createLinkTo(dir:'images',file:item.imageurl)}" /> 
generates an HTML image tag for the item's imageurl attribute.
${item?.address?.city}
displays the value of the  item's address city attribute.

The image below shows the resulting page for the url http://host/catalog/item/show/105, which displays the item 105's details:

     showpet.jpg

Layouts

Grails layouts  let you put common html on multiple views (for example page headers,  footers, sidebars).  Default layout templates are in the views layouts directory with a file name corresponding to the controller, or you can associate a view with a layout using the "layout" meta tag to your page: 
<meta name="layout" content="main">
To add a title and parrot image to the top of the Pet Catalog pages, I put this table in the app\views\layouts\main.gsp  layout:

Code Sample from: app/views/layouts/main.gsp

<table>
  <tr>
   <td>Pet Catalog</td>
   <td>
     <img src="${createLinkTo(dir:'images',file:'pet_logo.jpg')}"/>
   </td>
 </tr>
</table>



Conclusion
This concludes the sample application which demonstrates how to work with Groovy and Grails  to page through a list of  Item Model objects which are retrieved using Item Controller action methods, and displayed using Item View GSPs.

Setting Things Up and Running the Sample code on MySQL and Jetty:

  1. If MySQL is already installed, then download GlassFish v2 UR1. Otherwise you can also Download GlassFish v2 UR1 and MySQL co-bundle from the usual Download Page (instructions).

  2. Download and install Grails.

  3. Download the sample code and extract its contents. You should now see the newly extracted directory as <sample_install_dir>/Catalog, where <sample_install_dir> is the directory where you unzipped the sample package. For example, if you extracted the contents to C:\ on a Windows machine, then your newly created directory should be at C:\Catalog. 
    The file  "/Catalog/grails-app/conf/DataSource.groovy" is configured for a MySQL configuration.

  4. Start the MySQL database as follows:

    • > mysqld_safe --user root --console

  5. Create the pet-catalog database:

    • > mysqladmin create petcatalog --user root
  6. Create the tables in the MySQL pet-catalog database as follows:

    • shell> mysql pet-catalog < catalog.sql
    • using the file catalog.sql file from the /Catalog directory.

  7. Run the project as follows:
    in a command window in the /Catalog directory enter the command 
  8. > grails run-app
    This will run the Application using the built-in Jetty Servlet engine.
When you run the project, your browser should display the Catalog home page at http://localhost:8080/catalog/ .


Run the Sample code on Glassfish:
  1. Use the  WAR file in <sample_install_dir>/Catalog/Catalog.war or Create a WAR file:
    • > grails war
  2. Copy the WAR file (catalog-0.1.war) to  your Glassfish installation "domains/domain/autodeploy" directory. (Start Glassfish and MySQL if you haven't already)

  3. Enter the URL  http://localhost:8080/catalog-0.1/  in your browser, you should see the home page of the Sample Application.

References


]]> speaking at Community One 2008-04-19T19:17:01Z 2008-04-19T19:16:55Z tag:weblogs.java.net,2008:/blog/caroljmcdonald/61.9572 2008-04-19T19:16:55Z Kito Mann and I are speaking at CommunityOne 2008 on: "Examining a Sample Application Built in Three different Ways: Java EE, Spring 2.5, and Seam 2.0" caroljmcdonald carol.mcdonald@sun.com Community: Java Enterprise

Speaking at CommunityOne 2008

Kito Mann and I  are speaking at CommunityOne 2008 on: "Examining a Sample Application Built in Three Ways: Java™ Platform, Enterprise Edition (Java EE Platform), Spring 2.5, and Seam 2.0 Deployed on the GlassFish™ Project". CommunityOne is the day before JavaOne (May 05), its free, and you can learn about a wide range of open source projects.
Our talk is May 05 12:25 - 13:20    Moscone South - Esplanade 305. Here is the abstract:
This session looks at the implementation of the same web application developed with three open source frameworks and highlights what was done differently with each one. First it explains the implementation of the sample application with JavaServer™ Faces and Enterprise JavaBeans™ 3.0 (EJB™ 3.0) technology and the Java™ Persistence API (JPA). Next it looks at how this application was developed with JavaServer Faces technology, the JPA, and Spring 2.5. Finally, it looks at this application developed with JavaServer Faces and EJB 3.0 technology, the JPA, and Seam 2.0. The presentation highlights differences in the frameworks, such as the Seam context model for stateful components. All three versions were deployed on GlassFish™ project V2, and the source code is available in my blog.

C1_170x93_SpeakerB.gif



]]> Metro Web Services Hands-on Lab at JavaOne 2008 2008-04-19T19:04:18Z 2008-04-19T17:02:44Z tag:weblogs.java.net,2008:/blog/caroljmcdonald/61.9570 2008-04-19T17:02:44Z Fabian Ritzman, Martin Grebac and I have developed a hands-on lab on Metro Web Services for JavaOne 2008. caroljmcdonald carol.mcdonald@sun.com Web Services and XML

Metro Hands-on Lab at JavaOne 2008

Fabian Ritzman, Martin Grebac and I  have developed a hands-on lab on Metro Web Services for JavaOne 2008. At JavaOne hands-on labs, you bring your own laptop, this allows you to easily take home and reuse the stuff you learn in the lab. We have a step by step lab doc with screenshots etc. that you can work through to familiarize yourself with Metro. Fabian and I will briefly explain and demonstrate the lab exercises, then you will complete them on your laptop. There will be proctors to help with any questions. Hope to see you there!  You can find out more about the lab here: https://www28.cplan.com/cc191/session_details.jsp?isid=296941&ilocation_id=191-1&ilanguage=english

The title of the lab is "Metro: Try Out Simple and Interoperable Web Services". Session ID is 3410. The lab takes place on Tuesday, 10:50 - 12:50.  Here is the complete abstract:

Metro is a high-performance, extensible, easy-to-use web service stack. You can use it for every type of web service, from simple to reliable, secured, and transacted web services that interoperate with .NET services. Metro bundles stable versions of the JAX-WS (Java™ API for XML Web Services) reference implementation and WSIT (Web Services Interoperability Technology).

JAX-WS is a fundamental technology for developing SOAP-based and RESTful Java technology-based web services. WSIT enables secure, reliable interoperability between Java technology-based web services and Microsoft’s Windows Communication Foundation.

This Hands-on Lab starts by developing a simple Metro web service and showing how to enhance this web service with Metro features such as reliability and security. The next part of the lab enables a web service client with Metro security features and has it interoperate with the previously built service. The lab shows the ease of development the NetBeans™ 6.0 release provides for achieving this.

The lab uses the NetBeans 6.0 release to modify and configure both the web service and the client, using Sun’s GlassFish™ project application server as the container. The lab uses WS-Reliability and WS-Security as examples of Metro’s secure, reliable features.

The lab comprises the following sections:

Introduction to Metro
  • Develop and deploy a basic catalog web service to return a list of catalog items
  • Test the web service, using the Tester application provided by the GlassFish project
Metro Reliability
  • Enable reliability on the catalog web service, and examine the messages
  • Develop and deploy a Metro client for the catalog web service, and configure the client for reliable access to the web service
Metro Security
  • Enable security on the catalog web service, and examine the messages
  • Configure the Metro client for the catalog web service (from the previous exercise) for secure access to the secure web service

Prerequisites: some understanding of Servlets, XML, and SOAP

At JavaOne, this lab will be presented in Hall E (Room# 132).

Please bring your laptops to this lab as there no machines provided in this room.

System requirements:
  • Supported OS: Windows 2000/XP, Solaris 10/11, Linux
  • Memory requirement: 768MB minimum, 1GB recommended
  • Disk space requirement: 300 MB

Software requirements:

Also please make sure to install the following software prior to coming to this lab:
  • JDK 5.0 or 6
  • NetBeans 6.0.1 with Web & Java EE pack
  • GlassFish V2 UR1
Tags: Web Services, Metro, JavaOne
170x93_Speaker_v4.gif



]]> Steve Metsker 2008-02-12T04:31:00Z 2008-02-12T04:31:00Z tag:weblogs.java.net,2008:/blog/caroljmcdonald/61.9181 2008-02-12T04:31:00Z I'm deeply saddened to share the news that Steve Metsker passed away last Friday. caroljmcdonald carol.mcdonald@sun.com Community: Java User Groups I'm deeply saddened to share the news that Steve Metsker passed away last Friday.
Steve Metsker was a member of and speaker for the Richmond JUG. Steve was also the author of the following books: Design Patterns in C#, Design Patterns Java Workbook, Building Parsers in Java.

Steve, his wife Alison, my husband and I enjoyed sharing our experiences about working and living in Switzerland. There was a memorial service Sunday which was overflowing with people, many from the local IT community. He will be greatly missed.

The following is from his family:
Steven John Metsker passed away on Friday, February 8, 2008 after a short illness with cancer. Aged 49, he is survived by his loving wife, Alison, and their daughters, Sarah-Jane and Emma-Kate. Having earned Engineering degrees from both the Colorado State University and the University of Massachusetts, Steve was accomplished in a profession for which he had great passion. Born in Colorado, he also lived in Massachusetts, Maine, Texas, Switzerland, Kentucky, England, and Richmond. He made many friends everywhere he went. A loving and caring husband, father, brother, son, friend, and colleague, he was also a humble and wise mentor. He was a positive and loving influence on all of us, who will miss him dearly. In lieu of flowers please send donations to St. Baldrick's fund raising program for childhood cancer or to Our Lady's Children's Hospital, Dublin Ireland.

]]> Dynamic Ajax table example using jMaki and Java Persistence APIs on Glassfish 2008-02-12T04:31:09Z 2008-02-08T18:52:17Z tag:weblogs.java.net,2008:/blog/caroljmcdonald/61.9165 2008-02-08T18:52:17Z This Sample Catalog app demonstrates the usage of the Java Persistence APIs to implement server side pagination (recommended for large sets of data), and jMaki to get and display the results in a dynamic Ajax table caroljmcdonald carol.mcdonald@sun.com Web Applications Sample Application using jMaki and the Java Persistence APIs

a Dynamic Ajax table example using jMaki and Java Persistence APIs on Glassfish


This Sample Catalog app demonstrates the usage of the Java Persistence APIs to implement server side pagination (recommended for large sets of data), and  jMaki to get and display the results in a dynamic Ajax table.

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 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.

Explanation of the usage of jMaki and the Java Persistence APIs in a sample Catalog Application

The image below shows the Customer Listing page, which allows the user to page through a list of customers.

pagingtable.jpg

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. 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: Red colors are for jMaki tags,  and Green for my code or variables)

Code Sample from:  index.jsp

<jsp:useBean id="catalogBean" scope="session"
        class="service.Catalog" />

<a:widget name="yahoo.dataTable"
          subscribe="/datatable"
          publish="/datatable"
          value="{columns : [
          { label : 'Company', id : 'name'},
          { label :'City', id : 'city'},
          { label : 'State', id : 'state'},
          { label : 'Zip', id : 'zip'}
          ],
          rows : ${catalogBean.customersJSON}}" />

To determine the data format and events for the table you can refer to the  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 value attribute references 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 companys is shown below:


Code Sample from:  widget.json
{
 'columns':[
     {'label' :'Company', 'id' : 'name'},
     {'label':'City', 'id' : 'city'}
 ],
 'rows':[
     {'name' : 'Sun Microsystems', 'city' : 'Santa Clara'},
     {'name' : 'IBM', 'city' : 'Raleigh'}
 ]
}


The publish subscribe attributes specify a topic that publish and subscribe events will be sent to. Publish and subscribe events can be used to tie widgets together (more on this later).

The dataTable's value rows : ${catalogBean.customersJSON}  calls the getCustomersJSON method of the catalogBean class:


Code Sample from: Catalog.java
public class Catalog {
  
 public List<Customer> getCustomers() throws Exception {
   EntityManager em = getEntityManager();
   Query q = em.createQuery(
          "select object(o) from Customer as o");
   q.setMaxResults(batchSize);
   q.setFirstResult(firstItem);
   return q.getResultList();
 }  

 public JSONArray getCustomersJSON() throws Exception {
   JSONArray customersJSON = new JSONArray();
   List<Customer> customers = getCustomers();
   for (Customer customerData : customers) {
       JSONArray customerJSON = customerData.toJSON();
       customersJSON.put(customerJSON);
   }
   return customersJSON;
 }

Java Persistence Query API

The Catalog getCustomersJSON()  uses the Java Persistence API Query object to return a list of customers, a JSONArray  object is used to return the list in JSON format.  The Java Persistence 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.setMaxResults(int maxResult) sets the maximum number of results to retrieve. query.setFirstResult(int startPosition) sets the position of the first result to retrieve.

In the code below, we show the Customer entity 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:
  1. annotating the class with an @Entity annotation.
  2. 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 basics of developing a web application using Java™ Persistence API.

Code Sample from: Customer.java

@Entity

public class Customer implements Serializable {

    @Id  
    private Integer customerId;
    private String name;
    private String addressline1;   
    private String city;  
    private String state; 
    private String zip;
    
    public Customer() { }
     
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    ...
    public JSONArray toJSON() {
       JSONArray thisJSON = new JSONArray();
       thisJSON.put(this.getName());
       thisJSON.put(this.getCity());
       thisJSON.put(this.getState());
       thisJSON.put(this.getZip());
       return thisJSON;
    }
}   


I added the toJSON() method to the Customer to return a JSON representation of the Customer entity.

jMaki Publish Subscribe events 

jMaki publish subscribe events tie widgets actions together. The sample app uses two jMaki yahoo.button widgets which publish to the /button/previous, /button/next topics when the respective button is clicked:

Code Sample from: List.jsp

<a:widget name="yahoo.button" value="{label : '<<',
                 action : {topic : '/button/previous'}}" />

<a:widget name="yahoo.button" value="{label : '>>',
                 action : {topic : '/button/next'}}" />

Events in jMaki are handled by jMaki Glue , which 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  /button/next topic is shown below. First you declare the topic to listen to and then the listener function which will handle the notification. The /button/next listener handler  increments the page number and then calls the getNextPage funtion.

Code Sample from: glue.js
var page= 0;

jmaki.subscribe("/button/next", function(args) {
    page =page + 1;
    getNextPage(page);
});

jmaki.subscribe("/button/previous", function(args) {
    page =page - 1;
    if (page < 0) page = 0;
    getNextPage(page);
});

function getNextPage(page) {
    jmaki.doAjax({method: "POST",
        url: "CatalogService?page="+encodeURIComponent(page),
        callback : function(req) {
            customers = eval(req.responseText);
            jmaki.publish("/datatable/clear", { });
            jmaki.publish("/datatable/addRows",
                   { value : customers} );
        }
    });    
}
       

The getNextPage function uses  jmaki.doAjax, which provides an easy way to make an  XMLHttpRequest, to call the CatalogService servlet passing the page number as a URI parameter.  The  callback function uses  eval to convert the XMLHttpRequest response into a JSON object. Then  jmaki.publish is called to publish the returned customers JSON object to the /datatable/addRows topic.

The yahoo.dataTable widget subscribes to the datatable 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  "/datatable/addRows" will call the yahoo.dataTable addRows function which will add the  payload value passed to the widget to the the table. This will cause the  returned customers JSON object to be displayed in the table on the html page.

This CatalogServlet processRequest method is defined as shown below:

Code Sample from: CatalogBean.java

public class CatalogServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request,
       HttpServletResponse response)
       throws ServletException, IOException {

   Catalog catalog = new Catalog();
   response.setContentType("text/plain;charset=UTF-8");
   PrintWriter out = response.getWriter();
   int page =
     Integer.parseInt(request.getParameter("page"));

   JSONArray array = catalog.getNextCustomersJSON(page);
   out.println(array.toString());
   out.close();
}


The CatalogServlet simply calls the Catalog bean to get the next list of results from the database like we saw in the previous code. The CatalogServlet then returns the resulting JSONArray as a text string.

Conclusion
This concludes the sample application which demonstrates the usage of the Java Persistence APIs and jMaki in a dynamic Ajax table example.

Configuration of the Application for jMaki, JPA, Netbeans 6 and Glassfish V2

  • Download and install NetBeans 6 bundled with GlassFish V2
  • Alternatively you can  Download and install GlassFish V2 separately.
  • Download and install the jMaki plug-in in the NetBeans update center.

Open and Run the Sample code:

  1. Download the sample code and extract its contents. You should now see the newly extracted directory as <sample_install_dir>/jmakiPagingJPA, where <sample_install_dir> is the directory where you installed the sample package. For example, if you extracted the contents to C:\ on a Windows machine, then your newly created directory should be at C:\jmakiPagingJPA.

  2. Start the NetBeans IDE. Click Open Project in the File menu and select the jmakiPagingJPA directory you just unzipped.

  3. Build the project as follows:

    • Right click the jmakiPagingJPA node in the Projects window.
    • Select Clean and Build Project.

  4. Run the project as follows:

    • Right click the jmakiPagingJPA node in the Projects window.
    • Select Run Project.
When you run the project, your browser should display the opening page of the Sample Application (at http://localhost:8080/jmakiPagingJPA/).


If you want to create your own jMaki application:
  • check out Arun Gupta's blog and screencasts.

References:




]]> Sample Application using JSF, Seam 2.0, and Java Persistence APIs on Glassfish V2 2008-02-12T04:31:21Z 2008-01-28T03:58:05Z tag:weblogs.java.net,2008:/blog/caroljmcdonald/61.9079 2008-01-28T03:58:05Z I updated my previous example using JavaServer Faces, EJB, the Java Persistence APIs, and Seam 1.2 on Glassfish v1, to use Seam 2.0 on Glassfish V2. caroljmcdonald carol.mcdonald@sun.com Community: Java Enterprise Sample Application using JSF, Seam 2.0, and Java Persistence APIs on Glassfish V2

I updated  this example  Sample Store Catalog app using JavaServer Faces, EJB, the Java Persistence APIs, and Seam 1.2 on Glassfish v1  to use Seam 2.0 on Glassfish V2. The Seam jar files needed to run on Glassfish have changed in Seam 2.0, (thanks to Cay Horstmann for pointing out which Seam 2.0 jars are needed)  nothing else in the example needs changing.  I also successfully tested Brian Leonard's Seam Refresh example with the Seam 2.0 jars, listed below, on Glassfish V2.

Download the Seam Sample Application Code


Configuration of the Application for Seam 2.0, JSF, JPA, running on Glassfish V2

First I recommend reading Brian Leonard's blog Seam Refresh .  I will summarize and update those steps here:

To Open and Test Run the seampagination Project:

  • Use the Resolve Reference Problems dialog to map the ejb and web modules to their project, which are subdirectories beneath the seampagination directory.
  • After the references are resolved, right-click the seampagination project and select Open Required Projects.
  • Right-click the seampagination-EJBModule and select Resolve Reference Problems:
    • browse to the Seam lib directory and select jboss-seam.jar and select Open. This should resove the reference to the following jars: jboss-seam.jar, hibernate.jar, hibernate-validator.jar, hibernate-annotations.jar, hibernate-commons-annotations.jar, javassist.jar, dom4j.jar, commons-logging.jar
  • Right-click the seampagination-WebModule and select Resolve Reference Problems:
    • Browse to the seampagination-ejb directory which is a sub-directory below the seampagination directory and select Open Project Folder.
    • Browse to the  jboss-seam-ui.jar found in Seam lib directory  and select Open Project Folder.  This should resove the reference to the following jars: jboss-seam-ui.jar and jboss-el.jar.
If you want to create your own Java EE application using Seam 2.0 on Glassfish V2 with Netbeans from scratch (read the steps in Brian Leonard's blog Seam Refresh but use the SEAM 2.0 jars listed here here):
  • Use Netbeans to create a new Enterprise Application
  • Right-click the Libraries node of the EJBModule project , choose Add Jar  and add these jars:
    • Seam \lib\jboss-seam.jar
    • Seam \lib\hibernate.jar
    • Seam \lib\hibernate-validator.jar
    • Seam \lib\hibernate-annotations.jar
    • Seam \lib\hibernate-commons-annotations.jar
    • Seam \lib\javassist.jar
    • Seam \lib\dom4j.jar
    • Seam \lib\commons-logging.jar
  • Right-click the Libraries node of the WebModule project ,  choose Add Jar  and add these jars:
    • your ejbModule
    • Seam \lib\jboss-seam-ui.jar
    • Seam \lib\jboss-el.jar
  • create an empty seam.properties file in the seampagination-EJBModule src\conf Folder.
  • add  the following phase listener to your faces-config.xml file under webpages web-inf:
    <lifecycle>
            <phase-listener>
                org.jboss.seam.jsf.SeamPhaseListener
            </phase-listener>
    </lifecycle>

  • add the following  context parameter to your web.xml file 
    <context-param>
         <param-name>
               org.jboss.seam.core.init.jndiPattern
         </param-name>
         <param-value>
               java:comp/env/your ear name/#{ejbName}/local
         </param-value>    
    </context-param>
  • add the following listener class to your web.xml file
     
    <listener>
            <listener-class>
                org.jboss.seam.servlet.SeamListener
            </listener-class>
    </listener>
  • For any session EJB's referenced from the web, add  EJB references to your web.xml, for example:
    <ejb-local-ref>
         <ejb-ref-name>your ear name/CatalogBean/local</ejb-ref-name>
         <ejb-ref-type>Session</ejb-ref-type>
         <local-home/>
         <local>your package name.Catalog</local>
         <ejb-link>CatalogBean</ejb-link>
    </ejb-local-ref>
  • For any EJB's referenced from the web add  a Seam interceptor to the EJB, for example : @Interceptors({org.jboss.seam.ejb.SeamInterceptor.class})

References:




]]> Sample Application using JSF, Spring 2.5, and Java Persistence APIs 2008-02-12T04:32:03Z 2008-01-07T22:36:33Z tag:weblogs.java.net,2008:/blog/caroljmcdonald/61.8939 2008-01-07T22:36:33Z I updated my Sample Application using JSF, Spring, and JPA to use the Spring 2.5 framework which is available with Netbeans 6 and Glassfish v2. caroljmcdonald carol.mcdonald@sun.com Community: Java Enterprise

Sample Application using JSF, Spring 2.5, and Java Persistence APIs with Netbeans 6 and Glassfish v2



I took this example  Sample Application using JSF, Spring 2.0, and Java Persistence APIs  and updated it to use the Spring 2.5 framework (which comes with Netbeans 6) on Glassfish v2.
You can dowload the  sample code   and a related presentation  JavaServer Faces, Java Persistence API, Java EE, Spring, Seam.


Explanation of the usage of JSF, Spring 2.5 , and Java Persistence APIs in a sample Store Catalog Application

The image below shows the Catalog Listing page, which allows a user to page through a list of items in a store.

listpage.jpg

The List.jsp page uses a JSF dataTable component to display a list of catalog items

The dataTable component is useful when you want to show a set of results in a table. In a JavaServer Faces application, the UIData component (the superclass of dataTable)  supports binding to a collection of data objects. It does the work of iterating over each record in the data source. The HTML dataTable renderer displays the data as an HTML table.

In the List.jsp web page the dataTable is defined as shown below:  (Note: Red colors are for Java EE tags, annotations code, Blue for Spring specific and Green for my code or variables)

Code Sample from:  List.jsp

<h:dataTable value='#{itemController.items}' var='dataTableItem'
 border="1"  cellpadding="2" cellspacing="0">

The value attribute of a dataTable tag references the data to be included in the table. The var attribute specifies a name that is used by the components within the dataTable tag as an alias to the data referenced in the value attribute of dataTable.  In the dataTable tag from the List.jsp page, the value attribute points to a list of catalog items. The var attribute points to a single item in that list. As the UIData component iterates through the list, each reference to dataTableItem points to the current item in the list.

The dataTable's value is bound to the items property of the itemController ManagedBean.
This ItemController ManagedBean items property is defined as shown below:

Code Sample from: ItemController.java
    import org.springframework.context.annotation.Scope;
    import org.springframework.stereotype.Controller; 
 
  @Controller("itemController")
  @Scope("session")
  public class ItemController {
    public DataModel getItems() {
        if (model==null  || index != firstItem){
            model=getNextItems();
        }
        return this.model;
    }
   
    public DataModel getNextItems() {      
        model = new ListDataModel(catalogService.getItems(firstItem,batchSize));
        index = firstItem;      
        return this.model;
    }


@Controller is a Spring 2.5 "stereotype" annotation, @Repository, @Service and @Controller are role designations for a common three-tier architecture (data access objects, services, and web controllers). By clearly indicating application roles, these stereotypes facilitate the use of Spring AOP and post-processors for providing additional behavior to the annotated objects based on those roles. The @Scope("session") annotation binds a web-tier Spring-managed object to the specified scope.  The  Spring  2.5 component scanning functionality removes the need to define Web tier "controllers"  in the faces-config.xml.  The following configuration is used to trigger the auto-detection of all web controllers:

Code Sample from: applicationContext.xml

  <context:component-scan base-package="sessionpagination" />
 

To integrate Spring with JSF configure the Spring  JSF 1.2 ELResolver that delegates to the Spring root WebApplicationContext, resolving name references to Spring-defined beans. Configure this resolver in your faces-config.xml file as follows:

Code Sample from: faces-context.xml

  <application>
    <el-resolver>
    org.springframework.web.jsf.el.SpringBeanFacesELResolver
    </el-resolver>
 </application>
 



The ItemController getItems() method wraps a List of item objects, returned from the catalogService,  in a DataModel.
UIData, the superclass of dataTable, supports data binding to a collection of data objects represented by a DataModel instance.  The data collection underlying a DataModel instance is modeled as a collection of row objects that can be accessed by a row index.  The APIs provide mechanisms to position to a specified row index, and to retrieve an object that represents the data that corresponds to the current row index.   

The Item properties Name, Photo, and price  are displayed with the column component:

Code Sample from: List.jsp

  <h:column>
      <f:facet name="header">
          <h:outputText value="Price"/>
      </f:facet>
      <h:outputText value="#{dataTableItem.price}"/>
  </h:column>

The column tags represent columns of data in a UIData component. While the UIData component is iterating over the rows of data, it processes the UIColumn component associated with each column tag for each row in the table.

The UIData component  iterates through the list of items (item.items)  and displays the dataTableItem.price. Each time UIData iterates through the list of items, it renders one cell in each column.

The dataTable and column tags use facet to represent parts of the table that are not repeated or updated. These include headers, footers, and captions.

The catalogService, and its implementation  CatalogDAO,  is defined as a Spring bean in the Spring configuration resource file /WEB-INF/applicationContext.xml :

Code Sample from: applicationContext.xml
  
    <bean id="catalogService" class="service.CatalogDAO"/>     
 
   
</beans>

  The Spring root WebApplicationContext will inject the catalogService Spring Bean into the catalogService property of the ItemController JSF ManagedBean :

Code Sample from: ItemController.java
    @Controller("itemController")
  @Scope("session")
  public class ItemController {

  private CatalogService catalogService ;
  @Autowired
  public void setCatalogService(CatalogService catalogService) {
        this.catalogService = catalogService; 
  }


@Autowired is a Spring 2.5 annotation that makes it possible to inject dependencies that match by type. This behavior is enabled for fields, constructors, and methods. To enable this, add this to the applicationContext.xml:

Code Sample from: applicationContext.xml 

 <context:annotation-config/>



For more information on using JSF with Spring, see Spring - Java/J2EE Application Framework Integrating with JavaServer Faces .

Using the Java Persistence API (JPA) with Spring 2.5

The Spring bean CatalogDAO uses the Java Persistence API EntityManager Query object to return a list of items. The CatalogDAO annotates the field private EntityManager em;  with @PersistenceContext , which causes an entity manager to be injected. (note that using the @PersistenceContext annotation is the same way an Entity Manager is injected for a EJB 3.0 Session Bean.)
 

Code Sample from: CatalogDAO.java

@Repository
@Transactional
public class CatalogDAO implements CatalogService {
   
    @PersistenceContext(unitName="PetCatalogPu")
    private EntityManager em;

    @Transactional(readOnly = true)
    public List<Item>  getItems(int firstItem,int batchSize) {      
       Query q = em.createQuery("select object(o) from Item as o");
       q.setMaxResults(batchSize);
       q.setFirstResult(firstItem);
       List<Item> items= q.getResultList();
       return items;      
   }
   

The Java Persistence 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: q.setMaxResults(int maxResult) sets the maximum number of results to retrieve. q.setFirstResult(int startPosition) sets the position of the first result to retrieve.

In the code below, we show the Item entity class which maps to the  ITEM table that stores the item instances. This is a typical Java Persistence entity object. There are two requirements for an entity:
  1. annotating the class with an @Entity annotation.
  2. 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.  The O/R  relationships with Address and Product are also annotated. For more information on defining JPA entities see Pro EJB 3: Java Persistence API book.

Code Sample from: Item.java

@Entity
public class Item implements java.io.Serializable {

    @Id  
    private String itemID;
    private String name;   
    private String description;   
    private String imageurl;   
    private String imagethumburl; 
    private BigDecimal price;
    @OneToOne(cascade={CascadeType.PERSIST})
    private Address address;
    @ManyToOne
    private Product product;
    
    public Item() { }
     
    public String getItemID() {
        return itemID;
    }
    public void setItemID(String itemID) {
        this.itemID = itemID;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }   
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public BigDecimal getPrice() {
       return price;
    } 
    public void setPrice(BigDecimal price) {
        this.price = price;
    }
    public void setAddress(Address address) {
        this.address = address;
    }
    public Product getProduct() {
        return product;
    }
    public void setProduct(Product product) {
        this.product = product;
    }

    ...
}   




The ItemController ManagedBean pages through the list of Items by maintaining the firstItem and batchSize attributes and passing these as parameters to the CatalogService getItems(firstItem, batchSize) method. The ItemController's <managed-bean-scope> is defined as session, a JSF Managedbean with session scope will be stored in the session meaning that the bean's properties will stay alive for the life of the Http Session.


The ItemController ItemCount  property is  used to get and display the number of Catolog items in the  data base on the List.jsp page:

Code Sample from: List.jsp

<h:outputText value="Item #{itemController.firstItem +1} ..#{itemController.lastItem} of #{itemController.itemCount}"/>

This ItemController ItemCount property is defined as shown below:

Code Sample from: ItemController.java

    public int getItemCount() {      
        int count = catalogService.getItemsCount();
        return count;     
    }

The ItemController getItemCount() method calls the CatalogService interface to get the count of the list of items. The CatalogDAO Spring bean  getItemCount() method uses the JPA Query interface to get the count of all items in the database item table:

Code Sample from: CatalogDAO.java
@Repository
@Transactional
public class CatalogDAO implements CatalogService {
  @PersistenceContext(unitName="PetCatalogPu")
  private EntityManager em;
. . .
  @Transactional(readOnly = true)
  public int  getItemCount() {
      Query q = entityManager.createQuery(
                 "select count(o) from Item as o");     
      int count = ((Long)q.getSingleResult()).intValue();     
      return count;
  }   
    


A JSF commandLink is  used to provide a link to click on to display the next page of items. The commandLink tag represents an HTML hyperlink and is rendered as an HTML <a> element. The commandLink tag is used to submit an action event to the application. 

Code Sample from: List.jsp

 <h:commandLink action="#{itemController.next}" value="Next #{itemController.batchSize}"
    rendered="#{itemController.lastItem + itemController.batchSize <= itemController.itemCount}"/>