Thursday Aug 09, 2007

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 (, 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 portal at 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 ( 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 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}"/>

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.

  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" +
            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(
            String currentName = 
            StringBuffer currentContent = new StringBuffer();
            while (hasNext) {
                Integer newPersonId =
                        (Integer) tripDataProvider.getValue(
                if (!newPersonId.equals(currentPersonId)) {
                    // write out data for previous person
                    itemObject.put("label", currentName);
                    // start gathering data for a new item
                    currentPersonId = newPersonId;
                    currentName = 
                    itemObject = new JSONObject();
                    currentContent = new StringBuffer();
                // Add trip's date to the content
                        "TRIP.DEPDATE").toString() +
                hasNext = tripDataProvider.cursorNext();
            // write out data for last person
            itemObject.put("label", currentName);
            itemObject.put("content", currentContent.toString());
            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.

Thursday Aug 03, 2006

jMaki, the Spry Accordion Widget, and Java Studio Creator Projects

Note: See Using jMaki 9.3 With the NetBeans Visual Web Pack or the Sun Java Studio Creator IDE for updated instructions on how to add jMaki to a project.

One of the widgets in the jMaki zip is the Spry Accordion. I thought this would be a nice way to display a page fragment menu in an application that I am building using the Sun Java Studio Creator IDE. Here is how I used the jMaki tag library to add the Accordion widget to my page fragment.

1. First, I downloaded the latest jMaki zip from I used 3.2.6.

2. Just like with my earlier project, I unjared the jar file and copied the necessary files to my project:

  • jmaki/resources/jmaki.js to creator-project-dir/web/resources.
  • jmaki/WEB-INF/ to creator-project-dir/web/WEB-INF.
  • jmaki/WEB-INF/lib/ajax-wrapper-comp.jar to creator-project-dir/web/WEB-INF/lib.
  • jmaki/resources/spry/plainAccordion to creator-project-dir/web/resources/spry/plainAccordion.

3. Additionally, I added a resources/libs directory and copied over the Spry libraries from jmaki/resources/libs/spry.

4. I added a pageFragment, Sidebar.jspf, to my project, and in the JSP file for my page fragment, I added xmlns:a="" to the top-level <div> tag.

5. In the page fragment, I used a Group Panel component to wrap the jMaki tag. The JSPF file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<div style="height: 400px; width: 200px; -rave-layout: grid" 
    <f:subview id="Sidebar">
        <ui:panelGroup binding="#{Sidebar.groupPanel1}" 
            style="height: 382px; left: 0px; top: 0px; position: absolute; width: 190px">
                <a:ajax type="spry" name="spry.plainAccordion" />       


6. I wanted each section in the accordion to resize to the section's content. The samples that you get when you download the components from Adobe come with an AquaAccordion style that does not set a section height. To save some time, I simply copied those styles to the resources/spry/accordion/components.css file.

.AquaAccordion {
	border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;
	overflow: hidden;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;

.AquaAccordion .Tab {
	height: 24px;
	background-image: url(images/aqua-gradient.gif);
	background-repeat: repeat-x;
	background-color: #6dc1fc;
	border-top: solid 1px black;
	border-bottom: solid 1px gray;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	text-align: center;

.AquaAccordion .Content {
	overflow: auto;
	margin: 0px;
	padding: 0px;
	background-image: url(images/gray-gradient.gif);
	background-repeat: repeat-x;

.AquaAccordion .hover {
	background-image: none;
	background-color: #33CCFF;

7. Now I can design my Accordion widget menu. In this simple example, I hard-coded the menu contents in my resources/spry/accordion/components.htm file. Note that because I am using the overriding styles, I am using Panel instead of AccordionPanel, Tab instead of AccordionPanelTab, and so forth.

<div id="${uuid}" class="AquaAccordion" tabindex="0">
    <div class="Panel">
        <div class="Tab">
            <div class="Label">Fruit</div>
        <div class="Content">
            <a href="faces/FoodDetail.jsp?name=banana">Banana</a><br/>
            <a href="faces/FoodDetail.jsp?name=papaya">Papaya</a><br/>       
            <a href="faces/FoodDetail.jsp?name=grapes">Grapes</a><br/>   
    <div class="Panel">
        <div class="Tab">
            <div class="Label">Vegetables</div>
        <div class="Content">
            <a href="faces/FoodDetail.jsp?name=avocado">Avocado</a><br/> 
            <a href="faces/FoodDetail.jsp?name=sprouts">Brussel Sprouts</a><br/>
            <a href="faces/FoodDetail.jsp?name=asparagus">Asparagus</a><br/>       
            <a href="faces/FoodDetail.jsp?name=onion">Onion</a><br/> 
    <div class="Panel">
        <div class="Tab">
             <div class="Label">Grains and Cereal</div>
        <div class="Content">
            <a href="faces/FoodDetail.jsp?name=rice">Rice</a><br/> 
            <a href="faces/FoodDetail.jsp?name=macaroni">Macaroni</a><br/>


8. To make the content sections shrink to fit the content, you must turn off animation, so I modified the widget creation statement in component.js as follows:

var acc1 = new Spry.Widget.Accordion(widget.uuid, { enableAnimation: false });

9. I can now add this page fragment to all the pages in my application.




« April 2014