t3con11 - extreme fluid - patrick lobacher typovision
DESCRIPTION
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.TRANSCRIPT
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
EXTREME FLUIDNext Generation Templating
08.10.2011T3CON11 - Hanau
Patrick Lobacher (CEO typovision*)
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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
2
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
ABOUT TYPOVISION*
3
• 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
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
AGENDA
01 Fluid history and philosophy
02 Fluid base concepts
03 Fluid standalone view
04 FLUIDTEMPLATE cObject
05 Fluid widgets
06 Showcases
07 Links
5
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
FLUID HISTORYand philosophy
6
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 7
FLOW3 1.0 (20.10.2011)web application framework
Extbasebackport of important concepts
Fluidtemplating engine
TYPO3 5.xTYPO3 4.x
01 FLUID HISTORY
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 8
01 FLUID HISTORY
http://typo3.org/development/roadmap/berlin-manifesto/
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 9
01 FLUID HISTORY
Domain
View
Controller
Model
Repository
Validator
ViewHelper
Domain Driven DesignMVC
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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 -->
10
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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);
11
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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
12
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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
13
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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)
14
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
FLUID BASE CONCEPTSWhat we can do with Fluid
15
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
02 FLUID BASE CONCEPTS
16
ObjectAccessors
show the content of variables which are handed over to the
view
ViewHelper
special tags within the template, which encapsulate functionalities like
form generation, link generation, translation,
formating, ...
Arrays
enables a way of handing over hierachical values to
ViewHelper (Arguments)
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
FLUID OBJECT ACCESSORSAccess to values
17
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
02 FLUID BASE CONCEPTS
18
• 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
02 FLUID BASE CONCEPTS
19
• 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
FLUID VIEWHELPERView logic
20
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
02 FLUID VIEWHELPER
21
• 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
02 FLUID VIEWHELPER
22
<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
02 FLUID BASE CONCEPTS
23
• 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
02 FLUID VIEWHELPER
24
• 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
02 FLUID VIEWHELPER
25
• 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 extendsTx_Fluid_Core_ViewHelper_AbstractViewHelper orTx_Fluid_Core_ViewHelper_TagBasedViewHelper
• Method: render()• {namespace foo=Tx_[Extname]_ViewHelpers}
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
FLUID ARRAYSflexible data structure
26
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
02 FLUID ARRAYS
27
• 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
FLUID INLINE SYNTAXDifferent syntax for different scope
28
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
02 FLUID BASE CONCEPTS
29
• 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
FLUID STANDALONE VIEWFluid without Extbase in TYPO3 4.x
30
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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();
31
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
FLUIDTEMPLATEFluid Templating for TYPO3 page template
32
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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
33
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
FLUIDTEMPLATE• Classic - TEMPLATE:page = PAGEpage.10 = TEMPLATEpage.10 { template = FILE template.file = fileadmin/tpl_main.html workOnSubpart = DOCUMENT marks { CONTENT < styles.content.get
34
• NEW - FLUIDTEMPLATE:page = PAGEpage.10 = FLUIDTEMPLATEpage.10 { file = fileadmin/tpl_main.html variables { CONTENT < styles.content.get
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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>
35
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
04 FLUIDTEMPLATE
• Insert a TypoScript path - a simple breadcrumb menu for example
<f:cObject typoscriptObjectPath="lib.breadcrumb" />
36
• Corresponding TypoScript
lib.breadcrumb = HMENUlib.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
FLUID WIDGETSViewHelpers within ViewHelpers :-)
37
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
05 FLUID WIDGETS
38
• 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
05 FLUID WIDGETS
39
View(ViewHelper)
Controller
get (next) 10 records from
the repository
assign them to the view
action link todisplay next
10 results
Repository
1 and 4
2
3
Example: Pagination
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
05 FLUID WIDGETS
40
View(ViewHelper)Controller
get all records from
the repository
assign them to the view
Repository
1
2
Sub-Controller
Sub-View
3
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
05 FLUID WIDGETS
41
• 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
05 FLUID WIDGETS
42
• 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
FLUID EXAMPLESShowcases
43
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
06 FLUID EXAMPLES
44
• Slider with basic templating and jQuery
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
06 FLUID EXAMPLES
45
• Matrix (Layer vs. Function) is generated as JSON and grouped
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
06 FLUID EXAMPLES
46
• Grouping of „type“ (Partners, Associates, ...)
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
06 FLUID EXAMPLES
47
• 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
06 FLUID EXAMPLES
48
• 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
06 FLUID EXAMPLES
49
• Input and display of POIs via Google Maps ViewHelper
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
06 FLUID EXAMPLES
50
• 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
LINKSFluid all night long
51
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 52
07 LINKS
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011 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 54
07 LINKS
http://www.fedext.net
FED - Fluid / Extbase / ExtJS Development Framework by Claus Due
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
07 LINKS
55
• 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
07 LINKS
56
Extbase / FluidCheatsheet 2.00
22.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
THANK YOU VERY MUCH!Questions??
57
SLIDES:http://www.typovision.de/T3CON11_Extreme_Fluid_typovision.pdf
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
CONTACT - CLASSIC
Address:
typovision* - digital communications agency
Belfortstr. 881667 Munich
Phone: +49-89-18 92 08 70Fax: +49-89-18 92 08 69Email: [email protected]: http://www.typovision.de
58
(c) 2011 - typovision* | Extreme Fluid | Patrick Lobacher | www.typovision.de | 08.10.2011
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
59