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.

jMaki beta is out and there is a wonderful NetBeans plug in that works with the NetBeans standard web application project. You can use this plug in with a Visual Web application, but it takes a little more work. Work is in progress for a plug in that facilitates the use of jMaki widgets in a Visual Web application. In the meantime, here are some steps to illustrate how to use jMaki technology.

In this example you add a Spry Accordian widget to a sidebar page fragment. The following steps are similar to a jMaki sample project for the Sun Java Studio Creator IDE.

Note: I modified this a bit on 12/15 based on feedback from Craig, Ken, and Greg. Most notably, you do not need to use the f:verbatim tag if you are using the jmaki-jsf tag library. Also, because this sample modifies the templates, I added steps to create a new namespace for the widget so that you don't have to modify the original templates.

Warning: jMaki APIs are still being refined, so it's "use at your own risk".

1. If you haven't already, download the NetBeans jMaki plug in from https://ajax.dev.java.net/jmaki-plugin.html. The installation instructions are on this page as well. (While you are on that page, you should check out the screencast.) Note that there is a link on the download page to an Ajax update center NBM you can install, which will give you access not only to jMaki but other stuff like the Phobos plugin too.
   
   
2. It is recommended that you use jMaki with Glassfish (Sun Java System Application Server 9). I have successfully used it with version 8. I have not tried it out with other servers so I can't say whether it would work or not. If you have not installed the Sun Java System Application Server 9, see the Visual Web Pack Installation Instructions.
   
   
3. The easiest way that I can see to make the jMaki files available for a Visual Web application is to create a jMaki web application project from which you can copy the necessary files.
   
   In the main menu, choose File > New Project. Select Web in the Categories pane, select Web Application in the Projects pane, and click Next.
   
   
4. Name the project StdjMaki, select Sun Java System Application Server for the Server and select Java EE 5 for the Java EE Version, and click Next.
   
   
5. Select jMaki Ajax Framework and click Finish.
   
   
6. Now, you can create a Visual Web project. In the main menu, choose File > New Project. Select Web in the Categories pane, select Visual Web Application in the Projects pane, and click Next.
   
   
7. Name the project VWjMaki, select Sun Java System Application Server for the Server, select Java EE 5 for the Java EE Version, and click Finish.
   
   
8. In the Projects window, right-click the VWjMaki node and choose Set Main Project.
   
   
9. In the Projects window, right-click Libraries, and choose Add Library. In the Add Library dialog box, select jMaki Library and click Add Library.
   
   
10. In the Projects window, copy the following files and folders from StdjMaki to VWjMaki. Note: I am just having you copy what you need for the Spry Accordion widget. If you want, you can copy all the folders under resources.
    
    
    • All the files (not folders, just files) in StdjMaki/Web Pages/resources to VWjMaki/Web Pages/resources. To be honest, I don't if all of the files are required.
      
      
    • StdjMaki/Web Pages/libs/spry to VWjMaki/Web Pages/libs/spry.
      
      
    • StdjMaki/Web Pages/resources/spry/plainAccordion to VWjMaki/Web Pages/resources/spry/plainAccordion.
    
    
    
11. In this example, you customize the plainAccordion widget, so you want the customized widget to be in its own namespace. Expand VWjMaki > Web pages > resources > spry >, copy plainAccordion, paste the copy into the same folder, and rename the copy myAccordion.
    
    You are now done with the setup.
    
    
12. In the Visual Designer, drag a Page Fragment Box from the Layout section of the Palette and drop it in the top left corner of the page. A Select Page Fragment dialog box appears.
    
    
13. Click Create New Page Fragment.
    
    
14. Type Sidebar in the Name textbox, click OK, and click Close.
    
    
15. Double-click the empty page fragment to open it in the Visual Designer.
    
    
16. Drop a Group Panel component on the top left of the page. I like to put my jMaki widgets inside of grid panels or group panels so that I can position them and visually see where they go in the Visual Designer.
    
    
17. Click JSP to view the JSP tags for the page.
    
    
18. Add xmlns:a="http://java.sun.com/jmaki-jsf" to the top-level <div> tag.
    
    
19. Nest the jMaki tag inside the panelGroup tag as shown below:

    <webuijsf:panelGroup binding="#{Sidebar.groupPanel1}" 
      id="groupPanel1" 
      style=
      "height: 382px; left: 0px; top: 0px; position: absolute; width:190px">
        <a:ajax type="spry" name="spry.myAccordion" />       
    </webuijsf:panelGroup>
     

20. Copy the following styles to resources/spry/myAccordion/components.css. This is to make the accordion 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.

    .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;
    }
    
    

21. Replace the contents of resources/spry/myAccordion/components.htm with the following.

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

22. Modify the widget creation statement in component.js as follows to turn off the animation. This makes the content sections shrink to fit the content:
    
    var acc1 = new Spry.Widget.Accordion(widget.uuid, { enableAnimation: false });
    
    
23. Run and test the project. You might have to resize the group panel, the page fragment, and the page fragment box on Page1 to propery display the accordion widget.

If you want to play around some more, look at this blog on using the dojo ComboBox. It was written for the Sun Java Studio Creator IDE, but once you do the setup as above, the steps are pretty much the same.