TYPO3camp 2009 - Einführung in Fluid

Einführung in Fluid Templating made easy 10. Oktober 2009 - TYPO3camp München Patrick Lobacher Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 1

Was ist Fluid? Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 2

Was ist Fluid? Moderne und erweiterbare Templating-Engine für Frontend und Backend (Entwickelt von Sebastian Kurfürst) Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 3

Templating-Engine Daten Template Templating-Engine Ausgabe Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 4

Templating-Bereiche in TYPO3 Seiten-Templates Frontend-Plugins Backend-Module Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 5

Templating-Bereiche in TYPO3 Seiten-Templates (Marker/Subpart) Frontend-Plugins (Fluid) Backend-Module (Fluid) Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 6

Warum eine neue Templating-Engine? Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 7

Template-Code in pi1 // Template ermitteln $this->templateCode = $this->cObj->ﬁleResource($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); Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 8

Nachteile der „Marker“-Methode Layout 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 Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 9

Ziel 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 Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 10

Mitmachen!! Extension: efempty Nur ein Model + Controller + View TYPO3 4.3 (alpha/beta) Extbase und Fluid Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 11

Extension: efempty 1 - Zuweisung (PHP) 2 - Template (HTML) Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 12

Fluid: Aufbau Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 13

Fluid Eigene ViewHelper Core-ViewHelper Basis-Syntax Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 14

Fluid: Basis Syntax Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 15

Variablen (Strings) Zuweisung $this->view->assign('helloworld1', 'Hello World 1!'); Template <p>{helloworld1}</p> Ausgabe <p>Hello World 1!</p> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 16

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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 17

Arrays (assoziativ) Zuweisung $array = array('ﬁrst' => 'Hello', 'middle' => 'World', 'last' => '3!'); $this->view->assign('helloworld3', $array); Template <p>{helloworld3.ﬁrst} {helloworld3.middle} {helloworld3.last}</p> Ausgabe <p>Hello World 3!</p> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 18

Objekte Zuweisung $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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 19

Objekte Automatischer 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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 20

Fluid: ViewHelper Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 21

ViewHelper - Basis-Syntax INHALT <...>INHALT</...> <f:...>INHALT</f:...> <f:ViewHelperName ...>INHALT</f:ViewHelperName> <f:ViewHelperName Argumente>INHALT</f:ViewHelperName> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 22

ViewHelper - Argumente Ein 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 Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 23

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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 24

ViewHelper - Namespace <f:ViewHelperName Argumente>INHALT</f:ViewHelperName> f: speziﬁziert 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/ﬂuid/Classes/ViewHelpers/ Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 25

ViewHelper Übersicht Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 26

base // Verwendung <f:base /> // Ausgabe <base href="http://www.example.com/" /> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 27

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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 28

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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 29

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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 30

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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 31

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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 32

Weitere ViewHelper format (crop, nl2br, printf, currency, date, html, ...) image link und uri (page, external, action, email, ...) cObject (TypoScript-Objekte) count cycle und groupedFor debug ... Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 33

Eigene ViewHelper schreiben Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 34

Eigene ViewHelper Namen ausdenken Datei: NamenViewHelper.php ins Verzeichnis Classes/ViewHelpers/ Klasse: Tx_Efempty_ViewHelpers_NamenViewHelper extends Tx_Fluid_Core_ViewHelper_AbstractViewHelper Methode: render() Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 35

Eigene ViewHelper Dummytext-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; } Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 36

Eigene ViewHelper Dummytext-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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 37

Fluid ohne Extbase Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 38

Fluid ohne Extbase function 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); } Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 39

Layouts Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 40

Layouts Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 41

Weitere Informationen Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 42

Weitere Informationen: http://forge.typo3.org/projects/show/package-ﬂuid http://typo3.org/podcasts/kasper Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 43

Weitere Informationen: http://ﬂow3.typo3.org/documentation/manuals/ﬂuid/ Extension: doc_extbase svn co https://svn.typo3.org/TYPO3v4/CoreProjects/MVC/doc_extbase/ Extension: viewhelpertest svn co https://svn.typo3.org/TYPO3v4/CoreProjects/MVC/viewhelpertest/ Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 44

Weitere Informationen: Enthält 3 Teile: klassische Extension Programmierung, Extbase/Fluid Programmierung und API-Referenz WERBUNG ;-) Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 45

Vielen Dank! Fragen??? Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 46

TYPO3camp 2009 - Einführung in Fluid

by Patrick Lobacher

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 29

Statistics

TYPO3camp 2009 - Einführung in Fluid Presentation Transcript

http://www.slideshare.net	28
http://krautsock.posterous.com	1