Teil 1: Anlegen und Bearbeiten der View "Suchen" 

 

Nachdem Sie eine neue Web-Dynpro-Component für diese Übung angelegt haben, müssen Sie nun die erste View dieser Component hinzufügen.

 Achten Sie darauf, dass sich die Workbench im Änderungsmodus befindet!

 

       1.      Markieren Sie dafür in der Objektliste den obersten Knoten, also den Eintrag des Component-Objekts. Öffnen Sie dessen Kontexmenü mit Hilfe der rechten Maustaste.

       2.      Wählen Sie Anlegen ® View und geben Sie im folgenden Dialog einen Namen (z.B. „Suchen“) für die neue View an. Bestätigen Sie den Dialog. Im Editor-Bereich der Workbench wird Ihnen nun der Web Dynpro Explorer angezeigt und Sie haben die Möglichkeit, die neue View zu gestalten.

       3.      Fügen Sie über das Kontextmenü des RootUIElementContainers ein Element vom Typ Group für das Layout ein. Wählen Sie in der Eigenschaftentabelle des Elements das Layout MatrixLayout.

       4.      Geben Sie eine Höhe von 10ex sowie eine Weite 40ex in der Eigenschaftentabelle dieses Elements an.

       5.      Für das Element vom Typ Group wurde automatisch ein Element vom Typ Caption eingebettet welches zur Aufnahme der Überschrift des Group-Elements vorgesehen ist. Markieren Sie das UI-Element Caption_1 in der Elemente-Hierarchie der View und geben Sie einen geeigneten Text in der Eigenschaftentabelle ein. Sichern Sie die View.

Mit dem Sicherungsvorgang ist in der Objektliste der Component ein neuer Ordner eingefügt worden. In diesem Ordner wurde die neue View abgelegt.

       6.      Markieren Sie nun in der Elemente-Hierarchie der View das Element vom Typ Group und öffnen Sie dessen Kontextmenü.

       7.      Fügen Sie in das Group-Element zwei weitere Elemente hinzu: eines vom Typ Label und eines vom Typ Inputfield.

       8.      Markieren Sie das Element vom Typ Label. Wählen Sie zunächst in der Eigenschaftentabelle des Elements in der Zeile Layoutdaten den Eintrag MatrixHeadData aus. Geben Sie anschließend einen passenden Text an ("Please enter.....") und deklarieren Sie die Beziehung zum gerade angelegten Inputfield-Element (Eigenschaft: LabelFor).

       9.      Als letztes legen Sie ein Element vom Typ Button unterhalb des Group-Elementes an, also wieder über das Kontextmenü des RootUIElementContainers. Geben Sie in der Eigenschaftentabelle einen Text für diesen Knopf ein ("Go!") und sichern Sie Ihre View.

Nun muss ein Context für diese View gepflegt werden.

   10.      Wechseln Sie auf die Registerkarte Context.

   11.      Markieren Sie den Wurzelknoten Context des Contextes der View Suchen und öffnen Sie dessen Kontextmenü.

   12.      Wählen Sie Anlegen ® Knoten.

   13.      Geben Sie einen Namen (z.B. "data") für diesen Knoten ein und wählen Sie die Kardinalität 1..1. Bestätigen Sie den Anlege-Dialog.

   14.      Markieren Die den neuen Knoten und öffnen Sie dessen Kontextmenü.

   15.      Legen Sie mit Hilfe des Kontextmenüeintrags Anlegen über Wizard ein Attribut aus der Komponenten der Struktur SFLIGHT an. Wählen Sie aus der Struktur das Feld CARRID aus.

   16.      Sichern Sie die View und wechseln Sie wieder auf die Registerkarte Layout.

   17.      Markieren Sie das Element vom Typ Inputfield. In der Eigenschaftentabelle des Elementes klicken Sie nun auf die Binding-Schaltfläche (ganz rechts) der Zeile value. In einem zusätzlichen Dialogfenster wird Ihnen der hierarchische Context der View Suchen angeboten und Sie wählen das soeben angelegte Attribut CARRID per Doppelklick aus.

Der Wert des Elements vom Typ Inputfield ist nun an das Context-Attribut CARRID gebunden.

Die View lässt sich jetzt zu ersten Testzwecken im Browser anschauen. Fahren Sie fort mit

Teil 2: Testen der ersten View