extreme fluid

(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011

EXTREME FLUIDNext Generation Templating

TYPO3 Akademie 2011 - Marit AG26.02.2011

Patrick Lobacher (GF typovision*)

http://www.typovision.de



ÜBER PATRICK LOBACHER• Patrick Lobacher (geb. Schuster) - GF typovision*

• 40 Jahre alt, verheiratet, wohnhaft in München

• Autor von 6 Fachbüchern und 26 Fachartikeln zum Thema TYPO3 und Webentwicklung

• Certified TYPO3 Integrator seit 2009

• Mitglied in den TYPO3 Core-Teams: Certification & Documentation

• Mitveranstalter des TYPO3camp München

• Speaker auf nationalen und internationalen Kongressen

• Dozent für führende Schulungsinstitute und die MVHS

2




ÜBER TYPOVISION*

3

• Münchner Fullservice-Agentur für digitale Kommunikation• 8 Mitarbeiter (+ 8 aus festem Freelancer Pool)• Geschäftsführer: Patrick Lobacher• Spezialisiert auf TYPO3 seit 8 Jahren (Extbase/Fluid seit 2009)

• Agenturpräsentation unter: www.typovision.de/dieagentur

• Über 120 TYPO3-Projekte jeglicher Größenordnung - für Kunden wie:



http://www.typovision.de/dieagentur

http://www.typovision.de/dieagentur


AGENDA

01 Fluid Geschichte und Philosophie

02 Fluid Basiskonzepte

03 Fluid Standalone View

04 FLUIDTEMPLATE

06 Fluid Widgets

07 Showcases

08 Quellen

5




FLUID GESCHICHTEund Philosophie

6




01 FLUID GESCHICHTE

• Templating Status Quo Anfang 2009

// Template ermitteln$this->templateCode = $this->cObj->fileResource($conf['templateFile']);

// Subpart auslesen$template['total'] = $this->cObj->getSubpart($this->templateCode,'###TEMPLATE###');

// Marker füllen$markerArray['###MARKER1###'] = 'content for marker 1';$markerArray['###MARKER2###'] = 'content for marker 2';

// Marker im Template ersetzen$content = $this->cObj->substituteMarkerArrayCached($template['total'],$markerArray);

7




01 FLUID GESCHICHTE

• Nachteile der „Marker“-Methode

• Layout und Code wird vermischt

• Designer und Programmierer können nicht unabhängig voneinander arbeiten

• schlecht erweiterbar (neue Marker)

• (unnötig) komplizierte API-Funktionen

• keine Kontrollstrukturen im Template möglich

• Nur Strings und Arrays -> keine Objekte möglich

8




01 FLUID GESCHICHTE

• Ziele von Fluid

• Einfache und elegante Template-Engine

• Unterstützung des Template-Autors(Autovervollständigung in Eclipse, ...)

• Einfache Erweiterbarkeit

• Intuitive Verwendung

• Verschiedene Ausgabeformate sollen möglich sein

• vollständige Objektorientierung

9




01 FLUID GESCHICHTE

• Ziel von Fluid => View Logik im View

Quelle: Rau/Kurfürst - Zukunftssichere Extensions mit Extbase und Fluid

10




FLUID BASISKONZEPTEund darüber hinaus

11




02 FLUID BASISKONZEPTE

12

ObjectAccessors

geben den Inhalt von Variablen aus,

die dem View zur Darstellung

übergeben wurden

ViewHelper

spezielle Tags im Template, die komplexe

Funktionalitäten wie Schleifen, Generierung von

Links, Formulare, ...bereitstellen

Arrays

ermöglichen die Übergabe von hierarchischen Werten

an ViewHelper





13

• Object Accessor: Zugriff mittel {}

Zuweisung an den View aus dem Controller:

$this->view->assign('identifier', $value);

Wert Zugriff't3ak11' {identifier}

array('t3ak11') {identifier.0}

array('name' => 't3ak11') {identifier.name}

event Object ( [name] => T3AK11 ) {identifier.name}





14

• ViewHelper: PHP-Klasse zur Realisierung komplexer Funktionalitäten

<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>Keine Posts vorhanden!<p> </f:else></f:if>





15

• 65 mit Fluid mitgelieferte ViewHelper• Formatierung (format.xxx)• Übersetzung (translate)• Formulargenerierung (form.xxx)• Linkerzeugung (link.xxx und uri.xxx)• Backend (be.buttons.xxx, be.tableList, be.actionMenu, ...)• TypoScript (cObject)• Kontrollstrukturen (if, then, else, for, groupedFor, cycle, ...)• Layouts (render, section, ...)• Misc (base, count, debug, image, ...)





16

• Es existieren viele ViewHelper von anderen• format.strftime (Formatiert TS oder Date-Object mit strftime)• include.css (CSS-Datei als HeaderData)• include.js ( JavaScript-Datei als HeaderData)• include.data (HeaderData allgemein)• fileicon (Zeigt Icon passend zur Dateiendung)• format.age (Zeigt das Alter in h,min,sec eine DateObjects)• format.stripTags (strip_tag Funktion von PHP)• link.telephoneNumber (Telefonlink für Smartphones)• u.s.w.





17

• Eigene ViewHelper schreiben• Namen ausdenken• Datei: NamenViewHelper.php• ins Verzeichnis Classes/ViewHelpers/ der Extension• Klasse:class Tx_[ExtName]_ViewHelpers_NamenViewHelper extendsTx_Fluid_Core_ViewHelper_AbstractViewHelper oderTx_Fluid_Core_ViewHelper_TagBasedViewHelper

• Methode: render()• {namespace foo=Tx_[Extname]_ViewHelpers}





18

• Arrays als flexible Datenstrukturen• Arrays werden verwendet, um ViewHelpern eine variable

Anzahl an Argumenten zu übergeben• <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}'}





19

• Inline Syntax• <f:format.padding padLength="40"> <f:format.date format="Y-m-d"> {post.date} </f:format.date></f:format.padding>

{post.date -> f:format.date(format: 'Y-m-d') -> f:format.padding(padLength: 40)}

• <link rel="stylesheet" ref="{f:uri.resource(path:'style.css')}" />

• Zugriff auf TypoScript Optionen mittels {settings}• plugin.tx_[lowercasedextensionname].settings

• {post.date -> f:format.date(format: 'Y-m-d') -> f:format.padding(padLength: 40)}




FLUID STANDALONE VIEWFluid ohne Extbase

20




03 FLUID STANDALONE VIEW

• Fluid Standalone View ermöglicht die Nutzung von Fluid ohne Extbase

• Früher (bis TYPO3 4.4 / Extbase/Fluid 1.2)$view = t3lib_div::makeInstance('Tx_Fluid_View_TemplateView');$controllerContext = t3lib_div::makeInstance('Tx_Extbase_MVC_Controller_ControllerContext');$controllerContext->setRequest(t3lib_div::makeInstance('Tx_Extbase_MVC_Request'));$view->setControllerContext($controllerContext);$template = t3lib_extMgm::extPath($this->extKey) . 'res/marker_fluid.htm';$view->setTemplatePathAndFilename($template);$view->assign('names', $names);$content = $view->render();

21





• Fluid Standalone View ermöglicht die Nutzung von Fluid ohne Extbase

• Einsatz in klassischen Extensions, Emails aus Extbase,

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

22





23

Methode Beschreibungset get Format Format (z.B. html)

get RequestGibt das Request-Objekt

zurück

set get TemplatePathAndFilename Template-Pfad

set TemplateSource Template-Source

set get LayoutRootPath Layout-Pfad

set get PartialRootPath Partial-Pfad

hasTemplatePrüfung auf valides

Template




FLUIDTEMPLATEFluid Templating für das Seitentemplate

24




04 FLUIDTEMPLATE

• Fluid bisher nur in Extensions nutzbar

• Seit TYPO3 4.5 gibt es das cObject FLUIDTEMPLATE

• Damit ist eine Nutzung von Fluid auch im Seitentemplate via TypoScript möglich

• Basiert technisch auf dem „Fluid Standalone View“

• Klasse: typo3/sysext/cms/tslib/class.tslib_content_fluidtemplate.php

25




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

26

• NEU - FLUIDTEMPLATE:page = PAGEpage.10 = FLUIDTEMPLATEpage.10 { file = fileadmin/tpl_main.html variables { CONTENT < styles.content.get




04 FLUIDTEMPLATE

• Zugriff auf alle Seiteneigenschaften:

Sie befinden sich auf der Seite mit der UID {data.uid} und dem Titel {data.title}

<f:if condition="{data.layout}==1"><f:then> Layout-Feld steht auf dem Wert "Layout 1"</f:then><f:else> Layout-Feld steht NICHT auf dem Wert "Layout 1"</f:else></f:if>

Alle Eigenschaften: <f:debug>{data}</f:debug>

27




04 FLUIDTEMPLATE

• Einfügen eines TypoScript Pfades - hier ein Breadcrumb-Menü

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

28

• Zugehöriges TypoScript

lib.breadcrumb = HMENUlib.breadcrumb { special = rootline special.range = 0|-1 1 = TMENU 1 { NO.linkWrap = | >> CUR = 1 CUR.doNotLinkIt = 1 }}




04 FLUIDTEMPLATE

• Übergabe von statischen Daten an TypoScript

20 + 22 = <f:cObject typoscriptObjectPath="lib.math" data="20+22" />

29

• Zugehöriges TypoScript

lib.math = TEXTlib.math { current = 1 prioriCalc = 1}




{blog}

{blog.title}

04 FLUIDTEMPLATE

• Übergabe von dynamischen Daten an TypoScript<f:cObject typoscriptObjectPath="lib.renderTitle">{blog}</f:cObject>

30

• Zugehöriges TypoScriptlib.renderTitle = IMAGElib.renderTitle { file = GIFBUILDER file { XY = 300,30 backColor = #cc0000 10 = TEXT 10.text.field = title 10.fontColor = #ffffff 10.offset = 10, 25 }}

• Zugehöriges TypoScriptlib.renderTitle = IMAGElib.renderTitle { file = GIFBUILDER file { XY = 300,30 backColor = #cc0000 10 = TEXT 10.text.current =1 10.fontColor = #ffffff 10.offset = 10, 25 }}




FLUID WIDGETSEin ViewHelper im ViewHelper :-)

31




06 FLUID WIDGETS

32

• Einige Funktionalitäten sind nur schwer über ViewHelper abbildbar

• Dafür wurden Widgets eingeführt




06 FLUID WIDGETS

33

• Widgets

• werden wie ViewHelper im View eingesetzt

• haben einen eigenen Controller (und damit eigene Actions)

• und ein eigenes Template




06 FLUID WIDGETS

34

• Pager

• Controller holt aus dem Repository x Datensätze und übergibt nur diese dem View

• View stellt x Datensätze dar

• Im View Action-Links zu den nächsten x Datensätzen

• ...

• => Problem: Für einen „einfachen“ Pager muss die Extension individuell verändert werden




06 FLUID WIDGETS

35

• Lösung: 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>

• Controller zum Aufbau der Paginierung(Ändert das Query-Objekt)

• Template zur Darstellung der Paginierung

• => Widgets sind damit unabhängig von der Extensionobwohl Sie eventuell in deren Objekte eingreifen




06 FLUID WIDGETS

36

• Eigene Widgets schreiben • Name ausdenken [Vhname] => <ns:widget.vhname>...• Folgende Klasse in Classes/Viewhelpers/Widgets/class Tx_Fluid_ViewHelpers_Widget_[Vhname]ViewHelper extends Tx_Fluid_Core_Widget_AbstractWidgetViewHelper { }

• Methode render() enthält return $this->initiateSubRequest();• Folgende Klasse in Classes/Viewhelpers/Widgets/Controller/class Tx_Fluid_ViewHelpers_Widget_Controller_[Vhname]Controller extends Tx_Fluid_Core_Widget_AbstractWidgetController { }

• Widget-Controller verhält sich wie richtiger Controller (initializeAction, indexAction, ...)

• Template in Resources/Private/Templates/ViewHelpers/Widget/[Vhname]• Navigation über interne Widget-Links <f:widget.link action=“index“>




FLUID BEISPIELEShowcases

37




07 FLUID BEISPIELE

38

• Daten für den Menülayer werden gruppiert dargestellt (nach der Art wie „Feldebene“)

• Dafür verwendet:groupedFor ViewHelper




07 FLUID BEISPIELE

39

• Rahmen und Drehung des oberen Bildes per cObject Viewhelper

• Mail-Template perFluid Standalone View




07 FLUID BEISPIELE

40

• Model: Order

• Eigenschaft:„contact“ ist Mapping auf tt_address

• property=“contact.phone“

• Dropdowns für Geburtstag aus ViewHelper




07 FLUID BEISPIELE

41

• Anzeige der POIs über einen eigenen GoogleMaps ViewHelper




QUELLENFluid bis zum Abwinken

42



(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011 43

08 QUELLEN



(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011 44

08 QUELLEN

• Artikel: Seitentemplates mit Fluid

ACHTUNG DRUCKFEHLERTEUFEL:

Seite 152 / Listing 4

• page = PAGEpage.10 = FLUIDTEMPLATEpage.10 { file = fileadmin/tpl_main.html variables { CONTENT < styles.content.get




08 QUELLEN

45

• Forge: http://forge.typo3.org/projects/show/package-fluid

• GIT: git clone http://git.typo3.org/FLOW3/Packages/Fluid.git

• Issue-Tracker: http://forge.typo3.org/projects/package-fluid/ issues

• Mailingliste: http://lists.typo3.org/cgi-bin/mailman/listinfo/ typo3-project-typo3v4mvc

• Deutsches Extbase & Fluid Tutorial von Mittwald:http://www.mittwald.de/fileadmin/pdf/extbase_fluid.pdf



http://git.typo3.org/FLOW3/Packages/Fluid.git

http://git.typo3.org/FLOW3/Packages/Fluid.git

http://forge.typo3.org/projects/package-fluid/issues

http://forge.typo3.org/projects/package-fluid/issues

http://www.mittwald.de/fileadmin/pdf/extbase_fluid.pdf

http://www.mittwald.de/fileadmin/pdf/extbase_fluid.pdf


08 QUELLEN

46

Extbase / FluidCheatsheet 1.01

19.06.2010bis Extbase/Fluid 1.2

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






08 QUELLEN

46




Don‘t try

this at home!(cause itsoutdated)












08 QUELLEN

47




VIELEN DANK!Fragen??

48

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



http://www.typovision.de/T3AK11_Fluid_extreme_typovision.pdf

http://www.typovision.de/T3AK11_Fluid_extreme_typovision.pdf


KONTAKT - KLASSISCH

Adresse:

typovision* - agentur für digitale kommunikation

Belfortstr. 881667 München

Fon: +49-89-18 92 08 70Fax: +49-89-18 92 08 69Email: [email protected]: http://www.typovision.de

49




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

50



http://www.twitter.com/_typovision_

http://www.twitter.com/_typovision_

http://twitter.com/PatrickLobacher

http://twitter.com/PatrickLobacher

http://www.facebook.com/typovision

http://www.facebook.com/typovision

http://www.xing.com/profile/Patrick_Lobacher

http://www.xing.com/profile/Patrick_Lobacher

http://www.slideshare.net/plobacher

http://www.slideshare.net/plobacher

http://www.amazon.de/Patrick-Lobacher/e/B0045AQVEA

http://www.amazon.de/Patrick-Lobacher/e/B0045AQVEA

extreme fluid - status quo der modernen templating engine

Technology

datei als

patrick lobacher

folgende klasse

view t3libdiv

content view

twitter

blog