T3CON11 - Extreme Fluid - Patrick Lobacher typovision

12,711 views

Published on

Besides of the new programming paradigm introduced with Extbase & FLOW3 there is a new star born called Fluid. With this cutting edge templating engine, it is now possible to completely separate design and programming from each other.

The talk shows all aspects of fluid - from the proper context in the Domain Driven Design (DDD) and MVC, the syntax & usage, specific topics such as Widgets & ViewHelper and finally of course many examples with downloadable sources for everyone to play around.

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

No Downloads
Views
Total views
12,711
On SlideShare
0
From Embeds
0
Number of Embeds
334
Actions
Shares
0
Downloads
61
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

T3CON11 - Extreme Fluid - Patrick Lobacher typovision

  1. 1. EXTREME FLUID Next Generation Templating 08.10.2011 T3CON11 - Hanau Patrick Lobacher (CEO typovision*)(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
  2. 2. ABOUT PATRICK LOBACHER• Patrick Lobacher - CEO typovision*• 41 years young, married, lives in Munich/GERMANY• Author of 6 books and 26 articles with topic TYPO3 and web development• Certified TYPO3 Integrator since 2009• Member in the TYPO3 Core-Teams: Certification & Extbase• Joint organizer of TYPO3camp Munich• Speaker at national and international congresses• Lecturer for leading training institutes and VHS(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 2
  3. 3. ABOUT TYPOVISION*• Fullservice agency for digital communication in Munich• 10 Employees (+ 8 freelancer pool)• CEO: Patrick Lobacher• Specialized in TYPO3 since 8 Years (Extbase/Fluid since 2009)• Presentation (german): www.typovision.de/dieagentur• About 150 TYPO3 projects of each size - for customers like:(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 3
  4. 4. (c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
  5. 5. AGENDA 01 Fluid history and philosophy 02 Fluid base concepts 03 Fluid standalone view 04 FLUIDTEMPLATE cObject 05 Fluid widgets 06 Showcases 07 Links(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 5
  6. 6. FLUID HISTORY and philosophy(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 6
  7. 7. 01 FLUID HISTORY TYPO3 4.x TYPO3 5.x Extbase FLOW3 1.0 (20.10.2011) backport of important concepts web application framework Fluid templating engine(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 7
  8. 8. 01 FLUID HISTORY http://typo3.org/development/roadmap/berlin-manifesto/(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 8
  9. 9. 01 FLUID HISTORY Domain Model Repository Validator View ViewHelper Domain Driven Design Controller MVC(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 9
  10. 10. 01 FLUID HISTORY• Templating Status Quo - early 2009 - TEMPLATE <!-- ###TEMPLATE_LATEST### begin --> <div class="news-latest-container"> <!-- ###CONTENT### begin --> <!-- ###NEWS### begin Template for a single item --> <div class="news-latest-item"> <span class="news-latest-date">###NEWS_DATE### ###NEWS_TIME###</ span> <h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!-- ###LINK_ITEM###--></h2> <!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###--> <!--###LINK_ITEM###-->###NEWS_SUBHEADER###<!-- ###LINK_ITEM###--><hr class="clearer" /> ###CATWRAP_B### ###TEXT_CAT_LATEST### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E### </div> <!-- ###NEWS### end--> <!-- ###CONTENT### end --> </div> <!-- ###TEMPLATE_LATEST### end -->(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 10
  11. 11. 01 FLUID HISTORY• Templating Status Quo - early 2009 - CONTROLLER // get template $this->templateCode = $this->cObj->fileResource($conf[templateFile]); // read subpart $template[total] = $this->cObj->getSubpart($this->templateCode,###TEMPLATE###); // fill marker $markerArray[###MARKER1###] = content for marker 1; $markerArray[###MARKER2###] = content for marker 2; // replace marker in template $content = $this->cObj->substituteMarkerArrayCached($template[total], $markerArray);(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 11
  12. 12. 01 FLUID HISTORY• Drawbacks of the „marker“-method • Layout and business logic are mixed up together • Designer and programmer couldn‘t work independently • Extensibility is bad (e.g. new marker) • complex API functions with less function • no control structures posible inside the template • works just with strings (and arrays) -> no objects possible(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 12
  13. 13. 01 FLUID HISTORY• Goals of Fluid • Simple and elegant templating engine • Should support the template author (Autocompletion in IDE, ...) • Easy extensibility • Intuitive use • Support of different output formats • Completely object oriented(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 13
  14. 14. 01 FLUID HISTORY• FLUID • Investigation of existing templating engines (Smarty, PHPtal, ...) • But none fits the needs • http://www.slideshare.net/skurfuerst/fluid-the-zen-of- templating • So - Sebastian Kurfürst invented Fluid 2008 (initially with the working title Beer3)(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 14
  15. 15. FLUID BASE CONCEPTS What we can do with Fluid(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 15
  16. 16. 02 FLUID BASE CONCEPTS ViewHelper Object Arrays Accessors special tags within the template, which encapsulate enables a way of handing over show the content of variables functionalities like hierachical values to which are handed over to the form generation, link ViewHelper (Arguments) view generation, translation, formating, ...(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 16
  17. 17. FLUID OBJECT ACCESSORS Access to values(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 17
  18. 18. 02 FLUID BASE CONCEPTS• Object Accessor: Access with {} Assignment to the view from the controller: $this->view->assign(identifier, $value); Value Access Fluid is cool {identifier} array(Fluid is cool) {identifier.0} array(name => Fluid) {identifier.name} event Object ( [name] => Fluid ) {identifier.name}(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 18
  19. 19. 02 FLUID BASE CONCEPTS• Object Accessor: Objects • automatically access to all object properties • Within FLOW3 & Extbase the property will be determined through so called Getter -> e.g. getTitle() (reside in Domain Model) • Access to all objects which are saved as properties <p>{post.author.lastName}</p>(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 19
  20. 20. FLUID VIEWHELPER View logic(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 20
  21. 21. 02 FLUID VIEWHELPER• ViewHelper: PHP-Class for realizing complex functionality <h1>{blogTitle}</h1> <f:if condition="{blogPosts}"> <f:then> <ul> <f:for each="{blogPosts}" as="post"> <li>{post.title}</li> </f:for> </ul> </f:then> <f:else> <p>No posts available!<p> </f:else> </f:if>(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 21
  22. 22. 02 FLUID VIEWHELPER <f:ViewHelperName Arguments> CONTENT </f:ViewHelperName> • f: specifies the fluid namespace • {namespace f=Tx_Fluid_ViewHelpers} (Default Namespace for Extbase) • All ViewHelper are based on classes • Can be nested(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 22
  23. 23. 02 FLUID BASE CONCEPTS• Fluid comes with 65 built-in ViewHelper • Formating (format.xxx) • Translation (translate) • Form generation (form.xxx) • Link generation (link.xxx und uri.xxx) • Backend (be.buttons.xxx, be.tableList, be.actionMenu, ...) • TypoScript (cObject) • Control structures (if, then, else, for, groupedFor, cycle, ...) • Layouts (render, section, ...) • Misc (base, count, debug, image, ...)(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 23
  24. 24. 02 FLUID VIEWHELPER• There are many ViewHelper from other people • format.strftime (format TS or date objects with strftime) • include.css (includes CSS in the header) • include.js (includes JS in the header) • include.data (headerdata in common) • fileicon (shows icon depending on extension) • format.age (Shows age in h,min,sec of date objects) • format.stripTags (strip_tag function of PHP) • link.telephoneNumber (phone link for smartphones) • and many more(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 24
  25. 25. 02 FLUID VIEWHELPER• Write your own ViewHelpers easily • Invent a name • File: NameViewHelper.php • put it in Classes/ViewHelpers/ of Ext./Package • Class: class Tx_[ExtName]_ViewHelpers_NameViewHelper extends Tx_Fluid_Core_ViewHelper_AbstractViewHelper or Tx_Fluid_Core_ViewHelper_TagBasedViewHelper • Method: render() • {namespace foo=Tx_[Extname]_ViewHelpers}(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 25
  26. 26. FLUID ARRAYS flexible data structure(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 26
  27. 27. 02 FLUID ARRAYS• Arrays are used as a flexible data structure • Arrays are used, to handle a variable count of arguments within a ViewHelper • <f:link.action controller="Post" action="show" arguments="{post: currentPost, blog:blog}">Show current post</f:link.action> • { key1: Hello, key2: "World", key3: 20, key4: blog, key5: blog.title, key6: {firstname} {lastname} }(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 27
  28. 28. FLUID INLINE SYNTAX Different syntax for different scope(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 28
  29. 29. 02 FLUID BASE CONCEPTS• Inline Syntax • <link rel="stylesheet" ref="{f:uri.resource(path:style.css)}" /> • <f:format.padding padLength="40"> <f:format.date format="Y-m-d"> {post.date} </f:format.date> </f:format.padding> {f:format.padding(padLength: 40)} {f:format.date(format: Y-m-d)} {post.date} {post.date -> f:format.date(format: Y-m-d) -> f:format.padding(padLength: 40)}(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 29
  30. 30. FLUID STANDALONE VIEW Fluid without Extbase in TYPO3 4.x(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 30
  31. 31. 03 FLUID STANDALONE VIEW• Fluid Standalone View enables the use of Fluid without Extbase (e.g. for pi_base extensions)• TYPO3 >= 4.5 / Extbase/Fluid >= 1.3 $view = t3lib_div::makeInstance(Tx_Fluid_View_StandaloneView); $view->setTemplatePathAndFilename($templatePathAndFilename); $view->setLayoutRootPath($layoutRootPath); $view->setFormat($format); $view->assign(key, $data); $content = $view->render();(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 31
  32. 32. FLUIDTEMPLATE Fluid Templating for TYPO3 page template(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 32
  33. 33. 04 FLUIDTEMPLATE• Since TYPO3 4.5 there is a new cObject FLUIDTEMPLATE• With this you can use FLUID within page templates• Technically based on the „Fluid Standalone View“• Class: typo3/sysext/cms/tslib/ class.tslib_content_fluidtemplate.php(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 33
  34. 34. FLUIDTEMPLATE • Classic - TEMPLATE: page = PAGE page.10 = TEMPLATE page.10 { template = FILE template.file = fileadmin/tpl_main.html workOnSubpart = DOCUMENT marks { CONTENT < styles.content.get• NEW - FLUIDTEMPLATE: page = PAGE page.10 = FLUIDTEMPLATE page.10 { file = fileadmin/tpl_main.html variables { CONTENT < styles.content.get(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 34
  35. 35. 04 FLUIDTEMPLATE• Access to all page properties auf alle Seiteneigenschaften: You are on the page with the UID {data.uid} and the title {data.title} <f:if condition="{data.layout}==1"> <f:then> Field layout has the value "Layout 1" </f:then> <f:else> Field layout has NOT the value "Layout 1" </f:else> </f:if> All properties: <f:debug>{data}</f:debug>(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 35
  36. 36. 04 FLUIDTEMPLATE• Insert a TypoScript path - a simple breadcrumb menu for example <f:cObject typoscriptObjectPath="lib.breadcrumb" />• Corresponding TypoScript lib.breadcrumb = HMENU lib.breadcrumb { special = rootline special.range = 0|-1 1 = TMENU 1 { NO.linkWrap = | >> CUR = 1 CUR.doNotLinkIt = 1 } }(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 36
  37. 37. FLUID WIDGETS ViewHelpers within ViewHelpers :-)(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 37
  38. 38. 05 FLUID WIDGETS• Some functionalites are not easy to realize with ViewHelpers• For this, widgets will be introduced(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 38
  39. 39. 05 FLUID WIDGETS assign them to the view 2 View Controller (ViewHelper) action link to display next 3 get (next) 10 10 results records from the repository 1 and 4 Repository Example: Pagination(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 39
  40. 40. 05 FLUID WIDGETS assign them to the view 2 View Controller (ViewHelper) Sub-Controller get all records from 1 3 the repository Sub-View Repository(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 40
  41. 41. 05 FLUID WIDGETS• Solution: Paginate Widget • <f:widget.paginate objects="{blogs}" as="paginatedBlogs" configuration="{itemsPerPage: 3, insertAbove: 1}"> <f:for each="{paginatedBlogs}" as="blog"> {blog.title} </f:for> </f:widget.paginate> • Own sub controller for generation the pagination (query object will be change through this) • Sub template for displaying the pagination(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 41
  42. 42. 05 FLUID WIDGETS• Write own widgets • Invent name [Vhname] => <ns:widget.vhname>... • Class in directory Classes/Viewhelpers/Widgets/ class Tx_Fluid_ViewHelpers_Widget_[Vhname]ViewHelper extends Tx_Fluid_Core_Widget_AbstractWidgetViewHelper { } • Method() render()consists return $this->initiateSubRequest(); • Class in directory Classes/Viewhelpers/Widgets/Controller/ class Tx_Fluid_ViewHelpers_Widget_Controller_[Vhname]Controller extends Tx_Fluid_Core_Widget_AbstractWidgetController { } • Widget controller behave like a „real“ controller (initializeAction, indexAction, ...) • Template in Resources/Private/Templates/ViewHelpers/Widget/[Vhname] • Navigation with internal widget links <f:widget.link action=“index“>(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 42
  43. 43. FLUID EXAMPLES Showcases(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 43
  44. 44. 06 FLUID EXAMPLES • Slider with basic templating and jQuery(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 44
  45. 45. 06 FLUID EXAMPLES• Matrix (Layer vs. Function) is generated as JSON and grouped(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 45
  46. 46. 06 FLUID EXAMPLES• Grouping of „type“ (Partners, Associates, ...)(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 46
  47. 47. 06 FLUID EXAMPLES • Frame and rotation of the big picture is done with the cObject Viewhelper • Mail-Template is done with the Fluid Standalone View(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 47
  48. 48. 06 FLUID EXAMPLES• Model: Order• Property: „contact“ is mapping on tt_address• property= “contact.phone“• Dropdowns are ViehHelpers(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 48
  49. 49. 06 FLUID EXAMPLES • Input and display of POIs via Google Maps ViewHelper(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 49
  50. 50. 06 FLUID EXAMPLES• Download of some examples: http://www.typovision.de/T3CON11-Extreme-Fluid-Sources.zip(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 50
  51. 51. LINKS Fluid all night long(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 51
  52. 52. 07 LINKS(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 52
  53. 53. 07 LINKS http://forge.typo3.org/projects/show/book_extbase_fluid(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 53
  54. 54. 07 LINKS FED - Fluid / Extbase / ExtJS Development Framework by Claus Due http://www.fedext.net(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 54
  55. 55. 07 LINKS• Forge: http://forge.typo3.org/projects/show/package-fluid• GIT: http://git.typo3.org/FLOW3/Packages/Fluid.git http://git.typo3.org/TYPO3v4/CoreProjects/MVC/fluid.git• API: http://api.typo3.org/fluid/current/• Mailinglist: http://lists.typo3.org/cgi-bin/mailman/listinfo/ typo3-project-typo3v4mvc• German Extbase & Fluid Tutorial from Mittwald: http://www.mittwald.de/fileadmin/pdf/extbase_fluid.pdf(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 55
  56. 56. 07 LINKS Extbase / Fluid Cheatsheet 2.0022.02.2011for Extbase/Fluid 1.3 http://www.typovision.de/fileadmin/slides/ExtbaseFluidCheatSheetTypovision.pdf(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 56
  57. 57. SLIDES: http://www.typovision.de/T3CON11_Extreme_Fluid_typovision.pdf THANK YOU VERY MUCH! Questions??(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 57
  58. 58. CONTACT - CLASSIC Address: typovision* - digital communications agency Belfortstr. 8 81667 Munich Phone: +49-89-18 92 08 70 Fax: +49-89-18 92 08 69 Email: info@typovision.de Web: http://www.typovision.de(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 58
  59. 59. CONTACT - SOCIAL CHANNELS Twitter: www.twitter.com/_typovision_ www.twitter.com/PatrickLobacher Facebook: www.facebook.com/typovision XING: www.xing.com/profile/Patrick_Lobacher Slideshare: www.slideshare.net/plobacher Amazon: www.amazon.de/Patrick-Lobacher/e/B0045AQVEA(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 59

×