Advanced Fluid

Inspiring people toshareAdvanced Fluid

Advanced Fluid

Sebastian Kurfürst <[email protected]>Bastian Waidelich <[email protected]>

2. October 2010

Basic Ingredientshttp://www.sxc.hu/photo/816749

Inspiring people toshareAdvanced Fluid

Variables

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

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

Inspiring people toshareAdvanced Fluid

Object Accessors

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

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

Getters are called automatically can be nested

Inspiring people toshareAdvanced Fluid

ViewHelpersOutput logic is encapsulated in View Helpers (Tags)

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

{namespace f=Tx_Fluid_ViewHelpers}<f:link.action action=“someAction“>Administration</f:link.action>

Namespace f is included automatically

NamespaceDeclaration

Invocation of a tagv4

v5

Inspiring people toshareAdvanced Fluid

Arrays

<f:link action=“show“ arguments=“{blog: blog, name: ‘Hello’}“>show posting</f:link>

JSON object syntax objects as arguments can be

used!

Inspiring people toshareAdvanced Fluid

Summary: Basic IngredientsObject accessors: {blog.title}

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

Arrays

Advanced Features

http://www.flickr.com/photos/sackerman519/4248877127/

Inspiring people toshareAdvanced Fluid

Forms - Edit Blog Post

<f:form action="update" object="{post}" name="post"> <label for="author">Author</label><br /> <f:form.textbox property="author.name" /><br />

<label for="title">Title</label><br /> <f:form.textbox property="title" /><br />

<label for="content">Content</label><br /> <f:form.textarea property="content" rows="5" cols="40" /><br /></f:form>

property binding

object bound to form

Inspiring people toshare

<f:form action="create" object="{newPost}" name="newPost"> <label for="author">Author</label><br /> <f:form.textbox property="author.name" /><br />

<label for="title">Title</label><br /> <f:form.textbox property="title" /><br />

<label for="content">Content</label><br /> <f:form.textarea property="content" rows="5" cols="40" /><br /></f:form>

Advanced Fluid

Forms - New Blog PostUsed

on Validation Error

<f:form action="create" object="{newPost}" name="newPost"> <label for="author">Author</label><br /> <f:form.textbox property="author.name" /><br />

<label for="title">Title</label><br /> <f:form.textbox property="title" /><br />

<label for="content">Content</label><br /> <f:form.textarea property="content" rows="5" cols="40" /><br /></f:form>

<f:form action="update" object="{post}" name="post"> <label for="author">Author</label><br /> <f:form.textbox property="author.name" /><br />

<label for="title">Title</label><br /> <f:form.textbox property="title" /><br />

<label for="content">Content</label><br /> <f:form.textarea property="content" rows="5" cols="40" /><br /></f:form>

Code Duplication!

Inspiring people toshare

<f:form action="create" object="{newPost}" name="newPost"> <f:render partial="BlogPostForm" /></f:form>

Resources/Private/Partials/BlogPostForm.html

<label for="author">Author</label><br /><f:form.textbox property="author" /><br />

<label for="title">Title</label><br /><f:form.textbox property="title" /><br />

<label for="content">Content</label><br /><f:form.textarea property="content" rows="5" cols="40" /><br />

Advanced Fluid

Removing the Duplication

Use Partials to remove Duplication

Ausstecher-bild

Partialsremoveduplication

Inspiring people toshareAdvanced Fluid

Improving the Edit Form<h2>{post.title}</h2>

<f:form action="update" object="{post}" name="post"> <f:render partial="BlogPostForm" /></f:form>

XSS?

Inspiring people toshareAdvanced Fluid

Improving the Edit Form<h2><script> stealSessionAndSendTo('[email protected]')</script></h2>

<f:form action="update" object="{post}" name="post"> <f:render partial="BlogPostForm" /></f:form>

Inspiring people toshareAdvanced Fluid

Improving the Edit Form<h2>{post.title}</h2>

<f:form action="update" object="{post}" name="post"> <f:render partial="BlogPostForm" /></f:form>

AutomaticallyEscaped!

Secure byDefault

Inspiring people toshareAdvanced Fluid

Improving the Edit Form<h2>{post.title}</h2><f:format.date format="Y-m-d">{post.date}</f:format.date>

<f:form action="update" object="{post}" name="post"> <f:render partial="BlogPostForm" /></f:form>

Inspiring people toshareAdvanced Fluid

Improving the Edit Form<h2>{post.title}</h2>{post.date -> f:format.date(format:"Y-m-d")}

<f:form action="update" object="{post}" name="post"> <f:render partial="BlogPostForm" /></f:form>

Inspiring people toshareAdvanced Fluid

Tag Syntax vs Inline Syntax<link rel="stylesheet" href="<f:uri.file path='myStyle.css' />" />

<link rel="stylesheet" href="{f:uri.file(path: 'myStyle.css')}" />

Both have theiruse-cases!

Sushi-Bild

Don't fearthe Inline

Syntax!

sxc.hu: 1097400_18260778.jpg

Inspiring people toshareAdvanced Fluid

Inspiring people toshareAdvanced Fluid

Render Date as Image<h2>{post.title}</h2>{post.date -> f:format.date(format:"Y-m-d") -> f:cObject(typoscriptObjectPath: 'lib.dateAsImage')}

TypoScript

lib.dateAsImage = IMAGElib.dateAsImage { file = GIFBUILDER file { 10 = TEXT 10.current = 1 }}

Use TypoScriptwhere it makes

sense.

Inspiring people toshareAdvanced Fluid

Summary: Advanced FeaturesForms

XSS Protection

Inline Syntax

cObject ViewHelper

ToDo: Developing ViewHelpers-> Bild vom Kochen / Backen?

MESSERBLOCK / Messer an wand

http://freerangestock.com/details.php?gid=37&pid=11545

DevelopingViewHelpers

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

<f:...>

Every tag is a class!

v5 {namespace f=F3\Fluid\ViewHelpers}

<f:for>...</f:for>

F3\Fluid\ViewHelpers\ForViewHelper

v4 {namespace f=Tx_Fluid_ViewHelpers}

<f:for>...</f:for>

Tx_Fluid_ViewHelpers_ForViewHelper

v4 {namespace f=Tx_Fluid_ViewHelpers}

<f:link.action>...</f:link.action>

Tx_Fluid_ViewHelpers_Link_ActionViewHelper

Inspiring people toshareAdvanced Fluid

AbstractViewHelper

AbstractTagBasedViewHelper AbstractConditionViewHelper

AbstractWidgetViewHelper

Inspiring people toshareAdvanced Fluid

AbstractViewHelper{namespace blog=Tx_BlogExample_ViewHelpers}<blog:greeting name="Kasper" />

class Tx_BlogExample_ViewHelpers_GreetingViewHelper extends ...AbstractViewHelper {

/** * @param string name */public function render($name) {

return 'Hello ' . $name;}

}

Inspiring people toshareAdvanced Fluid

Example: <f:image src="myImage.png" width="200" />

With AbstractViewHelper:public function render($src) { return '<img src="' . $src . '" />'; // TODO: Scaling} XSS!

Inspiring people toshareAdvanced Fluid

TagBasedViewHelperExample: <f:image src="myImage.png" width="200" />

With TagBasedViewHelper:

protected $tagName = 'img';

public function render($src) { $this->tag->addAttribute('src', $src); return $this->tag->render();}

Inspiring people toshareAdvanced Fluid

TagBasedViewHelper

Default Arguments: class, id, style, ...

additionalAttributes

<f:form.textbox additionalAttributes="{dojoType: 'dijit.form.TextBox'}" />

Additional Goodies

Inspiring people toshareAdvanced Fluid

IfViewHelper<f:if condition="{blog.posts}"> <f:then> ... display blog posts ... </f:then> <f:else> No Blog Posts Available </f:else></f:if>

<li class="{f:if(condition: iteration.isFirst, then: 'isFirstElement')}">Some Element</li>

Inspiring people toshareAdvanced Fluid

IfViewHelperclass IfViewHelper extends ...AbstractConditionViewHelper { /** * @param boolean $condition View helper condition */ public function render($condition) { if ($condition) { return $this->renderThenChild(); } else { return $this->renderElseChild(); } }}

Inspiring people toshareAdvanced Fluid

Widgets

Inspiring people toshareAdvanced Fluid

Widgets encapsulatecomplex (view-related)

functionality.

AJAXAutocompletionPagination

Alphabetical listingGoogle Maps

Calendar

Sortable grid

Inspiring people toshareAdvanced Fluid

It's simple to use them!

Inspiring people toshareAdvanced Fluid

It's simple to write them!

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

Creating ViewHelpers is easy!

http://center.gordonswine.com /stuff/contentmgr/files/fce82a1b415a4b47138a8b5e58b74dc2/images/33_smoking_cosmos_on_the_bar.jpg

The Future

Inspiring people toshareAdvanced Fluid

TA

Inspiring people toshareAdvanced Fluid

Autocompletion

Inspiring people toshareAdvanced Fluid

Autocompletion

Inspiring people toshareAdvanced Fluid

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

inspiring people to share.