Your SlideShare is downloading. ×
T3CON11 - Extreme Fluid - Patrick Lobacher typovision
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

T3CON11 - Extreme Fluid - Patrick Lobacher typovision

11,416
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 …

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
11,416
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
57
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. (c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
  • 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. FLUID HISTORY and philosophy(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 6
  • 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. 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. 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. 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. 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. 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. 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. 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. FLUID BASE CONCEPTS What we can do with Fluid(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 15
  • 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. FLUID OBJECT ACCESSORS Access to values(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 17
  • 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. 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. FLUID VIEWHELPER View logic(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 20
  • 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. 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. 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. 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. 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. FLUID ARRAYS flexible data structure(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 26
  • 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. FLUID INLINE SYNTAX Different syntax for different scope(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 28
  • 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. 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. 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. FLUIDTEMPLATE Fluid Templating for TYPO3 page template(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 32
  • 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. 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. 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. 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. FLUID WIDGETS ViewHelpers within ViewHelpers :-)(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 37
  • 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. 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. 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. 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. 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. FLUID EXAMPLES Showcases(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 43
  • 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. 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. 06 FLUID EXAMPLES• Grouping of „type“ (Partners, Associates, ...)(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 46
  • 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. 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. 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. 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. LINKS Fluid all night long(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 51
  • 52. 07 LINKS(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 52
  • 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. 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. 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. 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. 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. 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. 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