fluid - templating for professionals - t3con09

Inspiring people toshareFluid - Templating made easy

T3CON09 Frankfurt - 12 September 2009

Fluid - Templating made easy

Sebastian Kurfürst <[email protected]>

12.09.2009

mailto:[email protected]



TYPO3addict


TYPO3 v4 and v5

v4 v5


Einordnung - v4, v5 - Transition


Why are good frameworksimportant?


No!

We need onlyEnd-Userfeatures


We needEnd-Userfeatures


We needDeveloper

features,too!


Developing should be fun!


Productivity will increase


What is a Template Engine?

DataDataData Template

Template Engine

DataDatarendered data


Why another template engine?


Goals of Fluid

The Zen of Templating

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

simple powerful



The Zen of Templating


intuitive easily extensible



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

simple, eleganttemplate engine



Help the template writerin many ways

Easy and cleanextensibility




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


CoreConcepts



Inspiring people toshare

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

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

Core Concepts


Variables


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

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

Core Concepts


Object Accessors

$blog->getAuthor();


{namespace f=F3\Fluid\ViewHelpers}

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

Administration</f:link>

Core Concepts


ViewHelpers namespace declaration

ViewHelper invocation

v5


{namespace f=Tx_Fluid_ViewHelpers}

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

Administration</f:link>

Core Concepts


ViewHelpers namespace declaration

ViewHelper invocation

v4

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

<f:...>

Every tag is a class!

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

Core Concepts


Arrays


Core Concepts


Basic Ingredients

Object accessors: {blog.title}

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

Arrays

simple loop

Fluid for professionals

v4 v5

Forms


/** * 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'); }



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>



Forms


Code Text




/** * 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'); }



Forms


Layouts

Layouts

v4 v5


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

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



Layouts


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



Layouts


Custom ViewHelpers


Custom ViewHelpers


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

v4

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





Custom ViewHelpers


Task: Gravatar ViewHelper

Expected usage:

{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‘; }}

Custom ViewHelpers


1. Create a ViewHelper skeletonv4


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

Custom ViewHelpers


Implement the ViewHelper!

The PHPDoc must exist (for validation)

All method parameters will be ViewHelper arguments

automatically

v4

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


















Fluid Corev4v5

TemplateViewv5 View Helpers (Tags)v4

View Helpers (Tags)TemplateView

Fluid internals

Autocompletion

Balance

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

inspiring people to share.

fluid - templating for professionals - t3con09

Technology