The document provides an overview of Advanced Fluid, an open source templating language for PHP. It discusses basic ingredients like object accessors and view helpers. It then covers more advanced features such as forms, partials to remove duplication, security protections, and developing custom view helpers and widgets. The goal of Advanced Fluid is to inspire people to share knowledge about this templating language.

1. Inspiring people to
Advanced Fluid share

2. Advanced Fluid
2. October 2010
Sebastian Kurfürst <sebastian@typo3.org>
Bastian Waidelich <bastian@typo3.org>

3. ttp://www.sxc.hu/photo/816749
Basic Ingredients

4. Variables
$this->view->assign(‘blogTitle’, $blog->getTitle());
<h1>The name of the blog is: {blogTitle}</h1>
Inspiring people to
Advanced Fluid share

5. 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 to
Advanced Fluid share

6. ViewHelpers Namespace
Output logic is encapsulated in View Helpers (Tags) Declaration
{namespace f=F3FluidViewHelpers}
v5
<f:link.action action=“someAction“>Administration</f:link.action>
Invocation of
v4 {namespace f=Tx_Fluid_ViewHelpers} a tag
<f:link.action action=“someAction“>Administration</f:link.action>
Namespace f is included automatically
Inspiring people to
Advanced Fluid share

7. 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 to
Advanced Fluid share

8. Summary: Basic Ingredients
Object accessors: {blog.title}
ViewHelpers: <f:for each=“{blog.posts}“ as=“post“>...</f:for>
Arrays
Inspiring people to
Advanced Fluid share

9. http://www.flickr.com/photos/sackerman519/4248877127/
Advanced Features

10. Forms - Edit Blog Post
object bound
to 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>
property
binding
Inspiring people to
Advanced Fluid share

11. Forms - New Blog Post
Used
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>
Inspiring people to
Advanced Fluid share

12. Cod
e
<f:form action="update" object="{post}" name="post"> <f:form action="create" object="{newPost}" name="newPost">
Dup
<label for="author">Author</label><br /> <label for="author">Author</label><br />
<f:form.textbox property="author.name" /><br /> <f:form.textbox property="author.name" /><br />
<label for="title">Title</label><br /> <label for="title">Title</label><br />
lica
<f:form.textbox property="title" /><br /> <f:form.textbox property="title" /><br />
<label for="content">Content</label><br /> <label for="content">Content</label><br />
tion
<f:form.textarea property="content" rows="5" cols="40" /><br /> <f:form.textarea property="content" rows="5" cols="40" /><br />
</f:form> </f:form>
!

13. Removing the Duplication
<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 />
Inspiring people to
Advanced Fluid share

14. Use Partials to
remove Duplication
Ausstecher-bild
Partials
remove
duplication

15. XSS
Improving the Edit Form
<h2>{post.title}</h2>
?
<f:form action="update" object="{post}" name="post">
<f:render partial="BlogPostForm" />
</f:form>
Inspiring people to
Advanced Fluid share

16. Improving the Edit Form
<h2><script> stealSessionAndSendTo('evil@drupal.org')</script></h2>
<f:form action="update" object="{post}" name="post">
<f:render partial="BlogPostForm" />
</f:form>
Inspiring people to
Advanced Fluid share

17. Improving the Edit Form
<h2>{post.title}</h2>
<f:form action="update" object="{post}" name="post">
<f:render partial="BlogPostForm" />
</f:form>
Automatically
Escaped!
Inspiring people to
Advanced Fluid share

18. Secure by
Default

19. 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 to
Advanced Fluid share

20. 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 to
Advanced Fluid share

21. 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 their
use-cases!
Inspiring people to
Advanced Fluid share

22. Don't fear
the Inline
Syntax!
Sushi-Bild
sxc.hu: 1097400_18260778.jpg

23. Inspiring people to
Advanced Fluid share

24. 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 = IMAGE
lib.dateAsImage {
Use TypoScript
where it makes
file = GIFBUILDER
file {
10 = TEXT
}
}
10.current = 1
sense.
Inspiring people to
Advanced Fluid share

25. Summary: Advanced Features
Forms
XSS Protection
Inline Syntax
cObject ViewHelper
Inspiring people to
Advanced Fluid share

26. ToDo: Developing
ViewHelpers
-> Bild vom Kochen /
Backen?
MESSERBLOCK /
Messer an wand
Developing
ViewHelpers
http://freerangestock.com/details.php?gid=37&pid=11545

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

28. <f:...>
Every tag is a class!

29. v5 {namespace f=F3FluidViewHelpers}
<f:for>...</f:for>
F3FluidViewHelpersForViewHelper

30. v4 {namespace f=Tx_Fluid_ViewHelpers}
<f:for>...</f:for>
Tx_Fluid_ViewHelpers_ForViewHelper

31. v4 {namespace f=Tx_Fluid_ViewHelpers}
<f:link.action>...</f:link.action>
Tx_Fluid_ViewHelpers_Link_ActionViewHelper

32. AbstractViewHelper
AbstractTagBasedViewHelper AbstractConditionViewHelper
AbstractWidgetViewHelper
Inspiring people to
Advanced Fluid share

33. 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 to
Advanced Fluid share

34. Example: <f:image src="myImage.png" width="200" />
With AbstractViewHelper:
public function render($src) {
XSS
return '<img src="' . $src . '" />'; // TODO: Scaling
}
Advanced Fluid
! Inspiring people to
share

35. TagBasedViewHelper
Example: <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 to
Advanced Fluid share

36. TagBasedViewHelper
Additional Goodies
Default Arguments: class, id, style, ...
additionalAttributes
<f:form.textbox
additionalAttributes="{dojoType: 'dijit.form.TextBox'}" />
Inspiring people to
Advanced Fluid share

37. 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 to
Advanced Fluid share

38. IfViewHelper
class IfViewHelper extends ...AbstractConditionViewHelper {
/**
* @param boolean $condition View helper condition
*/
public function render($condition) {
if ($condition) {
return $this->renderThenChild();
} else {
return $this->renderElseChild();
}
}
}
Inspiring people to
Advanced Fluid share

39. Widgets
Inspiring people to
Advanced Fluid share

41. Sortable g
rid
nd ar
Ca le
a ti on
ag in AJAX
P Autoco
mpleti
on
Widgets encapsulate
complex (view-related)
functionality.
Alph
ps abe
le Ma tica
l lis
Go og ting
Inspiring people to
Advanced Fluid share

42. It's simple to use them!
Inspiring people to
Advanced Fluid share

43. It's simple to write them!
Inspiring people to
Advanced Fluid share

44. http://www.sxc.hu/photo/983682
Creating ViewHelpers is easy!

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

46. TA
Inspiring people to
Advanced Fluid share

47. Autocompletion
Inspiring people to
Advanced Fluid share

48. Autocompletion
Inspiring people to
Advanced Fluid share

49. ????
??
??
?
??
?
?
Inspiring people to
Advanced Fluid share

50. inspiring people to share.