This year, Brian Leonard, and I (diva #2) are putting on the Developing (J)Ruby on Rails Applications with the NetBeans™ IDE hands-on lab at JavaOne. If you haven't tried developing a web application using Ruby on Rails, this is a good opportunity to get your feet wet. For those of you who are familiar with Ruby but haven't tried it in the IDE, you will also find this lab helpful. In this lab, you build the classic Ruby web log, you access the FreeTTS Java API to speach-enable the application, and you deploy the application to the GlassFish application server.

Speaking of JavaOne, in last year's hands-on-lab, one of the exercises was to use Dynamic Faces to build a chat room application. This section has been turned into the Building an Ajax Chat Room with the Ajax Transaction Dynamic Faces Component tutorial which is available from the NetBeans Web Application Learning Trail.

About the picture. Right behind me is flowing lava. To be able to walk right up to 1200 degree Celsius lava flow was an awesome experience. Fortunately, because the lava contains a large amount of glass, the lava flows very slowly.

Here is a mini-tutorial for creating a Popup window for the user to lookup values. One scenario that you might use this for is when the page visitor needs more information then can be displayed in a drop-down list.

This is a rewrite of a previous blog entry that was written for the Sun Java Studio Creator IDE. I have modified the steps so that it works for the NetBeans 6.0 IDE.

1. Create a web application project with the Visual Web JavaServer Faces framework.
   
   
2. Add a page named Popup.
   
   
3. Add a Table component to the page.
   
   
4. Drag VIR > Tables > State from the Services window and drop it on the table.
   
   
5. Right-click the Table component and choose Table Layout from the pop-up menu.
   
   
6. In the column for the STATE.STATEID database field, set the Component Type to Hyperlink, and click OK.
   
   
7. Select the Hyperlink component so that its properties appear in the Properties window.
   
   
8. Set the value for the onClick property to doSave('#{currentRow.value['STATE.STATEID']}')
   
   (I got the value to pass to doSave() from the Value Expression in the Table Layout dialog).
   
   
9. Drag a Script component from the Advanced section of the Palette and drop it on the page.
   
   
10. Click JSP in the editing toolbar to view the JavaServer Pages script.
    
    
11. In the JSP page, change the <webuijsf:script> tag as shown below.
    
    

    <webuijsf:script binding="#{Popup.script1}" id="script1"> <![CDATA[ function doSave(val) { window.opener.setVal(val); window.close(); }]]> </webuijsf:script>

    
    
    The Popup page is now ready for use by another page.
    
    
12. Create a new page called Form1. Make it be the start page.
    
    
13. Drag a Text Field component and drop it on the page. In the Properties window, make sure the id is set to textField1.
    
    
14. Drop a Hyperlink component on the page, just above the text field, and set the text property to State Code.
    
    
15. Set the url property to /faces/Popup.jsp.
    
    
16. Set the onClick property to doPopup('form1:textField1_field')
    
    Note: Here you are passing the id of the field to fill with the selected value. Determining the id can be tricky. To determine what to use for the id, run the application, and use a tool such as Firebug to inspect the DOM.
    
    
17. Click the ... button for the target property to open the target property editor.
    
    
18. In the property editor, click New and set both the Display and Value to popup. Click OK and click OK again.
    
    Later you add script to open a window named popup, and this setting causes the Popup.jsp page to display in that window.
    
    
19. If the target property value is still blank, select popup from the value from the combobox for that property.
    
    
20. Drag a Script component from the Advanced section of the Palette and drop it on the page.
    
    
21. Click JSP in the editing toolbar to view the JavaServer Pages script.
    
    
22. In the JSP page, change the <webuijsf:script> tag as shown below.
    
    

    <webuijsf:script binding="#{Form1.script1}" id="script1"> <![CDATA[ function doPopup(destination) { popup = window.open("", "popup", "height=300,width=200,toolbar=no, menubar=no,scrollbars=yes"); destinationElement=document.getElementById(destination); popup.focus(); } function setVal(val){ destinationElement.value=val; }]]></webuijsf:script>

    
    
    
23. Run the project. Click State Code to open the popup window. Click a state code to select the code, close the popup window, and populate the text field.

I migrated the sample tutorial project that I created for the Sun Java Studio Creator IDE into a NetBeans IDE 6.0 web application that uses the Visual Web Java Server Faces framework. You can download this NetBeans IDE project from here. If the pages do not display in the Visual Designer (and you get an error page instead), do a clean build, then close and reopen the IDE.

Note that this project uses the JSF 1.4 versions of the Web UI components, and not the newer versions.

This sample project:

• Gets the data from an ObjectListDataProvider
• Has dropdown lists, checkboxes, and buttons in the table
• Has input fields that are not associated with the underlying data provider, so the input needs to be stored separately
• Calculates totals from the selected table rows
• Has dynamic footer information

When you click a detail button, the button's action method uses a tableRowGroup method to get the row key for the row that the button is in. The method then uses the row key to get the value for the foodId column, which it saves in the request bean for use by the detail page.

    public String showDetailBtn_action() {
        // Find out what row was clicked
        RowKey rowKey = tableRowGroup1.getRowKey();
        // Save food id so detail page knows what food item to show
        // provide detail info for
        getRequestBean1().setFoodId(
          getSessionBean1().getFoodListDataProvider().
          getValue("foodId", rowKey).toString());
        return "detail";
    }

The checkbox column is not bound to any column in the dataprovider, but is instead bound to a page property named selected. The getter and setter use a TablePhaseListener object to manage which checkboxes are selected.

    public void setSelected(Object object) {
        RowKey rowKey = tableRowGroup1.getRowKey();
        if (rowKey != null) {
            tablePhaseListener.setSelected(rowKey, object);
        }
    }

    /**
     * Getter for selected.
     * @return Object value for the current row's checkbox
     */
    public Object getSelected() {
        RowKey rowKey = tableRowGroup1.getRowKey();
        return tablePhaseListener.getSelected(rowKey);
    }

Winston explains how to do this as well as how to highlight the rows that are selected in his How to Create Muli-Row Selectable Table Component blog.

To calculate calories, the Calculate Calories button's action method calls a method that iterates over the tableRowGroup object's selectedRowKeys to accumulate the total calories for the selected rows.

    public String calculateCaloriesBtn_action() {
        getSessionBean1().setTotalCalories(getTotalCalories());
        return null;
    }

    public String getTotalCalories() {
        int total = 0;
        // Go through the list of selected rows
        Integer calories;
        Integer nbrServings;
        FoodListDataProvider foodListDP =
          getSessionBean1().getFoodListDataProvider();
        RowKey[] selectedRowKeys =
          getTableRowGroup1().getSelectedRowKeys();
        for (int i = 0; i < selectedRowKeys.length; i++) {
            String rowId = selectedRowKeys[i].getRowId();
            RowKey rowKey = foodListDP.getRowKey(rowId);
            // get serving size
            String size = (String)
              getSessionBean1().getServingSizeMap().get(rowId);
            // get calories for serving size
            calories = (Integer) foodListDP.getValue(size, rowKey);
            // get number of servings
            nbrServings = (Integer)
              getSessionBean1().getNbrServingsMap().get(rowId);
            // add to total
            total += calories.intValue() * nbrServings.intValue();
        }
        return Integer.toString(total);
    }

The Nbr Servings text field and Serving Size drop down list are also not bound to the underlying data provider. I created Map objects to store the values for each row and bound the components to session bean properties.

    
    /**
     * Getter for property nbrServings.
     * @return Value of nbrServings for current row
     * defaults to 1
     */
    public Integer getNbrServings() {
        TableRowDataProvider rowData = 
          (TableRowDataProvider) getBean("currentRow");
        if (rowData == null) {
            return new Integer(1);
        } else {
            String rowId = 
              rowData.getTableRow().getRowId();
            Integer nbrServingsValue = 
             (Integer) this.getNbrServingsMap().get(rowId);
            if (nbrServingsValue == null) {
                return new Integer(1);
            } else {
                return  nbrServingsValue;
            }
        }
    }
    
    /**
     * Setter for nbrServings for current row
     * @param nbrServings New value of nbrServings.
     */
    public void setNbrServings(Integer nbrServings) {
        TableRowDataProvider rowData = 
          (TableRowDataProvider) getBean("currentRow");
        if (rowData != null) {
            String rowId = rowData.getTableRow().getRowId();
            this.getNbrServingsMap().put(rowId, nbrServings);
        }
    }
    
    /**
     * Getter for servingSize.
     * @return Value servingSize for current row
     * Defaults to cup
     */
    public String getServingSize() {
        
        TableRowDataProvider rowData = 
         (TableRowDataProvider) getBean("currentRow");
        if (rowData == null) {
            return "cupCalories";
        } else {
            String rowId = rowData.getTableRow().getRowId();
            String servingSize = 
             (String) this.getServingSizeMap().get(rowId);
            if (servingSize == null) {
                return "cupCalories";
            } else {
                return  servingSize;
            }
        }
    }
    
    /**
     * Setter for servingSize for current row
     * @param servingSize New value of property servingSize.
     */
    public void setServingSize(String servingSize) {
        TableRowDataProvider rowData = 
         (TableRowDataProvider) getBean("currentRow");
        if (rowData != null) {
            String rowId = rowData.getTableRow().getRowId();
            this.getServingSizeMap().put(rowId, servingSize);
        }
    }
    
    /**
     * Holds value of property nbrServingsMap.
     */
    private Map nbrServingsMap = new HashMap();
    
    /**
     * Getter for property nbrServingsMap.
     * @return Value of property nbrServingsMap.
     */
    public Map getNbrServingsMap() {
        
        return this.nbrServingsMap;
    }
    
    /**
     * Setter for property nbrServingsMap.
     * @param nbrServingsMap New value of property nbrServingsMap.
     */
    public void setNbrServingsMap(Map nbrServingsMap) {
        
        this.nbrServingsMap = nbrServingsMap;
    }
    
    /**
     * Holds value of property servingSizeMap.
     */
    private Map servingSizeMap = new HashMap();
    
    /**
     * Getter for property servingSizeMap.
     * @return Value of property servingSizeMap.
     */
    public Map getServingSizeMap() {
        
        return this.servingSizeMap;
    }
    
    /**
     * Setter for property servingSizeMap.
     * @param servingSizeMap New value of property servingSizeMap.
     */
    public void setServingSizeMap(Map servingSizeMap) {
        
        this.servingSizeMap = servingSizeMap;
    }
    

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.

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 couple of months ago, JB blogged about how to use the Sun Java Studio Creator tutorial to learn about using Hibernate with the Visual Web Pack. We are happy to announce that there is now a Using Hibernate With the Visual Web Pack tutorial. Not only does this show how to use the Hibernate framework in a Visual Web application, it also shows how to use ObjectListDataProvider objects and how to fill an Options array for list-type components.

We just published a new Visual Web Pack tutorial, Generating Reports and PDFs From a Web Application that shows how use JasperReports to generate HTML and PDF reports from a data source. JasperReports is a reporting tool that outputs reports in HTML, PDF, XLS, CSV, and XML formats. This tutorial provides code, which you can copy to any project's application bean, that fills a report with the same query result that you use to populate the JavaServer Faces components on a page. The tutorial also shows how to modify the build script to compile the JasperReport templates.

Thanks to Craig Conover and Marina Sum who forged the trail with their tutorial on using JasperReports with the NetBeans IDE, and to Craig McClanahan who made sure my sample code followed the "best practices".

Geertjan just blogged on a JasperReports Visual Designer for the NetBeans IDE. I look forward to exploring this designer and finding out how this designer integrates with Visual Web applications.

We just posted the http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/reports.html tutorial to the Sun Java Studio Creator Tutorials web site. This tutorial works for the Visual Web Pack with the following changes.

• Throughout
  • The source is in src/java instead of just src.
• Creating a JasperReports Library
  • Step 3: the library type is "Class Libraries"
  • For the Sun Java System Application Server, you must also add the commons-beanutils, commons-collections, and commons-logging jars to the library.
• Setting Up the JRXML Editing Environment
  • Step 2: Click Advanced Options, then expand Options > IDE Configuration > System > Object Types to get to XML Objects.
• Creating the Project and Authorizing Access to the JasperReport Classes
  • Create a Visual Web Application and use the BluePrints structure.
  • You do not need to do steps 5 through 10 for the Sun Java System Application Server.
• Creating the Database Query
  • Also clear the LASTEDUPDATED column from each table.
• Setting Up the Report Resources
  • To add the second source directory for the JRXML files, switch to the Files window.
  • Right-click the project node, and select New > Folder.
  • Set the folder name to reports.
  • Set the parent folder to src (that is, the "src" directory inside the project) so that this node will be parallel to src/java.
  • Click Finish. Note that the directory is only visible on the files view.
  • Right-click the project name, and select Properties.
  • Click Add Folder, navigate to the src/reports node, and click Open.
  • Change the Label from the default (src/newfolder) to something meaningful, such as JasperReports Definitions and click OK.
  • Switch back to the Projects window, and you will see this new node, with a <default package> node underneath it.
  • Put the JRXML files under the <default package> node (that is, into directory src/reports).