OFBiz Tutorial: Embedded Pages mit Layered Ajax Links

Das OFBiz ScreenWidget Framework bietet seit kurzem eine neue Möglichkeit, Verlinkungen zu realisieren.

Bisher wurden <Link>-Tags in Screen Widgets als Standard Hyperlinks ausgeführt. Das bedeutet beim Betätigen des Links wird eine neue Seite im definierten Target Fenster (_blank, _self, …) geladen.

Sollte die verlinkte Seite jedoch nur einige Informationen oder ein kleines Formular zum Speichern von Daten enthalten, ist es der Benutzerführung nicht förderlich von einer Seite auf die andere zu springen – der Benutzer wird beim Neuladen der Seite in seinem persönlichen Workflow gestört. Besser wäre es, die Informationen oder Formulare direkt innerhalb der Seite anzuzeigen um eine fehlerfreie Bearbeitung zu ermöglichen.

Um dies zu realisieren, kann das Target eines Links in einer Ajax Box geladen werden. Somit entsteht der Eindruck einer eingebetteten Seite, ähnlich wie bei den Lookups. So funktioniert das Ganze:

Erstellen eines Link Tags

Als erstes erstellen wir eine ExampleScreens.xml Datei mit den notwendigen Basis Informationen. Innerhalb unseres Screens fügen wir einen Link Tag ein welcher folgende Attribute enthält:

• target: Die zu ladende Seite, entspricht dem Eintrag in der controller.xml
• link-type: Hier wird der Typ des Links definiert, für die embedded Pages definieren wir den Typ „ajax-window“
• height: Die Höhe des zu ladenden Fensters in Pixeln
• width: Die Breite des zu ladenden Fensters in Pixeln
• text: Beschriftung des Buttons
• style: CSS Klasse des Buttons

<container>
    <link target="EditExampleLayer" link-type="ajax-window" height="350" width="480" text="${uiLabelMap.ExampleNewExample}" style="buttontext create"/>
</container>

Controller Eintrag

Der Controller Eintrag definiert das Request Mapping und die View Map genau wie bei jedem anderen Request.

<request-map uri="EditExampleLayer">
    <security https="true" auth="true"/>
    <response name="success" type="view" value="EditExampleLayer"/>
</request-map>
 
<view-map name="EditExampleLayer" type="screen" page="component://example/widget/example/ExampleScreens.xml#EditExampleLayer"/>

Erstellen einer embedded page

Die embedded page enthält in unserem Fall einige Form Felder um Daten zu erfassen und anschließend in der Datenbank abzulegen. Der Screen darf keinen Decorator Eintrag enthalten oder es muss auf einen minimalen Dekorator, der speziell für eingebettete Seiten erstellt wurde, zurückgegriffen werden. Anderenfalls wird in der layered box das komplette Menü mitgeladen.

<screen name="EditExampleLayer">
    <section>
      <actions>
        <set field="titleProperty" value="PageTitleEditExample"/>
       <set field="tabButtonItem" value="EditExample">/>
        <set field="exampleId" from-field="parameters.exampleId"/>
        <entity-one entity-name="Example" value-field="example"/>
      </actions>
      <widgets>
        <include-form name="EditExample" location="component://example/widget/example/ExampleForms.xml"/>
      </widgets>
    </section>
</screen>

Optimieren der embedded page

Beim Absenden des Formulars werden die Daten in der Datenbank gespeichert und die Seite neu geladen. Dies kann natürlich optimiert werden um die User Experience weiter zu verbessern.

Nach dem Absenden des Requests, wird das Formular im Hintergrund abgeschickt, ein Spinner zeigt den laufenden Status der Operation an. Nach erfolgreichem Request wird der Layer geschlossen und die Ausgangstabelle aktualisiert. Somit haben wir eine komplette Update Funktion ohne Neuladen der Seite realisiert.

Darüber sprechen wir dann im nächsten Turtorial. Bis dahin viel Spaß mit dem neuen Link Typ!