>> More Visual Web Pack Documentation

Using a Drop Down List to Display Data

This tech tip works with the following technologies and resources

JavaServer Faces Components/ Java EE Platform	1.2 with Java EE 5* 1.1 with J2EE 1.4
Travel Database	Required
BluePrints AJAX Component Library	Not required

* As of the date this tech tip was published, only the Sun Java System Application Server supported Java EE 5.

This tech tip has been tailored for use with the Sun Java Application Server PE 9.0 Update Release 1 and with Tomcat 5.5.17. If you are using a different server, consult the Release Notes and FAQs for known problems and workarounds. For detailed information about the supported servers and Java EE platform, see the Release Notes.

Overview

Quite a few users on the forum have asked for a programmatic way to display a Drop Down List that displays values from a database table along with a dummy value. See links to these threads below.

• Drop Down List Question
• Forum: Drop Down List
• Drop Down List Bound to Database

1. Bind a Drop Down List to an array of Option[].
2. Add a DataProvider, which holds the values to be displayed in the Drop Down List, to the Session Bean. Do not bind the DataProvider to the Drop Down List.
3. In the SessionBean init method, loop through the DataProvider to read the fields to display and add them to the array of Options along with the dummy value. Then, set the dummy value as the default selected value of the Drop Down List when it is displayed, which the user can then change.

Now let's see the steps in detail.

Create a New Project With a Single Page

1. Create a new Visual Web Application project and name it DummyValueinDropDownExample.

   Figure 1: Creating a New Project (click to enlarge image)

2. From the Basic section of the Components Palette, drag a Drop Down List component and drop it on the page.
3. Drag a Button component from the Palette and drop it on the page. Place the Button to the right of the Drop Down List. Change the text of the Button to Submit.

4. Drag a Text Area component onto the page. Place this component under the Drop Down List.

   The Text Area will be used to display the item that is selected in the Drop Down List. Your page should look as shown here:

   Figure 2: Page With Added Components (click to enlarge image)

Create Properties to Hold the Drop Down List Data

1. In the Outline window, right click SessionBean1 and choose Add > Property from the pop-up menu.

   (Note: If the Add submenu does not appear or is grayed out, close the pop-up menu and then reopen it.) The New Property Pattern dialog box opens. You use this dialog box to create properties for the session bean.

2. Type listOptions in the Name field.

3. Type Option[] in the Type field. Note: You will add the import statement for the Option class in step 5.

   Figure 3: Create the listOptions Property

4. Click OK to create the property.

   The listOptions array will contain objects of type Option. Each Option object represents a single option in the dropdown list. Each option contains both a display name and a value. The display name is always a String, but the value can be any kind of object; in this case it is also a String.

5. In the Outline window, double-click SessionBean1 to open its source code in the Java Editor. Then, right click anywhere in the Java source file and choose Fix Imports from the pop-up menu to open the Fix Imports dialog box.

   You use this dialog box to add the import statement for the Option class, which represents a single item in the drop down.

6. In the Fix Imports dialog box, click the Fully Qualified Name dropdown list and choose the correct Option class from the list.

   • If your application is based on Java EE 5, choose com.sun.webui.jsf.model.Option.
   • If your application is based on J2EE 1.4, choose com.sun.rave.web.ui.model.Option.

     : Fix Imports Dialog Box">

     Figure 4: Fix Imports Dialog Box

Create a DataProvider

1. Open the IDE's Runtime window.

2. From under the Databases node, drag the Travel > Tables > PERSON node onto SessionBean1 in the Outline Window.

   (Note: If you do not see the Travel database tables, you must connect to the Travel database. Right click the Databases -> travel node and select Connect. For this database, the username and password are both "travel".) The IDE adds a personDataProvider object and a personRowSet object to SessionBean1, as shown in Figure 5.

   Figure 5: Create the DataProvider

Bind the Properties to the Drop Down List

1. Click the Page1 tab to open it in the Visual Designer.
2. Right-click the Drop Down List component, and then choose Bind to Data, which opens the Bind to Data dialog.
3. From the Bind to an Object tab, select SessionBean1 > listOptions.

4. Click OK.

   Figure 6: Bind SessionBean1 listOptions

Initialize the Drop Down List Properties

You are now ready to write the code to initialize the properties of the Drop Down List. You initialize the Drop Down List properties in the SessionBean1 init method, adding your code just below the comment line that reads: // TODO - add your own initialization code here.

Code Sample 1 shows the entire SessionBean1 init method. The code to initialize the Drop Down List properties appears in bold. You can copy the code from here and paste it into SessionBean1 in the Java source editor. (If you want, reformat the added code by right clicking in the source editor to bring up the pop-up menu and selecting Reformat Code, or use the key combination Ctrl+Shift+F.)

public void init() {
   // Perform initializations inherited from our superclass
   super.init();// Perform application initialization that must complete
   // before managed components are initialized
   // TODO - add your own initialiation code here
        
   // <editor-fold defaultstate="collapsed" desc="Creator-managed Component Initialization">
   // Initialize automatically managed components
   // Note - this logic should NOT be modified
   try {
        _init();
   } catch (Exception e) {
        log("Page1 Initialization Failure", e);
        throw e instanceof FacesException ? (FacesException) e: new FacesException(e);
   }
   // </editor-fold>
   // Perform application initialization that must complete
   // after managed components are initialized
   // TODO - add your own initialization code here

   // Get number of rows from DataProvider
   int noofDBRows = personDataProvider.getRowCount();
   listOptions = new Option[noofDBRows + 1];
   int rowcount = 0;
   if (noofDBRows > 0) {
       // Build the Options Array with the data
       // from DataProvider plus Dummy Value
       personDataProvider.cursorFirst();
       do {
           listOptions[rowcount] =
           new Option(personDataProvider.getValue("PERSON.PERSONID").toString(),
                      personDataProvider.getValue("PERSON.NAME").toString());
           rowcount++;
        }
        while (personDataProvider.cursorNext());
        // Add Dummy Value to Array at the end,
        // Use Dummy Value ("999") as Value for the Dummy!!
        // Note : - You could add the Dummy value at
        // any position of your choice
        listOptions[rowcount] = new Option("999", "None of the Above");
   } else {
           listOptions[rowcount] = new Option("999", "No Rows from DB");
   }
}      

Modify Submit Button Behavior

1. In the Visual Designer, double-click the Submit button, which opens the Java source editor positioned to the button's action handler method.

2. Add the event handler code shown in bold in Code Sample 2 to the button1_action method.

   Note: After inserting this code, you can press Ctrl-Shift-F to automatically reformat the code.

   Code Sample 2: Submit Button Action Handler Method

   public String button1_action() { // TODO: Process the button click action. Return value is a navigation // case name where null will return to the same page. textArea1.setText(dropDown1.getSelected().toString()); return null; }

Set Initial Value for Drop Down List

For the last step, set the initial value of the Drop Down List and the value that is displayed in the Text Area.

• Add code to the prerender method in the Page1.java code. You can scroll to that method from the button action handler method. Add the code shown in bold in Code Sample 3.

  Code Sample 3: Set Values for Drop Down List and Text Area

  public void prerender() { if (dropDown1.getSelected() == null) { dropDown1.setSelected("999"); textArea1.setValue("999"); } }

  
  That's it. You're finished with all the coding and you're ready to see the Drop Down List in action.

Run and Test the Application

Save the application you just worked on and then run it. Notice that the Drop Down List comes up in the browser with the dummy value of "None of the Above", and initially this dummy value is selected. Also, you can see that the Text Area is populated with the same dummy value (999).

Now change the selection in the Drop Down List and click Submit. Notice how the displayed value in the Text Area changes to the value of the selection in the Drop Down List.

Voila! You have done it!!

Summary

This tech tip walked you through the steps to customize the values displayed by a Drop Down List component. You can set up a Drop Down List to both display data from a database table and hard-coded, dummy values. The tip showed you when and how to use the NetBeans IDE Visual Web Pack 5.5 design functions, when to write your own custom code, and where to add that code.