T3CON11 - Extreme Fluid - Patrick Lobacher typovision

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• Certiﬁed TYPO3 Integrator since 2009• Member in the TYPO3 Core-Teams: Certiﬁcation & 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

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

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

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

01 FLUID HISTORY• Templating Status Quo - early 2009 - TEMPLATE  <div class="news-latest-container">   <div class="news-latest-item"> <span class="news-latest-date">###NEWS_DATE### ###NEWS_TIME###</ span> <h2>###NEWS_TITLE###</h2> ###NEWS_IMAGE### ###NEWS_SUBHEADER###<hr class="clearer" /> ###CATWRAP_B### ###TEXT_CAT_LATEST### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E### </div>   </div> (c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 10

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

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

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

01 FLUID HISTORY• FLUID • Investigation of existing templating engines (Smarty, PHPtal, ...) • But none ﬁts the needs • http://www.slideshare.net/skurfuerst/ﬂuid-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

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

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

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

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

02 FLUID VIEWHELPER <f:ViewHelperName Arguments> CONTENT </f:ViewHelperName> • f: speciﬁes the ﬂuid 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

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

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) • ﬁleicon (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

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

02 FLUID ARRAYS• Arrays are used as a ﬂexible 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

07 LINKS Extbase / Fluid Cheatsheet 2.0022.02.2011for Extbase/Fluid 1.3 http://www.typovision.de/ﬁleadmin/slides/ExtbaseFluidCheatSheetTypovision.pdf(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 56

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

CONTACT - SOCIAL CHANNELS Twitter: www.twitter.com/_typovision_ www.twitter.com/PatrickLobacher Facebook: www.facebook.com/typovision XING: www.xing.com/proﬁle/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

http://flow3.typo3.org	219
http://paper.li	6
http://a0.twimg.com	3
http://us-w1.rockmelt.com	1
http://www.flow3.typo3.org	1
http://integration.flow3org.typo3.robertlemke.net	1

T3CON11 - Extreme Fluid - Patrick Lobacher typovision

by typovision GmbH on Oct 08, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 231

Statistics

T3CON11 - Extreme Fluid - Patrick Lobacher typovision — Presentation Transcript