| home | suche | kontakt/johner | institut | hinweise studierende | tech-docs | blog | mindmailer |
![]() |
Data Binding
Data Binding nennt man des Prozess der Daten eines Objektes, mit dem eines anderen verbindet. Es bietet somit einen einfachen Weg Daten von unterschiedlichen Schichten der Applikation zu übertragen.
In diesem Zusammenhang ist auch das Flex-Element DataGrid von Bedeutung. Es dient der Darstellung von Daten in Form einer Tabelle:
<!-- d) über Datenmodell mit Tabelle -->
<mx:DataGrid x="823" y="72" dataProvider="{meinmodell.student}">
<mx:columns>
<mx:DataGridColumn headerText="Vorname" dataField="vorname"/>
<mx:DataGridColumn headerText="Nachname" dataField="nachname"/>
</mx:columns>
</mx:DataGrid>
Lokale Data Bindings
Es gibt verschiedene Möglichkeiten von lokalen Data Bindings.
Es ist zum Beispiel möglich in einem Textfeld, die Daten eines weiteren Textfelds anzeigen zu lassen. Dies kann man direkt über das Attribut "text" tun. Diese Variante wäre ein "inline"-Databinding:
<!-- Databindings -->
<!-- a) Inline -->
<mx:TextInput id="inputfeld" x="90" y="376"/>
<mx:Text x="346" y="378" text="{inputfeld.text}"/>
Es gibt auch ebenso ein Databinding-Tag: <mx: Binding>. Auch mit diesem Tag, ist es möglich die Inhalte zweier Textfelder abzugleichen:
<!-- b) Über Tag "Databinding" -->
<mx:Binding source="inputfeld.text" destination="gebundener.text"/>
<mx:Text id="gebundener" x="509" y="378" text="Text"/>
Die dritte Variante wäre eines Databindings über eine seperates Datenmodell in Form einer seperaten XML-Datei:
<!-- c) über Datenmodell -->
<mx:Model id="meinmodell" source="../daten/Studenten.xml"/>
<mx:Label x="90" y="434" text="{meinmodell.student[1].vorname}"/>
Externe Data Bindings
Natürlich ist auch ein Data Binding zu Daten auf anderen Seiten möglich.
Hierzu benötigt man einen HTTPService, welcher bei Bedarf die Daten von der gewünschten Seite abruft.
In dem Beispielcode definieren wir einen HTTPService, der von "http://www.johner.org" Daten anfordert.
Es gibt eine Funktion die anzeigt, wenn die Daten angekommen sind (onResult()) und eine Funktion welche anzeigt, falls die Übertragung nicht funktioniert hat (onFault()).
Die Funktion datenholen() leitet dabei den Request der Daten ein. Diese Funktion wird über einen Button aktiviert.
Die angeforderten Daten werden in einer DataGrid-Tabelle anzeigt.
<!-- f) entfernte Daten -->
<mx:HTTPService id="entfernteDaten"
url="http://www.johner.org/fileadmin/vorlesungen/material +
"/SOTE/personen.xml"
result="onResult"
fault="onFault"
method="GET"/>
<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
public function onResult(event:ResultEvent):void {
Alert.show("Daten angekommen");
}
public function onFault(event:FaultEvent):void {
Alert.show("Fehler beim Daten anfordern");
}
public function datenholen(event:Event):void{
entfernteDaten.send();
}
]]>
</mx:Script>
<mx:DataGrid x="823" y="254"
dataProvider="{entfernteDaten.lastResult.studenten.student}">
<mx:columns>
<mx:DataGridColumn headerText="Column 2"
dataField="vorname"/>
<mx:DataGridColumn headerText="Column 3"
dataField="nachname"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="823" y="432" label="Bitte Daten holen"
click="datenholen(event)"/>
