2.12 Making the Display More Data-Driven

After you have a basic page working, you will likely notice some aspects that you'd like to make more sophisticated. For example, you can reference the properties of ADF bindings to hide or show groups of components or to toggle between alternative sets of components.

2.12.1 Hiding and Showing Groups of Components Based on Binding Properties

If the manager enters a name in the searchtechnicians.jspx page that matches a single user, the disabled Next and Previous navigation buttons the "1 of 1" record counter are superfluous. Instead, you might want a result like what you see in Figure 2-28, where these components disappear when only a single row is returned.

Figure 2-28 Hiding Panel with Navigation Buttons When Not Relevant

Luckily, this is easy to accomplish. You start by organizing the navigation buttons and the record counter display into a containing panel component like panelHorizontal. After creating the panel to contain them, you can drag and drop in the visual editor or in the Structure window to place the existing controls inside the new container component. Then, to hide or show all the components in the panel, you just need to set the value of the panel's rendered attribute to a data-driven EL expression.

Recall that the number of rows in an iterator binding's data collection can be obtained using its estimatedRowCount property. Figure 2-29 shows the EL picker dialog that appears when you select the panelHorizontal component, click in the Property Inspector on its rendered attribute, and click the (...) button. If you expand the ADF Bindings folder as well as the bindings node to see the bindings in the current page's binding container, you will see the TechniciansIterator. You can then expand this iterator binding further to see the most common properties that developers reference in EL. By picking estimatedRowCount and clicking the (>) button, you can then change the expression to a boolean expression by introducing a comparison operator to compare the row count to see if it is greater than one. When you set such an expression, the panel will be rendered at runtime only when there are two or more rows in the result.

Figure 2-29 Setting a Panel's Rendered Attribute Based on Binding Properties

2.12.2 Toggling Between Alternative Sets of Components Based on Binding Properties

Consider another situation in the sample page. When no rows are returned, by default the read-only form would display its prompts next to empty space where the data values would normally be, and the table of experience areas would display the column headings and a blank row containing the words "No rows yet". To add a little more polish to the application, you might decide to display something different when no rows are returned in the iterator binding's result collection. For example, you might simply display a "No matches. Try again" message as shown in Figure 2-30.

Figure 2-30 Alternative Display If Search Produces Empty Collection

JSF provides a basic feature called a facet that allows a UI component to contain one or more named, logical groups of other components that become rendered in a specific way at runtime. ADF Faces supplies a handy switcher component that can evaluate an EL expression in its FacetName attribute to determine which of its facets becomes rendered at runtime. Using this component effectively lets you switch between any groups of components in a dynamic and declarative way. If you group the components that present the user information and experience area table into a panel, you can use the switcher component to switch between showing that panel and a simple message, depending on the number of rows returned.

Figure 2-31 shows the Structure window for the searchtechnicians.jspx page reflecting the hierarchical containership of JSF components after the switcher component is introduced. First, you would set up two JSF facets and give them meaningful names like found and notfound. Then you can organize the existing components into the appropriate facet using drag and drop in the Structure window. In the found facet, you want a panel containing all of the components that show the technician and experience area information. In the notfound facet, you want just an outputText component that displays the "No matches. Try again" message. Finally, you set the DefaultFacet property on the switcher component to found so that facet displays by default.

Figure 2-31 Switcher Component Containing 'found' and 'notfound' Facets

Set the facetName attribute of switcher to the following EL expression so that the found facet will be used when the row count is greater than zero, and the notfound facet will be used when the row count equals zero:

#{bindings.TechniciansIterator.estimatedRowCount > 0 ? 'found' : 'notfound'}

The combination of Oracle ADF declarative bindings, ADF Faces components, and EL expressions is another situation in which tedious, repetitive coding can be handled with ease.