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.