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.
T3CON11 - Extreme Fluid - Patrick Lobacher typovision
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
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
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
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
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
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
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
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