Date post: | 19-May-2015 |
Category: |
Technology |
Upload: | sebastian-kurfuerst |
View: | 10,986 times |
Download: | 1 times |
Inspiring people toshareFluid Templating
Punkt.de - 4. November 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=“[email protected]“ />
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
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.