Quick Tip: Changing Button Icon in Response to Button Action

A question on the Oracle MAF forum on the Oracle Technology Network  was about how to change the icon displayed on a command button in response to a button action. The solution to this challenge is to think Java and managed bean. Below is a quick outline to the solution of this problem.

AMX page content

The AMX page content shows a command button with an icon attribute that points to a managed bean in view scope (no need for a larger scope).

  <amx:commandButton text="commandButton1" id="cb3" inlineStyle="height:150px; width:150px;"
                     icon="#{viewScope.sampleBean.imageName}"
                     actionListener="#{viewScope.sampleBean.onButtonPressed}"/>

Managed Bean

The managed bean that you configure either in the adfc-mobile-config.xml file or a task flow specific configuration file contains a property for setting the image ("imageName" in the example) along with its setter/getter methods and two final variables that hold the two image icon names and locations.

import oracle.adfmf.amx.event.ActionEvent;
import oracle.adfmf.java.beans.PropertyChangeListener;
import oracle.adfmf.java.beans.PropertyChangeSupport;
public class SampleBean {
            
  private static final String IMAGE1 = "/img/4.png";
  private static final String IMAGE2 = "/img/5.png";
   
  String imageName = IMAGE1;
    
  private PropertyChangeSupport propertyChangeSupport = new PropertyChangeSupport(this);
  public SampleBean() {
      super();
  }
  public void setImageName(String imageName) {
     String oldImageName = this.imageName;
     this.imageName = imageName;
     propertyChangeSupport.firePropertyChange("imageName", oldImageName, imageName);
  }
  public String getImageName() {
     return imageName;
  }
  public void addPropertyChangeListener(PropertyChangeListener l) {
     propertyChangeSupport.addPropertyChangeListener(l);
  }
  public void removePropertyChangeListener(PropertyChangeListener l) {
     propertyChangeSupport.removePropertyChangeListener(l);
  }
  public void onButtonPressed(ActionEvent actionEvent) {
    if (imageName.equalsIgnoreCase(IMAGE1)){
      this.setImageName(IMAGE2);
    }
    else{
      this.setImageName(IMAGE1);
    }
  }
}

Important for this to work is that the property change support is added to the managed bean and the image name setter methods. This can be generated for you by Oracle JDeveloper and also in OEPE (Eclipse). With the property change event fired MAF will be notified about a data change and then refreshes the UI of the component the Java code is bound to.

The "onButtonPressed" method is invoked by the command button's action listener attribute and compares the current icon with the two images names in the bean to determine which one to set.