If you have installed the NetBeans IDE support for Ruby and you are interested in integrating jMaki in your Ruby on Rails projects, here is a five-minute tutorial that will get you started. In this tutorial, you add a Yahoo data table to a Ruby on Rails view. (If you have not yet installed the NetBeans IDE 6.0 or if you need to add Ruby support to your NetBeans IDE, learn how to here.)

1. If you haven't installed the jMaki plugin for the NetBeans IDE, it takes just a minute. Select Tools > Plugins from the main menu, select jMaki Ajax Support, click Install and follow the instructions.
   
   
2. Follow the steps in the "Working With Ruby on Rails Files" section in the Getting Started With Ruby and Rails. This should take just a few minutes as no database is involved. Finish all the steps up to but not including the "Practicing What You Have Learned" subsection. It is important that you add the routing code (Code Sample 10) to the routes.rb file and delete the Public > index.html file.
   
   Note: If you already have done these sections, but added the jMaki plugin after you created the project, you need to create a new project in order to have jMaki included.
   
   
3. Edit the Views > item > index.rhtml file.
   
   
4. Remove the <table> including the nested <tr> and <td> tags. You will replace this HTML table with the Yahoo Data Table.
   
   
5. Choose Window > Palette from the main menu to view the Palette window.
   
   
6. Expand the jMaki Yahoo section in the Palette, then drag and drop the Data Table onto the index.rhtml.
   
   
7. Replace the jmaki_widget tag with the following code:
   
   

   <%= jmaki_widget 'yahoo.dataTable', :value => {:columns => [ { :label => 'Id', :id => 'id'}, { :label =>'Type', :id => 'type'}, { :label => 'Price', :id => 'price'}, ], :rows => @items } -%>

   
   
   
8. Click the small x button in the bottom right corner of the IDE to stop the WEBrick server.
   
   
9. Click the Run Main Project button and the browser should display a nice Yahoo table that contains the item data.

We have posted a draft of the first 2 sections of the Getting Started With Ruby and Rails tutorial. If you can take some time to look it over and give us feedback, please do.

For those of you who are new to using the NetBeans Ruby support, we would like to know:

• How is it so far for getting you started with using the product?
• Were the steps clear and complete? Did you stumble or have to try a step more than once to get it to work?
• Is it too much for introductory material? If so, what to remove. If not enough, what to include.
• Looking at the proposed table of contents, does it appear it will be complete? Too much?

For those of you who are experienced with Ruby, can you look for incorrect terminology or misinformation? Are the code examples ok?

To provide feedback on this tutorial, please send corrections, suggestions, and comments to the NetBeans Ruby Developers mailing list at dev@ruby.netbeans.org. Put "Getting Started Draft Feedback" in the subject line.

Yesterday, in our blog entry about using the Spry Accordion widget, we mentioned that it uses the same data model as the tabbed view and that you would swap out widgets. Today I will show you how simple it is to do so.

First, complete the steps from yesterday's mini-tutorial.

Next, open your Base jMaki project, and drag a Yahoo Tabbed View widget into index.jsp. Run the project to ensure that all the necessary files are copied into the  resources/yahoo folder.

Copy the resources/yahoo folder from the Base jMaki project and paste it into the resources folder of your Visual Web project.

Click JSP to view the JSP tags for Page1. Replace the following line:

<a:widget name="spry.accordion" value="#{SessionBean1.tripContent}"/>

with:

<a:widget name="yahoo.tabbedview"
  value="#{SessionBean1.tripContent}" />

Now click the Run Main Project button. You should see a tabbed view instead of the accordion.

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.

We have been blogging about jMaki for over a year, and, during that time, the technology has gone through many iterations, making most of our posts obsolete. With the release of 9.3, there became enough changes that it was time to start reposting these mini tutorials. So, to start, here are new instructions for adding jMaki to a Visual Web Application project or a Sun Java Studio Creator project.

Note: To learn about the modifications, see Carla Mott's Big changes in jMaki blog entry.

Aug 6, 2007 Update: With the later versions, such as 9.6.1, they abstracted some of the functionalities into a separate JSF Compounds library ( jsfcompounds-0.0.2.jar), which you can download from https://ajax.dev.java.net/servlets/ProjectDocumentList?folderID=7871. You must add this jar file to your classpath, by right-clicking the Libraries node in the Projects window, choosing Add Jar/Folder, navigating to and selecting jsfcompounds-0.0.2.jar, and clicking Open. A symptom of this missing jar file is getting the following error in the JSP editor: java.lang.NoClassDefFoundError: com/truchsess/faces/compound/webapp/CompoundChildTagBase

Doing the Set Up

1. Get the 9.3 jMaki zip. You can download it from http://ajax.dev.java.net/download.html.
   
   Note: There is also a NetBeans jMaki plug-in. In the past, we have written how to create a NetBeans jMaki project and copy the resources from that project into a Visual Web project. When I try it with the latest NBM, I get the following error: Unable to create an instance of jmaki.widgets.yahoo.tree.Widget. See the error log for more details. If I figure out what I am doing wrong, I will repost this with the added instrucitons.
   
   
2. Unzip it to a folder of your choice. I will refer to this folder as jmaki-dir.
   
   
3. Unzip the zip files in jmaki-dir/widgets for the desired widget libraries. In this mini tutorial, you will use the Tree widget from the Yahoo widget library, so, at a minimum, unzip the jmaki-yahoo zip so that you end up with jmaki-dir/widgets/resources/yahoo.
   
   
4. Create a project (if you are using the Visual Web Pack, create a Visual Web Application). In this example, I named mine Jmaki93Demo. I will refer to to the location of this project as project-dir.
   
   
5. Copy the supporting files to your project. You can use File > Add Existing Item to add files to your project. However, to cut down on the number of steps that I have to write up, I will explain up how to copy the files using the operating system instead of using the IDE.
   
   
   1. Copy jmaki-dir/scripts/glue.js to project-dir/web.
      
      
   2. Copy jmaki-dir/scripts/system-glue.js and jmaki-dir/scripts/jmaki.js to project-dir/web/resources.
      
      
   3. Copy jmaki-dir/core/web/resources/config.json to project-dir/web/resources.
      
      
6. In the Projects window right-click Libraries and choose Add Jar/Folder. Then, navigate to and select jmaki-dir/lib/ajax-wrapper-comp.jar, and click OK.
   
   This is the jMaki tag library.
   
   
7. Copy the desired widget resource libraries to jmaki-dir/widgets/resources. For this mini tutorial, you need to copy jmaki-dir/widgets/resources/yahoo to project-dir/web/resources.
   
   
8. In the IDE, click the JSP button in the editing toolbar to display the JSP tags for the page.
   
   
9. Add xmlns:a="http://jmaki/v1.0/jsf" to the <jsp:root> tag.

Adding the Yahoo Tree Widget

Now you are done setting up your project resources and you can add the Tree widget to your web page. One problem that you have to work around is that the jMaki widgets do not expose their features using the Design-Time API. What this means is that you will not be able to see the widgets in the Visual Designer. In addtion, with jMaki, you wrap the component in an <a:widget> tag. Even if you were to use a component from the Pallette, if you wrap the component in an <a:widget> tag, the Visual Designer won't see it. To make it easier to work with the widgets in the Visual Designer, I usually put them inside layout components, such as the Grid Panel. That way, I can position the widgets and be able to see in the Visual Designer where the jMaki widgets are on the page.

Note: Work is in progress to provide the jMaki widgets in component libraries that will work in the Visual Designer. We did a JavaOne Hands-On Lab that covered how this is done.

1. Click Design in the editing toolbar to return to the Visual Designer.
   
   
2. Drag a Grid Panel component from the Layout section of the Palette and drop it on the page.
   
   While in the development stage, I like to set the border property to 1 to make it easier to visualize the location of the widget on the page. You can clear the border property when you are ready to deploy.
   
   
3. Click JSP in the editing toolbar to display the JSP tags for the page. Replace the <h:panelGrid> tag with the following (this assumes that the Grid Panel's id is gridPanel1. If not, change to match. It is OK if you change the style tag.

   <h:panelGrid binding="#{Page1.gridPanel1}" border="1" id="gridPanel1" style="position: absolute; left: 48px; top: 48px"> <a:widget name="yahoo.tree" value="{'root' : { 'title' : 'Food', 'expanded' : true, 'children' : [ {'title' : 'Nuts'}, {'title' : 'Fruit', 'children' : [ {'title' : 'Banana'} ] } ] } }"/> </h:panelGrid>

   You now have added a jMaki tag for the Yahoo Tree widget.
   
   
4. Click the Run button. When the page displays in the browser, view the source from the browser to see how the jMaki tags are rendered.
   
   
5. In future blogs, we will further explore the jMaki features. To keep this blog short, we will just show how to subscribe to the Tree widget's onClick topic get the widget's value. If necessary, click Design in the editing toolbar to display the page in the Visual Designer. Drag a Script component from the Advanced section of the Palette and drop it on a blank spot on the page.
   
   
6. Click JSP to view the JSP tags.
   
   
   • If you are using the Sun Java Studio Creator IDE, replace the <ui:script> tag as follows:

     <ui:script binding="#{Page1.script1}" id="script1"> var handler = function(message) { alert('You selected ' + message.value.label); } jmaki.subscribe("/yahoo/tree/onClick", handler); </ui:script>

   • If you are using the NetBeans Visual Web Pack, replace the <webuijsf:script> tag as follows:

     <webuijsf:script binding="#{Page1.script1}" id="script1"> var handler = function(message) { alert('You selected ' + message.value.label); } jmaki.subscribe("/yahoo/tree/onClick", handler); </webuijsf:script>

7. If the script tag appears before the <a:widget> tag, cut the script tag and paste it below the <a:widget> tag, or else you might get a jMaki undefined error when you run the web application and click on a tree node..
   
   
8. Run the web application again. When you click on a tree node (not the expansion box), you get an Alert box that shows what you just clicked.

For those of you who were not able to attend our JavaOne 2007 hands-on lab, the lab is now available online at http://developers.sun.com/learning/javaoneonline/j1labs.jsp?track=8&yr=2007.

The lab starts off showing how to use dynamic faces Ajax zones to easily enable plain old JavaServer Faces components to send Ajax requests, and, in turn, dynamically update other components with the Ajax response. You also use an Ajax Transaction to continually poll the server. When you have completed the exercise, you have a simple chat room, like the one shown above. In the instructor-led lab, we had the web app running on the demo machine so you could watch us chatting with the lab attendees. The lab file contains an older version of the dynamic faces component library. To get the more recent one, see Installing the Currency Trader Sample Application at the NetBeans Visual Web Application documentation page.

In the second part of the lab, Winston and the Andersons show how to build a JavaServer Faces component from scratch, and use dynamic faces internally to Ajaxify the component.

The final section shows how to leverage jMaki to create a JavaScript component from one of the popular frameworks into a JavaServer Faces component. You can learn more about jMaki at ajax.dev.java.net and about the componentized widgets at widgets.dev.java.jet.

One of the things I have been working on for the last few months is writing about the Visual Web Pack Dynamic Faces component library that has been under development, and a very cool chat program that Matt designed to demonstrate this technology.

The Dynamic Faces technology, which comes from the JSF Extensions project, makes it extremely easy to Ajaxify plain old JavaServer Faces components.

The Visual Web Pack Dynamic Faces component library is now available from the NetBeans Update Center, along with another sample application that Matt wrote. To learn how to obtain and install the library and sample application, see Installing the Currency Trader Sample Application, available from the NetBeans Visual Web Pack documentation page.

If you are attending JavaOne 2007, and you are interested in Dynamic faces, here are some sessions, labs, and BOFs to check out:

• BOF-6825: Testing Web 2.0 Features, Using Real-World Applications by Prakash Narayan and Ed Burns
• TS-9511: Using Ajax With POJC (Plain Old JavaServer Faces Components) by Craig McClanahan and Matthew Bohm
• S288058: Building Ajax-Enabled JavaServer Faces Components and Web Applications With jMaki, Dynamic Faces, and the NetBeans IDE by Greg Murray, Craig McClanhan, Ludovic Champenois, and Roberto Chinichi. This presentation is at CommunityOne which is a free event.
• Lab-4460: Building Ajax-Enabled JavaServer Faces Components and Web Applications with jMaki, Dynamic Faces, and the NetBeans IDE, by me, Craig McClanahan, Matthew Bohm, Winston Prakash, and the Andersons.

Also, come by the NetBeans Visual Web Pack booth at the JavaOne pavillion to see demos of how easy it is to use the Dynamic Faces technology. Tell them Chris sent you .

For the past few months, I have been collaborating with a great group of people to bring you a fantastic hands on lab for JavaOne. This lab, session # LAB-4460 Building Ajax-Enabled JavaServer Faces Components and Web Applications With jMaki, Dynamic Faces, and the NetBeans IDE, was put together by Craig McClanahan, Matthew Bohm, Gail and Paul Anderson, Winston Prakash, and myself. It starts out by showing how to use Dynamic Faces (JSF Extensions) to add Ajax functionality to plain old JavaServer Faces components. It then teaches you how to build your own JSF Ajax-enabled component and add design-time features so that you can use it in the NetBeans Visual Web Pack. Last, it shows how to build a JSF component from a jMaki widget. By leveraging an existing jMaki widget and specialized base classes, you quickly build an Ajax-enabled JavaServer Faces component offering a rich user interface with a minimum of code.

They will also be handing out CDs of the hands on labs. The CDs contain additional labs including another lab (4420) that Craig, Matt, and I wrote that covers some of the above material as well as how to use the jMaki-wrapped DHTML Goodies Tooltip widget. In addition, the CD contains lab 4450. I contributed a section to this lab that shows how to use the jMaki-wrapped Dojo Fisheye widget.

A customer noticed a display problem with the Map Viewer component in the Firefox browser. The text in the "balloon" for the Map Marker component displays one word per line. So instead of

 This is the place!

as shown in the following figure, the text displays as

    This
    is
    the 
    place! 

Figure 1: Map Viewer Application

So for the example above, you would do the following:

1. From the BluePrints AJAX Support Beans section of the Palette, drag a Map Marker component and drop it anywhere on Page1.
   
   
2. In the Properties window for mapMarker1, set set the markup property to This is the place!
   

For a complete example, see the Map Viewer tutorial.

You can also set the non-breaking spaces programmatically. Here is the code that Matthew Bohn uses for the Map Viewer component in the component catalog to replace all spaces with non-breaking spaces ( ).

      public String button1_action() {
       ...
               String m = formatMarker(userPoint.toString());
               MapMarker marker = new MapMarker(latitude, longitude, m);
               this.mapViewer1.setMarkers( new MapMarker[] {marker} );
       ...
   }
      private String formatMarker(String text) {
       text = "<b>" + text + "</b>";
       text = "Location shown: <br/>" + text;
       text = text.replaceAll(" ", "&nbsp;");
       return text;
   }

Several customers have asked how to customize the controls in the Map Viewer component. For customization information, see the Custom Map Controls section of the Google Maps API Version 2 Documentation..

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.

Jennifer Ball just published two new jMaki tutorials, which you can read about in her blog. One of the tutorials shows how to use jMaki in JavaServer Faces projects, and it completes the information that I needed to figure out how to integrate a jMaki widget in a page built using the Java Studio Creator IDE. In particular, how to bind to a bean property, how to save off the widget's values, and how to make managed bean methods available for the AJAX requests.

So, here is a mini-tutorial on how to use jMaki to add a dojo AJAX combo box to a JavaServer Faces web page.

1. Download version 4 of the jMaki zip from https://ajax.dev.java.net/. There is a newer version, but it might have changes that would break this tutorial. I will update this post after I have done some testing.
   
   
2. Unzip the zip file, then unjar the JAR file and copy the following files to your project. To unjar the JAR file, you can use the jar xvf jMaki.war command, or you can rename the file to have a .zip extension and unzip it.
   
   
   • jmaki/resources/jmaki.js to creator-project-dir/web/resources.
   • jmaki/resources/dojo/combobox to creator-project-dir/web/resources/dojo/combobox.
   • The contents of the /resources/libs/dojo directory (not the whole dojo directory) to creator-project-dir/web/resources/libs/dojo/version.3.1.
   • jmaki/WEB-INF/lib/ajax-wrapper-comp.jar to creator-project-dir/web/WEB-INF/lib.
   
   
   Note: You might want to add the ajax-wraper-comp.jar to the IDE's library manager. Then, you can easily add the jMaki library to a project by right-clicking the Libraries node in the Projects window and choosing Add Library.
   
   
3. Create a project.
   
   
4. Add a Group Panel component to the page and position the component where you want the combo box to be.
   
   
5. In the editing area of the IDE, click JSP to view the JSP script.
   
   
6. Add xmlns:a="http://java.sun.com/jmaki-jsf" to the top-level <div> tag.
   
   
7. Inside the tag for the Group Panel component, add the jMaki ajax tag for the combo box . Wrap the a:ajax tag inside an f:verbatim tag, as shown below. Note that the service attribute is referring to ApplicationBean1. Later, you add the completeCountry() method to the application bean to return the list of choices.
   
   Notice: February 2007: jMaki is still evolving. I am working with the latest version from https://ajax.dev.java.net/jmaki-plugin.html. I am still experimenting, but I think instead of the service attribute you need something like value="#{ApplicationBean1.completeCountry}". Once I get it figured out, I will post a new entry.
   
   

   <?xml version="1.0" encoding="UTF-8"?> <jsp:root version="1.2" xmlns:a="http://java.sun.com/jmaki-jsf" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://www.sun.com/web/ui"> <jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/> <f:view> <ui:page binding="#{Page1.page1}" id="page1"> <ui:html binding="#{Page1.html1}" id="html1"> <ui:head binding="#{Page1.head1}" id="head1"> <ui:link binding="#{Page1.link1}" id="link1" url="/resources/stylesheet.css"/> </ui:head> <ui:body binding="#{Page1.body1}" id="body1" style="-rave-layout: grid"> <ui:form binding="#{Page1.form1}" id="form1"> <ui:panelGroup binding="#{Page1.groupPanel1}" id="groupPanel1" style="position: absolute; left: 24px; top: 48px"> <f:verbatim> <a:ajax id="cb1" name="dojo.combobox" service="ApplicationBean1-completeCountry.ajax" /> </f:verbatim> </ui:panelGroup> </ui:form> </ui:body> </ui:html> </ui:page> </f:view> </jsp:root>

   
   
   
8. In the Projects window, double-click the Application Bean node to open the code in the Source Editor.
   
   Note: In this mini-tutorial, you add the properties to ApplicationBean1, mostly to make the tutorial short. In your own applications, you might want to create a class that extends AbstractApplicationBean and use the Managed Beans node in the Projects window to make the class' properties available in application scope.
   
   
9. Add the following code to the bottom of the class (I got this from Jennifer's tutorial):
   
   
   

   private String[] countries =new String[] { "Canada", "France", "Uganda", "Ukraine", "United States of America", "United Kingdom", "Japan", "Korea", "Jamacia", "Thailand" }; private String[] countryCodes = new String[] {"CA", "FR", "UG", "UR", "USA", "UK", "JP", "KR", "JA", "TH" }; public void completeCountry(FacesContext context, String[] args,AjaxResult result) { result.setResponseType(AjaxResult.JSON); result.append("["); for (int loop=0; loop < countries.length; loop++){ result.append("[\"" + countries[loop] + "\",\"" + countryCodes[loop] + "\" ]"); if (loop < countries.length -1) result.append(",");} result.append("]"); }

   
   
   
10. Right-click in the code and choose Fix Imports.
    
    
11. Run and test the code. The countries should show up in the drop-down list and, if you type K, Korea should show up in the text box.
    
    
12. In the Projects window, double-click the Session Bean node to open it in the Source Editor. You will now add a property for storing the combo box's selection.
    
    
13. Add the following code to the bottom of the class:
    
    

    private String country = ""; public String getCountry() { return country; } public void setCountry(String country){ this.country = country; }

    
    
    
14. In the JSP for Page1, add the value="#{SessionBean1.country}" attribute to the ajax tag, as shown below.
    
    

    <a:ajax id="cb1" name="dojo.combobox" service="ApplicationBean1-completeCountry.ajax" value="#{SessionBean1.country}"/>

    
    
    
15. Click Design to switch to the Visual Designer.
    
    
16. In the Outline window, select the form1 node.
    
    
17. In the Properties window, set the value for the onSubmit property to jmaki.attributes.get('form1:cb1').saveState();.
    
    
18. Drop a Button component on the page and set it's text to Go.
    
    
19. Right-click in the page and choose Page Navigation.
    
    
20. In the Page Navigation editor, right-click and choose New Page. Click OK to accept the name Page2.
    
    
21. Click Page1.jsp to expand the icon, then drag from Button1 to Page2.jsp.
    
    
22. Double-click Page2.jsp to open it in the Visual Designer.
    
    
23. Drop a Static Text component on the page.
    
    
24. Right-click the component and choose Bind to Data. Click the Bind to an Object tab and select SessionBean1 > country (if, by chance, the property does not appear on the list, close and reopen the project and try again).
    
    
25. Add a Hyperlink component to the page and set its text to Back. Click the ... button for the component's url property, choose Page1, and click OK.
    
    
26. Click OK.
    
    
27. Run the application. Select a value and click Go. The selected value, which was saved to the session bean's country property, is displayed.
    
    
28. Click Back. Because the widget's value attribute is bound to the session bean's country property, the previously selected value is displayed.

To understand how the jMaki tags work, I highly recommend that you read both of Jennifer's tutorials.

We have received quite a few tutorial requests on how to display cross-tabular data in a web page. So, I imagine that many of you will be as excited as I am to hear about the upcoming Java Studio Creator & eBusiness Applications' Grid Ajax Component Webinar, which launches on Monday, August 28.

Using the Ajax-powered Nitobi Grid, you can display and edit tabular data in your web applications.

The on-demand webinar will be available through September 1 from https://sun.webex.com/sun/onstage/onstage/framesets/viewrecording1.php?EventID=346934662. There will also be an "Ask the Expert" session where presenters and engineers from both eBusiness Applications and Sun will be available to answer questions. Submit your question to http://java.sun.com/developer/community/askxprt/

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.

Joe, our man in Prague, collaborated with Matthew Bohm and developed a new Using the AJAX Progress Bar tutorial. The updated tutorial shows how to start and stop the progress bar without having to navigate to a new page. It also includes a new section on how to create a progress bar for an indeterminate process,which uses motion to show that a task is under way. The tutorial ends with a couple of challenges -- one to simulate a failed task, and another to change the style of the progress bar. Check it out.

Good news. We just released a new AJAX tutorial, Using the AJAX Rating Component. In this blog, Gail interviews Matthew Bohm, the developer who authored the Rating component. Matt had some interesting things to say about the Rating component and his other contributions to the Sun Java Studio Creator IDE. Be sure to read to the end of the blog, where we ask Matt about his interests outside of work.

Gail: Why do a Rating component?
Matt: We decided to write the Rating component for two reasons. First, it is one of the components used in the Java Pet Store. Second, AJAX is intrinsically part of the UI paradigm established by Rating components on the web; that is, they almost always use AJAX and provide a great use case for demonstrating AJAX.

Gail: Briefly explain the component.
Matt: The Rating component, of course, lets the user assign a rating to an item, such as a book or movie. It displays a row of stars the user can click on. It also can display controls to indicate the user is "not interested" in the item, to clear the rating, and to toggle between normal and average mode. There are properties for specifying the text and hover texts to be displayed. When the user assigns a rating, the client sends that rating to the server via an AJAX request, and the server sends the values of several properties back to the client via the AJAX response. There are also a number of advanced properties, including those that let you execute your own client-side scripting when the user assigns a new rating, mouses over a control, or toggles the mode.

Gail: The mode toggle feature is an innovation. Can you say more about it?
Matt: When I looked at rating controls on existing web sites, I was disappointed with how they presented the user's rating and the average rating in combination. In most cases, the user and average ratings for an item were shown in separate rating instances. In the case where they were shown in the same rating instance, the user could not view the average rating after assigning a user rating. I felt we could do better. So in the Rating component for the Java Studio Creator IDE, we have a mode toggle control that lets the user alternately view the user and average rating for an item within the same rating instance.

Gail: What's another of your favorite contributions to the Java Studio Creator IDE?
Matt: My biggest contribution is definitely the invention of virtual forms. Without them, writing applications in the IDE would be much more difficult. The team's sample application developers particularly like them.

Gail: You were a technical writer in a previous life, and we owe you a thanks for writing the script for the Rating tutorial.  What made you switch to development?
Matt: Actually, my technical writing career lasted only two months or so. I had my eye on development from the start. I was working in a data warehousing group and wrote a much-needed intranet application at a time when the development team was stretched for resources. The group's director, with whom I still keep in touch,
quickly moved me into development.

Gail: Tell me something about yourself not related to work.
Matt: I write classical music. Currently I'm setting some poems by the great Argentine poet Alejandra Pizarnik for soprano and piano. Pizarnik is not so well known; she died in 1972 at age thirty-six, and her poetry is dark and surreal. My wife, who is also a poet and Argentine, introduced me to her work. <