RSS

myWebGate Building Process – Dojo und Templates

11 Apr

Das Benutzerverzeichnis ist ein Kernteil des myWebGate Framworks. Um dem Benutzer ein besonderes Erlebnis bei der Bedienung zu bieten, ist das Benutzerverzeichnis als “OnePage” Applikation designet. D.h. wir präsentieren alle Inhalte dynamisch. Die Daten werden via REST API direkt vom Server gelesen und dann on the Fly gerendert.

JSON 2 HTML Renderer gibts wie Sand am Meer. Unser Ehrgeiz war aber, dass wir das Problem mittels DOJO lösen (naja auch einige Lizenzfragen sind dann einfach geklärt). Leider ist es mit DOJO so, wie mit manchem genialen Projekt. Irgendwie hat der Dokumentator frei gehabt. Erschwerend kommt dazu, dass im Gebrauch mit XPages noch ein paar Dinge zu beachten sind.

Also zuerst das Kleingedruckte (oder wie krieg ich so ein Design hin, wie es Rechts zu sehen ist).

  1. Wir haben das HTML Template als PAGE erfasst und dort den Contentype auf HTML gesetzt.
  2. Das HTML Template darf nur 1 Root Element haben, sonst hat DOJO ein Problem
  3. Das neue DOJO Modul muss mittels
    <xp:dojoModulePath url=”biz.webgate.mywebgate.person”
    prefix=”mywebgate.Person”>
            </xp:dojoModulePath>
    eingebunden werden.

Tja und dann ist alles ziemlich simpel. Wir erstellen eine Javascript Client -Library, die wir biz.webgate.mywebgate.person.js nenne und schreiben dort folgenden Code rein:

Mittels dojo.provide definieren wir, was dieses File liefert, dojo.require definiert was wir alles brauchen, hier ist dojox.dtl._Templated die Rendering Enginge, die auf django basiert. Im dojo.declare geschieht die Magie. Mittel der cache Anweisung lesen wir das HTML File ein und peron:null erweitert unser Widget um ein neues Objekt.

In der Funktion openPersonTab() fügen wir dann die Person ein. Dabei greifen wir auf ein Spezielles TAB Objekt zu, dass uns das dynamische generieren der Tabs erlaubt. Die Variable xhrArgs definiert den Zugriff auf unser REST Service und lädt von dort das Personen Objekt. Der effektive Aufruf geschicht dann mit dojo.xhrGet(…), aber im Objekt haben wir auch die Verarbeitung des Resultats definiert. load wird dann aufgerufen, wenn wir erfolgreich die Daten abgegriffen haben. Innerhalb dieser Funktion initalisieren wir ein neues Widget und geben die data (das ist das Person Objekt vom Rest Service) direkt an das Widget weiter. dojox.dtl._Template redert dann das Template. Und durch placeAt() hängen wir das Renderresulat an das richtige Ort.

Blicken wir noch in das HTML Template:

Der Zugriff erfolgt über die {{person.____ }} Anweisungen. Wie man aus dem Code erkennen kann sind sowohl IF abfragen, wie auch for Schleifen möglich. Der Sprachumfang von DJANGO wird hier detailiert beschrieben.

Der REST Service liefert übrigens folgenden Code zurück:

Dieses Konstrukt lässt es nun zu, dass wir ohne Rendering Aufgabe für den Server die verschiedensten Personen öffnen:

Der vollständige Code wird im Juni auf openNTF veröffentlicht und ist unter der Apache Lizenz verfügbar.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: