JSF for Nonbelievers: The JSF Application Lifecycle

By Rick Hightower
2005-05-05


Use Case 2: Edit a CD
The second use case for the example application also starts at the listing page (listing.jsp). In addition to showing you how to edit data on a JSF page, this use case will introduce you to the JSF dataTable component.

The listing page uses a dataTable to display a list of CDs. The dataTable's value is bound to the cds property of the controller class, StoreController. The cds property is defined as shown in Listing 8.

Listing 8. cds property defined in StoreController.java

[StoreController.java]

/** List of cds for CD listing. */

private DataModel cdModel = new ListDataModel();

{

    cdModel.setWrappedData(store.findTitleAsc());

 }

/**

 * List of CDs in the system.

 *

 * @return Returns the cds.

 */

public DataModel getCds() {

    return cdModel;

}

The cds property is based on a java.util.List returned from the store object StoreManagerDelegate, which is the application's business delegate. The cdModel wraps the list returned from the store in a DataModel. DataModel is the model for a dataTable.

The dataTable is defined as shown in Listing 9.

Listing 9. dataTable defined in listing.jsp

<f:view> 

    <h:form> 	

      <h:dataTable id="items" 

        value="#{CDManagerBean.cds}" 

        var="cd"

        rowClasses="oddRow, evenRow" 

        headerClass="tableHeader">

Notice that the value is bound to the controller's cds property. The rowClasses and headerClass attributes are used to specify CSS classes that will be used to define the look and feel of the dataTable. As mentioned, JSF relies heavily on CSS to define the look and feel of a GUI. If you don't know CSS (that is, you've been getting by with font tags and HTML tables), you may want to learn it before taking the JSF leap.

The column component
The Title, Artist, and Price fields are displayed with the column component, as shown in Listing 10 (only the Title field is shown).

Listing 10. Adding fields in the column component

<h:column> 

    <f:facet name="header"> 

      ...

        <h:outputText value="Title"/> 

    </f:facet> 

      <h:commandLink action="#{CDManagerBean.editCD}"> 

        <h:outputText value="#{cd.title}"/> 

      </h:commandLink> 

</h:column>

The column component is a child component of the dataTable. The column component takes a single child component and a facet. A facet is a named subcomponent. A facet is not a child component. The column component has a facet called header that defines what is displayed in the header. commandLink is the child component of the column component for this example. commandLink displays the CD's title in a link that is bound to the action #{CDManagerBean.editCD}. The action attribute binds the commandLink to the editCD() method of the controller class, as shown in Listing 11.

Listing 11. Backing bean method for the editCD commandLink

[StoreController.java]

/**

 * Edit the CD. This get executed before the edit cdForm 

 * page gets loaded.

 *

 * @return outcome

 */

public String editCD() {

    this.cd = (CD) cdModel.getRowData();

    this.cd = (CD) store.getCDById(cd.getId());



    if ((cd.getCategory() != null) || !"".equals(cd.getCategory())) {

        this.subCategoryList.setRendered(true);



        this.subCategories = getSubcategoriesList(cd.getCategory());

    } else {

        this.subCategoryList.setRendered(false);

    }



    this.editMode = true;



    return "success";

}

The editCD() method
The editCD() method is invoked in the invoke application phase of the JSF lifecycle. The editCD() method prepares the controller to display the cdForm.jsp page in editing mode. It does this by looking up the current selected CD by invoking the cdModel.getRowData() method.

Note that the JSF DataModel allows you to work with data at higher level of abstraction than typical Web applications. You don't have to inspect the request parameters: You simply ask the DataModel (cdModel) which CD has been selected by invoking the cdModel.getRowData() method. This higher level of abstraction simplifies Web development considerably.

Once you have the current selected CD, you use the business delegate to load the latest copy of that CD (store.getCDById()). After loading the CD, store.getCDById() turns on the subCategory list (assuming the CD is associated with a category), then sets the editMode property to true. You'll recall that the editMode property is used by cdForm to display the Add or Update buttons. Last, the store.getCDById() method returns success. The important navigation rule shown in Listing 12 stipulates that returning success advances you to the cdForm.jsp, as shown below.

Listing 12. An important navigation rule

<navigation-rule> 

  <from-view-id> /listing.jsp</from-view-id> 

  <navigation-case> 

    <from-action> #{CDManagerBean.editCD}</from-action> 

    <from-outcome> success</from-outcome> 

    <to-view-id> /cdForm.jsp</to-view-id> 

  </navigation-case> 

  <navigation-case> 

    <from-action> #{CDManagerBean.addNew}</from-action> 

    <from-outcome> success</from-outcome> 

    <to-view-id> /cdForm.jsp</to-view-id> 

  </navigation-case> 

</navigation-rule>

The updateCD() method
The CD form loads and displays whatever the current value of the CD property's properties are set to. The end user edits the resulting form as needed and clicks the Update button when finished. The Update button is the only button that shows up when the user is in Edit mode, and it only shows up when editMode is true, as you see in Listing 13.

Listing 13. Update CD button

[cdForm.jsp]



<h:commandButton id="submitUpdate" 

  action="#{CDManagerBean.updateCD}" 

  value="Update CD" 

  rendered="#{CDManagerBean.editMode}"/>

The Update button is bound to the updateCD() method. Before the update method is invoked, JSF has to validate the fields from the GUI. The values are copied from the request parameters to the components' values (by the components themselves) in the apply request value phase. At this point, the price is converted from a string into a float. No validators are associated with the components, so if all the required values are present and can be converted, you can move on to the next phase of the lifecycle.

Updating the model values
In the update model values phase, the setter methods on the CD are invoked with the converted and validated values stored in the GUI components. The updateCD() method is invoked in the invoke application phase. The updateCD() method is shown in Listing 14.

Listing 14. updateCD() method

[StoreController.java]



/**

 * Update the CD loaded on the form.

 *

 * @return success

 */

public String updateCD() {

    store.updateCD(this.cd);

    this.editMode = false;



    return "success";

}

The updateCD() method delegates most of its responsibility to the business delegate. It sets the editMode to false, which is the default, and returns success. The success outcome redirects you back to the listing, where you can look at your newly edited CD based on the navigation rule shown in Listing 15.

Listing 15. A successful UpdateCD takes you to listing.jsp

[faces-config.xml]

<navigation-rule> 

  <from-view-id> /cdForm.jsp</from-view-id> 

  ...    

  <navigation-case> 

    <from-action> #{CDManagerBean.updateCD}</from-action> 

    <from-outcome> success</from-outcome> 

    <to-view-id> /listing.jsp</to-view-id> 

  </navigation-case> 

</navigation-rule>

Tutorial Pages:
» Walk Through the 6 Phases of JSF's Request Processing Lifecycle
» The JSF Lifecycle: an Overview
» Phase 1: Restore View
» Phase 2: Apply Request Values
» Phase 3: Process Validation
» Phase 4: Update Model Values
» Phase 5: Invoke application
» Phase 6: Render Response
» A Working Example
» Let's Code it
» Use Case 1: Add a New CD
» Use Case 2: Edit a CD
» Use Case 3: Sort CDs
» Immediate Event Handling
» Conclusion
» Resources


First published by IBM DeveloperWorks

Related Tutorials: » All about JAXP, Part 1 » Make Database Queries Without the Database » Load List Values for Improved Efficiency » 2 Ways To Implement Session Tracking » A Simple Way to Read an XML File in Java » Develop Aspect-Oriented Java Applications with Eclipse and AJDT