Advanced Fluid

7,738 views
7,609 views

Published on

In this talk, advanced features of Fluid are shown.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,738
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
44
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Advanced Fluid

  1. 1. Inspiring people to Advanced Fluid share
  2. 2. Advanced Fluid 2. October 2010 Sebastian Kurfürst <sebastian@typo3.org> Bastian Waidelich <bastian@typo3.org>
  3. 3. ttp://www.sxc.hu/photo/816749 Basic Ingredients
  4. 4. Variables $this->view->assign(‘blogTitle’, $blog->getTitle()); <h1>The name of the blog is: {blogTitle}</h1> Inspiring people to Advanced Fluid share
  5. 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. 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. 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. 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. 9. http://www.flickr.com/photos/sackerman519/4248877127/ Advanced Features
  10. 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. 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. 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. 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. 14. Use Partials to remove Duplication Ausstecher-bild Partials remove duplication
  15. 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. 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. 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. 18. Secure by Default
  19. 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. 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. 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. 22. Don't fear the Inline Syntax! Sushi-Bild sxc.hu: 1097400_18260778.jpg
  23. 23. Inspiring people to Advanced Fluid share
  24. 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. 25. Summary: Advanced Features Forms XSS Protection Inline Syntax cObject ViewHelper Inspiring people to Advanced Fluid share
  26. 26. ToDo: Developing ViewHelpers -> Bild vom Kochen / Backen? MESSERBLOCK / Messer an wand Developing ViewHelpers http://freerangestock.com/details.php?gid=37&pid=11545
  27. 27. Fluid Core does not contain any output logic, and no control structures!
  28. 28. <f:...> Every tag is a class!
  29. 29. v5 {namespace f=F3FluidViewHelpers} <f:for>...</f:for> F3FluidViewHelpersForViewHelper
  30. 30. v4 {namespace f=Tx_Fluid_ViewHelpers} <f:for>...</f:for> Tx_Fluid_ViewHelpers_ForViewHelper
  31. 31. v4 {namespace f=Tx_Fluid_ViewHelpers} <f:link.action>...</f:link.action> Tx_Fluid_ViewHelpers_Link_ActionViewHelper
  32. 32. AbstractViewHelper AbstractTagBasedViewHelper AbstractConditionViewHelper AbstractWidgetViewHelper Inspiring people to Advanced Fluid share
  33. 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. 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. 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. 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. 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. 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. 39. Widgets Inspiring people to Advanced Fluid share
  40. 40. 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
  41. 41. It's simple to use them! Inspiring people to Advanced Fluid share
  42. 42. It's simple to write them! Inspiring people to Advanced Fluid share
  43. 43. http://www.sxc.hu/photo/983682 Creating ViewHelpers is easy!
  44. 44. The Future http://center.gordonswine.com /stuff/contentmgr/files/fce82a1b415a4b47138a8b5e58b74dc2/images/33_smoking_cosmos_on_the_bar.jpg
  45. 45. TA Inspiring people to Advanced Fluid share
  46. 46. Autocompletion Inspiring people to Advanced Fluid share
  47. 47. Autocompletion Inspiring people to Advanced Fluid share
  48. 48. ???? ?? ?? ? ?? ? ? Inspiring people to Advanced Fluid share
  49. 49. inspiring people to share.

×