t3con11 - extreme fluid - patrick lobacher typovision

(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*)


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


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:


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


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


01 FLUID HISTORY

http://typo3.org/development/roadmap/berlin-manifesto/


01 FLUID HISTORY

Domain

View

Controller

Model

Repository

Validator

ViewHelper

Domain Driven DesignMVC

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>

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);

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

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

13


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


FLUID BASE CONCEPTSWhat we can do with Fluid

15


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)


FLUID OBJECT ACCESSORSAccess to values

17



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}



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>


FLUID VIEWHELPERView logic

20


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>


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



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, ...)


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


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}


FLUID ARRAYSflexible data structure

26


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}'}


FLUID INLINE SYNTAXDifferent syntax for different scope

28



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)}


FLUID STANDALONE VIEWFluid without Extbase in TYPO3 4.x

30


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


FLUIDTEMPLATEFluid Templating for TYPO3 page template

32


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


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


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


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 }}


FLUID WIDGETSViewHelpers within ViewHelpers :-)

37


05 FLUID WIDGETS

38

• Some functionalites are not easy to realize with ViewHelpers

• For this, widgets will be introduced


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


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


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


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“>


FLUID EXAMPLESShowcases

43


06 FLUID EXAMPLES

44

• Slider with basic templating and jQuery


06 FLUID EXAMPLES

45

• Matrix (Layer vs. Function) is generated as JSON and grouped


06 FLUID EXAMPLES

46

• Grouping of „type“ (Partners, Associates, ...)


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


06 FLUID EXAMPLES

48

• Model: Order

• Property:„contact“ is mapping on tt_address

• property=“contact.phone“

• Dropdowns are ViehHelpers


06 FLUID EXAMPLES

49

• Input and display of POIs via Google Maps ViewHelper


06 FLUID EXAMPLES

50

• Download of some examples:

http://www.typovision.de/T3CON11-Extreme-Fluid-Sources.zip


LINKSFluid all night long

51


07 LINKS


07 LINKS

http://forge.typo3.org/projects/show/book_extbase_fluid


07 LINKS

http://www.fedext.net

FED - Fluid / Extbase / ExtJS Development Framework by Claus Due


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


07 LINKS

56

Extbase / FluidCheatsheet 2.00

22.02.2011for Extbase/Fluid 1.3

http://www.typovision.de/fileadmin/slides/ExtbaseFluidCheatSheetTypovision.pdf


THANK YOU VERY MUCH!Questions??

57

SLIDES:http://www.typovision.de/T3CON11_Extreme_Fluid_typovision.pdf


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


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

t3con11 - extreme fluid - patrick lobacher typovision

Technology

extreme fluid patrick

fluid widgets

valuevalueaccess fluid

fluid history typo3

fluid history templating

fluid history http

fluid history drawbacks

fluid standalone view