Advanced Fluid
-
Upload
sebastian-kurfuerst -
Category
Documents
-
view
7.340 -
download
1
description
Transcript of Advanced Fluid
![Page 1: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/1.jpg)
Inspiring people toshareAdvanced Fluid
![Page 2: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/2.jpg)
Advanced Fluid
Sebastian Kurfürst <[email protected]>Bastian Waidelich <[email protected]>
2. October 2010
![Page 3: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/3.jpg)
Basic Ingredientshttp://www.sxc.hu/photo/816749
![Page 4: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/4.jpg)
Inspiring people toshareAdvanced Fluid
Variables
$this->view->assign(‘blogTitle’, $blog->getTitle());
<h1>The name of the blog is: {blogTitle}</h1>
![Page 5: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/5.jpg)
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
![Page 6: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/6.jpg)
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
![Page 7: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/7.jpg)
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!
![Page 8: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/8.jpg)
Inspiring people toshareAdvanced Fluid
Summary: Basic IngredientsObject accessors: {blog.title}
ViewHelpers: <f:for each=“{blog.posts}“ as=“post“>...</f:for>
Arrays
![Page 9: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/9.jpg)
Advanced Features
http://www.flickr.com/photos/sackerman519/4248877127/
![Page 10: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/10.jpg)
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
![Page 11: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/11.jpg)
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
![Page 12: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/12.jpg)
<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!
![Page 13: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/13.jpg)
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
![Page 14: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/14.jpg)
Use Partials to remove Duplication
Ausstecher-bild
Partialsremoveduplication
![Page 15: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/15.jpg)
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?
![Page 16: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/16.jpg)
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>
![Page 17: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/17.jpg)
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!
![Page 18: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/18.jpg)
Secure byDefault
![Page 19: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/19.jpg)
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>
![Page 20: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/20.jpg)
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>
![Page 21: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/21.jpg)
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!
![Page 22: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/22.jpg)
Sushi-Bild
Don't fearthe Inline
Syntax!
sxc.hu: 1097400_18260778.jpg
![Page 23: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/23.jpg)
Inspiring people toshareAdvanced Fluid
![Page 24: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/24.jpg)
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.
![Page 25: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/25.jpg)
Inspiring people toshareAdvanced Fluid
Summary: Advanced FeaturesForms
XSS Protection
Inline Syntax
cObject ViewHelper
![Page 26: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/26.jpg)
ToDo: Developing ViewHelpers-> Bild vom Kochen / Backen?
MESSERBLOCK / Messer an wand
http://freerangestock.com/details.php?gid=37&pid=11545
DevelopingViewHelpers
![Page 27: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/27.jpg)
Fluid Core does not contain any output logic, and no control structures!
![Page 28: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/28.jpg)
<f:...>
Every tag is a class!
![Page 29: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/29.jpg)
v5 {namespace f=F3\Fluid\ViewHelpers}
<f:for>...</f:for>
F3\Fluid\ViewHelpers\ForViewHelper
![Page 30: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/30.jpg)
v4 {namespace f=Tx_Fluid_ViewHelpers}
<f:for>...</f:for>
Tx_Fluid_ViewHelpers_ForViewHelper
![Page 31: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/31.jpg)
v4 {namespace f=Tx_Fluid_ViewHelpers}
<f:link.action>...</f:link.action>
Tx_Fluid_ViewHelpers_Link_ActionViewHelper
![Page 32: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/32.jpg)
Inspiring people toshareAdvanced Fluid
AbstractViewHelper
AbstractTagBasedViewHelper AbstractConditionViewHelper
AbstractWidgetViewHelper
![Page 33: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/33.jpg)
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;}
}
![Page 34: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/34.jpg)
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!
![Page 35: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/35.jpg)
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();}
![Page 36: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/36.jpg)
Inspiring people toshareAdvanced Fluid
TagBasedViewHelper
Default Arguments: class, id, style, ...
additionalAttributes
<f:form.textbox additionalAttributes="{dojoType: 'dijit.form.TextBox'}" />
Additional Goodies
![Page 37: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/37.jpg)
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>
![Page 38: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/38.jpg)
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(); } }}
![Page 39: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/39.jpg)
Inspiring people toshareAdvanced Fluid
Widgets
![Page 40: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/40.jpg)
![Page 41: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/41.jpg)
Inspiring people toshareAdvanced Fluid
Widgets encapsulatecomplex (view-related)
functionality.
AJAXAutocompletionPagination
Alphabetical listingGoogle Maps
Calendar
Sortable grid
![Page 42: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/42.jpg)
Inspiring people toshareAdvanced Fluid
It's simple to use them!
![Page 43: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/43.jpg)
Inspiring people toshareAdvanced Fluid
It's simple to write them!
![Page 44: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/44.jpg)
http://www.sxc.hu/photo/983682
Creating ViewHelpers is easy!
![Page 45: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/45.jpg)
http://center.gordonswine.com /stuff/contentmgr/files/fce82a1b415a4b47138a8b5e58b74dc2/images/33_smoking_cosmos_on_the_bar.jpg
The Future
![Page 46: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/46.jpg)
Inspiring people toshareAdvanced Fluid
TA
![Page 47: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/47.jpg)
Inspiring people toshareAdvanced Fluid
Autocompletion
![Page 48: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/48.jpg)
Inspiring people toshareAdvanced Fluid
Autocompletion
![Page 49: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/49.jpg)
Inspiring people toshareAdvanced Fluid
?????????????
![Page 50: Advanced Fluid](https://reader034.fdocuments.in/reader034/viewer/2022042614/55549155b4c9057f688b4964/html5/thumbnails/50.jpg)
inspiring people to share.