FLOW3 Experience 2012: Fluid #F3X

my presentation on the FLOW3 experience about #Fluid

Transcript

1. Fluid Sebastian Kurfürst <sebastian@typo3.org> 31. März 2012
2. Zutaten ttp://www.sxc.hu/photo/816749
3. Inspiring people to share Fluid Object Accessors $this->view->assign(‘blog’, $blog); <h1>The name of the blog is: {blog.title}</h1> Author: {blog.author} Verschachtelung mgl.
4. Inspiring people to share Fluid ViewHelpers Ausgabelogik ist in View Helpers (Tags) gekapselt {namespace f=TYPO3\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 ist automatisch registriert Namespace- Deklaration Tag-Aufruf v4 v5
5. Inspiring people to share Fluid Arrays <f:link action=“show“ arguments=“{blog: blog, name: ‘Hello’}“>show posting</f:link> JSON syntax objekt-Argumente
7. Fortgeschrittene Features http://www.flickr.com/photos/sackerman519/4248877127/
8. Inspiring people to share 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 Objekt an Form gebunden
9. Inspiring people to share <f:form action="create" 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> Fluid Forms - New Blog Post
10. Inspiring people to share Fluid Property Mapping Fluid Form Property Mapping Controller Action newPost[title]=F3PX newPost[content]=... newPost[author][name]=Sebastian TYPO3\Blog\Domain\Model\Post Vali- dierung
11. Inspiring people to share Fluid Property Mapping Fluid Form Property Mapping Controller Action Vali- dierung Validierungs- fehler
13. <f:form action="create" 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-Duplikation!
14. Inspiring people to share <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 /> Fluid Partials
15. Use Partials to remove Duplication Ausstecher-bild Partials reduzieren Duplikationen
16. Inspiring people to share Fluid Pro Tip <f:render partial="..." arguments="{_all}" /> {_all -> f:debug()}
17. Inspiring people to share Fluid Edit-Formular verbessern <h2>{post.title}</h2> <f:form action="update" object="{post}" name="post"> <f:render partial="BlogPostForm" /> </f:form> XSS?
18. Inspiring people to share Fluid Edit-Formular verbessern <h2><script> stealSessionAndSendTo('evil@drupal.org')</script></h2> <f:form action="update" object="{post}" name="post"> <f:render partial="BlogPostForm" /> </f:form>
19. Inspiring people to share Fluid Edit-Formular verbessern <h2>{post.title}</h2> <f:form action="update" object="{post}" name="post"> <f:render partial="BlogPostForm" /> </f:form> Automatisch Escaped!
20. Inspiring people to share Fluid <h2>{post.title -> f:format.raw()}</h2> Escaping ausschalten
21. standardmäßig sicher
22. Inspiring people to share Fluid Edit-Formular verbessern <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>
23. Inspiring people to share Fluid Edit-Formular verbessern <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>
24. Inspiring people to share 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')}" /> Es gibt Anwendungsfälle für jede Syntax!
25. Sushi-Bild Nutze die Inline Syntax! sxc.hu: 1097400_18260778.jpg
26. Inspiring people to share Fluid
27. Inspiring people to share Fluid Fortgeschrittene Funktionen Formulare XSS-Vorbeugung Inline Syntax
28. ToDo: Developing ViewHelpers -> Bild vom Kochen / Backen? MESSERBLOCK / Messer an wand http://freerangestock.com/details.php?gid=37&pid=11545 ViewHelper entwickeln
29. Fluid Core enthält keine Ausgabelogik, und keine Kontrollstrukturen!
30. {namespace f=TYPO3\Fluid\ViewHelpers} <f:for>...</f:for> TYPO3\Fluid\ViewHelpers \ForViewHelper
31. Inspiring people to share Fluid AbstractViewHelper AbstractTagBasedViewHelper AbstractConditionViewHelper AbstractWidgetViewHelper
32. Inspiring people to share Fluid AbstractViewHelper {namespace blog=TYPO3\BlogExample\ViewHelpers} <blog:greeting name="Kasper" /> class TYPO3\BlogExample\ViewHelpers\GreetingViewHelper extends ...AbstractViewHelper { /** * @param string name */ public function render($name) { return 'Hello ' . $name; } }
33. Inspiring people to share Fluid Beispiel: <f:image src="myImage.png" width="200" /> Mit AbstractViewHelper: public function render($src) { return '<img src="' . $src . '" />'; // TODO: Scaling } XSS!
34. Inspiring people to share Fluid TagBasedViewHelper Beispiel: <f:image src="myImage.png" width="200" /> Mit TagBasedViewHelper: protected $tagName = 'img'; public function render($src) { $this->tag->addAttribute('src', $src); return $this->tag->render(); }
35. Inspiring people to share Fluid TagBasedViewHelper Default-Argumente: class, id, style, ... additionalAttributes <f:form.textbox additionalAttributes="{dojoType: 'dijit.form.TextBox'}" /> Zusatz-Funktionen
36. Inspiring people to share 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>
37. Inspiring people to share Fluid IfViewHelper class IfViewHelper extends ...AbstractConditionViewHelper { /** * @param boolean $condition View helper condition */ public function render($condition) { if ($condition) { return $this->renderThenChild(); } else { return $this->renderElseChild(); } } }
38. Inspiring people to share Fluid Widgets
40. Inspiring people to share Fluid Widgets kapseln komplexe (View-) Funktionalität. AJAX Autovervollständigung Paginierung Alphabetische Sortierung Google Maps Kalender Sortierbares Grid
41. Inspiring people to share View (Fluid) Fluid Model Controller Controller View Widget
42. Inspiring people to share Fluid Widget View Helper class PaginateViewHelper extends ...AbstractWidgetViewHelper { /** * @FLOW3\Inject * @var \TYPO3\Fluid\...\Controller\PaginateController */ protected $controller; public function render(/* define arguments here */) { return $this->initiateSubRequest(); } }
43. Inspiring people to share Fluid Widget Controller class PaginateController extends \TYPO3\Fluid\Core\Widget \AbstractWidgetController { public function indexAction() { // use $this->widgetConfiguration[...] here } ... } + Fluid Widget Template
44. Inspiring people to share Fluid AJAX Widgets: Autocompletion <f:widget.autocomplete for="name" objects="{people}" searchProperty="firstName" /> 100000000 people Intelligent Paging
45. http://www.sxc.hu/photo/983682 ViewHelper programmieren ist einfach!
46. http://center.gordonswine.com /stuff/contentmgr/files/fce82a1b415a4b47138a8b5e58b74dc2/images/33_smoking_cosmos_on_the_bar.jpg Die Zukunft
47. Inspiring people to share keine String-Vergleiche oder Methoden-Aufrufe in Fluid Neues Syntax-Konstrukt: ${...} Methodenaufrufe: ${foo.bar('baz', "bar", 42, true)} Vergleiche: ${foo == 'hello'}, ${callMethod(foo == 'hello')} Array-Literal: ${[a, b, c]} Fluid Embedded Expression Language (Eel) wie JavaScript
48. Inspiring people to share Fluid Komponenten widerverwenden http://www.flickr.com/photos/myklroventine/2434221368/
49. Inspiring people to share Fluid Model Controller View (Fluid) bisher Model Controller TypoScript Zukunft Fluid Fluid Plugin
50. Inspiring people to share Fluid ??? ? ? ? ? ? ? ? ? ? ?
51. inspiring people to share.