eTemplate ist eine Rendering-Engine, die in früheren EGroupware-Versionen verwendet wurde, um die Benutzeroberfläche für die meisten Apps zu generieren. Sie nimmt den Inhalt einer App plus einer Vorlage und rendert ihn auf dem Server als HTML. Wenn der Benutzer dieses HTML-Formular in seinem Browser abschickt, empfängt die eTemplate-Engine es wieder auf dem Server, validiert die Eingabe und gibt sie an die Anwendung zurück.

All dies geschah auf dem Server und die Reaktion auf Benutzereingaben erforderte meist einen Server-Roundtrip. Es gab keine API, um ein bereits gerendertes Template auf der Client- bzw. Browser-Seite zu manipulieren.

All das ändert sich mit eTemplate2 in 14.1:
die Apps verwenden eine weitgehend identische API auf der Server-Seite, sie sind einfach auf 14.1 zu portieren
die eT2 API sendet Inhalte als JSON (JavaScript Object Notation) inkl. einer Url zu einer XML-Vorlagenbeschreibung an den Browser
eTemplate2 Engine im Browser lädt die Vorlage und rendert die Benutzeroberfläche (UI)
Client-seitiger Teil der App interagiert direkt mit dem eTemplate: z.B. zeigt oder versteckt ein UI-Element / Widget oder ändert dessen Aussehen
eTemplate und App nutzen die clientseitige EGroupware-API z.B. zur Abfrage einer Benutzereinstellung, eines Kontodetails oder eines Link-Titels
wenn ein neues Tabbed-Template verwendet wird, z.B. 14.1 Pixelegg-Template, bleibt die API auf dem Client bestehen und zwischenspeichert die vom Server angeforderten Daten

Sie fragen sich vielleicht: Das ist alles sehr theoretisch, was habe ich davon? Ich werde ein paar neue Widgets beschreiben, um die großen Verbesserungen der Benutzerfreundlichkeit in 14.1 und die neuen Möglichkeiten zu illustrieren:

Kontextmenüs und Symbolleisten
Listen, Bäume in Fakten alle UI-Elemente können jetzt ein Kontextmenü haben, das anzeigt, welche Aktionen auf einer Zeile oder einem Baumelement verfügbar sind. Dies ersetzt die teilweise riesige Anzahl von Icons, die wir vorher in Listen hatten. Einige Anwendungen, wie z.B. die neue Mail, verwenden jetzt Symbolleisten, um verfügbare Aktionen anzuzeigen. Der Benutzer kann diese Icons nach seinen eigenen Bedürfnissen neu anordnen und sogar weniger genutzte Icons in einem „mehr…“-Dropdown verstecken.

Ziehen und Ablegen innerhalb von EGroupware und auf und von Ihrem Desktop
Dateien können hochgeladen werden, indem Sie sie von Ihrem Desktop auf ein Popup ziehen, das einen Eintrag bearbeitet, z.B. ein InfoLog oder eine verfasste Mail. Sie können eine Datei auch auf eine Zeile in einer Liste ziehen.

Dateien können z. B. aus der Dateimanager-App auf Ihren Desktop gezogen werden, wenn Ihr Browser dies unterstützt, derzeit nur Chrome.

Datei-Uploads
sind nicht mehr durch das PHP-Speicherlimit begrenzt, dank unserer Unterstützung der html5-Datei-API.

Die Filemanager-App ist nun ein Bürger erster Klasse und die darin gespeicherten Dateien stehen überall zum Anhängen oder Verknüpfen zur Verfügung, wo man in früheren EGroupware-Versionen eine solche Datei erst herunterladen und wieder hochladen musste.

EGroupware-Einträge können auch verlinkt werden, indem man sie auf einen anderen Eintrag zieht.

Endloses Scrollen in Listen
Vor EGroupware 14.1 mussten alle Webanwendungen für ihre Listen eine sogenannte Paginierung implementieren. Die App zeigte nur eine begrenzte Anzahl von Zeilen in einer Liste und Pfeile, um den nächsten oder vorherigen Satz von Zeilen zu laden. Die Benutzer mussten immer zwischen einer schnellen und kurzen oder einer langen und langsamen Liste wählen.

eTemplate2-Listen zeigen nun einen Scrollbalken für die gesamte Liste und laden bei Bedarf weitere Einträge, während man nach oben oder unten scrollt.

eTemplate2-Listen erlauben nun auch die Größenänderung ihrer Spalten und haben eine Tastaturnavigation. Sie erlauben es, mehrere Zeilen zu markieren und Aktionen auf ihnen auszuführen.

Laden von UI-Teilen auf Abruf
eTemplate2 kann das Rendering und sogar das Laden von nicht sichtbaren UI-Elementen verschieben. Z.B. lädt ein History-Tab seinen Inhalt erst dann, wenn ein Benutzer zu ihm wechselt. Dann verwendet es die oben beschriebene endlos scrollende Liste, um die gesamte Historie eines Eintrags anzuzeigen, lädt aber nur ein paar Zeilen vom Server.

Gerahmte Vorlagen-Sets wie das neue von Pixelegg laden ebenfalls nur die aktive App und verschieben das Laden aller anderen geöffneten Apps, bis der Benutzer sich entscheidet, sie anzuschauen.

Dies ist nur ein Auszug der neuen UI-Elemente und Usability-Verbesserungen, die durch eTemplate2 und seinen Fokus auf das Rendering und die Interaktion mit dem Benutzer auf der Client- bzw. Browser-Seite zur Verfügung gestellt werden.

Mit 14.1 haben wir uns hauptsächlich auf die Entwicklung der eTemplate2-Engine und die Portierung von Apps auf diese Engine mit ihren bereits vorhandenen Funktionen konzentriert. In den nächsten Versionen werden wir diese neuen Möglichkeiten noch stärker nutzen und Apps komplett neu schreiben, so wie wir es in 14.1 mit Mail und teilweise mit Admin gemacht haben. Darüber werde ich in meinen nächsten Artikeln bloggen.

Ralf Becker

Leiter Software-Entwicklung