Using the Spry Accordion in a Visual Web Application With jMaki 0.9.7

The jMaki team keeps making great changes to the technology, but sometimes it is hard to keep up with all the changes. I have finally gotten a working version of the latest jMaki-wrapped Spry Accordion. I think that this API will be stable for awhile, so now is a good time to post some instructions on how to use the Spry Accordion in a NetBeans 5.5.1 Visual Web project using the latest NetBeans jMaki plug-in (1.6.9.9.9.5), which bundles jMaki 0.9.7.

One of the recent changes has been the data model. The jMaki team is now publishing the data model information on the ajax.dev.java.net portal at http://wiki.java.net/bin/view/Projects/jMakiDataModels. The data model for the Spry Accordion widget is as follows:

    items::= "{"  {<label> } "}"
    label ::=  "{" "label:"  <string>, [<content> | <include> |<action> ] 
       [<lazyload>]  [<rowid>] <selected>"},"
    selected ::= "selected:" "true" | "false"  (default is false)
    include ::= "include:" <string> ,  
    lazyload ::= "lazyload:" "true" | "false",
    rowid ::= "rowid:" <string> ,
    content ::= "content:" <string>,
    action ::= "action:" "{" [<topic>] <message>  "},"
    topic ::=  "topic:" <string>,
    message ::= "message:" <obj>
    obj ::= <string> | <JavaScript object literal>

Note: This model is the same as the data model for the tabbed view. This means that you can swap out the accordion with a tabbed view and not have to change the data.

To follow this mini-tutorial, you need to get the NetBeans jMaki Plugin. If you have already installed the plugin, use the NetBeans Update Center from the Tools menu to make sure you have the latest version (1.6.9.9.9.5). If you have an earlier version, See Carla's blog entry about how to update the jMaki framework resources in a jMaki project.

I noted in an earlier blog entry that you also need to download the JSF Compounds library (jsfcompounds-0.0.2.jar). This is no longer true. The 1.6.9.9.9.5 plug-in includes this library.

  1. Create a plain (not a Visual Web) Web Application project, name the project something like BaseJSFjMaki097, choose the Sun Java Application Server, and click Next. Select jMaki Ajax Framework and select JavaServer Faces, then click Finish (honestly, for the purposes of this tutorial, it doesn't really matter if you include the JSF framework or not. It works either way). You now have a project from which you can copy the necessary jMaki resources into your Visual Web Project.

  2. Drag the jMaki Spry Accordion widget from the Palette into the index.jsp to add the the widget's resources to the project.

  3. (Important) Click the Run Main Project button. I have noticed that not all the widget resource library files get copied into the project until you run the project. We need to make sure we have them all before we copy them into our VWP project.

  4. Now, create a new Visual Web Project and make it the main project.

  5. To add the jMaki libraries (ajax-wrapper-comp, org.json, and jsfcompounds) to your project, right-click the Libraries node and choose Add Library. Choose jmakilibrary from the Library Manager (when you installed the plugin, it put the jmakilibrary into the Library Manager) and click OK.

  6. Copy the supporting files from the BaseJSFjMaki project to your project:

    1. Copy BaseJSFjMaki/Web Pages/glue.js to Your-VWP-Project/Web Pages.

    2. Copy the following files from BaseJSFjMaki/Web Pages/resources to Your-VWP-Project/Web Pages/resources:

      • config.json
      • jmaki.js
      • system-glue.js


    3. Copy the BaseJSFjMaki/Web Pages/resources/spry folder to Your-VWP-Project/Web Pages/resources.

  7. You can now close the BaseJSFjMaki project.

  8. In the Visual Designer add a Group Panel component to the page (Page1). You will be putting the accordion in this component. This enables you to position the ajax widget as well as see in the visual designer where this jMaki widget is. Any of the layout components will suffice, but for this tutorial, I chose to use the Group Panel.

  9. In the IDE, click the JSP button in the editing toolbar to display the JSP tags for the page.

  10. Add xmlns:a="http://jmaki/v1.0/jsf" to the <jsp:root> tag.

  11. Replace the <webuijsf:panelGroup> tag with the following tags:
    <webuijsf:panelGroup binding="#{Page1.groupPanel1}" id="groupPanel1"
      style="position: absolute; left: 72px; top: 48px;">
       <a:widget name="spry.accordion" value="#{SessionBean1.tripContent}"/>
    </webuijsf:panelGroup>

Now we can setup the web application to return data from the Travel database in the data model format for the accordion.

  1. Click Design to display Page1 in the Visual Designer. This also causes the Navigator window to appear, which you will need in Step 5.

  2. Click the Runtime tab to display the Runtime window.

  3. In the Runtime window,  expand databases , right-click the jdbc:derby node for the travel database, and choose connect. If prompted, type travel in the Password text box and click OK. (The sample travel database is installed if the Sun Java Application Server was added to the IDE before you installed the Visual Web Pack. If you do not see the travel database, go to the NetBeans Visual Web Pack Installation Instructions for information about installing the sample travel database.)

  4. Expand the jdbc:derby node for the travel database, and expand the Tables node.

  5. Drag the TRIP node from the Runtime window and drop it on the SessionBean1 node in the Navigator window, as shown in the following screen shot.



  6. When you dropped the TRIP table on the SessionBean1 node, the IDE added a tripDataProvider node and a tripRowSet node. Double-click the tripRowSet node to open its query in the query editor.

  7. Replace the query in the Query pane (the third pane down) with the following query.
    SELECT ALL TRAVEL.PERSON.PERSONID, 
      TRAVEL.PERSON.NAME, 
      TRAVEL.TRIP.TRIPID, 
      TRAVEL.TRIP.DEPDATE 
    FROM TRAVEL.PERSON
      INNER JOIN TRAVEL.TRIP ON TRAVEL.TRIP.PERSONID = 
        TRAVEL.PERSON.PERSONID
    ORDER BY TRAVEL.PERSON.PERSONID ASC, 
      TRAVEL.TRIP.DEPDATE ASC 
    


  8. Right-click in the query pane and choose Parse Query. The query editor updates the other panes to match the query.

  9. Close the query editor.

  10. Click the Projects tab to display the Projects window.

  11. In the Projects window, double-click the Session Bean node to open the source for SessionBean1.

  12. Add the following code to the bottom of the source, just before the ending brace (}).
         public String getTripContent() {
            // Data Model Format
            // { items : [
            //   {label: "label", content : "content"},
            //   ...
            //  ]}
            String retVal = "";
            try {
                retVal = buildTripTreeData().toString();
            } catch (JSONException ex) {
                log("Exception building tree data" +
                        ex.getMessage());
            }
            return retVal;
        }
        
        
        public JSONObject buildTripTreeData()
        throws JSONException {
            JSONObject rootObject = new JSONObject();
            JSONArray items = new JSONArray();
            JSONObject itemObject = new JSONObject();
            boolean hasNext = tripDataProvider.cursorFirst();
            Integer currentPersonId =
                    (Integer) tripDataProvider.getValue(
                    "PERSON.PERSONID");
            String currentName = 
                    tripDataProvider.getValue(
                    "PERSON.NAME").toString();
            StringBuffer currentContent = new StringBuffer();
            while (hasNext) {
                Integer newPersonId =
                        (Integer) tripDataProvider.getValue(
                        "PERSON.PERSONID");
                if (!newPersonId.equals(currentPersonId)) {
                    // write out data for previous person
                    itemObject.put("label", currentName);
                    itemObject.put("content", 
                      currentContent.toString());
                    items.put(itemObject);
                    // start gathering data for a new item
                    currentPersonId = newPersonId;
                    currentName = 
                            tripDataProvider.getValue(
                            "PERSON.NAME").toString();
                    itemObject = new JSONObject();
                    currentContent = new StringBuffer();
                }
                // Add trip's date to the content
                currentContent.append(tripDataProvider.getValue(
                        "TRIP.DEPDATE").toString() +
                        "<br>");
                hasNext = tripDataProvider.cursorNext();
            }
            // write out data for last person
            itemObject.put("label", currentName);
            itemObject.put("content", currentContent.toString());
            items.put(itemObject);
            rootObject.put("items", items);
            return rootObject;
        }
    

    Note: I got the idea for the buildTripTreeData method from Watsh Rajneesh;s Working With jMaki post.

  13. Click the Run Main Project button to run the web application. You should see a panel for each employee, and each panel should contain the dates of that employee's trips. One odd thing happens, though, that I don't now how to fix. Everytime I click a panel header, the accordion gets wider. Does anyone know why that happens?

Greg and Carla say that they have added some cool features to the accordion widget. I am hoping that as I learn about them, I can add to this mini-tutorial.

Comments:

About Step 3. Ludo wrote to the dev alias that he did not think you need to run the base project. He is thinking that I just might have copied over the resource folder before the IDE had completed setting it up. I had waited for the hour-glass to go away, but maybe I needed to wait a bit longer. If any of you have an experience where not all of the resources get copied over, let me know. It would be good to figure out what the issue really is.

Posted by Diva#2 on August 10, 2007 at 07:48 AM PDT #

Sir , i read u artical on
How to use Add Query Criteria for the MySQL data Base in Netbeans Visual web pack.
When the Query Criteria is add like

SELECT ALL counselors.counselors_id, counselors.first_name, counselors.telephone,counselors.email
FROM counselors WHERE counselors.counselors_id = ?

when i run this Query in the Query Window
i get a error message Box saying
Query Processing Error Parameter metadata not available for the given statement

Posted by P. Sathish Kumar on August 15, 2007 at 12:13 PM PDT #

It would be helpful if you pointed me to the article that you read. I have never seen this article. If it cannot read the metadata, then perhaps there is a problem with how you registered MySQL with the IDE or perhaps you have not connected to the database from the IDE during your current session. A possible resource is http://www.netbeans.org/kb/55/mysql.html

Posted by Diva #2 on August 16, 2007 at 02:07 AM PDT #

Hi Chris,

Just read this blog of yours: http://blogs.sun.com/divas/entry/using_the_spry_accordion_in

When I create a Web application in my netbeans IDE 6.0m10 - I donot get the view as you show - the navigator view that is..
I get it only when I create a new project using "Visual Web JavaServer Faces" as one of the frameworks - In which case I don't get the jMaki pallette - any idea what i should be doing?
Regards,
rasane

Posted by rasane on August 19, 2007 at 02:58 PM PDT #

Hello Rasane,

This tutorial is how to use the jMaki 0.9.7 widgets in 5.5.1 Visual Web Pack. For the 6.0 NetBeans IDE, there were major changes so this tutorial will not work exactly the same for 6.0. There is no visual support for jMaki in Visual Web applications, which is why you cannot see jMaki in the palette in a visual web project (which is the whole reason for this tutorial - it shows what to do to make jMaki work in visual web projects). If you would like to see jMaki visual support, write to the jMaki forum and let them know. I put on a lab at JavaOne this year on how to turn jMaki components into Visual Web components (http://developers.sun.com/learning/javaoneonline/j1lab.jsp?lab=LAB-4420&yr=2007&track=8). There is also an ongoing project at https://widgets.dev.java.net/ to build jMaki libraries that work in the Visual Designer in Visual Web applications. If you login to java.net you can see the source.

Posted by Diva #2 on August 20, 2007 at 02:38 AM PDT #

Hi Chris,

First of all, thank you for responding to my query.

Yes, after you explicitly mention it, I understand that what you meant was "manually inserting jMaki elements" in visual web projects.. I somehow read the prologue in the blog to imply that I could perform step 11 by drag and drop. It is a little early in my experience to request anything but help or assistance in understanding the java/ruby/jMaki elements/usage so I am quite happy to keep absorbing at this stage.. and keen..

Thank you for the link from java one online I could find some more interesting presentations during java one from the front page. Particularly interesting for me was the jMaki presentation by Greg and Carla.. But I could not navigate to the lab url you gave : http://developers.sun.com/learning/javaoneonline/j1lab.jsp?lab=LAB-4420&amp;yr=2007&amp;track=8.. tried searching as well but to no avail.. could you send that link again please?

Regards,
Rasane

Posted by rasane on August 20, 2007 at 08:39 AM PDT #

Sorry, but the comment poster doesn't like html and changed the url to something that doesn't work. So, go here http://blogs.sun.com/winston/entry/javaone_2007_hands_on_labs where Winston has posted links to Visual Web Pack labs. Note, however, that the part about making a JSF widget out of a jMaki widged is very very advanced. I don't think it is really what you wanted at all. And the other jjMaki stuff was written towards earlier versions of jMaki and is now obsolete.

Posted by Diva #2 on August 20, 2007 at 08:51 AM PDT #

very cool

Posted by hippo on November 06, 2007 at 07:59 PM PST #

Post a Comment:
Comments are closed for this entry.
About

divas

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today