Dynamically refresh a part of a page (PPR) in Oracle MAF

A common question for developers who are just starting with Oracle MAF, especially if they have a background in Oracle ADF, is how do you do a partial page refresh in Oracle MAF.

Partial Page Refresh basically means that I want to change something in my UI based on another event in the UI - for example hide or show a section of the page. (In ADF there is a partialTrigger property for components which is not there in MAF).

In MAF the UI behaves differently - it is not based on JSF after all - the UI directly reflects changes in managed beans as long as it knows about changes there. How does it know about changes? For this you need to enable firing change event notifications. This is actually quite easy to do - just turn on the checkbox in JDeveloper's accessors generation and it will do the job for you.

Here is a quick demo showing you how to achieve  this:

Here is the code used.

in AMX page:

     <amx:tableLayout id="tl1">

      <amx:rowLayout id="rl1">

        <amx:cellFormat id="cf2">

          <amx:listView var="row" showMoreStrategy="autoScroll" bufferStrategy="viewport" id="lv1">

            <amx:listItem id="li1">

              <amx:outputText value="ListItem Text" id="ot2"/>

              <amx:setPropertyListener id="spl1" from="#{'true'}" to="#{viewScope.backingPPR.showIt}"

                                       type="swipeRight"/>

              <amx:setPropertyListener id="spl2" from="#{'false'}" to="#{viewScope.backingPPR.showIt}"

                                       type="swipeLeft"/>

            </amx:listItem>

          </amx:listView>

        </amx:cellFormat>

      </amx:rowLayout>

      <amx:rowLayout id="rl2" rendered="#{viewScope.backingPPR.showIt}">

        <amx:cellFormat id="cf1">

          <amx:commandButton text="commandButton1" id="cb3"/>

        </amx:cellFormat>

      </amx:rowLayout>

    </amx:tableLayout>

in managed bean:

     boolean showIt = false;

    public void setShowIt(boolean showIt) {

        boolean oldShowIt = this.showIt;

        this.showIt = showIt;

        propertyChangeSupport.firePropertyChange("showIt", oldShowIt, showIt);

    }

    public boolean isShowIt() {

        return showIt;

    }

    public void addPropertyChangeListener(PropertyChangeListener l) {

        propertyChangeSupport.addPropertyChangeListener(l);

    }

    public void removePropertyChangeListener(PropertyChangeListener l) {

        propertyChangeSupport.removePropertyChangeListener(l);

    }