Lektion L14 Handout: Datenfluss Realisierung über Context (1/2 View /2 Ebenen Applikation)

Transkript

1 In Lektion 14 erfahren Sie wie man unter Zuhilfenahme des Web Dynpro Context Daten zwischen Ebenen eines Views oder auch zwischen verschiedenen Views transferieren kann. Der Context ist hier ein Web Dynpro spezifischer strukturierter Datenspeicher, der als Medium für den Datenfluss (sowohl vertikal als auch horizontal) innerhalb einer Anwendung dient. Durch geschickte Drag & Drop Aktionen können Sie ohne jegliche manuelle Programmierung dafür sorgen, dass die Daten zwischen den verschiedenen Controller Typen und Views wunschgemäß ausgetauscht werden. Als Beispiel schauen wir uns hier den Datenfluss innerhalb eines Views zwischen den Ebenen 1 und 2, d.h. zwischen Layout (UI Elemente) und Controller (hier: der Context) an. Hinweis: zugehörige weitere Quellen sind Screencast Dateien (Videos), die inhaltlich relevant sind. Lektion L14 Handout: Datenfluss Realisierung über Context (1/2 View /2 Ebenen Applikation) Die Lektion L14 ist wie folgt gegliedert: 1. Web Dynpro Context 2. 1 View /2 Ebenen Applikation 3. Vertikaler und horizontaler Datenfluss 4. Binding + Mapping Übersicht über die Screencasts der Lektion L14 Die folgenden Screencasts ergänzen die in diesem Handout ausformulierten Texte. Screencast Inhalt L14 1 Binding beim vertikalen Datenfluss über Context (ca. 18 Min.) L14 2 Mapping beim horizontalen Datenfluss zwischen View Contexten (ca. 15 Min.) L14.1: Web Dynpro Context Das Konstrukt Web Dynpro Context dient der Datenhaltung und dem Datenfluss innerhalb einer Web Dynpro Component und dort zwischen verschiedenen Ebenen innerhalb eines Views (vertikaler Datenfluss) sowie zwischen verschiedenen Views (horizontaler Datenfluss). Der Context ist damit nicht nur transienter Datenspeicher sondern dient als Zusammenstellung von Schnittstellen Parametern bei der Sicht auf eine WDA Component unter dem Aspekt des Datenaustauschs zwischen verschiedenen Bestandteilen. Sie können anhand des Komponenten Diagramms erkennen, dass der Context quasi überall auftaucht und damit wirklich die Möglichkeit bietet, Daten zwischen allen Teilen einer WDA Component auszutauschen. Namensgleichheit ist dabei von Vorteil aber nicht zwingend notwendig: wichtiger ist die Definition einer Binding bzw. Mapping Beziehung, was wir im Abschnitt L14.4 erläutern. Dabei ist als wesentliche Voraussetzung für einen funktionierenden Datentransport eine Typgleichheit aus Datensicht festzuhalten. Damit das Context Prinzip einfach und effektiv genutzt werden kann, bietet das WDA Framework einige Features, die sowohl den Komfort bei der Realisierung des Datentransports als auch bei der Erzeugung der Contexte selbst betreffen. L14.2: 1/2 View /2 Ebenen Applikation Nachdem wir in Lektion L13 die Realisierung einer 2 View/2 Ebenen Applikation kennengelernt haben, bei der ohne Anwendungslogik nur die Steuerungslogik ( Gehe von View1 zu View2, wenn der Button gedrückt wird ) benutzt wurde, möchten wir jetzt auf die Situation bei einem View eingehen, auf dem wir bleiben wollen, d.h. nur einen Roundtrip auslösen. Beim Roundtrip soll jetzt auf demselben View der Eingabewert Lektion 14: Seite 1 von 14

2 eines InputField UI Elements in ein TextView UI Element übertragen werden ohne Programmierung, nur unter Nutzung eines Context. Später zeigen wir dann die Kombination von vertikalem mit horizontalem Datenfluss. L14.3: Vertikaler und horizontaler Datenfluss ( Screencast L14 1) Abb. L14 01 zeigt sowohl die Funktionsweise des vertikalen als auch des horizontalen Datenflusses für alle WD Ausprägungen. Für WDA ist dabei das Model Binding in dieser Form nicht relevant, sondern in einer anderen Art (siehe später). Wir schauen uns nur die senkrechten Linien im linken View an zwischen Layout und View Context (Data Binding) sowie zwischen View und Component Controller (Context Mapping). Datenfluss WD View[i] {stateful} Layout[i]: UI-Element D.-Binding View-Context[i]: Contextelement View[j] {stateful} Layout[j]: UI-Element D.-Binding View-Context[j]: Contextelement C.-Mapping Component-Context: Contextelement Component/Custom-Controller {stateful} onactionx [Namensgleichheit] / fireplug to j C.-Mapping Component-Context: Contextelement M.-Binding M.-Binding Model-Proxy-Klasse: Modelobjekt Abb. L14 01: Datenfluss bei WDA: horizontal und vertikal (Abb. 3 26) Für unser ganz einfaches Beispiel könnte man sogar auf das Context Mapping zum globalen Controller verzichten: Allein das Data Binding zwischen einem UI Element und dem Context Element im View Context (= strukturierte Variable zur Datenspeicherung) reicht aus, um die oben erwähnte Grundanforderung abbilden zu können. Dazu fügt man 2 UI Elemente im Layout ein und verbindet beide mit demselben View Context Element: wenn das erste UI Element ein Eingabefeld ist und das zweite ein Anzeige UI Element, dann wird nach dem Auslösen eines Roundtrips über den View Context der eingegebene Wert im Ausgabefeld angezeigt. Dazu ist keine Zeile Code notwendig! Wie löst man einen Roundtrip aus? Wie in Lektion 13 bereits beschrieben durch das Anlegen einer Action (z.b. gekoppelt an einen Button), wobei die dabei automatisch generierte onaction Methode keine Zeile Code enthält. Lektion 14: Seite 2 von 14

3 Was ist im View Context zu tun? Sie müssen einen Context Knoten anlegen und dort über das Kontext Menü (beachten Sie die Schreibweise: hier ist rechte Maustaste gemeint!) dazu ein Context Element einfügen, Typ string. Das war es noch nicht ganz: Sie müssen jetzt noch die beiden UI Elemente an dieses Context Element binden. Das geht im Layout Editor: diese Vorgehensweise nennen wir Top Down. Auf Bottom Up gehen wir später ein. Der in Abb. L14 02 abgebildete Screenshot ist beispielhaft zu verstehen. Abb. L14 02: Data Binding im Layout Editor: Top Down (Abb. xx x) Context Strukturen anlegen Um jetzt die für den Datenfluss benötigten Context Strukturen anzulegen, gibt es verschiedene Möglichkeiten. Wir zeigen Ihnen jetzt die Variante, bei der wir zuerst ein UI Element im Layout Editor anlegen, dann im Context Editor die benötigte Datenstruktur erzeugen und im dritten Schritt über den Binding Button (siehe Abb. L14 02 bei Eigenschaften: die Spalte ganz rechts) das Binding zwischen UI Element und Context Element herstellen. Schritt 1: UI Element einfügen Legen Sie über das Kontext Menü (aufpassen: Kontext ist nicht gleich Context!) ein UI Element vom Typ InputField an. Geben Sie dafür im Popup, das dem Bild in Abb. L14 03 folgt, einen Namen (z.b. INP1) an und wählen bei Typ InputField aus. Abb. L14 03: UI Element einfügen (Abb. L14 cas1_p1) Lektion 14: Seite 3 von 14

4 Bei den Eigenschaften dieses UI Elements können Sie in der Binding Spalte sehen, dass noch kein grüner Haken angebracht ist, d.h. das Binding, das für ein InputField Pflicht ist, fehlt noch. Schritt 2: Context Struktur anlegen Wir wechseln in den Context Editor und gehen dort auf dem Root Knoten CONTEXT über das Kontext Menü Anlegen Knoten (siehe Abb. L14 04). Jetzt erscheint ein Popup Knoten anlegen (siehe Abb. L14 05), in dem Sie einen Knotennamen angeben und in unserem Fall keine weiteren Eintragungen machen. Hinweis: Später können Sie die Kardinalität ändern (für z.b. Tabellen) oder gleich eine Dictionary Struktur eintragen, um dann über den Button Attribute aus Struktur hinzufügen den Vorteil des Dictionary voll nutzen zu können. Abb. L14 04: Context Struktur anlegen Knoten (Abb. L14 cas1_p4) Abb. L14 05: Knoten anlegen (Abb. L14 cas1_p5) Lektion 14: Seite 4 von 14

5 Das Ergebnis dieser Aktion sehen Sie in Abb. L Abb. L14 06: Anzeige des angelegten Knotens (Abb. L14 cas1_p6) Als nächstes fügen Sie diesem Context Knoten ein Context Element hinzu. Sie führen das wieder über das Kontext Menü aus und wählen als Datentyp STRING (siehe Abb. L14 07 und L14 08) Abb. L14 07: Context Struktur anlegen Attribut (Abb. L14 cas2_p3) Zu Demozwecken legen wir in zweites Context Element Schuhgröße an. Man kann dann später diese Datenstruktur auf einen Rutsch mit Binding bzw. Mapping versehen. Lektion 14: Seite 5 von 14

6 Abb. L14 08: Attribut anlegen (Abb. L14 cas2_p4) Das Ergebnis ist in Abb. L14 09 zu sehen. Abb. L14 09: Anzeige des angelegten Knotens (Abb. L14 cas2_p5) Schritt 3: Binding herstellen Um das UI Binding durchzuführen, gehen Sie in den Layout Editor und drücken im Eigenschaften Bereich des InputField Elements bei der Property value auf den Button in der Binding Spalte. Dieser Button hat jetzt noch ein gelbes Icon mit dem Tooltip Binding fehlt. Es öffnet sich beim Drücken das in Abb. L14 07 links sichtbare Popup, in dem Sie jetzt NAME auswählen. Danach ändert sich das Icon in der Binding Spalte auf grün (siehe rechter Screenshot in Abb. L14 10). Um den vertikalen Datentransport beim Roundtrip zu testen, realisieren wir das folgende Szenario: Sie geben in einem Eingabefeld einen Wert ein, der nach Auslösen des Roundtrips durch Drücken eines Buttons, dem eine Dummy Action hinterlegt ist (d.h. die macht nichts außer einen Roundtrip) in einem TextView Feld angezeigt werden soll. Dazu legen wir noch ein TextView UI Element an und binden jetzt dieses UI Element ebenfalls an dasselbe Context Element NAME. Diese Aktion ist in Abb. L14 11 zu sehen. Nach dem Anlegen des TextView Elements ist die Property text rot markiert, da diese entweder direkt gefüllt werden muss, oder über das Binding einen Wert aus dem Context zugewiesen bekommt. Wir entscheiden uns für letzteres und führen die gleiche Aktion wie beim InputField Element durch. Lektion 14: Seite 6 von 14

7 Abb. L14 10: Context Binding definieren (Abb. L14 cas1_p7) Abb. L14 11: fehlendes obligatorisches Binding (Abb. L14 cas1_p8) Um den Button mit der Dummy Action anzulegen, gehen Sie so vor wie Sie es im Prinzip schon von Ihrer Navigationsübung aus einer vorigen Lektion kennen. In Abb. L14 12 und Abb. L14 13 zeigen wir kurz die Teilschritte im System. Abb. L14 12: UI Element anlegen (Typ: Button) (Abb. L14 cas1_p9 / 10) Lektion 14: Seite 7 von 14

8 Bei der Abfrage, ob Sie ein OutboundPlug eingeben wollen, wählen Sie keines aus und legen jetzt auch keines an, da wir ja vorerst nur einen Roundtrip auslösen wollen. Der dadurch generierte Actionhandler enthält keinen Methodenaufruf, ist daher wie gewünscht dummy und erfüllt genau unseren Zweck. Abb. L14 13: Binding eines Ereignisses (Abb. L14 cas1_p11) Nachdem Sie jetzt alles aktiviert haben, können Sie testen: es erscheint das in Abb. L14 14 links zu sehende Eingabebild. Wenn Sie jetzt dort einen Wert eingeben und den Button drücken, erscheint der eingegebene Wert im TextView Element, das wir im Layout Editor zwischen Eingabefeld und Button platziert hatten (siehe rechter Screenshot). Abb. L14 14: Testlauf (Abb. L14 cas1_p13 / 14) Lektion 14: Seite 8 von 14

9 L14.4: Binding + Mapping ( Screencast L14 2) Das im letzten Abschnitt beschriebene Data Binding kann jetzt noch durch ein Context Mapping erweitert werden, wenn Sie eine Anwendungsfunktionalität im globalen Controller nutzen wollen oder wenn Sie über den horizontalen Datentransport zu einem anderen View navigieren und dabei Berechnungen oder Datenrecherchen durchführen wollen. Wir kombinieren dies gleich mit einem zweiten View, sodass Sie die Notwendigkeit sehen, wenn Daten von einem View zum anderen übertragen werden sollen, dass dies über den globalen Controller passieren muss. Das kann ohne Anwendungslogik Code geschehen, d.h. hier muss nichts programmiert werden. Es muss nur die fire Plug Methode für die Navigation aufgerufen werden. Jetzt muss aber nicht nur im zweiten View der identische Context Knoten angelegt werden, sondern auch im globalen Component Controller. Weiterhin muss ein Mapping Pfad zwischen Component und beiden View Controllern hergestellt werden. Da wir vorher noch gar keinen Component Context benötigt hatten, führen wir dies jetzt durch und kommen zum in Abb. L14 15 zu sehenden Ergebnis, das natürlich nicht von dem Context Knoten der Views abweichen darf. Abb. L14 15: zu mappender Context Knoten (Abb. L14 cas2_p6) Im Start View sieht der Context Editor jetzt so aus wie in Abb. L14 16 zu sehen: beide Contexte sind identisch, aber das Mapping fehlt noch. Abb. L14 16: Mapping von Context Knoten (Abb. L14 cas2_p7) Lektion 14: Seite 9 von 14

10 Nachdem wir das Mapping (rechte Maustaste Funktion!) ausgeführt haben, sehen wir als Bestätigung im unteren Bereich des Context Editors (Abb. L16 17) den eingefügten Mapping Pfad. Abb. L14 17: Mapping Pfad nach durchgeführtem Mapping (Abb. L14 cas2_p8) Jetzt können wir im neuen View das Anlegen der UI Elemente sowie das Binding anstatt wie bisher manuell über zuerst UI Element, dann Binding durchführen, jetzt über die Rechte Maus Funktion Container Formular erzeugen (siehe Abb. L14 18) durchführen und sparen uns viel Zeit (je mehr Komponenten eine Struktur hat, desto mehr Ersparnis, vor allem, wenn man mit Dictionary Strukturen arbeitet siehe Lektion 15!). Abb. L14 18: Container Formular erzeugen: Nutzung des Context Mappings beim Context Binding (Abb. L14 cas2_p9) Im sich dann öffnenden Fenster (Abb. L14 19) drücken Sie den Context Button im oberen Bereich. Abb. L14 19: Auswahl des Context Bindings bei Container Formular (Abb. L14 cas2_p10) Lektion 14: Seite 10 von 14

11 Es erscheint ein Popup mit der aktuellen Context Struktur (Abb. L14 20, rechter Screenshot), in der Sie jetzt nicht wie vorher ein Element, sondern jetzt eine Struktur wählen (deshalb sind die Elemente ausgegraut, der Knoten Name aber aktiv auswählbar). Sie wählen also DEMO und erhalten das im rechten Screenshot zu sehende Ergebnis. Abb. L14 20: Auswahl des Context Bindings bei Container Formular, Forts. (Abb. L14 cas2_p11) Wenn Sie jetzt wollen, dass NAME ein TextEdit Feld und SCHUHGROESSE ein InputField wird, wählen Sie die in Abb. L14 20 angezeigten Werte in der Spalte Cell Editor. Wenn Sie für einen der Attribute kein Binding durchführen wollen (d.h. das Element nicht anzeigen lassen wollen), entfernen Sie einfach das Häkchen in der Spalte Binding. Abb. L14 21 zeigt in der Drowdownbox, welche Cell Editoren generell verfügbar sind. Abb. L14 21: Auswahl des Cell Editors bei Tabellendarstellung (Abb. L14 cas2_p12) Da wir die Schuhgröße noch nicht im ersten View nachträglich eingebaut haben (siehe Abb. L14 22), müssen wir dies noch tun, wenn wir in beiden Views dieselbe Situation haben wollen. Dazu gehen wir jetzt aber NICHT manuell vor, sondern aktualisieren den bereits gleichlautenden Context Knoten wie folgt: Sie gehen über Rechte Maus Menü im View Context Knoten (siehe Abb. L14 23) auf den Eintrag Aktualisieren Mapping. Die folgende Abfrage (Abb. L14 24) beantworten Sie mit Ja. Lektion 14: Seite 11 von 14

12 Abb. L14 22: Contexte vor Aktualisierung (Abb. L14 cas2_p14) Abb. L14 23: Mapping aktualisieren (Abb. L14 cas2_p15) Abb. L14 24: Mapping aktualisieren, Forts. (Abb. L14 cas2_p16) Lektion 14: Seite 12 von 14

13 Auch die Abfrage in Abb. L14 25 können Sie mit Ja beantworten, da wir ja genau alle Komponenten des Context Knotens mitnehmen wollen. Abb. L14 25: Mapping aktualisieren, Forts. (Abb. L14 cas2_p17) Jetzt haben wir in beiden View und im Component Controller eine identische Situation im Context, wovon Sie sich in Abb. L14 26 überzeugen können. Abb. L14 26: Ergebnis der Mapping Aktualisierung (Abb. L14 cas2_p18) Lektion 14: Seite 13 von 14

14 Der Test dieser Anwendung für den kombinierten vertikalen und horizontalen Datentransport ergibt folgendes Ergebnis (Abb. L14 27): Sie geben den Namen (kelch) und die Schuhgröße (100) wie im linken Screenshot zu sehen ein. Nach Drücken des Buttons goto Ziel landen Sie auf dem Ziel View (rechter Screenshot) mit der Anzeige beider Eingabewerte des Start Views. Bem.: Die Schuhgröße ist NICHT realistisch; ) Und die Formatierung könnte auch schöner sein Das lernen Sie in einer späteren Lektion! Abb. L14 27: Testlauf (Abb. L14 cas2_p20 / 21) Lektion 14: Seite 14 von 14