Miles to go …

June 22, 2007

Dynamic Data in jMaki Widgets Using JPA

Filed under: web2.0 — arungupta @ 2:37 pm
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

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • email
  • StumbleUpon
  • Technorati
  • Twitter
  • Slashdot
Related posts:
  1. Dynamic Data in jMaki Widgets Using JPA – Updated for formal data models
  2. jMaki on Rails For Dummies
  3. TOTD #15: Delete/Update Row from Database using jMaki Data Table
  4. jMaki on Rails – Updated for NetBeans 6 M10
  5. TOTD #5: Loading data from beans in jMaki widgets

32 Comments »

  1. Another way to embed dynamic data into JMaki component is to use the JSON approach which is easier to maintain and comprehend. JMaki comes with the org.json.* classes (JSONObject, JSONArray etc) which enable one to generate the JSON format dynamic data for the JMaki UI components with ease.
    I have blogged about this approach with sample code at http://rwatsh.blogspot.com/2007/06/working-with-jmaki.html.

    Comment by Watsh Rajneesh — June 25, 2007 @ 5:47 am

  2. Hi Arun !!
    I’m trying to follow your example and others of similar characteristics, such as one I’ve found at JenniferB’s Blog.
    So far I’ve had only “partial” success, I mean, the Yahoo table only works when I put static data on it !!!
    For example, if I simplify data.jsp to contain just this:
    <%
    System.out.println(“[ ['A Co',71.72,0.02,0.03,'9/1 12:00am'] ]”);
    %>
    and change value=”…..” to service=”data.jsp”, the table is not displayed at all.
    I’ve also tried using something like value=”${teams.teamsData}”> as suggested by Watsh, based on a JSONArray filled with data using a loop, and it didn’t worked either.
    I’m using NB M10 and the latest jmaki module installed as a downloaded plugin.
    Any hints ?? Thanks in advance,
    Daniel

    Comment by Daniel — July 6, 2007 @ 4:33 pm

  3. Daniel, You can download the NetBeans project (available at the end of entry) and play with the data yourself. Once the project is deployed, you should be able to view jmaki-jpa/data.jsp that will show exactly how data.jsp needs to look like. In your case, data.jsp needs to contain only “<% .out.println(“[ ['A Co',71.72,0.02,0.03,'9/1 12:00am'] ]”); %>”. System.out will print the data to GlassFish console instead.

    Comment by Arun — July 6, 2007 @ 4:53 pm

  4. Thanks for you prompt answer, I’d already noticed the output to the server console, but I’m getting an error in the editor if I don’t use System, so I tried that way.
    The error I got in every out.println line is: “unreported exception java.io.IOException; must be caught or declared to be thrown”.
    Now the funny part is, I’ve downloaded and installed your project, and I got the same error in the out.println lines in data.jsp.
    After setting up the DB and running the project, I see it is working as expected, even though the errors keep showing up.
    Now I’ve tried with my project, compiling with errors anyways, and it worked. No trace of the error messages in the server console.
    Strange, what can it be ?? I’m using J2SE 6, in case this matters.
    Thanks for your help !!!
    Daniel

    Comment by Daniel — July 6, 2007 @ 6:24 pm

  5. Daniel, I’m using JDK 1.5.0_011 and that could certainly be a disconnect. I’ll try with Java SE 6 later and let you know.

    Comment by Arun — July 10, 2007 @ 2:39 pm

  6. Hi, Arun. Very cool! It would be a very small step to use this same component with Java DB running on the client, embedded in the browser!
    Take a look at
    this article
    for an example of how this works.

    Comment by David Van Couvering — July 11, 2007 @ 10:25 pm

  7. Excelent example, but I have problem -
    create new project – the name, server, … -next-
    and on the next screen whenewer I check to use jMaki and the button finish becomes disabled …
    any hint???
    The funy is that after going back to first screen of project creation I can create project – the button finish is ebnabled.

    Comment by vlk — July 12, 2007 @ 5:32 am

  8. David, thanks for the pointer. I’ve added it to my todo list!
    Vik, is this a repeatable behavior ? If yes, then please file a bug on netbeans.org.

    Comment by Arun — July 16, 2007 @ 5:21 pm

  9. NetBeans 5.5.1
    SJSAS 9 Update 1
    I created my own NetBeans project and followed every step very carefully, but running into the following error:
    exception
    org.apache.jasper.JasperException: java.lang.IllegalArgumentException: An exception occured while creating a query in EntityManager
    root cause
    java.lang.IllegalArgumentException: An exception occured while creating a query in EntityManager
    root cause
    Exception [TOPLINK-8006] (Oracle TopLink Essentials – 2006.8 (Build 060830)): oracle.toplink.essentials.exceptions.EJBQLException
    Exception Description: A problem was encountered resolving the class name – The descriptor for [Company] was not found.

    Comment by Muhammad Ali Sabir — July 17, 2007 @ 8:58 am

  10. Arun: yes it is repeatable – bug reported (response is: should be corrected in NB 6.0).

    Comment by Vlk — July 17, 2007 @ 10:08 pm

  11. thanks Vlk!

    Comment by Arun — July 17, 2007 @ 10:21 pm

  12. [Trackback] jMaki提供了一批可内嵌于Web应用程序的数据小部件。要使大部分小部件派上用场，需将其绑定到数据库后端，例如，我们来考虑设计一个能显示您需要的股价信息的Table小部件。本文将阐述创建此类Web应用程序的步骤，该应用程序部署在GlassFish V2上，其中包含一个jMaki包装的Yahoo Data Table小部件，用于从JavaDB取回数据。

    Comment by yanglilibaobao — July 19, 2007 @ 12:33 pm

  13. Muhammad, Looks like the Company entity is not found for some reason – could be some sort of packaging problem, e.g. persistence.xml is in wrong place or doesn’t have a reference to the jar file where the entity is (if it is in a jar file). Can you send me the zip file of your project ?

    Comment by Arun Gupta — July 31, 2007 @ 7:20 am

  14. [Trackback] jMaki returns from vacation…with pictures:)

    Comment by Ludovic Champenois's Blog — July 31, 2007 @ 6:09 pm

  15. [Trackback] jMaki is a light-weight framework for build Web 2.0 applications. It provides support for multiple languages – Java (1, 2, 3, 4, 5, 6) , PHP, Ruby (1, 2), Phobos (1). The numbers in parentheses indicate the entries that I’ve…

    Comment by Arun Gupta's Blog — August 24, 2007 @ 6:08 am

  16. [Trackback] Doris pointed out that one of my earlier post is not working any more. The main reason for this is because jMaki data models have evolved since I wrote the original entry and are now formalized. Here is the delta…

    Comment by Arun Gupta's Blog — August 27, 2007 @ 8:50 pm

  17. Hi, how can I use GROUP BY in this example? select c from Company c group by …" ; doesn’t work – Failed to load data: doAjax error communicating with data.jsp. Server returned status code 500.. best regards Anja

    Comment by Anja — October 22, 2007 @ 1:32 pm

  18. Anja, if your query return results correctly then there is nothing specific done in the jMaki table. Can you make sure your query is returning correct results ?

    Comment by Arun Gupta — October 22, 2007 @ 1:45 pm

  19. I have solved this problem. I created a view and load the data now from this table.
    Thank you.

    Comment by Anja — October 24, 2007 @ 2:43 pm

  20. Glad you could solve it. Do you want to post a blog entry and link it from here ? :)

    Comment by Arun Gupta — October 24, 2007 @ 2:49 pm

  21. Hi people I still have the problem "An exception occured while creating a query in EntityManager" I use NETBEANS 6. Please help me I going CRAZY!

    Comment by Victor — February 26, 2008 @ 12:20 pm

  22. [Trackback] 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

    Comment by Carol McDonald's Blog — June 6, 2008 @ 3:54 pm

  23. [Trackback] 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

    Comment by Carol McDonald's Blog — June 6, 2008 @ 8:29 pm

  24. [Trackback] This Sample Catalog app demonstrates a RESTful Web Service, coded using JAX-RS: Java API for RESTful Web Services and the Java Persistence API, and a jMaki client which gets and displays the Web Service responses in a dynamic Ajax table.

    Comment by Carol McDonald's Blog — July 18, 2008 @ 4:04 pm

  25. HAI

    I am shamsheer, MCA working in a company using netbeans JPA, and Jmaki. please give me some information and guidelines for learning Jmaki. also give me some pdf help full for devloping jmaki aplications using databases

    Comment by shamsheer muhammed — August 20, 2008 @ 2:33 am

  26. shamsheer, I posted your request to dev@ajax.dev.java.net. Stay tuned, somebody will post a detailed response.

    Comment by Arun Gupta — August 21, 2008 @ 4:10 pm

  27. shamsheer, please post your question to dev@ajax.dev.java.net directly for the benefit of other users as well.

    Comment by Arun Gupta — August 22, 2008 @ 9:42 am

  28. i use mysqljdbc connector and mysql database when i try to run data.jsp
    i recieve this message.
    description
    The server encountered an internal error () that prevented it from fulfilling this request.

    exception

    org.apache.jasper.JasperException: Exception [TOPLINK-4002] (Oracle TopLink Essentials – 2.0.1 (Build b09d-fcs (12/06/2007))): oracle.toplink.essentials.exceptions.DatabaseException
    Internal Exception: java.sql.SQLException: Error in allocating a connection. Cause: null
    Error Code: 0
    root cause

    Exception [TOPLINK-4002] (Oracle TopLink Essentials – 2.0.1 (Build b09d-fcs (12/06/2007))): oracle.toplink.essentials.exceptions.DatabaseException
    Internal Exception: java.sql.SQLException: Error in allocating a connection. Cause: null
    Error Code: 0
    root cause

    java.sql.SQLException: Error in allocating a connection. Cause: null
    note The full stack traces of the exception and its root causes are available in the GlassFish/v3 logs.

    Comment by abbaspour — October 14, 2008 @ 6:57 pm

  29. abbaspour, I’ve not tried it with GlassFish v3 so not sure if it is something related to that. Any case, I recommend posting a question to users@ajax.dev.java.net for a wider audience.

    Comment by Arun Gupta — October 15, 2008 @ 9:42 am

  30. hi Arun i will do it but tell me the url for this forum to be able to participate in i looked for it in java.net but i could not find it.
    thanks Arun

    Comment by abbaspour — October 16, 2008 @ 5:31 pm

  31. abbaspour, jMaki forum is at:

    http://forums.java.net/jive/forum.jspa?forumID=96

    Comment by Arun Gupta — October 16, 2008 @ 5:34 pm

  32. abbaspour, I’ve not tried it with GlassFish v3 so not sure if it is something related to that. Any case, I recommend posting a question to users@ajax.dev.java.net for a wider audience.

    Comment by BATTERY — November 27, 2008 @ 4:55 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

The views expressed on this blog are my own and do not necessarily reflect the views of Oracle.
Powered by WordPress