Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Einführungin Fluid
Templating made easy
10. Oktober 2009 - TYPO3camp München
Patrick Lobacher
1Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Was ist Fluid?
2Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Was ist Fluid?
Moderne und
erweiterbare
Templating-Engine für
Frontend und Backend
(Entwickelt von Sebastian Kurfürst)
3Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Templating-Engine
Daten Template
Templating-Engine
Ausgabe
4Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Templating-Bereiche in TYPO3
Seiten-Templates
Frontend-Plugins
Backend-Module
5Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Templating-Bereiche in TYPO3
Seiten-Templates (Marker/Subpart)
Frontend-Plugins (Fluid)
Backend-Module (Fluid)
6Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Warum eine neue Templating-Engine?
7Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Template-Code in pi1// 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);
8Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Nachteile der „Marker“-MethodeLayout und Code wird vermischt
Designer und Programmierer können nicht unabhängig voneinander arbeiten
schlecht erweiterbar (neue Marker)
komplizierte API-Funktionen
keine Kontrollstrukturen
Nur Strings und Arrays -> keine Objekte möglich
9Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Ziel von FluidEinfache 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
10Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Mitmachen!!
Extension: efempty
Nur ein Model + Controller +View
TYPO3 4.3 (alpha/beta)
Extbase und Fluid
11Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Extension: efempty
1 - Zuweisung (PHP)
2 - Template (HTML)
12Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Fluid: Aufbau
13Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Fluid
Basis-Syntax
Core-ViewHelper
Eigene ViewHelper
14Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Fluid: Basis Syntax
15Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Variablen (Strings)Zuweisung$this->view->assign('helloworld1', 'Hello World 1!');
Template<p>{helloworld1}</p>
Ausgabe<p>Hello World 1!</p>
16Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Arrays (numerisch)Zuweisung$array = array('Hello', 'World', '2!');$this->view->assign('helloworld2', $array);
Template<p>{helloworld2.0} {helloworld2.1} {helloworld2.2}</p>
Ausgabe<p>Hello World 2!</p>
17Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Arrays (assoziativ)Zuweisung$array = array('first' => 'Hello', 'middle' => 'World', 'last' => '3!');$this->view->assign('helloworld3', $array);
Template<p>{helloworld3.first} {helloworld3.middle} {helloworld3.last}</p>
Ausgabe<p>Hello World 3!</p>
18Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
ObjekteZuweisung$start = new Tx_Efempty_Domain_Model_Start;$start->setTitle("Hello World 4!");$this->view->assign('helloworld4', $start);
Template<p>{helloworld4.title}</p>
Ausgabe<p>Hello World 4!</p>
19Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
ObjekteAutomatischer Zugriff auf alle Objekteigenschaften
In Extbase (und FLOW3) wird die Eigenschaft über den sogenannten GETTER ermittelt -> getTitle()
Zugriff auf sämtliche Objekte, die als Eigenschaften gespeichert sind
<p>{blog.post.comment}</p>
20Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Fluid: ViewHelper
21Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
ViewHelper - Basis-SyntaxINHALT
<...>INHALT</...>
<f:...>INHALT</f:...>
<f:ViewHelperName ...>INHALT</f:ViewHelperName>
<f:ViewHelperName Argumente>INHALT</f:ViewHelperName>
22Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
ViewHelper - ArgumenteEin Argument beginnt mit { und endet mit }.
Es kann eine durch Kommata geteilte, ungeordnete Liste von Eigenschaften enthalten.
Eine Eigenschaft besteht aus einem Schlüssel und einem Wert, getrennt durch einen Doppelpunkt.
Ein Schlüssel ist eine Zeichenkette.
Ein Wert ist ein Objekt, ein Array, eine Zeichenkette, eine Zahl oder einer der Ausdrücke TRUE oder FALSE
23Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
ViewHelper - Argumente - Beispiel// über den Parameter arguments wird ein Argument übergeben<f:link.action controller="Blog" action="show"arguments="{id : blogPost.id}">... read more</f:link.action>
// zwei oder mehr Argumente sind natürlich ebenfalls möglich<f:for each="{0:1, 1:2, 2:3, 3:4, 4:5}" as="values"> <f:cycle values="{0: 'odd', 1: 'even'}" as="alternate"> <div class="{alternate}">{values} - {alternate}</div> </f:cycle></f:for>
24Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
ViewHelper - Namespace<f:ViewHelperName Argumente>INHALT</f:ViewHelperName>
f: spezifiziert den Fluid eigenen Namespace
{namespace f=Tx_Fluid_ViewHelpers} (Default Namespace)
Alle ViewHelper basieren auf Klassen
Dateiname der Klasse ist:„ViewHelperName“ + ViewHelper.php (IfViewHelper.php)
Verzeichnis: typo3conf/ext/fluid/Classes/ViewHelpers/
25Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
ViewHelper Übersicht
26Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
base// Verwendung
<f:base />
// Ausgabe
<base href="http://www.example.com/" />
27Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
if - then -else// Verwendung<f:if condition="{blog.posts}">
<f:then> <p>Es sind Posts vorhanden!!</p> </f:then>
<f:else> <p>Keine Posts vorhanden!!</p> </f:else>
</f:if>
28Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
for// Verwendung<ul><f:for each="{key1: 'name1', key2: 'name2'}" as="wert" key="label"> <li>{label}: {wert}</li></f:for></ul>
//Ausgabe<ul> <li>key1: name1</li> <li>key2: name2</li></ul>
29Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
form// Verwendung<f:form action= "" method="post"> <f:form.checkbox name="checkboxname" value="checkboxvalue" /> <f:form.textbox name="textbox" id="textboxid" value="Vorgabewert" /> <f:form.submit name="submitbutton" value="Formular abschicken">Abschicken</f:form.submit>
</f:form>
30Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
form// Ausgabe<form method="post" action="index.php?id=6&tx_efempty_pi1[controller]=Start&cHash=231b398dcb3b82f4d1f28a9fdbee8ded"><input type="hidden" name="tx_efempty_pi1[__referrer][extensionName]" value="Efempty" /><input type="hidden" name="tx_efempty_pi1[__referrer][controllerName]" value="Start" /><input type="hidden" name="tx_efempty_pi1[__referrer][actionName]" value="index" /><input type="checkbox" name="tx_efempty_pi1[checkboxname]" value="checkboxvalue" /><input id="textboxid" type="text" name="tx_efempty_pi1[textbox]" value="Vorgabewert" /><input type="submit" name="tx_efempty_pi1[submitbutton]" value="Formular abschicken" /></form>
31Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
translate// Verwendung<f:translate key="no.post.found" />
// locallang.xml aus Resources/Private/Language/<?xml version="1.0" encoding="utf-8" standalone="yes" ?<T3locallang>...<data type="array"> <languageKey index="de" type="array"> <label index="no.post.found">Keine Posts!</label> </languageKey></data>
32Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Weitere ViewHelperformat (crop, nl2br, printf, currency, date, html, ...)
image
link und uri (page, external, action, email, ...)
cObject (TypoScript-Objekte)
count
cycle und groupedFor
debug
...
33Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Eigene ViewHelper schreiben
34Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Eigene ViewHelperNamen ausdenken
Datei: NamenViewHelper.php
ins Verzeichnis Classes/ViewHelpers/
Klasse:Tx_Efempty_ViewHelpers_NamenViewHelperextendsTx_Fluid_Core_ViewHelper_AbstractViewHelper
Methode: render()
35Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Eigene ViewHelperDummytext-ViewHelper
public function render($length = 100) { $dummytext = $this->renderChildren(); $len = strlen($dummytext); $repeat = ceil($length / $len); $dummytext_neu = substr(str_repeat($dummytext,$repeat),0,$length); return $dummytext_neu;}
36Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Eigene ViewHelperDummytext-ViewHelper - Verwendung
{namespace efempty = Tx_Efempty_ViewHelpers}
<efempty:dummytext length="60"> Das ist ein Dummytext!</efempty:dummytext>
<efempty:dummytext length="60"> Dummytext: <f:translate key="dummy.text" /></efempty:dummytext>
37Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Fluid ohne Extbase
38Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Fluid ohne Extbasefunction main($content, $conf) { ... $renderer = t3lib_div::makeInstance('Tx_Fluid_View_TemplateView'); $renderer->setControllerContext(t3lib_div::makeInstance('Tx_Extbase_MVC_Controller_ControllerContext')); $template = t3lib_extMgm::extPath($_EXTKEY) . 'res/index.html'; $renderer->setTemplatePathAndFilename($template); $renderer->assign('helloworld', 'Hello World!'); $content .= $renderer->render(); return $this->pi_wrapInBaseClass($content);}
39Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Layouts
40Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Layouts
41Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Weitere Informationen
42Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Weitere Informationen:http://forge.typo3.org/projects/show/package-fluid
http://typo3.org/podcasts/kasper
43Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Weitere Informationen:http://flow3.typo3.org/documentation/manuals/fluid/
Extension: doc_extbase
svn cohttps://svn.typo3.org/TYPO3v4/CoreProjects/MVC/doc_extbase/
Extension: viewhelpertestsvn cohttps://svn.typo3.org/TYPO3v4/CoreProjects/MVC/viewhelpertest/
44Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
Weitere Informationen:Enthält 3 Teile: klassische Extension Programmierung, Extbase/Fluid Programmierung und API-Referenz
WERBUNG ;-)
45Sonntag, 11. Oktober 2009
Einführung in FluidInspiring people toshare
typofaktumlobacher und laruel le gbr
typofaktumtypofaktum
Vielen Dank!Fragen???
46Sonntag, 11. Oktober 2009