Listing 1: Page showing partial page update

<?xml version="1.0" encoding="windows-1252"?>
<jsp:root xmlns:jsp="...">
  ...
  <f:view>
    ...
    <h:form>
      <af:panelPage title="Deep Diving with MyFaces "ADF Faces"">
        <f:facet name="branding">
          <af:objectImage source="#{magazineBrand.image}"/>
        </f:facet>
        <af:panelBorder>
          <f:facet name="start">
            <af:selectOneChoice id="selectArticle" 
                                label="Select Article"
                                value="#{selectMagazine.title}"
                                autoSubmit="true">
              <af:forEach items="#{magazines}" var="row">
                <af:selectItem label="#{row.title}"
                               value="#{row}"/>
              </af:forEach>
            </af:selectOneChoice>
          </f:facet>
          <af:objectImage partialTriggers="selectArticle"
                          source="#{selectMagazine.name}"/>
        </af:panelBorder>
      </af:panelPage>
    </h:form>
    ...
  </f:view>
</jsp:root>


Listing 2: The updated page with a description field

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="...">
  ...
  <f:view>
    ...
    <h:form>
      <af:panelPage title="Deep Diving with MyFaces "ADF Faces"">
        <f:facet name="branding">
          <af:objectImage source="#{magazineBrand.image}"/>
        </f:facet>
        <af:panelBorder>
          <f:facet name="start">
            <h:panelGroup>
              <af:selectOneChoice 
                id="selectMagazine"
                label="Select Article"
                value="#{selectMagazine.magazine}"
                autoSubmit="true"
                valueChangeListener="#{selectMagazine.valueChanged}">
                <af:forEach items="#{magazines}" var="row">
                  <af:selectItem label="#{row.title}"
                                 value="#{row}"/>
                </af:forEach>
              </af:selectOneChoice>
              <af:objectSpacer height="20"/>
              <af:outputText 
                         id="selDesc"
                         value="#{selectMagazine.desc}"
                         binding="#{selectMagazine.descUpdate}"/>
            </h:panelGroup>
          </f:facet>
          <af:objectImage id="selImg"
                          partialTriggers="selectArticle"
                          source="#{selectMagazine.name}"/>
        </af:panelBorder>
      </af:panelPage>
    </h:form>
    ...
  </f:view>
</jsp:root>



Listing 3: The selectMagazine managed bean

package com.jdj.sample;

import ...

public class SelectMagazine {

...

    public void setDescUpdate(UIComponent descUpdate) {
        this._descUpdate = descUpdate;
    }

    public UIComponent getDescUpdate() {
        return _descUpdate;
    }

    public void valueChanged(ValueChangeEvent vce)
    {
      UIComponent component = vce.getComponent();
      String rendererType = component.getRendererType();

      if (rendererType.equals("oracle.adf.Choice"))
      {
        _addTarget(_descUpdate);
      }
    }

    private void _addTarget(UIComponent target)
    {
      AdfFacesContext adfContext = 
                      AdfFacesContext.getCurrentInstance();
      adfContext.addPartialTarget(target);
    }

    ...
    private UIComponent _descUpdate;

}


Listing 4: The PPR callback function

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
SYSTEM "http://www.w3.org/TR/html4/loose.dtd" >
<html dir="ltr" lang="en-US">
<head>
  ...
  <meta http-equiv="Content-Type" 
        content="text/html; charset=windows-1252"/>
</head>
  <body onunload="_partialUnload()">
  ...
  <script>
    var _pprLibraries=['/JDJ_Article5-view-context-
                        root/adf/jsLibs/ScriptEval10_1_3_0_4.js'];
    var _pprTargets=['_id5:selImg',
                     '__id5_Postscript',
                     '_id5:selDesc'];
    _partialChange()
  </script>
</html>