extreme fluid - status quo der modernen templating engine
DESCRIPTION
Fluid ist die moderne und intuitive Templating Engine für FLOW3 und Extbase. Der Vortrag betrachtet den aktuellen Stand inkl. Basiskonzepte, ViewHelper, FLUIDTEMPLATE, Fluid Standalone View und Widgets.TRANSCRIPT
(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*)
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
Ü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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
Ü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:
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
AGENDA
01 Fluid Geschichte und Philosophie
02 Fluid Basiskonzepte
03 Fluid Standalone View
04 FLUIDTEMPLATE
06 Fluid Widgets
07 Showcases
08 Quellen
5
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
FLUID GESCHICHTEund Philosophie
6
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
01 FLUID GESCHICHTE
• Ziel von Fluid => View Logik im View
Quelle: Rau/Kurfürst - Zukunftssichere Extensions mit Extbase und Fluid
10
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
FLUID BASISKONZEPTEund darüber hinaus
11
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
02 FLUID BASISKONZEPTE
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}
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
02 FLUID BASISKONZEPTE
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>
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
02 FLUID BASISKONZEPTE
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, ...)
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
02 FLUID BASISKONZEPTE
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.
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
02 FLUID BASISKONZEPTE
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}
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
02 FLUID BASISKONZEPTE
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}'}
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
02 FLUID BASISKONZEPTE
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)}
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
FLUID STANDALONE VIEWFluid ohne Extbase
20
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
03 FLUID STANDALONE VIEW
• 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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
03 FLUID STANDALONE VIEW
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
FLUIDTEMPLATEFluid Templating für das Seitentemplate
24
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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 }}
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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}
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
{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 }}
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
FLUID WIDGETSEin ViewHelper im ViewHelper :-)
31
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
06 FLUID WIDGETS
32
• Einige Funktionalitäten sind nur schwer über ViewHelper abbildbar
• Dafür wurden Widgets eingeführt
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
06 FLUID WIDGETS
33
• Widgets
• werden wie ViewHelper im View eingesetzt
• haben einen eigenen Controller (und damit eigene Actions)
• und ein eigenes Template
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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“>
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
FLUID BEISPIELEShowcases
37
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
07 FLUID BEISPIELE
38
• Daten für den Menülayer werden gruppiert dargestellt (nach der Art wie „Feldebene“)
• Dafür verwendet:groupedFor ViewHelper
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
07 FLUID BEISPIELE
39
• Rahmen und Drehung des oberen Bildes per cObject Viewhelper
• Mail-Template perFluid Standalone View
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
07 FLUID BEISPIELE
40
• Model: Order
• Eigenschaft:„contact“ ist Mapping auf tt_address
• property=“contact.phone“
• Dropdowns für Geburtstag aus ViewHelper
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
07 FLUID BEISPIELE
41
• Anzeige der POIs über einen eigenen GoogleMaps ViewHelper
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
08 QUELLEN
46
Extbase / FluidCheatsheet 1.01
19.06.2010bis Extbase/Fluid 1.2
http://www.typovision.de/fileadmin/slides/ExtbaseFluidCheatSheetTypovision.pdf
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
08 QUELLEN
46
Extbase / FluidCheatsheet 1.01
19.06.2010bis Extbase/Fluid 1.2
http://www.typovision.de/fileadmin/slides/ExtbaseFluidCheatSheetTypovision.pdf
Don‘t try
this at home!(cause itsoutdated)
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
08 QUELLEN
47
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
08 QUELLEN
47
Extbase / FluidCheatsheet 2.00
22.02.2011bis Extbase/Fluid 1.3
http://www.typovision.de/fileadmin/slides/ExtbaseFluidCheatSheetTypovision.pdf
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
VIELEN DANK!Fragen??
48
SLIDES:http://www.typovision.de/T3AK11_Fluid_extreme_typovision.pdf
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011
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