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

If you would like the components to remain centered on a page when the browser is resized, try this trick.

1. Open the Web Pages > resources > stylesheet.css style sheet and add the following style definitions. You will use these styles to define the colum styles in a three column grid panel.
   

   .ctrFirstColumn {    width: 10%; } .ctrSecondColumn {    width: 80%; } .ctrThirdColumn {    width: 10%; }

   
   



2. Set the widths percentages to what works for your page.
   
   
   
   


3. Save the changes, then close and reopen the IDE, so that the IDE picks up the new styles.
   
   
   
   


4. Add a Grid Panel to the page in the top left corner.
   
   
   
   
   


5. In the Properties window, click the ellipsis (...) button for the style property. Select Position, set both the Width and Height to 100%, and click OK.
   
   
   
   


6. Set the columns property to 3.
   
   
   
   


7. Click the ellipsis (...) button for the columnClasses. Select ctrFirstColumn and click the > button. Repeat for ctrSecondColumn and ctrThirdColumn. Click OK. These styles are applied to the columns in the grid panel in the order that you list them.
   
   
   
   


8. Drop something into the first column, such as a blank Static Text component. As you drop each component into the Grid Panel, it occupies the first available column, so the first component that you drop goes in the first column, the second component goes in the second column, the third component goes in the third column, and the fourth component goes in a new row in the first column. A blank Static Text component is an easy way to occupy the left and right margins with a non-visible component.
   
   
   
   


9. For the center column, drop a component from the Layout section, such as a Grid Panel or a Layout Panel. This is the component that you will use to layout all the components in the page. You can nest the layout components as necessary in order to achieve the right layout.
   
   
   
   You most likely want to set the width properties of the layout components to 100% or some other percentage value instead of using pixel sizes.
   
   


10. When you add a Table component, set its width property to 100% or some other percentage value. (See the tips in the Laying out Multiple Table Components blog entry.) One thing to remember, is that whenever you work with the table layout, you have to check to make sure that the IDE did not change the width property back to a pixel width. If you find that your middle panel is not centering, check the width values of the Table components to make sure they are set to percentages.
    
    
    


11. Drop a blank component, such as a blank Static Text component, to occupy the right column.
    
    
12. Run the web app and resize the width of the browser. The components should remain centered.
    

In an earlier blog, we showed how to build coordinated drop down lists in a NetBeans Visual Web application. One problem with the techniques in that blog you is that you have to submit the whole page whenever a new selection is made from any of the drop down lists. If you have other components that get validated on page submission, it gets a bit messy, as you have to distinguish between when the page is submitted because of a new list selection and when the user is actually submitting the form.

The Dynamic Faces component library provides a solution to this problem. You can put the Drop Down List components in a Dynamic Faces Ajax Zone so that only the input from those components is sent to the server (as part of an Ajax request) when the user makes a new drop down selection. You can also specify which components to rerender when the server returns the Ajax response.

The following steps show how to do this using the tables from the sample Travel database. This example involves a coordinated person-trip-flight selection and the detail data for the selected flight. When you select a new person, the trip drop-down list shows all the person's trips and pre-selects the first trip on the list. The flight drop-down list shows all the flights for the selected trip, and pre-selects the first flight on the list. The page also redisplays the detail data for the selected flight. All other fields are not touched unless the whole page is submitted.

Install the Dynamic Faces Component Library

If you haven't already done so, you need to install the Dynamic Faces component library into the NetBeans IDE. Follow the steps in the Installing the Dynamic Faces Component Library section of the Installing the Currency Trader Sample Application tutorial.

Set Up the Project

1. Create a new Visual Web Application project named DynaDropdowns.
   
   
2. Add the Dynamic Faces component library to the project by right-clicking Component Libraries in the Projects window and choosing Add Component Library. Select the entry for Dynamic Faces Components and click Add Component Library.
   
   
3. If you haven't already, connect to the Visual Web Pack sample travel database. Switch to the Runtime window, expand Databases, right-click the node for the travel database, and choose connect. Type travel for the password, and click OK. (The travel database is supplied by default if the Sun Java System Application Server was added to the IDE before you installed the Visual Web Pack. If you do not see the travel database, then check out the Installation Instructions).
   
   

Add an Entry for the Dynamic Faces Lifecycle Object to the Deployment Descriptor

Dynamic Faces provides a custom Lifecycle object that enables the JavaServer Faces lifecycle to handle Ajax transactions and to re-render portions of a component tree without requiring a full-page refresh.

To make the runtime aware of the custom Lifecycle object:

1. In the Projects window, expand Web Pages and expand WEB-INF.
   
   
2. Double-click web.xml to open it in the editing window.
   
   
3. In the editing toolbar, click Servlets.
   
   
4. Click the Add button that appears under Initialization Parameters.
   
   
5. Type javax.faces.LIFECYCLE_ID in the Param Name text box, type com.sun.faces.lifecycle.PARTIAL in the Param Value text box, and click OK.
   
   
6. Close and save the file.
   
   

Add the Ajax Zone and Drop Down List Components

The Ajax Zone component arms its children with the capability of sending Ajax requests. In this example, you add the three Drop Down List components to an Ajax Zone. The default behavior for an Ajax Zone component is to submit, execute, and rerender all the components in the zone whenever there is an onclick event for an input component within the zone.

1. If necessary, click the tab for Page1 in the editing earea to bring the page into focus.
   
   
2. Expand the Dynamic Faces section in the Palette, then drag an Ajax Zone component from the Dynamic Faces section and drop on the upper-left corner of the page
   
   
3. In the Visual Designer, select the Ajax Zone component, and drag the bottom right sizing box down and to the right until the component is approximately 12 squares wide and 5 squares tall (that is, big enough to contain three Drop Down List components).
   
   
4. Drag a Drop Down List component from the Basic section of the Palette onto the upper left-hand corner of the Ajax Zone component. Make sure the outline of the Ajax Zone component is highlighted in blue before releasing the mouse button, so that the Ajax Zone component contains the Drop Down List component.
   
   
5. In the Properties window, type personDD in the text box for the id property, and type Person: in the text box for the label property.
   
   
6. Switch to the Runtime window and expand Databases > jdbc travel node > Tables. Drag the PERSON node and drop it on the personDD Drop Down List component.
   
   
7. Drag a second Drop Down List component and drop into the Ajax Zone component, placing it under the personDD Drop Down List component.
   
   
8. In the Properties window, type tripDD in the text box for the id property, and type Trip Id: in the text box for the label property.
   
   
9. Drag the TRIP node from the Runtime window and and drop it on the tripDD Drop Down List component.
   
   
10. Right-click the tripDD Drop Down List component and choose Bind to Data. In the dialog box, select TRIP.TRIPID for the Display Field, and click OK.
    
    
11. Drag a third Drop Down List component and drop into the Ajax Zone component, placing it under the tripDD Drop Down List component.
    
    
12. In the Properties window, type flightDD in the text box for the id property, and type Flight Id: in the text box for the label property.
    
    
13. Drag the FLIGHT node from the Runtime window and and drop it on the flightDD Drop Down List component.
    
    
14. Right-click the flightDD Drop Down List component and choose Bind to Data. In the dialog box, select FLIGHT.FLIGHTID for both the Value Field and the Display Field, and click OK.
    
    
15. In the Outline window, double-click the SessionBean1 > tripRowSet node to open it in the Query Editor. In the Query Editor, right-click on the PERSONID cell in the first column and choose Add Query Criteria. Select the Parameter radio button, click OK and close the Query Editor.
    
    
16. Do the same for the flightRowSet, but add the query criteria for the TRIPID. Close the Query Editor.
    
    

Add a Flight Detail Property List

You next add a Property List component to display the flight details, and you configure the Ajax Zone to render the Property List in addition to the components in the Ajax Zone.

1. Once again, drag the FLIGHT node from the Runtime window, but this time drop it on a blank spot on the page. A dialog box appears. Select the radio button for creating a flightRowSet in the Page1 page bean, and click OK. Close the Query Editor.
   
   I chose to put the other queries in the session bean because I didn't want to lose the query data everytime the page is submitted. As the detail data pretty much changes on each submission, I am choosing to put this rowset in the page bean.
   
   
2. In the Outline window, select Page1 > flightDataProvider1 (not flightDataProvider). Then, in the Properties window, type detailFlightDataProvider in the id text box. By changing the name, it is easier to tell the two FLIGHT data providers apart.
   
   
3. In the Outline window, double-click the page1 > flightRowSet node. In the Query Editor, right-click on the FLIGHTID cell in the first column and choose Add Query Criteria. Select the Parameter radio button, click OK and close the Query Editor.
   
   
4. Drag a Property Sheet component from the Layout section of the Palette, and drop it on the lower-left corner of the page. Do not drop it inside the Ajax Zone component.
   
   
5. In the Outline window, expand propertySheet1 and select the section1 node. In the Properties window, type Flight Information in the text box for the label property.
   
   
6. In the Outline window, expand section1, and select property1.
   
   
7. In the Properties window, change the label property to Airline:.
   
   
8. Drop a Static Text component on property1 in the Outline window.
   
   
9. Expand property1, right-click staticText1, and choose Bind to Data.
   
   
10. Choose detailFlightDataProvider (not flightDataProvider) from the drop-down list, select FLIGHT.AIRLINENAME, and click OK.
    
    
11. If you want, you can add more Property components to the Property Sheet Section, add Static Text components to the Property components, and bind the Static Text components to other columns in the database table, as I did in the above screenshot.
    
    
12. Now, you need to add the property sheet to the list of components to rerender after the Ajax response is returned. Select the Ajax Zone component, and notice that the render property is blank. When this property is blank, the default behavior is to rerender all the components in the Ajax Zone. Type form1:propertySheet1,form1:ajaxZone1 in the text box for the render property. Note that you are supplying the client side ids.
    
    

Add the Remaining Form Fields

Now, add a Text Field and a Button component to the page. By doing this, you can see for yourself how the Ajax Zone is a partial page submit, whereas, when the button is clicked, the whole page is submitted.

1. Drag and drop a Text Field component on the page. Set its label property to Special Requests, and select the checkbox for the required property, to set it to true.
   
   
2. Drag a Button component onto the page, type Submit, and press Enter.
   
   
3. Drop a Message Group component on the right side of the Text Field component.
   
   

Add Methods for Coordinating the Drop Down Components

Add the following code to the backing bean for coordinating the drop-down lists and flight detail data. (See http://blogs.sun.com/divas/entry/coordinated_drop_down_lists for more information about coordinated drop-down lists).

1. In the editing toolbar, click Java, to switch to the source code for the page's backing bean.
   
   
2. Add the following code to the bottom of the source file, just before the final end brace (}):

   public void initFlightDropDown() { try { tripDataProvider.cursorFirst(); getSessionBean1().getFlightRowSet().setObject( 1, tripDataProvider.getValue("TRIP.TRIPID")); flightDataProvider.refresh(); tripDD.setSelected(tripDataProvider.getValue("TRIP.TRIPID")); } catch (Exception e) { error("Cannot switch trips"); log("Cannot switch trips", e); } } public void initFlightDetail() { try { flightDataProvider.cursorFirst(); // detail data is in the page bean flightRowSet.setObject( 1, flightDataProvider.getValue("FLIGHT.FLIGHTID")); detailFlightDataProvider.refresh(); flightDD.setSelected(flightDataProvider.getValue("FLIGHT.FLIGHTID")); } catch (Exception e) { error("Cannot switch flights"); log("Cannot switch flights", e); } }

3. Replace the prerender method with the following code:

   public void prerender() { if ( personDD.getSelected() == null ) { try { personDataProvider.cursorFirst(); getSessionBean1().getTripRowSet().setObject( 1, personDataProvider.getValue("PERSON.PERSONID")); tripDataProvider.refresh(); personDD.setSelected( personDataProvider.getValue("PERSON.PERSONID")); } catch (Exception e) { error("Cannot switch to selections"); log("Cannot switch to selections", e); } initFlightDropDown(); initFlightDetail(); } else { try { // Synchronize data providers with current selections personDataProvider.setCursorRow( personDataProvider.findFirst( "PERSON.PERSONID", personDD.getSelected())); tripDataProvider.setCursorRow( tripDataProvider.findFirst( "TRIP.TRIPID", tripDD.getSelected())); flightDataProvider.setCursorRow( flightDataProvider.findFirst( "FLIGHT.FLIGHTID", flightDD.getSelected())); // rowset for the detail flight is in the page bean flightRowSet.setObject( 1, flightDD.getSelected()); detailFlightDataProvider.refresh(); } catch (Exception e) { error("Cannot switch to selections"); log("Cannot switch to selections", e); } } }

4. Click Design to return to the Visual Designer, and double-click the personDD Drop Down List component to add and register a value change event handler for the component. Replace the method with the following code:

   public void personDD_processValueChange(ValueChangeEvent event) { try { getSessionBean1().getTripRowSet().setObject( 1, personDD.getSelected()); tripDataProvider.refresh(); } catch (Exception e) { error("Cannot switch person id"); log("Cannot switch person id", e); } initFlightDropDown(); initFlightDetail(); }

5. Click Design to return to the Visual Designer, and double-click the tripDD Drop Down List component to add and register a value change event handler for the component. Replace the method with the following code:

   public void tripDD_processValueChange(ValueChangeEvent event) { try { getSessionBean1().getFlightRowSet().setObject( 1, tripDD.getSelected()); flightDataProvider.refresh(); } catch (Exception e) { error("Cannot switch trips"); log("Cannot switch to trips", e); } initFlightDetail(); }

6. Click Design to return to the Visual Designer, and double-click the flightDD Drop Down List component to add and register a value change event handler for the component. Replace the method with the following code:

   public void flightDD_processValueChange(ValueChangeEvent event) { try { flightRowSet.setObject( 1, flightDD.getSelected()); detailFlightDataProvider.refresh(); } catch (Exception e) { error("Cannot switch flights"); log("Cannot switch flights", e); } }

Test the Web Application

Click the Run Main Project button to test out the web application. Select different people, trips, and flights to see the partial form updates. Notice how even though the text field is required, you do not see any validation errors, because the Text Field component is not part of the partial page submission. However, if you submit the form by clicking the Submit button, an error message appears in the Message Group component if the text field is blank.

For More Information

• The Sun Web Developer Pack Tutorial: Project Dynamic Faces
• Adding Ajax to JavaServer Faces Technology With Dynamic Faces
• JSF-Extensions Wiki

I saw one of the best sessions on Thursday, Using Ajax With POJC (TS-9511). Craig talked about the various ways to Ajaxify plain old JavaServer Faces components and discussed the various challenges. One important point that he made is that you need to consider whether it is necessary to keep the client state and server state synchronized. The answer to this question can make a difference on what technology you choose. Jayashri followed with a quick demo on how easy it is to use Ajax4jsf to dynamically update one field based on the input in another, and then Matt did the same using Dynamic Faces. The session ended with a kick-butt demo by Matt, who built the Currency Trader application in 3 minutes 10 seconds, with music no less! (Note: I am extremely biased because these three are among my favorite engineers to work with).

They are redoing the talk on Friday, so don't miss it.

The AJax and JavaServer faces panel was another great session (TS-6713) because they were very interactive with the audience and answered some hard questions. The key takeaway for me was that you should not expect interoperability from the various Ajax JavaServer faces frameworks due to some issues with JavaScript, especially if the framework doesn't utilize namespaces well. At least not now. JSF 2.0, whenever that comes out, will include some Ajax features which hopefully will make it easier for these frameworks to play together.

Both of these talks discussed why you would want to use JSF components in your Ajax apps. The both mentioned that JSF offers accessibility, security, validation, conversion, and localization.

How many people does it take to make a hands-on lab? A whole lot! I want to thank everyone in this picture for their contribution to Lab 4460: Building Ajax-Enabled JavaServer Faces Web Applications With jMaki, Dynamic Faces, and the NetBeans IDE.. Winston gives links in his blog to this lab and other NetBeans labs that you can download now.

One of the sessions that I got a lot from was TS-6590 Killer JavaScript Technology Frameworks for Java Platform Developers. This session made Carla's earlier session on jMaki (TS-6375) more compelling. jMaki enables you to use different JavaScript frameworks without having to learn the various particulars of each framework.

Daniel McWeeny did a talk on using Ruby on Rails in a real-world application (TS-9144). He talked about how his company used Ruby to make a modern front end to legacy applications using limited resources and time. As I mentioned before, Gail is working on Ruby on NetBeans docs so I am looking forward to talking to her about this technology.

A customer recently sent email that he was having trouble migrating the Movie Administration Sample Application, originally written for Sun Java Studio Creator, into NetBeans Visual Web Pack. When he opened the project in VWP, he resolved the missing server error by setting the target server to the Bundled Tomcat server. Upon running the application, he received the following error message:

package javax.faces does not exist

This error indicates that the J2EE packages are not available to the Tomcat web server. The fix is to add the JSF 1.1 library to the project as follows:

1. In the Projects window, right-click the Project_Name > Libraries node and choose Add Library from the pop-up menu.
2. In the Add Library dialog box, select JSF 1.1 and click Add Library.

A second problem, an HTTP 500 Status error, occurred when deploying the application. The server log included this error:

java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config

• In the Projects window, right-click the Project_Name > Libraries node and add in the JSTL 1.1 library.

For more information on migrating projects, see Importing a Sun Java Studio Creator 2 Project in NetBeans Visual Web Pack 5.5.

Our newest Visual Web Pack tutorial, Using the Ajax Text Completion Component shows how build a web application that contains a text field component created using Java BluePrints Ajax technology. As you type in the text field, auto-completion is attempted based on a list of possible expansions provided by a 180,000-word English dictionary.

This tutorial is significant in that it not only provides a good use case for working with the Ajax Text Completion component, but also discusses how to work with a web service. The dictionary that the application uses is provide by a web service. To access the dictionary service client, you must download the Dictionary Service, deploy the DictionaryService.war to your application server, and then add the web service to your application. When you exercise the tutorial, however, note that there are minor differences in the web service code, depending on whether you are working with a Java EE 5 or J2EE 1.4 project.

This tutorial is tailored for use with the Sun Java Application Server PE 9.0 Update Release 1.

If you take a look at the tutorials on our VWP tutorials index page, you'll note that the tutorials are organized by category. On this page, we've organized those same tutorials into four learning trails to help you find a tutorial based on your skill level. The first trail covers the basics of creating a visual web application. From there, you move onto more advanced (and quicker-paced) trails on components, databases, and Ajax.

Trail 1: Creating a Basic Web Application

If you are new to visual web application development, follow this trail through the tutorials. These tutorials cover the basics of web application and do not require any prior experience working with an integrated development environment (IDE). After you complete these tutorials, you should be able to create your own working application that accesses a database.

• Tutorial 1: Developing a Web Application
• Tutorial 2: Understanding Scope and Managed Beans
• Tutorial 3: Using Databound Components to Access a Database
• Tutorial 4: Setting Up Page Navigation
• Tutorial 5: Using Page Fragments

Trail 2: Learning More About Components and Databases

These tutorials go into the nitty-gritty details about components and databases and require a bit more programming knowledge. The final tutorial takes a little more time to complete as it covers the common (albeit advanced) scenario of creating a CRUD application. By the time you have completed this trail, you should be able to create a more sophisticated web application.

• Tutorial 1: Delving Into Components
• Tutorial 2: Using List Components
• Tutorial 3: Using the File Upload Component
• Tutorial 4: Using the Calendar Component
• Tutorial 5: Building a Tree From Database Data
• Tutorial 6: Performing Inserts, Updates, and Deletes

Trail 3: Putting Ajax Into Action

If you've come this far, you're ready to work with the Ajax components. These components can make your web application appear more responsive (due to asynchronous refreshes of the page).

• Tutorial 1: Downloading and Importing Ajax and Other Components
• Tutorial 2: Using the Ajax Text Completion Component
• Tutorial 3: Using the Ajax Progress Bar Component
• Tutorial 4: Using the Ajax Map Viewer Component
• Tutorial 5: Using the Ajax Rating Component

Trail 4: Working With Third-Party Software

This trail is for you if you want to extend outside the bounds of Visual Web Pack and work with either the Hibernate or JasperReports frameworks.

• Tutorial 1: Using Hibernate With NetBeans Visual Web Pack
• Tutorial 2: Generating Reports and PDFs From a Web Application

The Sun Java Studio Creator community page has been live for several months, with some great user contributions. Now the VWP users have a place to contribute as well. The NetBeans Community Docs Wiki Page enables community members to submit tutorials, white papers, FAQs, tips and tricks, Flash demos, and blogs. The wiki page includes easy-to-follow instructions for submitting content. In addition, James Branam, the Community Docs Manager, includes tips for submitting content in his blog.

Thanks to Sapan Parikh, there is already a community-written VWP tutorial, Component Creation at Runtime Tutorial. This tutorial shows users how to create components, such as command buttons and input text, at run time. James has also written a nice spotlight on Sapan Parikh in his blog.

On a similar note, don't forget the Feedback buttons at the bottom of our tutorials. You can continue to send suggestions and questions on our VWP tutorials by clicking the button and filling out the form. All writers who work on the VWP tutorials receive the feedback. We try to respond as soon as possible, but sometimes it takes us a while to dig up the answer. We especially appreciate the thank yous you send us--it makes our day.

If you have technical questions outside the documentation, you can find more information from the the NetBeans Users alias, nbusers@netbeans.org. To subscribe to the alias, go to this page: http://www.netbeans.org/community/index.html.

We have yet another new tutorial, this one titled Building a Tree From Database Data. This tutorial shows how to build a two-page application, the first page of which includes a Tree component. You populate the first-level nodes in the Tree with names from a database, and the second-level nodes with the trips for that person. The trip nodes are links to a second page, which displays the details for that trip.

Our newest tutorial, Using the Calendar Component, describes how to work with the built-in Calendar component in the Basic section of the Palette. This tutorial provides good use cases for working with the Calendar component, including how to set the the minimum and maximum calendar date, how to verify that a date that the user selects falls within a range, and how to change the calendar style.

Another option for you to try is the Popup Calendar component in the BluePrints Ajax Component Library. The Popup Calendar component was designed to fix the limitations in the built-in Calendar. However, the Popup Calendar component is a prototype and might not fit seamlessly with the other components built into the IDE. For instructions on accessing the Popup Calendar component, see Downloading and Importing Ajax and Other Components.

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've published two new tutorials since our initial release on December 6.

• Using the Ajax Map Viewer Component. In this tutorial you import the Ajax Map Viewer component into NetBeans Visual Web Pack, then use Google's free map service API to create a custom map. The map includes marker text and a flag that pinpoints an address entered by the user.
  
  
• Performing Inserts, Updates, and Deletes. This tutorial shows you how to build a web application that can create, retrieve, update, and delete database rows. The application provides a drop-down list of master data along with a synchronized detail table. Users of the application can add to, update, and delete the records in the detail table and from its associated database.

Thank you for the many good suggestions and comments that you have provided us via the Feedback button at the bottom of our tutorials. Your input is important to us.