Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Thymeleaf - Eine Template-Engine für Entwickler und Designer

Thymeleaf - Eine Template-Engine für Entwickler und Designer

Gerrit Meier

October 20, 2016
Tweet

More Decks by Gerrit Meier

Other Decks in Programming

Transcript

  1. Thymeleaf
    Gerrit [email protected] 2016
    Eine
    Template-Engine für
    Entwickler und
    Designer
    https://www.flickr.com/photos/agenturblog/441242660/

    View Slide

  2. View Slide

  3. View Slide

  4. ähm..hä?
    …vielleicht doch nicht nur?!

    View Slide

  5. Senior Consultant

    T-Systems on site services GmbH
    JUG Ostfalen Co-Organisator
    Podcast
    meistermeier

    View Slide

  6. Gibt es da nicht schon etwas?

    View Slide

  7. JSP, Tiles, FreeMarker, Velocity…

    View Slide

  8. JSP, Tiles, FreeMarker, Velocity…

    View Slide

  9. View Slide

  10. static view

    View Slide

  11. Geht das denn nicht irgendwie besser?

    View Slide

  12. Thymeleaf
    https://commons.wikimedia.org/wiki/File:Arenaria_serpyllifolia_(8490448608).jpg

    View Slide

  13. Natural templates

    View Slide

  14. View Slide

  15. static view

    View Slide

  16. https://www.flickr.com/photos/freespiritart/6379007221
    Expressions

    View Slide

  17. Variables
    ${…}

    View Slide

  18. Messages
    #{…}

    View Slide

  19. ‚Selected object‘
    *{…}

    View Slide

  20. URL-Expressions
    @{…}

    View Slide

  21. Loops

    View Slide

  22. Placeholder

    View Slide

  23. Placeholder

    View Slide

  24. static view

    View Slide

  25. web app view

    View Slide

  26. Processors
    https://www.flickr.com/photos/fransdewit/15849351119

    View Slide

  27. Processors
    th:*
    th:
    th:attr=“value=#{message.attrValue}“

    View Slide

  28. Processors
    th:*
    th:if, th:unless, th:switch, th:case
    th:each
    th:insert, th:include, th:replace
    th:text, th:utext
    th:…

    View Slide

  29. Processors
    th:block

    View Slide

  30. Processors - web app view
    th:block

    View Slide

  31. Processors - static view
    th:block

    View Slide

  32. Prototype-only comment blocks

    View Slide

  33. Prototype-only comment blocks
    web app view

    View Slide

  34. Prototype-only comment blocks
    static view

    View Slide

  35. Fragments
    https://www.flickr.com/photos/jhritz/409083204

    View Slide

  36. Fragments
    header.html

    View Slide

  37. Fragments
    index.html

    View Slide

  38. Fragments - web app view
    th:replace

    View Slide

  39. Fragments - web app view
    th:insert

    View Slide

  40. Fragments - web app view
    th:include

    View Slide

  41. Utility Objects
    https://www.flickr.com/photos/darkthirty/49673752

    View Slide

  42. Utility Objects
    (Expression Utility Objects)
    Lists, Dates, Strings, …

    View Slide

  43. Utility Objects
    (Lists)

    View Slide

  44. Utility Objects
    (Dates)

    View Slide

  45. Utility Objects
    (Strings)

    View Slide

  46. Utility Objects
    (misc)

    View Slide

  47. ? Fragen ?
    https://www.flickr.com/photos/visualanthology/13074410454

    View Slide

  48. meistermeier

    View Slide