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

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

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

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

4. Inspiring people to
Fluid Templating share

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

6. Inspiring people to
Fluid Templating share

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

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. Template Engines heute
Klassisches TYPO3 Templating
###CONTENTS###
<h2>###TITLE###</h2>
Text
###CONTENTS###
Inspiring people to
Fluid Templating share

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

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. Inspiring people to
Fluid Templating share

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

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. 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. 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. 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. Inspiring people to
Fluid Templating share

19. Inspiring people to
Fluid Templating share

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

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

22. Ziele von Fluid
Inspiring people to
Fluid Templating share

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

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

25. simple, elegante
template engine
http://www.flickr.com/photos/josefstuefer/9699426/

26. Viele Hilfestellungen
für den Template-Autor

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

28. Unterstützung vieler
Ausgabe-Formate

29. Inspiring people to
Fluid Templating share

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

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. 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. 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. 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. Fluid Core enthält keine Ausgabelogik,
und keine Kontrollstrukturen!

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

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

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

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

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

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. simple loop
Fortgeschrittene
Konzepte

43. Formulare
v4 v5
Inspiring people to
Fluid Templating share

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

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

47. Fortgeschrittene Konzepte
Code Text
Inspiring people to
Fluid Templating share

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

50. Inspiring people to
Fluid Templating share

51. Layouts und Partials
v4 v5
Inspiring people to
Fluid Templating share

52. Inspiring people to
Fluid Templating share

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

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

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

56. Inspiring people to
Fluid Templating share

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

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

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

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

61. Inspiring people to
Fluid Templating share

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

63. XSS-Vorbeugung
Inspiring people to
Fluid Templating share

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

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

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

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

68. Boolesche Werte
Inspiring people to
Fluid Templating share

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

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

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

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

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

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

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

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

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

78. Eigene ViewHelper
Inspiring people to
Fluid Templating share

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

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

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

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

83. Inspiring people to
Fluid Templating share

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

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

86. Autocompletion

88. Balance

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

90. ????
??
??
?
??
?
?

91. inspiring people to share.