Extreme Fluid - Status Quo der modernen Templating Engine

EXTREME FLUID
Next Generation Templating

TYPO3 Akademie 2011 - Marit AG
26.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
• Certiﬁed TYPO3 Integrator seit 2009
• Mitglied in den TYPO3 Core-Teams:
Certiﬁcation & Documentation
• Mitveranstalter des TYPO3camp München
• Speaker auf nationalen und internationalen Kongressen
• Dozent für führende Schulungsinstitute und die MVHS
(c) 2011 - typovision* | Extreme Fluid - T3AK11 | Patrick Lobacher | www.typovision.de | 26.02.2011 2

ÜBER TYPOVISION*

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


AGENDA

01 Fluid Geschichte und Philosophie

02 Fluid Basiskonzepte

03 Fluid Standalone View

04 FLUIDTEMPLATE

06 Fluid Widgets

07 Showcases

08 Quellen


FLUID GESCHICHTE
und Philosophie


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


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


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


01 FLUID GESCHICHTE

• Ziel von Fluid => View Logik im View

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


FLUID BASISKONZEPTE
und darüber hinaus


02 FLUID BASISKONZEPTE

Object ViewHelper
Accessors Arrays
spezielle Tags
im Template,
geben den Inhalt die komplexe ermöglichen die Übergabe
von Variablen aus, Funktionalitäten wie von hierarchischen Werten
die dem View Schleifen, Generierung von an ViewHelper
zur Darstellung Links, Formulare, ...
übergeben wurden bereitstellen



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



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



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



• 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)
• ﬁleicon (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.



• Eigene ViewHelper schreiben
• Namen ausdenken
• Datei: NamenViewHelper.php
• ins Verzeichnis Classes/ViewHelpers/ der Extension
• Klasse:
class Tx_[ExtName]_ViewHelpers_NamenViewHelper
extends
Tx_Fluid_Core_ViewHelper_AbstractViewHelper oder
Tx_Fluid_Core_ViewHelper_TagBasedViewHelper
• Methode: render()
• {namespace foo=Tx_[Extname]_ViewHelpers}



• Arrays als ﬂexible 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}'
}


• 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 VIEW
Fluid ohne Extbase


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



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


Methode Beschreibung
set get Format Format (z.B. html)
Gibt das Request-Objekt
get Request
zurück

set get TemplatePathAndFilename Template-Pfad

set TemplateSource Template-Source
set get LayoutRootPath Layout-Pfad
set get PartialRootPath Partial-Pfad
Prüfung auf valides
hasTemplate
Template


FLUIDTEMPLATE
Fluid Templating für das Seitentemplate


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


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

• NEU - FLUIDTEMPLATE:
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
file = fileadmin/tpl_main.html
variables {


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>


04 FLUIDTEMPLATE

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

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

• Zugehöriges TypoScript

lib.breadcrumb = HMENU
lib.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" />

• Zugehöriges TypoScript

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


04 FLUIDTEMPLATE

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

• Zugehöriges TypoScript {blog} • Zugehöriges TypoScript
lib.renderTitle = IMAGE lib.renderTitle = IMAGE
lib.renderTitle { lib.renderTitle {
file = GIFBUILDER file = GIFBUILDER
file { {blog.title} file {
XY = 300,30 XY = 300,30
backColor = #cc0000 backColor = #cc0000
10 = TEXT 10 = TEXT
10.text.field = title 10.text.current =1
10.fontColor = #ffffff 10.fontColor = #ffffff
10.offset = 10, 25 10.offset = 10, 25
} }
} }


FLUID WIDGETS
Ein ViewHelper im ViewHelper :-)


06 FLUID WIDGETS

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

• Dafür wurden
Widgets
eingeführt


06 FLUID WIDGETS

• Widgets

• werden wie ViewHelper im View eingesetzt

• haben einen eigenen Controller
(und damit eigene Actions)

• und ein eigenes Template


06 FLUID WIDGETS

• 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

• 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 Extension
obwohl Sie eventuell in deren Objekte eingreifen

06 FLUID WIDGETS

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


07 FLUID BEISPIELE

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

• Dafür verwendet:
groupedFor
ViewHelper


07 FLUID BEISPIELE

• Rahmen und
Drehung des oberen
Bildes per cObject
Viewhelper

• Mail-Template per
Fluid Standalone
View


07 FLUID BEISPIELE

• Model: Order

• Eigenschaft:
„contact“ ist
Mapping auf
tt_address

• property=
“contact.phone“

• Dropdowns für
Geburtstag aus
ViewHelper


07 FLUID BEISPIELE

• Anzeige der POIs
über einen
eigenen
GoogleMaps
ViewHelper


QUELLEN
Fluid bis zum Abwinken


08 QUELLEN


08 QUELLEN

• Artikel: Seitentemplates mit Fluid

ACHTUNG DRUCKFEHLERTEUFEL:

Seite 152 / Listing 4

• page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
file = fileadmin/tpl_main.html
variables {


08 QUELLEN

• 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


08 QUELLEN
Extbase / Fluid
Cheatsheet 1.01

19.06.2010
bis Extbase/Fluid 1.2
http://www.typovision.de/ﬁleadmin/slides/ExtbaseFluidCheatSheetTypovision.pdf


08 QUELLEN
Extbase / Fluid
Cheatsheet 1.01
Don‘t
try
this at home!
(cause its
outdated)
19.06.2010


08 QUELLEN


08 QUELLEN
Extbase / Fluid
Cheatsheet 2.00

22.02.2011


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

VIELEN DANK!
Fragen??


KONTAKT - KLASSISCH

Adresse:

typovision* - agentur für digitale kommunikation

Belfortstr. 8
81667 München

Fon: +49-89-18 92 08 70
Fax: +49-89-18 92 08 69
Email: info@typovision.de
Web: http://www.typovision.de


KONTAKT - SOCIAL CHANNELS

Twitter: www.twitter.com/_typovision_
www.twitter.com/PatrickLobacher

Facebook: www.facebook.com/typovision

XING: www.xing.com/proﬁle/Patrick_Lobacher

Slideshare: www.slideshare.net/plobacher

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


Extreme Fluid - Status Quo der modernen Templating Engine

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie Extreme Fluid - Status Quo der modernen Templating Engine

Ähnlich wie Extreme Fluid - Status Quo der modernen Templating Engine (20)

Mehr von die.agilen GmbH

Mehr von die.agilen GmbH (20)

Extreme Fluid - Status Quo der modernen Templating Engine