4

OFBiz Tutorial: Embedded Pages mit Layered Ajax Links

Geschrieben am 17.03.2011 in Technik, Tutorials von Sebastian Leitner

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!

Dieser Artikel gefällt Ihnen? Sagen Sie's Ihren Freunden:

4 Antworten bisher.

  1. Heico sagt:

    Hallo.
    Schön, dass es eine Möglichkeit gibt, auch Informationen über einen Layer anzuzeigen.
    Verstanden habe ich nur noch nicht ganz, wie man dies ausgehend von einer ListView ansteuert, so dass z.B. aus einer ArtikelListe Details zu einem ausgewählten Artikel über die „embedded page“ dargestellt werden.
    O.g. Beispiel bezieht sich auf einen „globalen“ Link auf der Seite. Auch müsste ich für meine Artikel-Detail-View Parameter übergeben können…
    Gruß, Heico

    • Hallo Heiko,

      innerhalb von Listen kannst du die „embedded pages“ nur über
      das Tag aufrufen. Über den Tag ist es aus den Forms heraus nicht möglich. Falls die Lookups
      nicht deinen Anforderungen entsprechen, müsstest du das Link Tag
      erweitern und die Funktionalität nachbauen. Falls du dafür Hilfe
      benötigst, melde dich einfach.

      Viele Grüße
      Sascha

      • Heico sagt:

        Hallo Sascha.

        Danke für deine Antwort. Gut, in den Listen könnte ich
        mir soweit helfen, dass ich in die Detail-View des jeweiligen
        Formulars springe.

        Wie aber, wenn ich nun in einer Form bin und dort z.B.
        Hersteller-ID, Produkt-ID, etc. habe und diese Id’s mit
        einem Link auf das Popup versehen möchte?

        Gruß, Heico

        • Hallo Heico,
          du könntest die Parameter einfach an die URL hängen
          (per GET Request).
          controllerCall?param1=value1&param2=value2

          Die Parameter kannst du dann interpretieren und
          die entsprechenden Informationen im Lookup rendern.

          Viele Grüße
          Sascha

Hinterlassen Sie eine Antwort





*