Show TOC Start of Content Area

Background documentation Command Buttons  Locate the document in its SAP Library structure

Command buttons are the JSF equivalent to HTML form buttons (submit and reset buttons). A typical command button looks like this:

<h:commandButton value="Press Me" type="submit" action="Some_Action"/>

The action attribute specifies the behavior of the page when the button is pressed. There can be two types of action values:

      String - A String action specifies that the button redirects to another page, as described in the faces-config.xml. This behavior is straightforward, as it does not involve pre-processing of data before loading the next page. In our application, for example, such a button is the command button in the Display Project Details page:

This graphic is explained in the accompanying text

<h:commandButton styleClass="fbc" value="OK" action="OK"/>

According to the description in the faces-config.xml, the OKoutcome that originates from the prjDetails.jsp view, leads to the prjList.jsp view:

 

<navigation-rule>

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

    <navigation-case>

      <from-outcome>OK</from-outcome>

 

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

    </navigation-case>

 </navigation-rule>

 

      Binding to a managed bean method that returns a String - When this button is pressed, the specified bean method is called. The method can involve some data processing and the method outcome determines which page is then loaded.

For example, the "View Details" button on the "Deparment Listing" page should lead to the "Department Details" page of the selected departments. Hence, before loading the next page, JSF must receive all selected departments. This is done in the showSelectedDepartments() method of the DepartmentListBean. The View Details button has the following syntax:

<h:commandButton value="View Details"

                 styleClass="form_buttons"

                 action="#{departmentList.showSelectedDepartments}"/>

The source code of the showSelectedDepartments() method is:

package com.sap.engine.examples.backingbeans;

//. . .

 

import com.sap.engine.examples.ejb3.edm.beans.entity.Department;

 

 

public class DepartmentListBean {

   

//. . .

    private List<DepartmentBean> selectedDepartments = new ArrayList<DepartmentBean>();

   

   

    public String showSelectedDepartments() {

        selectedDepartments.clear();

        for (DepartmentBean departmentBean : allDepartments) {

            if (departmentBean.isSelected()) {

                selectedDepartments.add(departmentBean);

            }

        }

        if (selectedDepartments.size() > 0){

        return "departments_selected";

        }

        return "";

    }

//. . .

}

 

This method determines which departments were selected on the "Department Listing" page. In the best case, the method returns "departments_selected", which, according to the faces-config.xml, leads to the deptDetails.jsp ("Department Details" page):

package com.sap.engine.examples.backingbeans;

//. . .

 

import com.sap.engine.examples.ejb3.edm.beans.entity.Department;

 

 

public class DepartmentListBean {

   

<navigation-rule>

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

  <navigation-case>

    <from-outcome>departments_selected</from-outcome>

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

  </navigation-case>

</navigation-rule>

This graphic is explained in the accompanying text

Note

Unlike with ordinary HTML buttons, where you provide the form data as parameters of the HTTP request, the JSF buttons send the form data as new values of the specified bean properties.

 

End of Content Area