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