Skip to main content

Dynamic Data in jMaki Widgets Using JPA

Posted by arungupta on June 22, 2007 at 2:37 PM PDT
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
-wrapped Yahoo Data Table widget pulling data from

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

. These steps are marked with "SEE THE


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

    - 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


        for (int i=0; i<list.size(); i++) {

            Company c = list.get(i);

            out.println("['" + c.getCompanyname()
    + "'," +

    + "," + c.getChange() + "," +

    c.getPercentchange() + ",'" + c.getLastupdated() +


            if (i < list.size()-1)




  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

      - 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'}



      ['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']

      ]" />


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


- Based upon a user request, a NetBeans project for this sample
can be opened via Java WebStart

. Alternatively, you can
the project and view at your own ease. Thanks to
Geertjan for the

Technorati: jmaki


Related Topics >>