Fluid - Templating for professionals - T3CON09
2 likes1,343 views
The document discusses Fluid templating in TYPO3, detailing its features, core concepts, and the importance of both end-user and developer functionalities. It highlights Fluid's goals of being a simple, elegant template engine with easy extensibility and support for various output formats. The document also includes examples of using object accessors, view helpers, and forms within the Fluid templating framework.
Fluid - Templating for professionals - T3CON09
- 1. T3CON09 Frankfurt - 12 September 2009 Inspiring people to Fluid - Templating made easy share
- 2. Fluid - Templating made easy 12.09.2009 Sebastian Kurfürst <[email protected]>
- 3. TYPO3 addict Inspiring people to Fluid - Templating made easy share
- 4. TYPO3 v4 and v5 v4 v5 Inspiring people to Fluid - Templating made easy share
- 6. Einordnung - v4, v5 - Transition Inspiring people to Fluid - Templating made easy share
- 7. Why are good frameworks important? Inspiring people to Fluid - Templating made easy share
- 8. We need only End-User features No! Inspiring people to Fluid - Templating made easy share
- 9. We need End-User features Inspiring people to Fluid - Templating made easy share
- 10. We need Developer features, too! Inspiring people to Fluid - Templating made easy share
- 11. Developing should be fun! Inspiring people to Fluid - Templating made easy share
- 12. Productivity will increase Inspiring people to Fluid - Templating made easy share
- 13. Inspiring people to Fluid - Templating made easy share
- 14. What is a Template Engine? Data Data Template Data Template Engine rendered data Data Data Inspiring people to Fluid - Templating made easy share
- 15. Inspiring people to Fluid - Templating made easy share
- 16. Why another template engine? Inspiring people to Fluid - Templating made easy share
- 17. Inspiring people to Fluid - Templating made easy share
- 18. Goals of Fluid Inspiring people to Fluid - Templating made easy share
- 19. The Zen of Templating simple powerful http://www.sxc.hu/photo/821903
- 20. The Zen of Templating intuitive easily extensible http://www.sxc.hu/photo/821903
- 21. simple, elegant template engine http://www.flickr.com/photos/josefstuefer/9699426/
- 22. Help the template writer in many ways
- 23. Easy and clean extensibility http://www.sxc.hu/photo/338064
- 24. Support for different output formats
- 25. Goals of Fluid Simple, elegant template engine support for the template writer in many ways simple and clean extensibility different output formats possible Inspiring people to Fluid - Templating made easy share
- 26. Core Concepts http://www.sxc.hu/photo/816749
- 27. Core Concepts Variables $this->view->assign(‘blogTitle’, $blog->getTitle()); <h1>The name of the blog is: {blogTitle}</h1> Inspiring people to Fluid - Templating made easy share
- 28. Core Concepts Object Accessors $this->view->assign(‘blog’, $blog); <h1>The name of the blog is: {blog.title}</h1> Author: {blog.author} $blog->getAuthor(); Inspiring people to Fluid - Templating made easy share
- 29. Core Concepts ViewHelpers namespace declaration {namespace f=F3FluidViewHelpers} v5 <f:link.action action=“someAction“> Administration ViewHelper </f:link> invocation Inspiring people to Fluid - Templating made easy share
- 30. Core Concepts ViewHelpers namespace declaration {namespace f=Tx_Fluid_ViewHelpers} v4 <f:link.action action=“someAction“> Administration ViewHelper </f:link> invocation Inspiring people to Fluid - Templating made easy share
- 31. Fluid Core does not contain any output logic, and no control structures!
- 32. <f:...> Every tag is a class!
- 33. v4 {namespace f=Tx_Fluid_ViewHelpers} <f:for>...</f:for> Tx_Fluid_ViewHelpers_ForViewHelper
- 34. v5 {namespace f=F3FluidViewHelpers} <f:for>...</f:for> F3FluidViewHelpersForViewHelper
- 35. v5 {namespace f=F3FluidViewHelpers} <f:link.action>...</f:link.action> F3FluidViewHelpersLinkActionViewHelper
- 36. Core Concepts Arrays <f:link.action action=“show“ arguments=“{blog: blog, name: ‘Hello’}“> show posting </f:link> Inspiring people to Fluid - Templating made easy share
- 37. Core Concepts Basic Ingredients Object accessors: {blog.title} ViewHelpers: <f:for each=“{blog.posts}“ as=“post“>...</f:for> Arrays Inspiring people to Fluid - Templating made easy share
- 38. simple loop Fluid for professionals
- 39. Forms v4 v5
- 41. Fluid for professionals Forms /** * Displays a form for creating a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh blog object taken as a basis for the rendering * @return string An HTML form for creating a new blog * @dontvalidate $newBlog */ public function newAction(F3BlogDomainModelBlog $newBlog = NULL) { $this->view->assign('newBlog', $newBlog); } /** * Creates a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh Blog object which has not yet been added to the repository * @return void */ public function createAction(F3BlogDomainModelBlog $newBlog) { $this->blogRepository->add($newBlog); $this->pushFlashMessage('Your new blog was created.'); $this->redirect('index'); } Inspiring people to Fluid - Templating made easy share
- 42. Fluid for professionals Forms <f:form method="post" action="create" object="{newBlog}" name="newBlog"> <label for="identifier">Identifier<br /> <f:form.textbox property="identifier" id="identifier" /> <br /> <label for="name">Title</label><br /> <f:form.textbox property="title" id="title" /> <br /> <label for="description">Description</label><br /> <f:form.textarea property="description" rows="2" cols="40" id="description" /> <br /> <f:form.submit value="Create blog" /> </f:form> </f:section> Inspiring people to Fluid - Templating made easy share
- 43. Fluid for professionals Code Text Inspiring people to Fluid - Templating made easy share
- 44. Fluid for professionals Forms /** * Displays a form for creating a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh blog object taken as a basis for the rendering * @return string An HTML form for creating a new blog * @dontvalidate $newBlog */ public function newAction(F3BlogDomainModelBlog $newBlog = NULL) { $this->view->assign('newBlog', $newBlog); } /** * Creates a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh Blog object which has not yet been added to the repository * @return void */ public function createAction(F3BlogDomainModelBlog $newBlog) { $this->blogRepository->add($newBlog); $this->pushFlashMessage('Your new blog was created.'); $this->redirect('index'); } Inspiring people to Fluid - Templating made easy share
- 45. Fluid for professionals Forms /** * Displays a form for creating a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh blog object taken as a basis for the rendering * @return string An HTML form for creating a new blog * @dontvalidate $newBlog */ public function newAction(F3BlogDomainModelBlog $newBlog = NULL) { $this->view->assign('newBlog', $newBlog); } /** * Creates a new blog * * @param F3BlogDomainModelBlog $newBlog A fresh Blog object which has not yet been added to the repository * @return void */ public function createAction(F3BlogDomainModelBlog $newBlog) { $this->blogRepository->add($newBlog); $this->pushFlashMessage('Your new blog was created.'); $this->redirect('index'); } Inspiring people to Fluid - Templating made easy share
- 47. Layouts Inspiring people to Fluid - Templating made easy share
- 48. Layouts v4 v5
- 49. Fluid for professionals Layouts <f:layout name="master" /> <f:section name="main"> <h1> My content</h1> </f:section> Inspiring people to Fluid - Templating made easy share
- 50. Fluid for professionals Layouts <html> ... <body> <f:render section="main" /> </body> Inspiring people to Fluid - Templating made easy share
- 52. Custom ViewHelpers Inspiring people to Fluid - Templating made easy share
- 53. Custom ViewHelpers v4 Task: Gravatar ViewHelper should take an e-mail address and output the gravatar image, if any. Expected output: <img src=“http://www.gravatar.com/avatar/md5 ($email).jpg“ /> Inspiring people to Fluid - Templating made easy share
- 54. Custom ViewHelpers v4 Task: Gravatar ViewHelper Expected usage: {namespace blog=Tx_Blog_ViewHelpers} <blog:gravatar email=“[email protected]“ /> Inspiring people to Fluid - Templating made easy share
- 55. Custom ViewHelpers v4 1. Create a ViewHelper skeleton class Tx_Blog_ViewHelpers_GravatarViewHelper extends Tx_Fluid_Core_AbstractViewHelper { public function render() { return ‘Hello World‘; } } Inspiring people to Fluid - Templating made easy share
- 56. Custom ViewHelpers v4 Implement the ViewHelper! The PHPDoc must /** exist (for validation) * @param string $email The email to render as gravatar */ public function render($email) { return ‘http://www.gravatar.com/gravatar/‘ . md5($email); } All method parameters will be ViewHelper arguments automatically Inspiring people to Fluid - Templating made easy share
- 58. Fluid internals TemplateView View Helpers (Tags) v5 v4 TemplateView View Helpers (Tags) v5 v4 Fluid Core Inspiring people to Fluid - Templating made easy share
- 60. Autocompletion
- 62. Balance
- 64. ???? ?? ?? ? ?? ? ?
- 65. inspiring people to share.