schulung fluid templating

Inspiring people toshareFluid Templating

Punkt.de - 4. November 2009

Fluid Templating

Sebastian Kurfürst <sebastian@typo3.org>

04.11.2009

Inspiring people toshareFluid Templating

TYPO3 v4 und v5

v4 v5

Inspiring people toshareFluid Templating

Inspiring people toshareFluid Templating

Was ist eine Template Engine?

DataDataDaten Template

Template Engine

DataDatagerenderte Daten

Inspiring people toshareFluid Templating

Inspiring people toshareFluid Templating

Template Engines heute

Klass. TYPO3 Templating

Smarty PHPTAL

Inspiring people toshare

Template Engines heute

Fluid Templating

Klassisches TYPO3 Templating

marker / subpart-basiert

kein Kontrollfluss

nicht erweiterbar

Arbeit mit Arrays oder Objekten schwierig

Inspiring people toshare

Template Engines heute

Fluid Templating

Klassisches TYPO3 Templating

Text

###CONTENTS###

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

###CONTENTS###

Inspiring people toshare

Template Engines heute

Fluid Templating

Klassisches TYPO3 Templating

TextEine Schleife implementieren

Inspiring people toshare

Template Engines heute

Fluid Templating

Klassisches TYPO3 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);

Inspiring people toshareFluid Templating

Inspiring people toshare

Template Engines heute

Fluid Templating

Smarty

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

Inspiring people toshare

Template Engines heute

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

Inspiring people toshare

Template Engines heute

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>

Inspiring people toshare

Template Engines heute

Fluid Templating

PHPTAL

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

Semantik teilweise unintuitiv

PHP im template möglich

Keine autocompletion

Schwer erweiterbar

Inspiring people toshare

Template Engines heute

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

Inspiring people toshareFluid Templating

Inspiring people toshareFluid Templating

Inspiring people toshareFluid Templating

Einordnung - v4, v5 - Transition

Inspiring people toshareFluid Templating

Wieso noch eine Template Engine?

Inspiring people toshareFluid Templating

Ziele von Fluid

The Zen of Templating

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

simpel mächtig

The Zen of Templating

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

intuitiv leicht erweiterbar

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

simple, elegantetemplate engine

Viele Hilfestellungenfür den Template-Autor

Einfache undsaubere

Erweiterbarkeit

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

Unterstützung vielerAusgabe-Formate

Inspiring people toshareFluid Templating

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

Kern-konzepte

Inspiring people toshare

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

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

Kernkonzepte

Fluid Templating

Variablen

Inspiring people toshare

$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();

Inspiring people toshare

{namespace f=F3\Fluid\ViewHelpers}

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

Administration</f:link>

Kernkonzepte

Fluid Templating

ViewHelpers Namespace- Deklaration

ViewHelper Aufruf

v5

Inspiring people toshare

{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

Inspiring people toshare

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

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

Kernkonzepte

Fluid Templating

Arrays

Inspiring people toshare

Kernkonzepte

Fluid Templating

Grundbestandteile

Object accessors: {blog.title}

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

Arrays

simple loop

FortgeschritteneKonzepte

Inspiring people toshareFluid Templating

v4 v5

Formulare

Inspiring people toshare

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

Inspiring people toshare

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

Fortgeschrittene Konzepte

Fluid Templating

Formulare

Inspiring people toshare

Code Text

Fortgeschrittene Konzepte

Fluid Templating

Inspiring people toshare

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

Inspiring people toshare

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

Inspiring people toshareFluid Templating

Inspiring people toshareFluid Templating

Layouts und Partials

v4 v5

Inspiring people toshareFluid Templating

Inspiring people toshare

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

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

Fortgeschrittene Konzepte

Fluid Templating

Layouts

Inspiring people toshare

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

Fortgeschrittene Konzepte

Fluid Templating

Layouts

Inspiring people toshare

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

Fortgeschrittene Konzepte

Fluid Templating

Partials

Inspiring people toshareFluid Templating

Inspiring people toshare

<link rel="stylesheet" href="<f:uri.resource path='myCss.css' />" />

Fortgeschrittene Konzepte

Fluid Templating

Inline-Notation

Inspiring people toshare

<link rel="stylesheet" href="{f:uri.resource(path: 'myCss.css')}" />

Fortgeschrittene Konzepte

Fluid Templating

Inline-Notation

Inspiring people toshare

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

Fortgeschrittene Konzepte

Fluid Templating

Inline-Notation

Kein Leerzeichen

erlaubt!

Inspiring people toshare

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

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

</f:format.padding>

Fortgeschrittene Konzepte

Fluid Templating

Inline-Notation

Inspiring people toshareFluid Templating

Inspiring people toshare

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

Fortgeschrittene Konzepte

Fluid Templating

Inline-Notation

Inspiring people toshareFluid Templating

XSS-Vorbeugung

Inspiring people toshare

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

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

Fortgeschrittene Konzepte

Fluid Templating

Cross Site Scripting

!!!

Inspiring people toshare

Ruby:

<%= h(...) %>

Fortgeschrittene Konzepte

Fluid Templating

Cross Site Scripting

Explizit!

Inspiring people toshare

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

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

Fortgeschrittene Konzepte

Fluid Templating

Cross Site Scripting

automatisch escaped

Implizit!

Inspiring people toshare

Fortgeschrittene Konzepte

Fluid Templating

Automatische XSS-Vorbeugung

alle ObjectAccessors, welche nicht in Argumenten stehen, werden escaped

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

nicht escaped

escaped

Inspiring people toshareFluid Templating

Boolesche Werte

Inspiring people toshare

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

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

Fortgeschrittene Konzepte

Fluid Templating

Conditions

Inspiring people toshare

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

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

Fortgeschrittene Konzepte

Fluid Templating

Conditions

Inspiring people toshare

{booleanValue}

{someValue} == {otherValue}

{someNumber} % 2

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

NICHT: {someValue} == 'String'

Fortgeschrittene Konzepte

Fluid Templating

Conditions

Inspiring people toshare

Fortgeschrittene Konzepte

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

Inspiring people toshare

Kontrollstrukturen

Formular-Helper

Format-ViewHelper

Fortgeschrittene Konzepte

Fluid Templating

Standard-ViewHelper

Inspiring people toshare

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

Fortgeschrittene Konzepte

Fluid Templating

<f:cObject>

Inspiring people toshare

Fortgeschrittene Konzepte

Fluid Templating

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

Inspiring people toshare

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

Fortgeschrittene Konzepte

Fluid Templating

<f:translate>

Inspiring people toshare

Fortgeschrittene Konzepte

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

Inspiring people toshareFluid Templating

Eigene ViewHelper

Inspiring people toshare

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

Inspiring people toshare

Eigene ViewHelper

Fluid Templating

Aufgabe: Gravatar ViewHelper

Erwartete Verwendung:

{namespace blog=Tx_Blog_ViewHelpers}<blog:gravatar email=“sebastian@typo3.org“ />

v4

Inspiring people toshare

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

Eigene ViewHelper

Fluid Templating

1. ViewHelper-Skelett anlegenv4

Inspiring people toshare

/** * @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

Inspiring people toshareFluid Templating

Inspiring people toshareFluid Templating

Fluid Corev4v5

TemplateViewv5 View Helpers (Tags)v4

View Helpers (Tags)TemplateView

Fluid intern

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

Autocompletion

Balance

Inspiring people toshareFluid Templating

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 share.