magnolia mit thymeleaf - ein agiler prozess-beschleuniger

Embed Size (px)

Text of magnolia mit thymeleaf - ein agiler prozess-beschleuniger

  1. 1. D:4,90EURA:5,60EURCH:9,80CHFBenelux:5,80EURISSN2191-6977 Javaaktuell Javaaktuell 03-2015 | Herbst | www. ijug.eu Praxis. Wissen. Networking. Das Magazin fr Entwickler Aus der Community fr die Community 419197830490303 iJUG Verbund Programmierung Guter Code, schlechter Code Prozess-Beschleuniger Magnolia mit Thymeleaf JavaFX HTML als neue Oberflche Clojure Ein Reisefhrer
  2. 2. 4| Inhalt Seit Java 1.5 erlaubt die Java Virtual Machine die Registrierung sogenannter Java-AgentenKunstprojekt im JavaLand 2015 16 5 Das Java-Tagebuch Andreas Badelt 8 Write once App anywhere Axel Marx 13 Mach mit: partizipatives Kunstprojekt im JavaLand 2015 Wolf Nkole Helzle 16 Aspektorientiertes Programmieren mit Java-Agenten Rafael Winterhalter 21 Guter Code, schlechter Code Markus Kiss und Christian Kumpe 25 HTML als neue Oberflche fr JavaFX Wolfgang Nast 27 JavaFX beyond Hello World Jan Zarnikov 31 Asynchrone JavaFX-8-Applikationen mit JacpFX Andy Moncsek 36 Magnolia mit Thymeleaf ein agiler Prozess-Beschleuniger Thomas Kratz 40 Clojure ein Reisefhrer Roger Gilliar 45 JavaFX-GUI mit Clojure und core. async Falko Riemenschneider 49 Java-Dienste in der Oracle-Cloud Dr. Jrgen Menge 50 Highly scalable Jenkins Sebastian Laag 53 Vaadin der kompakte Einstieg fr Java-Entwickler Gelesen von Daniel Grycman 54 First one home, play some funky tunes! Pascal Brokmeier 59 Verarbeitung bei Eintreffen: Zeitnahe Verarbeitung von Events Tobias Unger 62 Unbekannte Kostbarkeiten des SDK Heute: Dateisystem-berwachung Bernd Mller 64 Ich finde es groartig, wie sich die Community organisiert Ansgar Brauner und Hendrik Ebbers 66Inserenten 66Impressum Bei Mgnolia arbeiten Web-Entwickler und CMS-Experten mit ein und demselben Quellcode Ein Heim-Automatisierungs-Projekt 36 13 54
  3. 3. 36| Headline Magnolia mit Thymeleaf ein agiler Prozess-Beschleuniger Thomas Kratz, mecom GmbH
  4. 4. |37 www.ijug.eu iii iiiiii iii Java aktuell 3-2015 Der typische Ablauf bei der Entwicklung einer Webseite: Ein UX-Designer arbeitet ein Layout im PSD-Format aus, die Web-Entwickler setzen das Layout in statischen HTML-Templates um und die CMS-Experten zerlegen diese in Komponenten und machen sie fr den Endanwender pflegbar. Gibt es einen nderungswunsch, wird der Prozess wiederholt. Dieser Artikel zeigt am Beispiel von Magnolia einen Ansatz, bei dem Web-Entwickler und CMS-Experten mit ein und demselben Quellcode arbeiten und so zahllose Roundtrips im nderungs- prozess vermieden oder zumindest stark beschleunigt werden knnen. Der Ansatz lsst sich leicht auf andere Content-Management-Systeme bertragen. Betrachten wir das Vorgehen einmal an ei- nem einfachen Beispiel genauer. Ein Web- Entwickler entwickelt eine Teaser-Kom- ponente als statisches Mark-up. Er liefert den CMS-Entwicklern ein HTML-Template sowie das zugehrige CSS beziehungsweise alle JavaScript-Artefakte, die dafr bentigt werden. Fr diesen Artikel gibt es ein ein- faches Beispiel auf Basis von Twitter Boot- strap (siehe Listing 1). In der Regel ist das natrlich etwas kom- plexer als in diesem Beispiel. Fr den CMS- Entwickler ist als Teaser-Komponente eigent- lich nur der
    ...
    von Interesse; er wird dafr ein Komponenten- Template und Pflege-Dialoge erstellen, bei Magnolia typischerweise mit Freemarker oder .jsp (siehe Listing 2). Dazu gehrt natrlich ein Pflegedialog, der bei Magnolia mit Blossom zum Beispiel wie in Listing 3 aussehen knnte. Gleichzeitig entsteht dabei noch eine zwei- te Komponente fr den Footer, der ebenfalls pflegbar gemacht werden soll (siehe Listing 4). Auch zum Footer gehrt ein Pflege-Dialog, der hier der Krze wegen nicht zu sehen ist. Die Problematik Schon an dem einfachen Beispiel wird deut- lich, was hier geschieht. Aus einem einfa- chen Mark-up entstehen bei der Umsetzung im Magnolia-CMS zahlreiche Artefakte, da die Seite in pflegbare Teilmodule zerlegt werden muss. Tatschlich sind es noch viel mehr, als hier aufgezeigt, denn es gibt auch noch ein Rahmen-Template fr die Seite, in die die Komponenten eingebettet werden; fr alle Stellen auf dem Seiten-Template, an denen Komponenten eingefgt werden sollen, entsteht auch noch ein sogenanntes Area-Template. Nun wnscht sich der Kunde noch einen Link-Button fr den Teaser. Dieser wird nach den Vorgaben der Designer (vermutlich eine neue Version der PSD-Vorlage im statischen Template) gestylt und das ursprngliche HTML ndert sich (siehe Listing 5). Der CMS-Entwickler erhlt nun den Auf- trag, diese nderung ins Magnolia-System zu bertragen. Dabei behilft er sich wo- mglich mit einem Diff-Werkzeug, um die genderten Stellen zu identifizieren. Im Alltagsgeschft ist das freilich nicht nur eine einzelne, sondern womglich eine Vielzahl von nderungen, die auf der Seite vorge- nommen wurden. Doch halt: Woher wei unser Entwickler, welche seiner zahlreichen CMS-Komponen- ten davon betroffen sind? Die Zuordnung ist aus dem statischen Mark-up nicht er- kennbar. In der Praxis wird man es oft mit Hunderten von Komponenten und Dutzen- den von Seiten-Templates zu tun haben. Wei man es nicht auswendig, beginnt eine Suche nach css-Klassen und Mark-up- Schnipseln in den .jsp-Templates, um die entsprechende Stelle im CMS zu identifi- zieren und dort die nderung einzupflegen. Besonders fehleranfllig ist dies, wenn sich gleiche Mark-up-Schnipsel in verschiedenen Templates wiederholen und einfach berse- hen werden. Der Ansatz mit Thymeleaf Die Thymeleaf-Rendering-Engine verfolgt den Ansatz, dass sich die Templates auch ohne jede Rendering-Engine oder jedes Content-Management-System als korrek- tes HTML-Markup darstellen und im Brow- ser ffnen lassen. Setzt man die beiden Komponenten nicht als .jsp-, sondern als Thymeleaf-Template um, she das zum Bei- spiel wie in Listing 6 aus. Der erste auffllige Unterschied ist, dass hier beide Komponenten in einem einzigen Template abgebildet sind. Thymeleaf er- mglicht dies ber das Konzept eines Frag- ments. Das bedeutet, die beiden Teilbu- me mit dem Attribut th:fragment knnen Bootstrap, from Twitter
    Heading

    Donec id elit non mi porta gravida at eget metus.

    Company 2015

    Listing 1: Statisches Mark-up fr einen Teaser
    ${content.heading}

    ${content.text}

    Listing 2: teaser.jsp-Template fr den Teaser
  5. 5. 38| Web-Entwicklung Bootstrap, from Twitter
    Heading

    Donec id elit non mi porta gravida at eget metus.

    View details

    Company 2015

    Listing 5: Das angepasste Mark-up Bootstrap, from Twitter
    Heading

    Donec id elit non mi porta gravida at eget.

    Company 2015

    Listing 6: Komponten als Thymeleaf-Template /** Sample Teaser Controller. */ @Template(id = "thymeleaf_proto:components/teaserComponent", title = "Teaser Component") @Controller public final class TeaserComponent { /** * get the template fragment. */ @RequestMapping("/teaserComponent) public String handleRequest() { return "templates/jsp/teaser.jsp; } /** * create the tab. */ @TabFactory("Properties") public void createTab(final UiConfig cfg, final TabBuilder tab) { tab.fields( cfg.fields.text("heading").label("Heading"), cfg.fields.text("text").label("Text") ); } } Listing 3: TeaserComponent.java-Pflege-Dialog fr den Teaser

    ${content.footerText}

    Listing 4: footer.jsp-Template fr den Footer einzeln und losgelst von der Gesamtseite gerendert werden. Abgesehen von den zu- stzlichen Attributen aus dem cms- bezie- hungsweise th-Namespace ist das Temp- late identisch zur statischen Vorlage. Hinzu kommt, dass der Browser die At- tribute aus dem th-Namespace einfach ignoriert, wenn diese Seite direkt geffnet wird. Das heit, der Web-Entwickler kann mit diesem Template arbeiten, als wre es ein statisches Mark-up, und bentigt kein Content-Management-System, um damit zu arbeiten. Er kann dadurch den neuen Link-Button direkt in das Thymeleaf-Tem- plate einarbeiten und stylen, die CMS-Ent- wickler mssen nur noch die Pflege-Dialog- felder und Attribute hinzufgen. Das Zuordnen von Mark-up zu JSP und das Wiederauffinden der richtigen Stelle entfallen vollstndig. Mit etwas Geschick (ein Beispiel dazu finden Sie im Quellcode zum Artikel) lsst sich dasselbe Templa- te sogar als Seiten-Template fr Magnolia verwenden, in das die Komponenten spter eingepflegt werden knnen. Die Realitt im Arbeitsalltag Die Einfhrung einer neuen Template-Spra- che fhrt in der Regel in einem unter Druck arbeitenden Entwicklerteam nicht nur zu Be- geisterung, sondern eher zu zahlreichen Dis- kussionen und Widerstnden. Das Manage- ment muss zudem vorbergehend auf eine durch die Lernkurve bedingte verminderte Produktivitt eingestimmt werden. Eine noch berschaubare Anzahl von Einfhrungen des gezeigten Ansatzes in Grobritannien und Deutschland hat dies besttigt. Ist diese Lernkurveberstanden,zeigtsichjedocheine deutliche Vereinfachung der Zusammenar- beit zwischen Frontend- und Backend-Ent- wicklern, das gegenseitige Interesse fr das jeweilige Fachgebiet steigt und schlielich beschleunigt sich der Gesamtprozesses, da sich nderungen schneller umsetzen lassen. Die technische Umsetzung Magnolia ist wie die meisten Java-Content- Management-Systeme grundstzlich da- rauf ausgelegt, alternative Template-En- gines einzubinden. Out of the box kommt
  6. 6. |39 www.ijug.eu iii iiiiii iii Java aktuell 3-2015 Magnolia schon mit einer Untersttzung fr Freemarker und JSP daher. Bei der Ein- bindung von Thymeleaf gab es lediglich eine technische Bruchstelle, da sich beim Ren- dering-Prozess von Magnolia alle Kompo- nenten des Templates einen Output-Stream teilen. Thymeleaf dagegen arbeitet intern zuerst alles in einem XML-Baum ab und erst nach Abschluss der Verarbeitung wird dieser XML-Baum in einen Stream geschrieben. Die vorgestellte Lsung bricht daher die Thymeleaf-Verarbeitung in einzelne Teil- schritte auf, die nacheinand