User Interface
Die Gestaltung des User Interfaces einer Web-Dynpro-ABAP-Anwendung bietet vielfältige Möglichkeiten an UI-Elementen und insbesondere auch vielfältige Kombinations- und Schachtelungsmöglichkeiten. Insbesondere letzteres führt jedoch auch schnell zu völlig überladenen Views, mit denen nicht nur die Performance der Anwendung sondern auch deren Benutzer überfordert ist. Vermeiden Sie daher grundsätzlich komplexe Strukturen in Ihren Views wann immer dies möglich ist.
Matrix-Layout
Verwenden Sie in der Regel, d.h., bei normaler Komplexität eines View-Layouts, das Matrix-Layout auch wenn die Voreinstellung des View Editors Ihnen ein Flow-Layout anlegt. Das Matrix-Layout hat insbesondere den Vorteil, dass es einige Formatierungshilfen automatisch liefert, die bei aufwändigerer View-Gestaltung ansonsten nur sehr mühsam erzielt werden können. Auf der anderen Seite ist ein Matrix-Layout aber genau dann ungeeignet, wenn Ihr View ohnehin nur ein sehr einfaches Layout erhalten soll. In diesem Fall sollten Sie aus Performance-Gründen auf ein Flow-Layout oder ein Grid-Layout zurückgreifen.
Für das Matrix-Layout werden Ihnen die beiden Eigenschaften strechedHorizontally und strechedVertically angeboten und vorbelegt. Insbesondere die Eigenschaft strechedVertically sollten Sie abschalten, da sie zur Laufzeit im Browser oft zu Fehlern führt. Für UI-Elemente, die in ein Matrix-Layout eingebettet wurden, können Sie im Bereich LayoutData Werte für die Höhe ( height) und Breite ( width) angeben. Voreingestellt werden die von Ihnen an dieser Stelle eingetragenen Werte als sogenannte Pixel-Werte ("px") definiert. Sie können die Einheit jedoch ändern in dem Sie manuell die Einheitserweiterung "px" ersetzen durch "em" oder "ex" (siehe dazu CSS-Standards).
Tree vs. Table
Wir emfehlen, den Tree nur für wenige Einträge zu verwenden, da er kein Server-Scrolling unterstützt (<100 Einträge). Aus Performance-Sicht sollte die Table mit TreeByNestingColumn der TreeByKeyColumn vorgezogen werden.
Die Server-Performance skaliert linear zu der Anzahl der aufgeklappten Tree-Einträge, weil bei jedem Roundtrip der gesamte Tree aufgeklappt werden muss. Dazu addiert sich ein Skalierungsfaktor, der sich linear zu sichtbaren Größe des Tabellen-UI-Elements, also Anzahl der sichtbaren Zeilen und Spalten, verhält. Am Client ist die Performance nur propertional zur Größe des Tabellen-UI-Elements.
Die Tabelle ohne Tree ist nur von der Größe des Tabellen-UI-Elements abhängig.
Dynamische Programmierung
Web Dynpro ABAP erlaubt die dynamische Manipulation des View-Layouts, das heißt, Sie können zur Laufzeit gezielt UI-Elemente erzeugen, ändern und wieder entfernen. Einige Eigenschaften von UI-Elementen sind jedoch vom Verwender der Anwendung personalisierbar, d. h., zum Zeitpunkt der Anwendungsentwicklung sind die Werte von einigen der Eigenschaften unter Umständen noch nicht bekannt.
Für das Tabellen-Element einer View wurde zur Design-Zeit die Eigenschaft visibleRowCount auf den Wert 10 gesetzt. Ein Verwender hat jedoch zur Laufzeit diesen Wert für sich auf 15 personalisiert. Hierdurch ergeben sich nun zwei Aspekte, die im Rahmen einer dynamischen Manipulation beachtet werden müssen:
-
Sie können keine dynamische Veränderung des Tabellen-Elements programmieren, für die Sie den personalisierten Wert der Eigenschaft visibleRowCount benötigen, da die Laufzeit keinen Zugriff auf diesen Wert hat. Wenn Sie an dieser Stelle auf den Wert von visibleRowCount zurückgreifen, wird von der Laufzeit immer der initiale Wert 10 zurückgegeben und nicht der personalisierte Wert 15. Zur Vermeidung von Fehlern sollten Sie daher die dynamische Manipulation eines UI-Elements grundsätzlich nicht auf einem personalisierbaren Wert basieren lassen.
-
Wenn Sie eine Elemente-Eigenschaft dynamisch verändern, zieht diese Änderung nur dann, wenn der Verwender keine Personalisierung vorgenommen hat. In unserem Beispiel könnte die Eigenschaft visibleRowCount dynamisch auf 12 erhöht werden. Für alle Verwender, die keine Personalisierung durchgeführt haben, wird die Tabelle anschließend mit 12 sichbaren Reihen dargestellt. Dem Verwender jedoch, der diesen Wert bereits auf z.B. 15 personalisiert hatte, werden weiterhin 15 Tabellenreihen dargestellt. Die personalisierten Werte werden also in jedem Fall vorrangig berücksichtigt
Wenn Sie auf dynamischem Wege ein UI-Element erzeugen, achten Sie darauf, dass Sie für jedes Element eine Element-ID vergeben. Auch wenn diese Eigenschaft technisch "nur" optional ist, ist sie für den Verarbeitungsprozess sehr hilfreich. Die implizite Personalisierung kann auch nur bei gesetzter ID funktionieren, da deren Werte nur dann stabil l dem gleichen UI-Element zugeordnet werden können. Wenn Sie keine Element-ID vergeben, erhalten die Elemente bei jedem Aufruf neue, zufällig vergebene IDs, denen dann die personalisierten Werte nicht zugeordnet werden können.
Oft ist die Anzahl der zu erzeugenden Elemente zur Design-Zeit noch gar nicht bekannt. Wenn Sie beispielsweise ein Formular dynamisch erzeugen wollen, dessen Context-Knoten Sie zur Design-Zeit noch nicht kennen, müssen Sie die IDs für die Elemente generisch vergeben. Achten Sie in diesem Fall darauf, dass der Algorithmus, den Sie verwenden, immer zu eindeutigen Ergebnissen führt. Eine einfache Durchnummerierung der Elemente reicht nicht aus um sicherzustellen, dass jedes dynamisch erzeugte UI-Element immer an der richtigen Stelle der View erscheint. Beispielsweise kann in einem Knoten A das Attribut Preis an dritter Stelle stehen, in einem anderen Knoten B an fünfter Stelle der Struktur. Es ist in diesem Fall daher sinnvoller, für die Elemente-ID den Attributnamen zu verwenden.
ALV-Component
Die ALV-Component bietet der Anwendungsentwicklung eine Reihe von integrierten Services, die ohne weiteren Programmieraufwand direkt genutzt werden können. Hierzu zählen solche Funktionen wie Filtern, Sortieren oder Summenbildung. Allerdings erhöht sich natürlich mit Verwendung der ALV-Component die Last auf der Laufzeit erheblich, eine einfache Tabellendarstellung mit Hilfe des UI-Controls table ist wesentlich performanter. Verwenden Sie die ALV-Component daher nur dann, wenn Sie die von ihr angebotenen Funktionen wirklich benötigen. Wenn ihre Anwendung an der entsprechenden Stelle mit einer einfachen Web-Dynpro-Tabelle auskommt, wählen Sie in jedem Fall die einfachere Lösung.
Wenn Sie eine ALV-Component verwenden, können Sie die darzustellenden Daten sowohl über ein normales Component-übergreifendes Mapping als auch über ein externes Context-Mappingübergeben.
Konfigurationsmöglichkeiten
Nutzen Sie im Rahmen Ihrer Anwendungsentwicklung die Möglichkeiten der Personalisierung und Customizing. Bedenken Sie bei der Erstellung von generischen Components jedoch, dass eine nachgelagerte Anwendungsentwicklung ihrerseits auch dynamisch UI-Elemente hinzufügen kann, d.h. es ist nicht sinnvoll, von vorne herein ein maximales Set an UI-Elementen anzubieten und gleichzeitig davon aus zu gehen, das viele der Elemente später wieder ausgeblendet werden. Beschränken Sie sich daher bei der initialen Erstellung auf die wirklich benötigten Elemente.
Weitere Informationen: