fluid - templating for professionals - t3con09

Inspiring people toshareFluid - Templating made easy

T3CON09 Frankfurt - 12 September 2009

Fluid - Templating made easy

Sebastian Kurfürst <sebastian@typo3.org>

12.09.2009

TYPO3addict

TYPO3 v4 and v5

Einordnung - v4, v5 - Transition

Why are good frameworksimportant?

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

{namespace f=Tx_Fluid_ViewHelpers}

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

Administration</f:link>

Core Concepts

ViewHelpers namespace declaration

ViewHelper invocation

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

{namespace f=F3\Fluid\ViewHelpers}<f:for>...</f:for>

F3\Fluid\ViewHelpers\ForViewHelper

{namespace f=F3\Fluid\ViewHelpers}<f:link.action>...</f:link.action>

F3\Fluid\ViewHelpers\Link\ActionViewHelper

<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

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

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

Code Text

Layouts

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

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

Layouts

Layouts

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

Custom ViewHelpers

Task: Gravatar ViewHelper

Expected usage:

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

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

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

web templating

meet magento 2011-templating

surgical technique - pei · 3 templating x-ray templating...

wpf templating and styling

t3con09 - certified typo3 integrator

java script templating in wordpress

page templating tutorial

mobile templating με joomla και k2

best practice: joomla! templating

continuum acetabular system - zimmer biomet€¦ · 3 |...

templating in ansible

orthopaedic planning and templating orthopaedic planning and...

ninja prototyping with templating frameworks

4. xaml & wpf - wpf templating-and-styling

joomla! templating

schulung fluid templating

templating wordpress

t3con09 dallas: hitchhikersguide

django templating more than just - meetup

[t3con12ca] typo3 phoenix templating workshop