Details für das Faces Client-Beispiel

Übersicht der Beispiele

Das Portfoliobeispiel ahmt eine webbasierte Anwendung zur Portfolioverwaltung nach. Das Ziel ist es, die Benutzer in die Lage zu versetzen, alle ihre Portfolios anzuzeigen, durch sie zu navigieren, sie grafisch darzustellen und sie regelmäßig mit aktuellen Aktienkursen, die der Seite durch Web-Services geliefert wurden, zu aktualisieren. Die Benutzer sind auch in der Lage, die Mengen ihrer Bestände für Analysezwecke zu ändern.

Das Hello World-Beispiel demonstriert die Leistungsfähigkeit des Faces Client Framework durch Zeigen einer MVC (Model View Controller)-Konfiguration auf einer Seite mit einem sehr einfachen Modell und durch die Verwendung von zwei Eingabefeldern als Steuerelemente.

Dokumentation zur Portfolio-Anwendung

Das Portfoliobeispiel ahmt eine webbasierte Anwendung zur Portfolioverwaltung nach. Das Modell für diese Anwendung verfügt über ein Stammverzeichnisobjekt, das eine Sammlung von Benutzern und eine Sammlung von Beständen enthält. Es enthält auch einen Verweis auf ein einzelnes Bestandsobjekt, das als Platzhalter verwendet wird, um in dem Beispiel Daten von Web-Services zu senden und zu empfangen. Weiterhin gibt es Benutzer. Jeder Benutzer kann null oder mehr Portfolios und jedes Portfolio kann null oder mehr Positionen haben. Jede Position zeigt auf einen Bestand.

Es folgt eine Erklärung der Konfiguration der verschiedenen Steuerelemente auf der Seite.

Die Seite hat zwei Anzeigen mit Registerkarten. Die erste Anzeige mit Registerkarten hat 3 Anzeigen. Die Baumanzeige zeigt eine Baumstrukturansicht, die mit einer Liste von Benutzern verknüpft ist, die mit dem Stammverzeichnis verbunden sind und zeigt für jeden Benutzer seine Portfolioliste an. Die Datenrasteranzeige zeigt ein Datenraster an, das an die Positionen eines ausgewählten Portfolios gebunden ist. Die Gesamtanzeige zeigt die Baum- und Datenrasteranzeige mit derselben Konfiguration wie in der Baumanzeige und der Datenrasteranzeige Seife für Seite an.
Die zweite Anzeige mit Registerkarten hat zwei Anzeigen. Die grafische Anzeige zeigt ein grafisches Steuerelement an, das an die Positionen des ausgewählten Portfolios gebunden ist. Die X-Achse der Grafik zeigt eine Liste von Bestandssymbolen, und die Y-Achse zeigt die entsprechenden Preise und Mengen für jeden Bestand an. Die WebServices-Anzeige zeigt einige Eingabe- und Ausgabetextfelder an, die an die Eigenschaften des temporären Platzhalterbestands gebunden sind. Die Befehlsschaltfläche auf dieser Anzeige dient dazu, einen Bestands-Web-Service aufzurufen.

Es folgt eine kurze Zusammenfassung der Interaktionen zwischen den Steuerelementen

Beachten Sie, dass jedes Steuerelement dem Modell unabhängig zugeordnet ist, so dass alle Änderungen an den Modelldaten in dem Steuerelement widergespiegelt werden. Zusätzlich zu diesen impliziten Bindungen gibt es einige explizite Bindungen zwischen den Steuerelementen. Wenn Sie ein Portfolio in der Baumstrukturansicht hervorheben, werden die Datenrasteranzeige und die grafische Anzeige mit diesem Portfolio-Objekt aktualisiert und neu angezeigt, um die Positionen dieses Portfolio-Objekts zu zeigen. Diese Art eines Ereignissystems haben wir zwischen der Baumstrukturansicht in der Baumstrukturanzeige und der Datenrasteransicht in der Datenrasteranzeige sowie zwischen der Baumstrukturansicht in der Gesamtansicht und der grafischen Ansicht in der Grafikanzeige erstellt. Eine zweite Ereignisart, die wir erstellen, ist zwischen der Datenrasteransicht in der Gesamtanzeige und dem Platzhalter-Bestandsobjekt. Wenn eine bestimmte Zeile im Datenraster hervorgehoben wird, werden alle Felder in dem Bestandsobjekt für diese Position in die entsprechenden Felder in dem Platzhalter-Bestandsobjekt kopiert. Als Ergebnis werden die Werte in den Eingabe- und Ausgabefeldern in der WebService-Anzeige aktualisiert.

Um den Bestands-Web-Service aufzurufen, um die Börsennotierung für ein bestimmtes Symbol zu erlangen, klicken Sie auf die Schaltfläche "Informationen abrufen" in der WebServices-Anzeige. Die durch die Formularsteuerelemente in der Web-Service-Anzeige angezeigten Werte werden mit den durch dem Bestands-Web-Service abgerufenen Werten aktualisiert.

Sie können auch die Menge der Aktien im Datengitter (Data Grid) in der Vollanzeige (Full Panel) ändern. Durch jede Änderung bei der Menge der Aktien wird automatisch die Grafikanzeige (GraphDraw) un die Spalte "Gewinn/Verlust" (Gains/Losses) aktualisiert. Sie können darüber hinaus alle Änderungen, die an den Daten auf der Clientseite mit der Server-seitigen Bean vorgenommen wurden, synchronisieren, indem Sie den Knopf "Fertig stellen" in der Vollanzeige drücken.

Dokumentation zur Hello World-Anwendung

Für diese Anwendung auf der Serverseite haben wir eine einfache Klasse mit dem Namen 'Hello', die ein Attribut mit dem Namen 'Text' des Typs Zeichenfolge enthält. Auf der Clientseite haben wir dasselbe Modell in JavaScript exportiert, und in dem Browser haben wir zwei Eingabetextfelder, die wir beide mit dem Textattribut des Hello-Objekts verbinden möchten. Wenn wir den Wert eines Steuerelements aktualisieren, so wird dies das Textfeld des Hello-Objekts ändern, was dann dazu führt, dass der Wert an das andere Steuerelement weitergegeben wird, ohne dass wieder ein Umlauf zurück zum Server erforderlich ist.

Versuchen Sie, den Wert der Zeichenfolge innerhalb des ersten Texteingabefelds in "Hello World!!!" zu ändern. Das Steuerelement wird ein Ereignis starten, durch das das zu Grunde liegende Datenmodell (auf der Clientseite) aktualisiert wird und, wenn Sie das erste Texteingabefeld verlassen (außerhalb des Feldes klicken oder zum zweiten Texteingabefeld navigieren), wird sich der Wert in dem zweiten Texteingabefeld in "Hello World!!!" ändern, da es auch an dasselbe Attribute desselben Objekts wie das erste Steuerelement gebunden ist.