Dynamisches Data Binding

Das Data Binding ist eine  einfache und komfortable Möglichkeit, Datenquellen und XPages miteinander zu verbinden. Zum Einen lassen sich Frontend und Backend miteinander koppeln (also z.B. Feld eines Notes Dokumentes mit einem Label auf der XPage), zum Anderen ist eine Speicherung von Informationen innerhalb der XPages-Applikation möglich (z.B. das Ablegen eines Wertes im sessionScope-Objekt).

<xp:inputText id="inputText1"
   value="#{document1.feldName}">
</xp:inputText>

[Data binding einer Datenquelle an ein Textfeld // In Fett: Die Zuweisung per Expression Language(EL)]

Data bindings lassen sich auch dynamisch erstellen, da die Zuweisung während des Aufbauens des JSF-Baumes geschieht: Wird die Berechnung des Bindings währenddessen durchgeführt, ist es möglich, z.B. eine Zuweisung durch die Expression Language (EL) programmatisch zu beeinflussen.

<xp:inputText id="inputText1">
   <xp:this.value><![CDATA[${javascript:
      var fName = "Test";
      return '#{document1.' + fName + '}';
   }]]></xp:this.value>
</xp:inputText>

[Fett: Der Name der Variable // In Rot: „Compute On Page Load“]

Dadurch, dass die Berechnung auf „Compute On Page Load“ gesetzt ist, kann eine Variable programmatisch zugewiesen werden. Im obigen Beispiel existiert jetzt eine Zuweisung der Textfeldes an „document1.Test„.

Hierdurch lassen sich einige „Spielereien“ realisieren, z.B. dynamische Zuweisungen von requestScope-Variablen:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:div id="refreshMe">
<xp:repeat id="repeat1" rows="30" var="varcollection"
   repeatControls="true" indexVar="index">
   <xp:this.value>
      <![CDATA[${javascript:return @Explode("1,2,3,4,5",",");}]]>
   </xp:this.value>
   <xp:radioGroup id="radioGroup1">
      <xp:this.value><![CDATA[${javascript:
         var fieldName = "Radio_" + index;
         return '#{requestScope.' + fieldName + '}';}]]>
      </xp:this.value>
      <xp:selectItem itemLabel="Value1"
         itemValue="Value1"></xp:selectItem>
      <xp:selectItem itemLabel="Value2"
         itemValue="Value2"></xp:selectItem>
   </xp:radioGroup>
   <xp:br></xp:br>
</xp:repeat>

<xp:label id="label1">
   <xp:this.value><![CDATA[#{javascript:var txt = "";
      try{
         for( i=0; i<requestScope.size(); i++ ){
            if( requestScope.containsKey( "Radio_" + i ) )
            txt += requestScope.get("Radio_" + i);
         }
      }catch(e){}
      return txt;}]]>
   </xp:this.value>
</xp:label>
</xp:div>

<xp:button value="Submit" id="button1">
   <xp:eventHandler event="onclick" submit="true"
      refreshMode="partial" refreshId="refreshMe">
   </xp:eventHandler>
</xp:button>
</xp:view>

[Dynamische Zuweisung von Radio-Buttons zum Requestscope innerhalb eines RepeatControls // In Fett: Handling der dynamischen requestScope-Variablen]

Das hier gezeigte Beispiel legt fünf Radio-Button-Gruppen an, die an das requestScope-Objekt gebunden werden. Wird der Button angeklickt, werden die Daten an den Server gesendet und die ausgewählten Werte im Label angezeigt.