Schulung Fluid Templating

Punkt.de - 4. November 2009 Inspiring people to Fluid Templating share

Fluid Templating 04.11.2009 Sebastian Kurfürst <sebastian@typo3.org>

TYPO3 v4 und v5 v4 v5 Inspiring people to Fluid Templating share

Inspiring people to Fluid Templating share

Was ist eine Template Engine? Daten Data Template Data Template Engine gerenderte Daten Data Data Inspiring people to Fluid Templating share

Template Engines heute Klass. TYPO3 Templating Smarty PHPTAL Inspiring people to Fluid Templating share

Template Engines heute Klassisches TYPO3 Templating marker / subpart-basiert kein Kontrollﬂuss nicht erweiterbar Arbeit mit Arrays oder Objekten schwierig Inspiring people to Fluid Templating share

Template Engines heute Klassisches TYPO3 Templating ###CONTENTS### <h2>###TITLE###</h2> Text ###CONTENTS### Inspiring people to Fluid Templating share

Template Engines heute Klassisches TYPO3 Templating Eine Schleife implementieren Text Inspiring people to Fluid Templating share

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

Template Engines heute Smarty <ul> {foreach from=$myArray item=foo} <li>{$foo}</li> {/foreach} </ul> Inspiring people to Fluid Templating share

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

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

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

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

Einordnung - v4, v5 - Transition Inspiring people to Fluid Templating share

Wieso noch eine Template Engine? Inspiring people to Fluid Templating share

Ziele von Fluid Inspiring people to Fluid Templating share

The Zen of Templating simpel mächtig http://www.sxc.hu/photo/821903

The Zen of Templating intuitiv leicht erweiterbar http://www.sxc.hu/photo/821903

simple, elegante template engine http://www.ﬂickr.com/photos/josefstuefer/9699426/

Viele Hilfestellungen für den Template-Autor

Einfache und saubere Erweiterbarkeit http://www.sxc.hu/photo/338064

Unterstützung vieler Ausgabe-Formate

Kern- konzepte http://www.sxc.hu/photo/816749

Kernkonzepte Variablen $this->view->assign(‘blogTitle’, $blog->getTitle()); <h1>The name of the blog is: {blogTitle}</h1> Inspiring people to Fluid Templating share

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

Kernkonzepte ViewHelpers Namespace- Deklaration {namespace f=F3FluidViewHelpers} v5 <f:link.action action=“someAction“> Administration ViewHelper </f:link> Aufruf Inspiring people to Fluid Templating share

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

Fluid Core enthält keine Ausgabelogik, und keine Kontrollstrukturen!

<f:...> Jeder Tag ist eine Klasse!

v4 {namespace f=Tx_Fluid_ViewHelpers} <f:for>...</f:for> Tx_Fluid_ViewHelpers_ForViewHelper

v5 {namespace f=F3FluidViewHelpers} <f:for>...</f:for> F3FluidViewHelpersForViewHelper

v5 {namespace f=F3FluidViewHelpers} <f:link.action>...</f:link.action> F3FluidViewHelpersLinkActionViewHelper

Kernkonzepte Arrays <f:link.action action=“show“ arguments=“{blog: blog, name: ‘Hello’}“> show posting </f:link> Inspiring people to Fluid Templating share

Kernkonzepte Grundbestandteile Object accessors: {blog.title} ViewHelpers: <f:for each=“{blog.posts}“ as=“post“>...</f:for> Arrays Inspiring people to Fluid Templating share

simple loop Fortgeschrittene Konzepte

Formulare v4 v5 Inspiring people to Fluid Templating share

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

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

Fortgeschrittene Konzepte Code Text Inspiring people to Fluid Templating share

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

Layouts und Partials v4 v5 Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte Layouts <f:layout name="master" /> <f:section name="main"> <h1> My content</h1> </f:section> Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte Layouts <html> ... <body> <f:render section="main" /> </body> Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte Partials <f:render partial="list" arguments="{settings: settings}"/> Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte Inline-Notation <link rel="stylesheet" href="<f:uri.resource path='myCss.css' />" /> Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte Inline-Notation <link rel="stylesheet" href="{f:uri.resource(path: 'myCss.css')}" /> Inspiring people to Fluid Templating share

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

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

Fortgeschrittene Konzepte Inline-Notation {post.date -> f:format.date(format:'Y-m-d') -> f:format.padding(padLength:40)} Inspiring people to Fluid Templating share

XSS-Vorbeugung Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte Cross Site Scripting <h2><?= $post->getTitle() ?></h2> <p><?= $post->getContents() ?></p> !!! Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte Cross Site Scripting Ruby: <%= h(...) %> Explizit! Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte Cross Site Scripting <h2>{post.title}</h2> <p>{post.contents}</p> automatisch escaped Implizit! Fluid Templating Inspiring people to share

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

Boolesche Werte Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte Conditions <f:if condition="CONDITION"> </f:if> {f:if(condition:"CONDITION", then:'...')} Inspiring people to Fluid Templating share

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

Fortgeschrittene Konzepte Conditions {booleanValue} {someValue} == {otherValue} {someNumber} % 2 {someValue} == {f:viewHelper()} NICHT: {someValue} == 'String' Inspiring people to Fluid Templating share

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

Fortgeschrittene Konzepte Standard-ViewHelper Kontrollstrukturen Formular-Helper Format-ViewHelper Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte <f:cObject>  <f:cObject typoscriptObjectPath="lib.myCounter">{posts.count}</f:cObject>  <f:cObject typoscriptObjectPath="lib.myCounter" data=“{posts.count}“ />  {posts.count->f:cObject(typoScriptObjectPath: 'lib.myCounter')}  lib.myCounter = TEXT lib.myCounter { current = 1 wrap = <strong> | </strong> } Inspiring people to Fluid Templating share

Fortgeschrittene Konzepte <f:cObject>  <f:cObject typoscriptObjectPath="lib.myCounter">{post}</f:cObject>  <f:cObject typoscriptObjectPath=“lib.myCounter“ data=“{post}“ />  {post -> f:cObject(typoscriptObjectPath: 'lib.myCounter')}  lib.myCounter = COA lib.myCounter { 10 = TEXT 10.ﬁeld = title 20 = TEXT 20.ﬁeld = author wrap = <strong> | </strong> Inspiring people to } Fluid Templating share

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

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

Eigene ViewHelper Inspiring people to Fluid Templating share

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

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

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

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

Fluid intern TemplateView View Helpers (Tags) v5 v4 TemplateView View Helpers (Tags) v5 v4 Fluid Core Inspiring people to Fluid Templating share

http://www.sxc.hu/photo/1132907

Autocompletion

Balance

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

???? ?? ?? ? ?? ? ?

inspiring people to share.

Schulung Fluid Templating

0 comments

Notes on slide 1

1 Favorite