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 https://ajax.dev.java.net/. 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/types.properties 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="http://java.sun.com/jmaki" 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" xmlns:a="http://java.sun.com/jmaki" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://www.sun.com/web/ui"> <f:subview id="Sidebar"> <ui:panelGroup binding="#{Sidebar.groupPanel1}" id="groupPanel1" style="height: 382px; left: 0px; top: 0px; position: absolute; width: 190px"> <f:verbatim> <a:ajax type="spry" name="spry.plainAccordion" /> </f:verbatim> </ui:panelGroup> </f:subview> </div>

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> <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> </div> <div class="Panel"> <div class="Tab"> <div class="Label">Vegetables</div> </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> </div> <div class="Panel"> <div class="Tab"> <div class="Label">Grains and Cereal</div> </div> <div class="Content"> <a href="faces/FoodDetail.jsp?name=rice">Rice</a><br/> <a href="faces/FoodDetail.jsp?name=macaroni">Macaroni</a><br/> </div> </div> </div>

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.