Schulung Fluid Templating

11,448 views

Published on

Hier werden nicht nur einfache Funktionen von Fluid, sondern auch fortgeschrittene Funktionalitäten vorgestellt.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,448
On SlideShare
0
From Embeds
0
Number of Embeds
2,261
Actions
Shares
0
Downloads
73
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Schulung Fluid Templating

  1. 1. Punkt.de - 4. November 2009 Inspiring people to Fluid Templating share
  2. 2. Fluid Templating 04.11.2009 Sebastian Kurfürst <sebastian@typo3.org>
  3. 3. TYPO3 v4 und v5 v4 v5 Inspiring people to Fluid Templating share
  4. 4. Inspiring people to Fluid Templating share
  5. 5. Was ist eine Template Engine? Daten Data Template Data Template Engine gerenderte Daten Data Data Inspiring people to Fluid Templating share
  6. 6. Inspiring people to Fluid Templating share
  7. 7. Template Engines heute Klass. TYPO3 Templating Smarty PHPTAL Inspiring people to Fluid Templating share
  8. 8. Template Engines heute Klassisches TYPO3 Templating marker / subpart-basiert kein Kontrollfluss nicht erweiterbar Arbeit mit Arrays oder Objekten schwierig Inspiring people to Fluid Templating share
  9. 9. Template Engines heute Klassisches TYPO3 Templating ###CONTENTS### <h2>###TITLE###</h2> Text ###CONTENTS### Inspiring people to Fluid Templating share
  10. 10. Template Engines heute Klassisches TYPO3 Templating Eine Schleife implementieren Text Inspiring people to Fluid Templating share
  11. 11. Template Engines heute Klassisches TYPO3 Templating ###CONTENTS### $subEl = getSubpart(“SUBELEMENT“); <ul> Text $out = ‘‘; ###SUBELEMENT### foreach ($recordList as $record) { <li>###TITLE###</li> $out .= substituteMarker($subEl, ‘TITLE‘, $record[‘title‘]); ###SUBELEMENT### } </ul> return substituteSubpart($template, ‘SUBELEMENT‘, $out); ###CONTENTS### Inspiring people to Fluid Templating share
  12. 12. Inspiring people to Fluid Templating share
  13. 13. Template Engines heute Smarty <ul> {foreach from=$myArray item=foo} <li>{$foo}</li> {/foreach} </ul> Inspiring people to Fluid Templating share
  14. 14. Template Engines heute Smarty PHP4-basiert eigene {...}-Syntax - keine Autocompletion Funktionen gehören zum Sprachumfang - keine Namespaces alle Funktionen eingebaut Selbstgeschriebene Funktionen können vom Namen her miteinander kollidieren Inspiring people to Fluid Templating share
  15. 15. Template Engines heute PHPTAL <div class="item" tal:repeat="item itemsArray"> <span tal:condition="item/hasDate" tal:replace="item/ getDate"/> <a href="${item/getUrl}" tal:content="item/getTitle"/> <p tal:content="value/getContent"/> </div> Inspiring people to Fluid Templating share
  16. 16. Template Engines heute PHPTAL well-formed XML, but NOT VALID (no DTD / Schema) Semantik teilweise unintuitiv PHP im template möglich Keine autocompletion Schwer erweiterbar Inspiring people to Fluid Templating share
  17. 17. Template Engines heute Nachteile aktueller Engines Nicht vollständig objektorientiert / brechen objektorientierte Paradigmen an einigen Stellen schwer zu benutzen für nicht-HTML-Templates keine Autocompletion in Editoren nicht einfach erweiterbar Inspiring people to Fluid Templating share
  18. 18. Inspiring people to Fluid Templating share
  19. 19. Inspiring people to Fluid Templating share
  20. 20. Einordnung - v4, v5 - Transition Inspiring people to Fluid Templating share
  21. 21. Wieso noch eine Template Engine? Inspiring people to Fluid Templating share
  22. 22. Ziele von Fluid Inspiring people to Fluid Templating share
  23. 23. The Zen of Templating simpel mächtig http://www.sxc.hu/photo/821903
  24. 24. The Zen of Templating intuitiv leicht erweiterbar http://www.sxc.hu/photo/821903
  25. 25. simple, elegante template engine http://www.flickr.com/photos/josefstuefer/9699426/
  26. 26. Viele Hilfestellungen für den Template-Autor
  27. 27. Einfache und saubere Erweiterbarkeit http://www.sxc.hu/photo/338064
  28. 28. Unterstützung vieler Ausgabe-Formate
  29. 29. Inspiring people to Fluid Templating share
  30. 30. Kern- konzepte http://www.sxc.hu/photo/816749
  31. 31. Kernkonzepte Variablen $this->view->assign(‘blogTitle’, $blog->getTitle()); <h1>The name of the blog is: {blogTitle}</h1> Inspiring people to Fluid Templating share
  32. 32. Kernkonzepte Object Accessors $this->view->assign(‘blog’, $blog); <h1>The name of the blog is: {blog.title}</h1> Author: {blog.author} $blog->getAuthor(); Inspiring people to Fluid Templating share
  33. 33. Kernkonzepte ViewHelpers Namespace- Deklaration {namespace f=F3FluidViewHelpers} v5 <f:link.action action=“someAction“> Administration ViewHelper </f:link> Aufruf Inspiring people to Fluid Templating share
  34. 34. Kernkonzepte ViewHelpers Namespace- Deklaration {namespace f=Tx_Fluid_ViewHelpers} v4 <f:link.action action=“someAction“> Administration ViewHelper </f:link> Aufruf Inspiring people to Fluid Templating share
  35. 35. Fluid Core enthält keine Ausgabelogik, und keine Kontrollstrukturen!
  36. 36. <f:...> Jeder Tag ist eine Klasse!
  37. 37. v4 {namespace f=Tx_Fluid_ViewHelpers} <f:for>...</f:for> Tx_Fluid_ViewHelpers_ForViewHelper
  38. 38. v5 {namespace f=F3FluidViewHelpers} <f:for>...</f:for> F3FluidViewHelpersForViewHelper
  39. 39. v5 {namespace f=F3FluidViewHelpers} <f:link.action>...</f:link.action> F3FluidViewHelpersLinkActionViewHelper
  40. 40. Kernkonzepte Arrays <f:link.action action=“show“ arguments=“{blog: blog, name: ‘Hello’}“> show posting </f:link> Inspiring people to Fluid Templating share
  41. 41. Kernkonzepte Grundbestandteile Object accessors: {blog.title} ViewHelpers: <f:for each=“{blog.posts}“ as=“post“>...</f:for> Arrays Inspiring people to Fluid Templating share
  42. 42. simple loop Fortgeschrittene Konzepte
  43. 43. Formulare v4 v5 Inspiring people to Fluid Templating share
  44. 44. Fortgeschrittene Konzepte Formulare /** * Displays a form for creating a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh blog object taken as a basis for the rendering * @return string An HTML form for creating a new blog * @dontvalidate $newBlog */ public function newAction(F3BlogDomainModelBlog $newBlog = NULL) { $this->view->assign('newBlog', $newBlog); } /** * Creates a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh Blog object which has not yet been added to the repository * @return void */ public function createAction(F3BlogDomainModelBlog $newBlog) { $this->blogRepository->add($newBlog); $this->pushFlashMessage('Your new blog was created.'); $this->redirect('index'); } Inspiring people to Fluid Templating share
  45. 45. Fortgeschrittene Konzepte Formulare <f:form method="post" action="create" object="{newBlog}" name="newBlog"> <label for="identifier">Identifier<br /> <f:form.textbox property="identifier" id="identifier" /> <br /> <label for="name">Title</label><br /> <f:form.textbox property="title" id="title" /> <br /> <label for="description">Description</label><br /> <f:form.textarea property="description" rows="2" cols="40" id="description" /> <br /> <f:form.submit value="Create blog" /> </f:form> </f:section> Inspiring people to Fluid Templating share
  46. 46. Fortgeschrittene Konzepte Code Text Inspiring people to Fluid Templating share
  47. 47. Fortgeschrittene Konzepte Formulare /** * Displays a form for creating a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh blog object taken as a basis for the rendering * @return string An HTML form for creating a new blog * @dontvalidate $newBlog */ public function newAction(F3BlogDomainModelBlog $newBlog = NULL) { $this->view->assign('newBlog', $newBlog); } /** * Creates a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh Blog object which has not yet been added to the repository * @return void */ public function createAction(F3BlogDomainModelBlog $newBlog) { $this->blogRepository->add($newBlog); $this->pushFlashMessage('Your new blog was created.'); $this->redirect('index'); } Inspiring people to Fluid Templating share
  48. 48. Fortgeschrittene Konzepte Formulare /** * Displays a form for creating a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh blog object taken as a basis for the rendering * @return string An HTML form for creating a new blog * @dontvalidate $newBlog */ public function newAction(F3BlogDomainModelBlog $newBlog = NULL) { $this->view->assign('newBlog', $newBlog); } /** * Creates a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh Blog object which has not yet been added to the repository * @return void */ public function createAction(F3BlogDomainModelBlog $newBlog) { $this->blogRepository->add($newBlog); $this->pushFlashMessage('Your new blog was created.'); $this->redirect('index'); } Inspiring people to Fluid Templating share
  49. 49. Inspiring people to Fluid Templating share
  50. 50. Layouts und Partials v4 v5 Inspiring people to Fluid Templating share
  51. 51. Inspiring people to Fluid Templating share
  52. 52. Fortgeschrittene Konzepte Layouts <f:layout name="master" /> <f:section name="main"> <h1> My content</h1> </f:section> Inspiring people to Fluid Templating share
  53. 53. Fortgeschrittene Konzepte Layouts <html> ... <body> <f:render section="main" /> </body> Inspiring people to Fluid Templating share
  54. 54. Fortgeschrittene Konzepte Partials <f:render partial="list" arguments="{settings: settings}"/> Inspiring people to Fluid Templating share
  55. 55. Inspiring people to Fluid Templating share
  56. 56. Fortgeschrittene Konzepte Inline-Notation <link rel="stylesheet" href="<f:uri.resource path='myCss.css' />" /> Inspiring people to Fluid Templating share
  57. 57. Fortgeschrittene Konzepte Inline-Notation <link rel="stylesheet" href="{f:uri.resource(path: 'myCss.css')}" /> Inspiring people to Fluid Templating share
  58. 58. Fortgeschrittene Konzepte Inline-Notation <f:format.date format="Y-m-d"> {post.date}</f:format.date> Kein Leerzeichen erlaubt! Inspiring people to Fluid Templating share
  59. 59. Fortgeschrittene Konzepte Inline-Notation <f:format.padding padLength="40"> <f:format.date format="Y-m-d"> {post.date}</f:format.date> </f:format.padding> Inspiring people to Fluid Templating share
  60. 60. Inspiring people to Fluid Templating share
  61. 61. Fortgeschrittene Konzepte Inline-Notation {post.date -> f:format.date(format:'Y-m-d') -> f:format.padding(padLength:40)} Inspiring people to Fluid Templating share
  62. 62. XSS-Vorbeugung Inspiring people to Fluid Templating share
  63. 63. Fortgeschrittene Konzepte Cross Site Scripting <h2><?= $post->getTitle() ?></h2> <p><?= $post->getContents() ?></p> !!! Inspiring people to Fluid Templating share
  64. 64. Fortgeschrittene Konzepte Cross Site Scripting Ruby: <%= h(...) %> Explizit! Inspiring people to Fluid Templating share
  65. 65. Fortgeschrittene Konzepte Cross Site Scripting <h2>{post.title}</h2> <p>{post.contents}</p> automatisch escaped Implizit! Fluid Templating Inspiring people to share
  66. 66. Fortgeschrittene Konzepte Automatische XSS-Vorbeugung alle ObjectAccessors, welche nicht in Argumenten stehen, werden escaped <f:..... foo="{bar}">{something}</f:...> nicht escaped escaped Inspiring people to Fluid Templating share
  67. 67. Boolesche Werte Inspiring people to Fluid Templating share
  68. 68. Fortgeschrittene Konzepte Conditions <f:if condition="CONDITION"> </f:if> {f:if(condition:"CONDITION", then:'...')} Inspiring people to Fluid Templating share
  69. 69. Fortgeschrittene Konzepte Conditions <f:if condition="CONDITION"> <f:then>...</f:then> <f:else>...</f:else> </f:if> {f:if(condition:"CONDITION", then:'...', else: '...')} Inspiring people to Fluid Templating share
  70. 70. Fortgeschrittene Konzepte Conditions {booleanValue} {someValue} == {otherValue} {someNumber} % 2 {someValue} == {f:viewHelper()} NICHT: {someValue} == 'String' Inspiring people to Fluid Templating share
  71. 71. Fortgeschrittene Konzepte Conditions Boolesche Werte haben immer die Form XX Operator YY XX / YY ist Object Accessor, Inline Notation, Zahl, aber KEIN String. Operator ist z.B. >, >=, <, <=, %, !=, == Dies ist immer möglich, wenn Argument vom Typ boolean registriert ist Inspiring people to Fluid Templating share
  72. 72. Fortgeschrittene Konzepte Standard-ViewHelper Kontrollstrukturen Formular-Helper Format-ViewHelper Inspiring people to Fluid Templating share
  73. 73. Fortgeschrittene Konzepte <f:cObject> <!-- im Template --> <f:cObject typoscriptObjectPath="lib.myCounter">{posts.count}</f:cObject> <!-- oder --> <f:cObject typoscriptObjectPath="lib.myCounter" data=“{posts.count}“ /> <!-- oder --> {posts.count->f:cObject(typoScriptObjectPath: 'lib.myCounter')} <!-- im TypoScript Setup --> lib.myCounter = TEXT lib.myCounter { current = 1 wrap = <strong> | </strong> } Inspiring people to Fluid Templating share
  74. 74. Fortgeschrittene Konzepte <f:cObject> <!-- im Template --> <f:cObject typoscriptObjectPath="lib.myCounter">{post}</f:cObject> <!-- oder --> <f:cObject typoscriptObjectPath=“lib.myCounter“ data=“{post}“ /> <!-- oder --> {post -> f:cObject(typoscriptObjectPath: 'lib.myCounter')} <!-- im TypoScript Setup --> lib.myCounter = COA lib.myCounter { 10 = TEXT 10.field = title 20 = TEXT 20.field = author wrap = <strong> | </strong> Inspiring people to } Fluid Templating share
  75. 75. Fortgeschrittene Konzepte <f:translate> <f:translate key=“name“ default="Standard" /> {f:translate(key: 'name', default: 'My Name')} <f:translate key="foo" arguments="{0:post.name, 1:post.author}" /> in der locallang.xml: "%1$s (by %0$s)" Inspiring people to Fluid Templating share
  76. 76. Fortgeschrittene Konzepte Zusammenfassung Formulare Layouts und Partials Inline-Notation und Chaining von VHs XSS-Vorbeugung intuitive Syntax für boolesche Werte mächtige Standard-ViewHelper Library Inspiring people to Fluid Templating share
  77. 77. Eigene ViewHelper Inspiring people to Fluid Templating share
  78. 78. Eigene ViewHelper v4 Aufgabe: Gravatar ViewHelper soll eine E-Mail-Adresse bekommen, und den Gravatar-ViewHelper ausgeben, falls vorhanden. Erwartete Ausgabe: <img src=“http://www.gravatar.com/avatar/md5 ($email).jpg“ /> Inspiring people to Fluid Templating share
  79. 79. Eigene ViewHelper v4 Aufgabe: Gravatar ViewHelper Erwartete Verwendung: {namespace blog=Tx_Blog_ViewHelpers} <blog:gravatar email=“sebastian@typo3.org“ /> Inspiring people to Fluid Templating share
  80. 80. Eigene ViewHelper v4 1. ViewHelper-Skelett anlegen class Tx_Blog_ViewHelpers_GravatarViewHelper extends Tx_Fluid_Core_AbstractViewHelper { public function render() { return ‘Hello World‘; } } Inspiring people to Fluid Templating share
  81. 81. Eigene ViewHelper v4 2. Implementieren! PHPDoc muss für Validierung /** existieren. * @param string $email The email to render as gravatar */ public function render($email) { return ‘http://www.gravatar.com/gravatar/‘ . md5($email); } Alle Methodenparameter werden automatisch ViewHelper- Argumente. Inspiring people to Fluid Templating share
  82. 82. Inspiring people to Fluid Templating share
  83. 83. Fluid intern TemplateView View Helpers (Tags) v5 v4 TemplateView View Helpers (Tags) v5 v4 Fluid Core Inspiring people to Fluid Templating share
  84. 84. http://www.sxc.hu/photo/1132907
  85. 85. Autocompletion
  86. 86. Balance
  87. 87. Ressourcen Forge-Projekte "Fluid" und "MVC Framework" (und dazugehöriger SVN) https://svn.typo3.org/TYPO3v4/CoreProjects/ MVC/ -> Extbase, Fluid (v4), Blog Example, Viewhelpertest Inspiring people to Fluid Templating share
  88. 88. ???? ?? ?? ? ?? ? ?
  89. 89. inspiring people to share.

×