The divas talk about the new and cool features of the NetBeans IDE

Thursday Aug 09, 2007

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.

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.

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.

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

(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.

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

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.

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

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

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

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.

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

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

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

Click the Runtime tab to display the Runtime window.

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.)

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

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.

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.

Replace the query in the Query pane (the third pane down) with the following query.

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

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.

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.

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.

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.