Alle Beiträge, jStage Platform, Technologien & Entwicklung

Freemarker – In Action

Bei der Erstellung einer webbasierten Software Lösung muss man sich frühzeitig auf eine geeignete Technologie zur Erzeugung der Website (Frontend) festlegen. Dies kann sowohl serverseitig als auch clientseitig geschehen. Dieser Beitrag befasst sich mit der serverseitigen Erzeugung von HTML-Code mithilfe der Template-Engine Freemarker. Natürlich ist eine Kombination beider Verfahren in Zeiten von JavaScript und AJAX nicht unausweichlich.

Was ist eine Template-Engine?

Eine Template-Engine ist eine Software, die Textausgaben (HTML-Code, E-Mails, Programmquellcode, etc.) auf Basis von Vorlagen (engl. Templates) und wechselnden Daten (dynamische Inhalte) erzeugt. Dabei werden sog. Platzhalter in einem Template durch dynamische Inhalte ersetzt. Template-Engines gibt es für fast jede Plattform und jeden Anwendungsfall.

Im Java-Umfeld verwendete serverseitigen Template-Engines:

Bekannte clientseitige Template-Engines:

In dieser Blog-Serie möchten wir uns ausschließlich mit Freemarker beschäftigen, da dies aktuell im jStage eShop im Einsatz ist.

Freemarker

Freemarker muss nicht zwangsläufig auf einem Server betrieben werden, sondern kann in beliebige Systeme integriert werden. Grob gesagt werden Java Objekte (Data-Model) und Template zusammengeführt und in einem beliebigen Textformat ausgegeben. Freemarker wird unter der Apache 2.0 Lizenz veröffentlicht.

data-model + template = output

Abb. 1: data-model + template = output (Quelle: freemarker.org)

Freemaker wird z. B. in der integrierten Entwicklungsumgebung (engl. integrated development environment, kurz IDE) NetBeans  zum Anlegen neuer Sourcecode Dateien verwendet. Darüber hinaus gibt es eine Vielzahl andere Systeme die Freemarker einsetzen .

Folgende Schlüsseleigenschaften zeichnen Freemarker besonders aus:

  • Sehr umfangreiche und gut gepflegte Dokumentation
  • Einfache, aber leistungsstarke, Template Programmiersprache (Freemarker Template Language kurz: FTL)
  • Kontrollstrukturen, Iterationen, Operation für Zeichenketten, Formatierung und Arithmetik, Makros und Funktion, Einbinden von anderen Templates und JSP
  • Vielfältige Einsatzmöglichkeiten, Keine Abhängigkeiten, Beliebige Ausgabeformate, Laden der Templates von beliebigen Quellen (Dateisystem, Datenbanken, etc.)
  • XML Verarbeitung
  • Und vieles mehr

Freemarker im jStage eShop

Der jStage eShop ist eine Java-basierte Webanwendung auf Basis des Spring MVC Frameworks, das Freemarker voll unterstützt. Die Entscheidung Freemarker einzusetzen, fiel jedoch nicht zu Beginn des Projekts, sondern erst sehr viel später. Zu Beginn wurde das Frontend des jStage eShops mit JavaServer Pages (JSP) entwickelt. JSP hat jedoch mehrere Nachteile, auf die an dieser Stelle expliziter eingegangen werden soll. Das Hauptargument für den Wechsel war, dass JSP auf einer sehr Java-lastigen Syntax basiert, welche einiges an Hintergrundwissen über die Programmiersprache Java selbst bedarf. Nicht jeder Webdesigner bzw. Webentwickler hat hier das nötige Know-how (oder möchte es haben). Also mussten Webdesigner/Webentwickler statischen HTML-Code erstellen und mit Kommentaren versehen, damit ein Java-Entwickler diese dann in JSP umsetzen konnte. Man konnte nicht parallel arbeiten. Es musste also eine Möglichkeit geschaffen werden, damit Webdesigner/Webentwickler ohne Mitwirken eines Java-Entwicklers das Frontend entwickeln konnten. Genau hier zeigten sich die Stärken von Template-Engines im Allgemeinen und Freemarker im Speziellen.

Freemarker bietet die Möglichkeit JSP-Taglibs und bestehende JSP’s weiterhin zu verwenden. Die Umstellung konnte also über einen längeren Zeitraum erfolgen, in dem die JSP’s nach und nach ersetzt wurden. Umfangreiche Features, wie z. B. die Warenkorb- und Bestellfunktion, konnten so zunächst weiter verwendet werden, ohne dass der User etwas davon bemerkte oder ein Funktionsverlust zu befürchten war.

Freemarker Template Language

Variablen werden mit ${Variable}  ausgegeben, Anweisungen mit <#Anweisung> notiert und Makros mit <@Makro> aufgerufen. An Makros können auch Parameter übergeben werden, die zwingend oder auch optional (ähnlich wie Varargs in Java) sein können. Funktionen werden mit ${Funktion(Argumente)} aufgerufen, wobei auch hier die Argumente optional sein können. Später dazu mehr.

Wiederkehrende Probleme bzw. Anweisungsblöcke können aus Templates herausgelöst und als Makros oder Funktion zusammengefasst werden. Dadurch lassen sich lästige Codeduplikationen vermeiden sowie der Wartungsaufwand reduzieren (DRY-Prinzip).

Einbinden von JSP’s und JSP-TagLibs

Um JSP’s und JSP-TagLibs in Freemarker verwenden zu können, muss das freemarker.ext.servlet.FreemarkerServlet  der web.xml hinzugefügt werden (siehe Using FreeMarker with servlets). Verwendet man das Spring MVC Framework in Verbindung mit dem org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver  ist die Verwendung des freemarker.ext.servlet.FreemarkerServlet  nicht möglich, sondern es muss eine von der org.springframework.web.servlet.view.freemarker.FreemarkerView  abgleitete Klasse erstellt werden. Eine mögliche Implementierung ist bei stackoverflow.com zu finden. Eine andere als die bei stackoverflow gezeigte Möglichkeit, ist das Überschreiben der Methoden    org.springframework.web.servlet.view.freemarker.FreemarkerView#writeToResponse und org.springframework.web.servlet.view.freemarker.FreemarkerView#buildTemplateModel. Dies könnte wie folgt aussehen:

Um die CustomerFreemarkerView  verwenden zu können, muss zusätzlich noch eine vom org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver abgeleitete Klasse implementiert werden, in der der Konstruktor sowie die Methode org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver#requiredViewClass  überschrieben wird.

Der CustomFreeMarkerViewResolver  muss dann noch in der SpringMVCConfiguration  anstatt des org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver registriert werden.

Hat man die nötigen Vorarbeiten erledigt, also entweder die Deklaration des freemarker.ext.servlet.FreemarkerServlet  in der web.xml  oder, im Falle von Spring-MVC, die Ableitungen der Klassen org.springframework.web.servlet.view.freemarker.FreemarkerView  und org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver  erstellt sowie die Anpassung der Konfiguration vorgenommen, kann man JSP’s und TagLibs wie folgt in Freemarker-Templates einbinden.

was eqivivalent zum JSP-Tag

ist. Auch Parameter lassen sich von Freemarker zu JSP übertragen.

Das Einbinden von JSP-TagLibs und deren Verwendung ist genau so einfach.

Aufgrund der Architektur des jStage eShops ist es möglich, Freemarker durch andere Template Engines ersetzen (z. B. Thymeleaf). In einem Template wird nicht auf Objekte der Geschäftslogik zugegriffen, stattdessen werden sog. ViewModels erzeugt. Die gesamte Geschäftslogik befindet sich hinter Fassaden, welche die ViewModels erzeugen. Diese ähnelt dem Model View ViewModel Konzept (MVVM).

MVVMPattern

Abb. 2: „MVVMPattern“ von Ugaya40 – Eigenes Werk. Lizenziert unter CC BY-SA 3.0 über Wikimedia Commons – https://commons.wikimedia.org/wiki/File:MVVMPattern.png#/media/File:MVVMPattern.png

Template + Data-Model = Output

Möchte man zum Beispiel eine Navigation für eine Website erstellen, dann könnte dies in etwa so geschehen. Folgendes steht zur Verfügung: Ein Objekt “Navigation” mit einer Liste verschiedener Kategorien. Den Kategorien ist eine URL und ein Name zugewiesen:

Das gezeigte Beispiel kann im Online Freemarker Template Tester ausprobiert werden.  Dazu muss das Template und das Data-Model einfach in die dafür vorgesehenen Felder kopiert werden. Nach dem Klick auf Evaluate sollte die folgende Ausgabe erscheinen:

Ausblick

In diesem Teil haben wir einen ersten Einblick in Freemarker gegeben. Die darauf folgenden Teile behandeln besonderes zu erwähnenden Anweisungen (Directives) und Funktionen (built-ins). Des Weiteren wollen wir  Tipps und Tricks im Umgang mit Freemarker geben und Schmankerl der Freemarker Template Language (Syntactic Sugar) zeigen. Sollte ihr Interesse an Freemarker geweckt worden sein, dann stöbern Sie doch einfach mal in der Dokumentation.

Ihnen hat der Artikel gefallen oder auch nicht? Sie möchten ein Feedback geben oder haben Fragen? Comments are welcome!