t3con11 - extreme fluid - patrick lobacher typovision

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

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:

AGENDA

01 Fluid history and philosophy

02 Fluid base concepts

03 Fluid standalone view

04 FLUIDTEMPLATE cObject

05 Fluid widgets

06 Showcases

07 Links

FLUID HISTORYand philosophy

FLOW3 1.0 (20.10.2011)web application framework

Extbasebackport of important concepts

Fluidtemplating engine

TYPO3 5.xTYPO3 4.x

01 FLUID HISTORY

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

01 FLUID HISTORY

Domain

Controller

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>

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

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

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

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)

FLUID BASE CONCEPTSWhat we can do with Fluid

02 FLUID BASE CONCEPTS

ObjectAccessors

show the content of variables which are handed over to the

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

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

• 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

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>

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

• 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

• 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

• 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

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

FLUID INLINE SYNTAXDifferent syntax for different scope

• 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

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

FLUIDTEMPLATEFluid Templating for TYPO3 page template

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

FLUIDTEMPLATE• Classic - TEMPLATE:page = PAGEpage.10 = TEMPLATEpage.10 { template = FILE template.file = fileadmin/tpl_main.html workOnSubpart = DOCUMENT marks { CONTENT < styles.content.get

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

04 FLUIDTEMPLATE

• Insert a TypoScript path - a simple breadcrumb menu for example

<f:cObject typoscriptObjectPath="lib.breadcrumb" />

• 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 :-)

05 FLUID WIDGETS

• Some functionalites are not easy to realize with ViewHelpers

• For this, widgets will be introduced

05 FLUID WIDGETS

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

Example: Pagination

05 FLUID WIDGETS

View(ViewHelper)Controller

get all records from

the repository

assign them to the view

Repository

Sub-Controller

Sub-View

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

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

FLUID EXAMPLESShowcases

06 FLUID EXAMPLES

• Slider with basic templating and jQuery

06 FLUID EXAMPLES

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

06 FLUID EXAMPLES

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

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

06 FLUID EXAMPLES

• Model: Order

• Property:„contact“ is mapping on tt_address

• property=“contact.phone“

• Dropdowns are ViehHelpers

06 FLUID EXAMPLES

• Input and display of POIs via Google Maps ViewHelper

06 FLUID EXAMPLES

• Download of some examples:

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

LINKSFluid all night long

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

• 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

Extbase / FluidCheatsheet 2.00

22.02.2011for Extbase/Fluid 1.3

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

THANK YOU VERY MUCH!Questions??

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: info@typovision.deWeb: http://www.typovision.de

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

t3con11 - extreme fluid - patrick lobacher typovision

extreme fluid patrick

fluid widgets

valuevalueaccess fluid

fluid history typo3

fluid history templating

fluid history http

fluid history drawbacks

fluid standalone view

Technology

typo3 4 - lobacher · 2014-02-28 · (c) 2010 - typovision*...

typo3 4.6 - die neuerungen (typovision*)

wke14 - typo3 neos - next generation cms - patrick...

typo3 cms 8.6 - what’s new · typo3 cms 8.6 - what’s...

die typo3 association 2012 - mtug - patrick lobacher

forge.typo3.org · typ03 3 onll t3con11 start date 07th...

typo3 cms 8.4 - le novità · typo3 cms 8.4 - le novità...

innovationsmotoren fÜr iot - lobacher · new work / okr...

typo3 4.6...

yag - yet another gallery / t3con11

extbase & fluid einführung - mtug - patrick lobacher

created by: patrick lobacher and michael schams€¦ ·...

typo3 cms 7.2 - what’s new - patrick lobacher...backend...

the current state of typo3 phoenix -- t3con11

typo3 cms 6.0 - die neuerungen (typovision gmbh)

typo3 cms 7.3 - quØ hay nuevo · typo3 cms 7.3 - quØ hay...

typo3 cms 6 - lobacher · fal typoscript: referenz •...

atomic design - lobacher · 2015-10-27 · atomic design...

hot or not - patrick lobacher...advanced search and...

innovationsmotor design thinking - lobacher ·...