schulung fluid templating

Inspiring people toshareFluid Templating

Punkt.de - 4. November 2009

Fluid Templating

Sebastian Kurfürst <[email protected]>

04.11.2009

mailto:[email protected]



TYPO3 v4 und v5

v4 v5


Was ist eine Template Engine?

DataDataDaten Template

Template Engine

DataDatagerenderte Daten


Template Engines heute

Klass. TYPO3 Templating

Smarty PHPTAL

Inspiring people toshare


Fluid Templating

Klassisches TYPO3 Templating

marker / subpart-basiert

kein Kontrollfluss

nicht erweiterbar

Arbeit mit Arrays oder Objekten schwierig



Fluid Templating


Text

###CONTENTS###

<h2>###TITLE###</h2>

###CONTENTS###



Fluid Templating


TextEine Schleife implementieren



Fluid Templating


Text

###CONTENTS###<ul>

###SUBELEMENT###<li>###TITLE###</li>

###SUBELEMENT###</ul>

###CONTENTS###

$subEl = getSubpart(“SUBELEMENT“);$out = ‘‘;foreach ($recordList as $record) {

$out .= substituteMarker($subEl, ‘TITLE‘, $record[‘title‘]);}return substituteSubpart($template, ‘SUBELEMENT‘, $out);



Fluid Templating

Smarty

<ul>{foreach from=$myArray item=foo} <li>{$foo}</li>{/foreach}</ul>



Fluid Templating

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



Fluid Templating

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>



Fluid Templating

PHPTAL

well-formed XML, but NOT VALID (no DTD / Schema)

Semantik teilweise unintuitiv

PHP im template möglich

Keine autocompletion

Schwer erweiterbar



Fluid Templating

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


Einordnung - v4, v5 - Transition


Wieso noch eine Template Engine?


Ziele von Fluid

The Zen of Templating

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

simpel mächtig



The Zen of Templating


intuitiv leicht erweiterbar



http://www.flickr.com/photos/josefstuefer/9699426/

simple, elegantetemplate engine



Viele Hilfestellungenfür den Template-Autor

Einfache undsaubere

Erweiterbarkeit




Unterstützung vielerAusgabe-Formate


Kern-konzepte




$this->view->assign(‘blogTitle’,$blog->getTitle());

<h1>The name of the blog is: {blogTitle}</h1>

Kernkonzepte

Fluid Templating

Variablen


$this->view->assign(‘blog’, $blog);

<h1>The name of the blog is: {blog.title}</h1>Author: {blog.author}

Kernkonzepte

Fluid Templating

Object Accessors

$blog->getAuthor();


{namespace f=F3\Fluid\ViewHelpers}

<f:link.action action=“someAction“>

Administration</f:link>

Kernkonzepte

Fluid Templating

ViewHelpers Namespace- Deklaration

ViewHelper Aufruf

v5


{namespace f=Tx_Fluid_ViewHelpers}

<f:link.action action=“someAction“>

Administration</f:link>

Kernkonzepte

Fluid Templating

ViewHelpers Namespace- Deklaration

ViewHelper Aufruf

v4

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

<f:...>

Jeder Tag ist eine Klasse!

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

Tx_Fluid_ViewHelpers_ForViewHelper

v4

{namespace f=F3\Fluid\ViewHelpers}<f:for>...</f:for>

F3\Fluid\ViewHelpers\ForViewHelper

v5

{namespace f=F3\Fluid\ViewHelpers}<f:link.action>...</f:link.action>

F3\Fluid\ViewHelpers\Link\ActionViewHelper

v5


<f:link.action action=“show“ arguments=“{blog: blog, name:

‘Hello’}“> show posting</f:link>

Kernkonzepte

Fluid Templating

Arrays


Kernkonzepte

Fluid Templating

Grundbestandteile

Object accessors: {blog.title}

ViewHelpers: <f:for each=“{blog.posts}“ as=“post“>...</f:for>

Arrays

simple loop

FortgeschritteneKonzepte


v4 v5

Formulare


/** * Displays a form for creating a new blog * * @param F3\Blog\Domain\Model\Blog $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(\F3\Blog\Domain\Model\Blog $newBlog = NULL) { $this->view->assign('newBlog', $newBlog); }

/** * Creates a new blog * * @param F3\Blog\Domain\Model\Blog $newBlog A fresh Blog object which has not yet been added to the repository * @return void */ public function createAction(\F3\Blog\Domain\Model\Blog $newBlog) { $this->blogRepository->add($newBlog); $this->pushFlashMessage('Your new blog was created.'); $this->redirect('index'); }

Fortgeschrittene Konzepte

Fluid Templating

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>


Fluid Templating

Formulare


Code Text


Fluid Templating


/** * Displays a form for creating a new blog * * @param F3\Blog\Domain\Model\Blog $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(\F3\Blog\Domain\Model\Blog $newBlog = NULL) { $this->view->assign('newBlog', $newBlog); }

/** * Creates a new blog * * @param F3\Blog\Domain\Model\Blog $newBlog A fresh Blog object which has not yet been added to the repository * @return void */ public function createAction(\F3\Blog\Domain\Model\Blog $newBlog) { $this->blogRepository->add($newBlog); $this->pushFlashMessage('Your new blog was created.'); $this->redirect('index'); }


Fluid Templating

Formulare


Layouts und Partials

v4 v5


<f:layout name="master" /><f:section name="main">

<h1> My content</h1></f:section>


Fluid Templating

Layouts


<html> ...<body> <f:render section="main" /></body>


Fluid Templating

Layouts


<f:render partial="list" arguments="{settings: settings}"/>


Fluid Templating

Partials


<f:format.date format="Y-m-d">{post.date}</f:format.date>


Fluid Templating

Inline-Notation

Kein Leerzeichen

erlaubt!


<f:format.padding padLength="40">

<f:format.date format="Y-m-d">{post.date}</f:format.date>

</f:format.padding>


Fluid Templating

Inline-Notation


{post.date -> f:format.date(format:'Y-m-d') -> f:format.padding(padLength:40)}


Fluid Templating

Inline-Notation


XSS-Vorbeugung


<h2><?= $post->getTitle() ?></h2>

<p><?= $post->getContents() ?></p>


Fluid Templating

Cross Site Scripting

!!!


Ruby:

<%= h(...) %>


Fluid Templating


Explizit!


<h2>{post.title}</h2>

<p>{post.contents}</p>


Fluid Templating


automatisch escaped

Implizit!



Fluid Templating

Automatische XSS-Vorbeugung

alle ObjectAccessors, welche nicht in Argumenten stehen, werden escaped

<f:..... foo="{bar}">{something}</f:...>

nicht escaped

escaped


Boolesche Werte


<f:if condition="CONDITION"></f:if>

{f:if(condition:"CONDITION", then:'...')}


Fluid Templating

Conditions


<f:if condition="CONDITION"> <f:then>...</f:then> <f:else>...</f:else></f:if>

{f:if(condition:"CONDITION", then:'...', else: '...')}


Fluid Templating

Conditions


{booleanValue}

{someValue} == {otherValue}

{someNumber} % 2

{someValue} == {f:viewHelper()}

NICHT: {someValue} == 'String'


Fluid Templating

Conditions



Fluid Templating

Conditions

Boolesche Werte haben immer die FormXX 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


Kontrollstrukturen

Formular-Helper

Format-ViewHelper


Fluid Templating

Standard-ViewHelper

<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 = TEXTlib.myCounter { current = 1 wrap = <strong> | </strong>}


Fluid Templating

<f:cObject>

Fluid Templating

<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 = COAlib.myCounter { 10 = TEXT 10.field = title 20 = TEXT 20.field = author wrap = <strong> | </strong>}


<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)"


Fluid Templating

<f:translate>



Fluid Templating

Zusammenfassung

Formulare

Layouts und Partials

Inline-Notation und Chaining von VHs

XSS-Vorbeugung

intuitive Syntax für boolesche Werte

mächtige Standard-ViewHelper Library


Eigene ViewHelper


Eigene ViewHelper

Fluid Templating

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“ />

v4

http://www.gravatar.comm/avatar/





Eigene ViewHelper

Fluid Templating

Aufgabe: Gravatar ViewHelper

Erwartete Verwendung:

{namespace blog=Tx_Blog_ViewHelpers}<blog:gravatar email=“[email protected]“ />

v4




class Tx_Blog_ViewHelpers_GravatarViewHelper extends Tx_Fluid_Core_AbstractViewHelper { public function render() { return ‘Hello World‘; }}

Eigene ViewHelper

Fluid Templating

1. ViewHelper-Skelett anlegenv4


/** * @param string $email The email to render as gravatar */public function render($email) { return ‘http://www.gravatar.com/gravatar/‘ . md5($email);}

Eigene ViewHelper

Fluid Templating

2. Implementieren!PHPDoc

muss für Validierung existieren.

Alle Methodenparameter werden automatisch ViewHelper-

Argumente.

v4

http://www.gravatar.com/gravatar/


















Fluid Corev4v5

TemplateViewv5 View Helpers (Tags)v4

View Helpers (Tags)TemplateView

Fluid intern

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

https://svn.typo3.org/TYPO3v4/CoreProjects/MVC/




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

inspiring people to share.

schulung fluid templating

Technology