2.7 Dragging and Dropping Data to Create a New JSF Page

Now that you're familiar with the basics of the Data Control Palette, you can begin doing drag-and-drop data binding to create your page. Since you'll be using ADF Faces components in your page, first ensure that the project's tag libraries are configured to use them. Double-clicking the ViewController project in the Application Navigator brings up the Project Properties dialog where you can see what libraries are configured on the JSP Tag Libraries page, as shown in Figure 2-21. If the ADF Faces Components and ADF Faces HTML libraries are missing, you can add them from here.

Figure 2-21 Configuring ViewController Project Tag Libraries to Use ADF Faces

Next, you can select the ViewController project in the Application Navigator and choose Open JSF Navigation from the context menu to return to the skeleton JSF page flow you created earlier. Double-click the /searchtechnicians.jspx page icon in the diagram to launch the Create JSF JSP wizard shown in Figure 2-22, which you use to create the file representing the searchtecnicians.jspx web page.

Figure 2-22 Creating a New JSF JSP Page

You may be more familiar working with JSP pages that have a *.jsp extension, but using a standard XML-based JSP "Document" instead is a best practice for JSF development since it:

• Simplifies treating your page as a well-formed tree of UI component tags

• Discourages you from mixing Java code and component tags

• Allows you to easily parse the page to create documentation or audit reports

You can click Finish on the first page of the wizard, taking all defaults. After completing the Create JSF JSP wizard, a new page opens in the visual editor. From there, creating the databound page shown in Figure 2-23 is a completely drag-and-drop experience. As you drop elements from the Data Control Palette onto the page, a popup menu appears to show the sensible options for UI elements you can create for that element.

Figure 2-23 Browse Users JSF Page in the Visual Designer

The basic steps to create this page are:

1. Drop a panelHeader component from the ADF Faces Core page of the Component Palette onto the page and set its text attribute in the Property Inspector to "Search Technicians".

2. Drop the ExecuteWithParams built-in operation for the Technicians data collection in the Data Control Palette to create an ADF parameter form. This step creates a panelForm component containing the label, field, and button to collect the value of the TechName bind variable and pass it to the view object when the button is clicked. Use the Property Inspector to set the text on the command button created to "Go".

3. Drop the Technicians data collection from the Data Control Palette to create an ADF read-only form. This operation creates a panelForm component containing the label and fields for the attributes in a row of the Technicians data collection. In the Edit Form Fields dialog that appears, you can delete the UserId attribute from the list so that it doesn't appear on the page.

4. Again from the Operations folder of the Technicians data collection, drop the built-in Previous operation to the page as a command button. Repeat to drop a Next button to the right of it for the built-in Next operation.

5. Drop the detail Skills data collection in the Data Control Palette as an ADF read-only table. In the Edit Table Columns dialog that appears, include columns in the table only for the ExpertiseLevel and Name attributes, and use the Up and Down buttons to reorder them so that Name comes first. Select the Enable sorting checkbox to enable sorting the data by clicking the column headers.

6. Drop a commandButton from the Component Palette at the bottom of the page and change its Text property to "Update Profile". Set its Action property to "UpdateProfile" by picking it from the list to have the button follow the "UpdateProfile" navigation rule you created in the JSF page flow diagram earlier.

Note: Producing the exact look of the page in Figure 2-23 involves a few additional drags and drops to group the default components, add an object separator between them, and dropping some read-only text fields bound to the current row count and total rows using EL. These steps are explained in a later section of this walkthrough.

At any time you can run or debug your page to try out the user interface that you've built. Notice that the UI control hints you set up on your entity object attributes in the business domain layer automatically appear in the user interface. Searching by name finds technicians whose last name or first name contains the string you've entered (case-insensitively). The Previous and Next buttons navigate among the technicians found by the search, and each technician's related set of skills display, along with the product name to which the expertise applies. A simple master/detail search page is illustrated in Figure 2-24.

Figure 2-24 Simple Search Technicians Page with Master/Detail Data