Fluid - Templating for professionals - T3CON09

4,196 views

Published on

Fluid is a next-generation templating engine in PHP developed for FLOW3 and TYPO3 in general.
After showing the basics, this presentation outlines the advanced features Fluid has.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,196
On SlideShare
0
From Embeds
0
Number of Embeds
679
Actions
Shares
0
Downloads
110
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Fluid - Templating for professionals - T3CON09

  1. 1. T3CON09 Frankfurt - 12 September 2009 Inspiring people to Fluid - Templating made easy share
  2. 2. Fluid - Templating made easy 12.09.2009 Sebastian Kurfürst <sebastian@typo3.org>
  3. 3. TYPO3 addict Inspiring people to Fluid - Templating made easy share
  4. 4. TYPO3 v4 and v5 v4 v5 Inspiring people to Fluid - Templating made easy share
  5. 5. Einordnung - v4, v5 - Transition Inspiring people to Fluid - Templating made easy share
  6. 6. Why are good frameworks important? Inspiring people to Fluid - Templating made easy share
  7. 7. We need only End-User features No! Inspiring people to Fluid - Templating made easy share
  8. 8. We need End-User features Inspiring people to Fluid - Templating made easy share
  9. 9. We need Developer features, too! Inspiring people to Fluid - Templating made easy share
  10. 10. Developing should be fun! Inspiring people to Fluid - Templating made easy share
  11. 11. Productivity will increase Inspiring people to Fluid - Templating made easy share
  12. 12. Inspiring people to Fluid - Templating made easy share
  13. 13. What is a Template Engine? Data Data Template Data Template Engine rendered data Data Data Inspiring people to Fluid - Templating made easy share
  14. 14. Inspiring people to Fluid - Templating made easy share
  15. 15. Why another template engine? Inspiring people to Fluid - Templating made easy share
  16. 16. Inspiring people to Fluid - Templating made easy share
  17. 17. Goals of Fluid Inspiring people to Fluid - Templating made easy share
  18. 18. The Zen of Templating simple powerful http://www.sxc.hu/photo/821903
  19. 19. The Zen of Templating intuitive easily extensible http://www.sxc.hu/photo/821903
  20. 20. simple, elegant template engine http://www.flickr.com/photos/josefstuefer/9699426/
  21. 21. Help the template writer in many ways
  22. 22. Easy and clean extensibility http://www.sxc.hu/photo/338064
  23. 23. Support for different output formats
  24. 24. 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
  25. 25. Core Concepts http://www.sxc.hu/photo/816749
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Fluid Core does not contain any output logic, and no control structures!
  31. 31. <f:...> Every tag is a class!
  32. 32. v4 {namespace f=Tx_Fluid_ViewHelpers} <f:for>...</f:for> Tx_Fluid_ViewHelpers_ForViewHelper
  33. 33. v5 {namespace f=F3FluidViewHelpers} <f:for>...</f:for> F3FluidViewHelpersForViewHelper
  34. 34. v5 {namespace f=F3FluidViewHelpers} <f:link.action>...</f:link.action> F3FluidViewHelpersLinkActionViewHelper
  35. 35. 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
  36. 36. 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
  37. 37. simple loop Fluid for professionals
  38. 38. Forms v4 v5
  39. 39. 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
  40. 40. 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
  41. 41. Fluid for professionals Code Text Inspiring people to Fluid - Templating made easy share
  42. 42. 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
  43. 43. 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
  44. 44. Layouts Inspiring people to Fluid - Templating made easy share
  45. 45. Layouts v4 v5
  46. 46. 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
  47. 47. Fluid for professionals Layouts <html> ... <body> <f:render section="main" /> </body> Inspiring people to Fluid - Templating made easy share
  48. 48. Custom ViewHelpers Inspiring people to Fluid - Templating made easy share
  49. 49. 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
  50. 50. Custom ViewHelpers v4 Task: Gravatar ViewHelper Expected usage: {namespace blog=Tx_Blog_ViewHelpers} <blog:gravatar email=“sebastian@typo3.org“ /> Inspiring people to Fluid - Templating made easy share
  51. 51. 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
  52. 52. 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
  53. 53. Fluid internals TemplateView View Helpers (Tags) v5 v4 TemplateView View Helpers (Tags) v5 v4 Fluid Core Inspiring people to Fluid - Templating made easy share
  54. 54. http://www.sxc.hu/photo/1132907
  55. 55. Autocompletion
  56. 56. Balance
  57. 57. ???? ?? ?? ? ?? ? ?
  58. 58. inspiring people to share.

×