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.