Arun Gupta, Miles to go ...

Dynamic Data in jMaki Widgets Using JPA

jMaki provides a rich set of data widgets that can be embedded in a web application. For most of the widgets to be useful, they need to be tied a database backend. For example consider a Table widget displaying data about your favorite stock tickers. This blog explains the steps to create such a Web application, deployed on GlassFish V2, that contains a jMaki-wrapped Yahoo Data Table widget pulling data from JavaDB.

If you are using a jMaki build higher than 0.96 (or dated after jul 30) then some steps in this entry need to be updated and described here. These steps are marked with "SEE THE UPDATED ENTRY".

1. Create the Web application project
   1. In NetBeans IDE 5.5.1, create a new 'Web Application' project and name it as 'jmaki-jpa'.
   2. Choose GlassFish V2 as the Server as shown below:
      
      
   3. Add 'jMaki Ajax Framework' by clicking on 'Next' button while creating the project.
   4. Choose the 'Standard' layout as shown below:
      
      
      
      and click on 'Finish'.
2. Configure the Database
   1. In NetBeans IDE, 'Runtime' tab, expand Databases, connect to the default database (with the URL 'jdbc:derby://localhost:1527/sample [app on APP]'). Specify the username 'app' and password 'app'.
   2. Right-click on the newly created connection and select 'Execute Command...' and enter the following query to create the table definition:
      
      create table COMPANY (id int,
                      companyName varchar(255),
                      price float,
                      change float,
                      percentChange float,
                      lastUpdated varchar(50),
                      PRIMARY KEY (id))
   3. Right-click on the database connection, select 'Refresh' to see the newly created table in the Tables tree. Select the 'COMPANY' table, right-click and select 'Execute Command...' and enter:
      
      insert into COMPANY values (1, 'A Co', 71.72, 0.02, 0.03, 'Jan 1, 2007, 10:00am' );
insert into COMPANY values (2, 'B Inc', 29.01, 0.42, 1.47, 'Feb 1, 2007, 10:00am' );
insert into COMPANY values (3, 'C Group Inc', 83.81, 0.28, 0.34, 'Mar 1, 2007, 10:00am' );
insert into COMPANY values (4, 'D Company', 52.55, 0.01, 0.02, 'Apr 1, 2007, 10:00am' );

      Now our database structures are created and populated.
3. Create the JPA (Java Persistence API) Entity class that maps to the database.
   1. In the projects window, select the project 'jmaki-jpa', right-click and select 'New' and choose 'Entity Classes From Database...'.
   2. Select 'jdbc/sample' as 'Data Source'.
   3. Select 'COMPANY' in 'Available Tables' and click on 'Add' and enter the values as shown below:
      
      
      
      and click on 'Next'.
   4. Specify the package name as 'server' as shown below:
      
      
   5. Click on 'Create Persistence Unit...' to create the persistence unit and enter the values as shown below:
      
      
      
      and click on 'Create'.

   and click on 'Finish'.

4. Configure Persistence Unit
   1. In your project, expand 'Configuration Files' and open 'persistence.xml'.
   2. Click on 'Add Class' button and click on 'Cancel' button. For some reason the entity classes are not loaded during the first time.
   3. Click again on 'Add Class' button and choose 'server.Company' class and click 'OK'. This will ensure that the generated entity class is explicitly recognized by the EntityManagerFactory.
5. In your project, right-click on 'Web Pages', select 'New' and then 'JSP...'. Give the name as 'data' as shown:
   
   
   
   and then click on 'Finish'.
6. SEE THE UPDATED ENTRY - Replace the entire content of template 'data.jsp' with the following:
   
   <%@ page import="java.util.*" %>
<%@ page import="server.Company" %>
<%@ page import="javax.persistence.*" %>

<%
    EntityManagerFactory emf = Persistence.createEntityManagerFactory("jmaki-jpaPU");
    EntityManager em = emf.createEntityManager();

    List<Company> list = em.createQuery("select c from Company c").getResultList();

    out.println("[");
    for (int i=0; i<list.size(); i++) {
        Company c = list.get(i);
        out.println("['" + c.getCompanyname() + "'," +
            c.getPrice() + "," + c.getChange() + "," +
            c.getPercentchange() + ",'" + c.getLastupdated() +
            "']");
        if (i < list.size()-1)
            out.println(",");
    }
    out.println("]");
%>
7. Add and Configure jMaki widget
   1. In the generated 'index.jsp', drag-and-drop a 'Yahoo Data Table' widget from the jMaki Palette in the 'Main Content Area'.
   2. SEE THE UPDATED ENTRY - Change the generated code fragment from:
      
      <a:widget name="yahoo.dataTable" args="{
    columns :[
        {title : 'Company', width : 200, locked:false},
        {title : 'Price', width : 75, renderer: 'usMoney'},
        {title : 'Change', width : 75, renderer: 'change'},
        {title : '% Change', width : 75, renderer: 'pctChange'},
        {title : 'Last Updated', width : 85, renderer: 'italic'}
    ]}"
    value="[
        ['A Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['B Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['C Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['D Company',52.55,0.01,0.02,'9/1 12:00am']
    ]" />
      
      to
      
      <a:widget name="yahoo.dataTable" args="{
    columns :[
        {title : 'Company', width : 200, locked:false},
        {title : 'Price', width : 75, renderer: 'usMoney'},
        {title : 'Change', width : 75, renderer: 'change'},
        {title : '% Change', width : 75, renderer: 'pctChange'},
        {title : 'Last Updated', width : 85, renderer: 'italic'}
    ]}"
    service="data.jsp" />

      The new text is highlighted in bold. The 'service' attribute tells jMaki runtime to pick up the data for DataTable widget from 'data.jsp' instead of the static data.
8. That's it! Click on the Green button in NetBeans IDE to run the project or default keyboard shortcut (F6). And your browser shows the application deployed as:
   
   
   
   This jMaki-wrapped Yahoo Data Table widget is pulling data from JavaDB.

UPDATED: SEE THE UPDATED ENTRY - Based upon a user request, a NetBeans project for this sample can be opened via Java WebStart here. Alternatively, you can download the project and view at your own ease. Thanks to Geertjan for the tip!

Technorati: jmaki glassfish jpa netbeans

Posted by Arun Gupta in web2.0  |  Comments[33]

Hello JPA World!

After much discussion, I was able to finally create a simple "Hello JPA World" example that uses Java Persistence API (JPA) to store and retrieve data from JavaDB from a Servlet deployed on GlassFish V2 b50 using NetBeans IDE 5.5.1. This blog describes the steps, in detail, on how to create this sample.

1. In NetBeans IDE, create a new Web project and name it as "HelloJPA".
2. Create an Entity class. Right-click the project, select 'New', 'Entity Class ...'. Specify the values as shown below:
   
   
   1. Create a new Persistence Unit by selecting 'Create Persistence Unit ...' and entering values as shown below:
      
      
      
      and click on 'Create'.

   and click on 'Finish'.

3. Expand 'Configuration Files', open 'persistence.xml', click 'Add Class ...', select 'server.Company' and click on 'OK'. The 'persistence.xml' will look like:
   
   <?xml version="1.0" encoding="UTF-8"?>
<persistence version="1.0"
    xmlns="http://java.sun.com/xml/ns/persistence"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">
    <persistence-unit name="HelloJPAPU" transaction-type="RESOURCE_LOCAL">
        <provider>oracle.toplink.essentials.ejb.cmp3.EntityManagerFactoryProvider</provider>
        <non-jta-data-source>jdbc/sample</non-jta-data-source>
        <class>server.Company</class>
        <properties>
            <property name="toplink.ddl-generation" value="drop-and-create-tables"/>
        </properties>
    </persistence-unit>
</persistence>
4. Add the following fields to the newly generated 'Company.java':
   
   private String companyName;
private float price;
private float change;
private float percentChange;
private String lastUpdated;
5. Generate getters/setters for each field by selecting the newly added fields, right-click on the selected text, select 'Refactor', 'Encapsulate Fields ...' and choose the getter/setters for each field as shown below:
   
   
6. Add a constructor to 'Company' class as follows:
   
   public Company(String companyName, float price, float change, float percentChange, String lastUpdated) {
    this.companyName = companyName;
    this.price = price;
    this.change = change;
    this.percentChange = percentChange;
    this.lastUpdated = lastUpdated;
}
7. Change the toString method in Company to:
   
   return "server.Company[id=" + id + ", lastUpdated=" + lastUpdated + "]";
8. Add a new Servlet by right-click on the Project, select New, 'Servlet ...' as shown below:
   
   
   
   and click on 'Finish'.
9. Update the generated Servlet template code such that it looks like:
   
   protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();
    beginHTML(out);
    EntityManagerFactory emf = Persistence.createEntityManagerFactory("HelloJPAPU");
    EntityManager em = emf.createEntityManager();

    em.getTransaction().begin();
    out.println("<h1>Hello JPA World!</h1>");

    Company c = new Company("AAA Co", (float)10.0, (float)2.0, (float)10.0, new Date().toString());
    em.persist(c); // persisting to the source
    em.getTransaction().commit(); // now committed

    List list = em.createQuery(
        "select c from Company c where c.companyName = :companyName")
        .setParameter("companyName", c.getCompanyName()).getResultList();

    out.println("<b>Total Companies: " + list.size() + "</b><br>");
    for (int i=0; i<list.size(); i++) {
        out.println((Company) list.get(i) + "<br>");
    }

    endHTML(out);
}

void beginHTML(PrintWriter out) {
    out.println("<html>");
    out.println("<head>");
    out.println("<title>Hello JPA World!</title>");
    out.println("</head>");
    out.println("<body>");
}

void endHTML(PrintWriter out) {
    out.println("</body>");
    out.println("</html>");
    out.close();
}
   
   Fix the imports by using 'Alt+Shift+F' default keyboard shortcut.
10. Right-click on the Project, select 'Properties', 'Run' Categories, change the Relative URL to '/Hello'.
11. And that's it! Hit the Green button to run the project or the default keyboard shortcut of 'F6'. After re-loading the page twice, the following output will be seen in the browser window:
    
    
    

Technorati: jpa glassfish netbeans

Posted by Arun Gupta in web2.0  |  Comments[23]