T3CON09 Frankfurt - 12 September 2009 Inspiring people to
Fluid - Templating made easy share

Fluid - Templating made easy
12.09.2009
Sebastian Kurfürst <sebastian@typo3.org>

TYPO3
addict
Inspiring people to
Fluid - Templating made easy share

TYPO3 v4 and v5
v4 v5
Inspiring people to
Fluid - Templating made easy share

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

Why are good frameworks
important?
Inspiring people to
Fluid - Templating made easy share

We need only
End-User
features
No!
Inspiring people to
Fluid - Templating made easy share

We need
End-User
features
Inspiring people to
Fluid - Templating made easy share

We need
Developer
features,
too!
Inspiring people to
Fluid - Templating made easy share

Developing should be fun!
Inspiring people to
Fluid - Templating made easy share

Productivity will
increase
Inspiring people to
Fluid - Templating made easy share

Inspiring people to
Fluid - Templating made easy share

What is a Template Engine?
Data
Data Template
Data
Template Engine
rendered data
Data
Data
Inspiring people to
Fluid - Templating made easy share

Inspiring people to
Fluid - Templating made easy share

Why another template engine?
Inspiring people to
Fluid - Templating made easy share

Inspiring people to
Fluid - Templating made easy share

Goals of Fluid
Inspiring people to
Fluid - Templating made easy share

The Zen of
Templating
simple powerful
http://www.sxc.hu/photo/821903

The Zen of
Templating
intuitive easily extensible
http://www.sxc.hu/photo/821903

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

Help the template writer
in many ways

Easy and clean
extensibility
http://www.sxc.hu/photo/338064

Support for different
output formats

Goals of Fluid
Simple, elegant template engine
support for the template writer in many ways
simple and clean extensibility
different output formats possible
Inspiring people to
Fluid - Templating made easy share

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

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

Core Concepts
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 made easy share

Core Concepts
ViewHelpers namespace
declaration
{namespace f=F3FluidViewHelpers}
v5
<f:link.action action=“someAction“>
Administration ViewHelper
</f:link> invocation
Inspiring people to
Fluid - Templating made easy share

Core Concepts
ViewHelpers namespace
declaration
{namespace f=Tx_Fluid_ViewHelpers}
v4
<f:link.action action=“someAction“>
Administration ViewHelper
</f:link> invocation
Inspiring people to
Fluid - Templating made easy share

Fluid Core does not contain any output
logic, and no control structures!

<f:...>
Every tag is a class!

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

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

Core Concepts
Basic Ingredients
Object accessors: {blog.title}
ViewHelpers: <f:for each=“{blog.posts}“
as=“post“>...</f:for>
Arrays
Inspiring people to
Fluid - Templating made easy share

simple loop
Fluid for
professionals

Forms
v4 v5

Fluid for professionals
Forms
/**
* 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 made easy share

Fluid for professionals
Forms
<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 made easy share

Fluid for professionals
Code Text
Inspiring people to
Fluid - Templating made easy share

Fluid for professionals
Forms
/**
* 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 made easy share

Fluid for professionals
Forms
/**
* 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 made easy share

Layouts
Inspiring people to
Fluid - Templating made easy share

Layouts
v4 v5

Fluid for professionals
Layouts
<f:layout name="master" />
<f:section name="main">
<h1> My content</h1>
</f:section>
Inspiring people to
Fluid - Templating made easy share

Fluid for professionals
Layouts
<html> ...
<body>
<f:render section="main" />
</body>
Inspiring people to
Fluid - Templating made easy share

Custom ViewHelpers
Inspiring people to
Fluid - Templating made easy share

Custom ViewHelpers
v4 Task: Gravatar ViewHelper
should take an e-mail address and output the
gravatar image, if any.
Expected output:
<img src=“http://www.gravatar.com/avatar/md5
($email).jpg“ />
Inspiring people to
Fluid - Templating made easy share

Custom ViewHelpers
v4 Task: Gravatar ViewHelper
Expected usage:
{namespace blog=Tx_Blog_ViewHelpers}
<blog:gravatar email=“sebastian@typo3.org“ />
Inspiring people to
Fluid - Templating made easy share

Custom ViewHelpers
v4 1. Create a ViewHelper skeleton
class Tx_Blog_ViewHelpers_GravatarViewHelper
extends Tx_Fluid_Core_AbstractViewHelper {
public function render() {
return ‘Hello World‘;
}
}
Inspiring people to
Fluid - Templating made easy share

Custom ViewHelpers
v4 Implement the ViewHelper!
The PHPDoc must
/** exist (for validation)
* @param string $email The email to render as gravatar
*/
public function render($email) {
return ‘http://www.gravatar.com/gravatar/‘ . md5($email);
}
All method parameters will be
ViewHelper arguments
automatically
Inspiring people to
Fluid - Templating made easy share

Fluid internals
TemplateView View Helpers (Tags)
v5 v4 TemplateView View Helpers (Tags)
v5 v4 Fluid Core
Inspiring people to
Fluid - Templating made easy share

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

Autocompletion

Balance

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

inspiring people to share.