Thursday Jan 03, 2008

Adding a Popup Window to a NetBeans 6.0 Visual Web Page

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">
    function doSave(val) {

    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">
    function doPopup(destination) {
     popup ="", "popup",
     "height=300,width=200,toolbar=no, menubar=no,scrollbars=yes");
    function setVal(val){

  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.

Thursday Sep 06, 2007

Table Component Sample Visual Web Project for NetBeans IDE 6.0

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
          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() {
        return null;

    public String getTotalCalories() {
        int total = 0;
        // Go through the list of selected rows
        Integer calories;
        Integer nbrServings;
        FoodListDataProvider foodListDP =
        RowKey[] selectedRowKeys =
        for (int i = 0; i < selectedRowKeys.length; i++) {
            String rowId = selectedRowKeys[i].getRowId();
            RowKey rowKey = foodListDP.getRowKey(rowId);
            // get serving size
            String size = (String)
            // get calories for serving size
            calories = (Integer) foodListDP.getValue(size, rowKey);
            // get number of servings
            nbrServings = (Integer)
            // 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 = 
            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;

Monday Jul 09, 2007

Centering Web UI Components on a Page

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.

Tuesday Jun 19, 2007

Apologies from the Divas

In an effort to make NetBeans content easier to find, we went back and applied the "netbeans" tag to all old posts that had information relevant to the NetBeans Visual Web Pack. We did not realize that Planet NetBeans would get flooded with our posts. Our apologies.

Tuesday Jun 05, 2007

Using Dynamic Faces for Coordinated Drop Down Lists

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 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 {
                        1, tripDataProvider.getValue("TRIP.TRIPID"));
            } catch (Exception e) {
                error("Cannot switch trips");
                log("Cannot switch trips", e);
        public void initFlightDetail() {
            try {
                // detail data is in the page bean
                        1, 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 {
                            1, personDataProvider.getValue("PERSON.PERSONID"));
                } catch (Exception e) {
                    error("Cannot switch to selections");
                    log("Cannot switch to selections", e);
            } else {
                try {
                    // Synchronize data providers with current selections
                            "PERSON.PERSONID", personDD.getSelected()));
                            "TRIP.TRIPID", tripDD.getSelected()));
                            "FLIGHT.FLIGHTID", flightDD.getSelected()));
                    // rowset for the detail flight is in the page bean
                            1, flightDD.getSelected());
                } 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 {
                        1, personDD.getSelected());
            } catch (Exception e) {
                error("Cannot switch person id");
                log("Cannot switch person id", e);
  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 {
                        1, tripDD.getSelected());
            } catch (Exception e) {
                error("Cannot switch trips");
                log("Cannot switch to trips", e);
  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 {
                        1, flightDD.getSelected());
            } 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

Friday May 11, 2007

Day 3 at JavaOne 07

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.

Thursday May 10, 2007

Day 2 at JavaOne 07

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.

Wednesday Apr 04, 2007

Migrating Creator Apps to VWP and Tomcat

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
This is because the standard.jar/jstl.jar are needed for deploying to the Tomcat server. Here's the fix:

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

Wednesday Mar 28, 2007

Ajax Text Completion and Web Services

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.

Wednesday Mar 21, 2007

Learning Trail for Visual Web Pack

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.

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.

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

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.

Tuesday Mar 13, 2007

NetBeans Community Docs

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, To subscribe to the alias, go to this page:

Tuesday Feb 27, 2007

New Tree Tutorial

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.

Wednesday Feb 21, 2007

Calendar Components in Visual Web Pack

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.

Monday Feb 12, 2007

Hibernate for Visual Web Pack

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.

Wednesday Jan 31, 2007

New Tutorial on Using JasperReports in a Visual Web Application

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.

Friday Jan 26, 2007

More Tutorials on Ajax and Databases

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.

Thursday Dec 21, 2006

The Server Encountered an Internal Error

Sometimes, when testing your Visual Web application, you might get a page with the following unhelpful error:

HTTP Status 500 -

type Status report


description The server encountered an internal error () that prevented it from fulfilling this request.

To find out what the real problem, go back to the NetBeans IDE and click the tab for the server's log (usually in the same area as the output window). There, you will find a more helpful description of the error. For example, you might see:

Dec 21, 2006 5:24:21 PM org.apache.catalina.core.ApplicationDispatcher invoke
SEVERE: Servlet.service() for servlet jsp threw exception
javax.faces.el.PropertyNotFoundException: java.lang.RuntimeException:
org.apache.tomcat.dbcp.dbcp.SQLNestedException: Cannot load JDBC driver class 
In this particular case, I had not made the database driver available to the server. I resolved the problem by copying my database's JDBC3 compliant driver to the server's common library folder. With the Tomcat server, this would be something like apache-tomcat-5.5.17\\common\\lib.

If the error is a programming error, such as a class cast error, you can search through the error output for the name of your page. If such line exists in the output, it will show the line number of the erroneous statement. Look for the names of your managed beans as well.

You can send diagnostic statements to the log from your page beans and managed beans by calling log("put your message here").

Wednesday Dec 13, 2006

Using jMaki in a Visual Web Application

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 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="" to the top-level <div> tag.

  19. Nest the jMaki tag inside the panelGroup tag as shown below:
    <webuijsf:panelGroup binding="#{Sidebar.groupPanel1}" 
      "height: 382px; left: 0px; top: 0px; position: absolute; width:190px">
        <a:ajax type="spry" name="spry.myAccordion" />       
  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 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 class="Panel">
            <div class="Tab">
                <div class="Label">Vegetables</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 class="Panel">
            <div class="Tab">
                 <div class="Label">Grains and Cereal</div>
            <div class="Content">
                <a href="faces/FoodDetail.jsp?name=rice">Rice</a><br/> 
                <a href="faces/FoodDetail.jsp?name=macaroni">Macaroni</a><br/>
  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.

Wednesday Dec 06, 2006

Lots of New Visual Web Pack Tutorials

Today, in conjunction with the final release of the NetBeans Visual Web Pack, we published several new tutorials on the NetBeans Visual Web Pack Documentation portal. We have an overview article about the bundled components, as well as individual tutorials on the File Upload component, the list components, and the Ajax Progress Bar component.

Of interest to Sun Java Studio Creator IDE users is the Importing a Sun Java Studio Creator 2 Project in NetBeans Visual Web Pack tutorial. James, one of the Help writers, contributed this tutorial.

In addition to updating the Release Notes and Installation Guide, Joe worked on the Using Page Fragments tutorial. This tutorial shows how to create headers, footers, and sidebars that you can include in all your pages.

One change that we made to all the tutorials was to include a matrix in each tutorial, which tells you what configurations the tutorial works with. Note that if you want to do a tutorial that requires the Travel database, but are not ready to install the Sun Java System Application Server 9, the Installation Instructions now show the steps for adding the Travel database to your own Java DB or Apache Derby repository.

If you want to watch an excellent tour of the Visual Web Pack, I highly recommend checking out Craig's webinar, What's New in NetBeans Visual Web Pack.

The divas, along with Cindy, and Joe, are working on several more tutorials. You can expect to see tutorials on the Tree component, data providers, connecting to databases, JasperReports, and Hibernate appear on the Visual Web Pack documentation page. We are watching the NetBeans user groups to see what kinds of questions you are asking. We also appreciate the suggestions that we are getting via the Feedback button. While we do a have a backlog of user-requested tutorials, we still want your input. It helps us to prioritize and design the content.

I want to give a special thanks to the Quality Engineering team. They really do a great job evaluating our tutorials, suggesting great changes, and pushing the bar even higher.

Monday Nov 27, 2006

Visual Web Pack Database Webinar

Jim and John are presenting a webinar on how to use the NetBeans Visual Web Pack to build web applications that present and update information in a database. They will also show how to browse and edit schemas, data, and commands, and they will discuss JSBC drivers. Check it out here.

Tuesday Nov 21, 2006

Using the JasperReports Framework in Visual Web Applications to Generate PDF and HTML Reports

We just posted the 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).

Friday Nov 17, 2006

Customizing a Validator Message Part II

In our last blog, we showed you how to override the standard validator message with a component-specific message. But what if you want to get the message from a properties bundle. Here is how:

  1. Add code like the following (the prerender method is a good place to put it):
  2. Click inside the parentheses, then right-click and choose Tools > Internationalization > Insert Internationalized String from the pop-up menu.

  3. Browse to your properties bundle and set the desired values in the dialog box.

  4. Click OK.

    The IDE inserts code like the following:

Thanks to Greg for teaching me how to do this.

Thursday Nov 16, 2006

Customizing a Standard Validator Message

A Visual Web Pack user wrote a most excellent question to the nbj2ee alias: I used this tutorial "Customizing a Standard Validator Message" for customizing message boxes but is not working. The link is:

We are in the process of making Visual Web Pack equivalents of the Sun Java Studio Creator tutorials, but do not plan to push the next set of tutorials for awhile. In addition, we decided to combine the validator, converter, and custom message tutorials, so that one will take longer than the other.

So, in the meantime, you can use the Sun Java Studio Creator tutorial with the following exceptions.

  • In the Creating a Resouce Bundle section, instead of choosing File > New Item in Step 1, choose File > New File. Then select Other in the Categories pane, and select Properties File in the File Types pane.
  • In step 5 of the same section, browse down to CustomMessage > src > java > custommessage.

HOWEVER, and this is a sweet however, JavaServer Faces 1.2 offers a new alternative. The above method customizes the message for the whole web application. But what if you want a specific message for a specific field? With 1.2, you can add the following code to your Java source to set the required message for just this text field component:

textField1.setRequiredMessage("You must enter your favorite flavor.");

In my simple test, I put this in the prerender method.

You can also customize a component's converterMessage and validatorMessage.

Thank you Lark for helping with this one!.

Wednesday Nov 08, 2006

VWP Tips for JSC Users

Here are some tips for Sun Java Studio Creator IDE users who are new to the NetBeans Visual Web Pack

  • Install NetBeans and Application Server 9u1 first. Configure NetBeans to use the Application Server, then install the Visual Web Pack. If you do it in that order, then the Travel database will automatically be available. You need the Travel database to do the tutorials. If you didn't do it in that order, then configure NetBeans to use the Application Server, shut down the NetBeans IDE, and restart the IDE. The Travel database should appear.

  • You have to connect to the database every time you start the IDE (if your project uses a database). The password for the Travel database is "travel".

  • The server and database nodes are in the Runtime window.

  • Use F6 instead of Ctrl-F5 to run the project.

  • Use F9 to compile a file instead of Shift-F9.

  • The editor macros are different. See

  • The Add > Property menu item is not available from the pop-up menu for the managed beans in the Projects window. However, they are available in the pop-up menu for the managed beans in the Outline window. When you add the properties, they don't show up in the Outline window right away. If you open the Java source for the bean and then close it, the property appears in the Outline window.

  • The Java source is in src > java instead of just src.

  • The JSF 1.2 components have a validatorExpression property instead of validator.

  • Dropping a validator on a component adds the validator to the page but does not set the validatorExpression property for the component. You still have to choose it from the dropdown list for the validatorExpression.

  • There are no API references in dynamic window. Instead choose Help > Javadoc References to choose from list of available Javadoc. Or use Tools > Javadoc Index Search. The Javadoc for the application model is in install-dir/rave2.0/docs.

  • The mini property for the Button component has no effect. Nor does the type property for the Inline Help component. You have do make your own CSS styles now.

  • For JSF 1.2, the component's id (or label if the labes is set) by default shows up in the messages sent to the Message and Message Group components. There are ways to customize the validator messages. See Ed Burn's blog.

  • For information on importing JSC projects into Visual Web Pack, see James' October 31 blog on "Studio Creator to Visual Web Pack: Making the Move."

Thursday Oct 19, 2006

The Divas are Joining the NetBeans World

We have been very silent in this blog lately because we (along with Cindy and Joe) have been busy writing a new set of tutorials for the upcoming Visual Web Pack for NetBeans 5.5. For those of you who have been building web apps using the NetBeans IDE, I think you will find the Creator-like WYSIWYG Visual Designer a nice enhancement. The Visual Web Pack also comes with a cool set of JSF components, including some Ajax enabled components. To build a web page, you drag components from a Palette and drop them on the page. You can then configure the components using the Properties sheet, and you can bind the components to data sources and managed bean properties. The IDE synchronizes the visual work with the JSP, page beans, and web.xml.

For those of you who are using the Sun Java Sudio Creator IDE, there are many similarities, but the Visual Web Pack is not Creator-on-top-of-NetBeans. One advantage of using the NetBeans Visual Web Pack instead of Creator is that it supports:

  • JavaServer Faces 1.2 and JavaServer pages 2.1
  • Java SE 5 and Java EE 5
  • Sun Java System Application Server 9 (also know as GlassFish) and Tomcat 5.5

Another advantage is that NetBeans provides support for building web services and EJBs, so you can build and consume them in the same IDE. You will also find better support for building your Java classes and packages. A trade off is that there is less automation and synchronization. You have to manually implement some of the stuff that Sun Java Studio Creator does for you.

The date that the technology preview for the Visual Web Pack will be available is approaching. Because it is a technology preview, I wouldn't recommending using it for any production work, but you do want to check it out.

So far, we have been focusing on how to make our tutorials work with the Visual Web Pack. Soon, we hope to explore how to use the NetBeans features to facilitate the web development process and how to use the JavaServer Pages 2.1, JavaServer Faces 1.2, and J2EE 5 enhancements. Some of the JSF and JSP features that I look forward to checking out are:

  • Unified EL language and support for the forEach tag with JSF components.
  • Easier to interweave JSP with JSF tags.
  • Ability to add custom required, converter, and validator messages for a component and to include the name of the component in error messages.
  • Improved state-saving makes it easier to have multi-window web apps and provides better support for the back button (hurray!).
  • Resource injection instead of deployment descriptor entries making it easier to inject container-managed objects such as data sources and web services.



« July 2016