Embed Size (px)
DESCRIPTION
In this talk, advanced features of Fluid are shown.
Citation preview
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.
