TYPO3camp 2009 - Einführung in Fluid
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

TYPO3camp 2009 - Einführung in Fluid

  • 9,039 views
Uploaded on

Einführung in Fluid - der Templating Engine für TYPO3 4.3.

Einführung in Fluid - der Templating Engine für TYPO3 4.3.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,039
On Slideshare
9,010
From Embeds
29
Number of Embeds
2

Actions

Shares
Downloads
48
Comments
0
Likes
2

Embeds 29

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 2. Was ist Fluid? Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 2
  • 3. 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
  • 4. Templating-Engine Daten Template Templating-Engine Ausgabe Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 4
  • 5. Templating-Bereiche in TYPO3 Seiten-Templates Frontend-Plugins Backend-Module Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 5
  • 6. 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
  • 7. Warum eine neue Templating-Engine? Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 7
  • 8. 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); Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 8
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. Extension: efempty 1 - Zuweisung (PHP) 2 - Template (HTML) Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 12
  • 13. Fluid: Aufbau Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 13
  • 14. Fluid Eigene ViewHelper Core-ViewHelper Basis-Syntax Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 14
  • 15. Fluid: Basis Syntax Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 15
  • 16. 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
  • 17. 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
  • 18. 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> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 18
  • 19. 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
  • 20. 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
  • 21. Fluid: ViewHelper Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 21
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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/ Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 25
  • 26. ViewHelper Übersicht Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 26
  • 27. base // Verwendung <f:base /> // Ausgabe <base href="http://www.example.com/" /> Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 27
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. form // Ausgabe <form method="post" action="index.php?id=6&amp;tx_efempty_pi1[controller] =Start&amp;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
  • 32. 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
  • 33. 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
  • 34. Eigene ViewHelper schreiben Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 34
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. Fluid ohne Extbase Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 38
  • 39. 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
  • 40. Layouts Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 40
  • 41. Layouts Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 41
  • 42. Weitere Informationen Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 42
  • 43. Weitere Informationen: http://forge.typo3.org/projects/show/package-fluid http://typo3.org/podcasts/kasper Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 43
  • 44. Weitere Informationen: http://flow3.typo3.org/documentation/manuals/fluid/ 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
  • 45. 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
  • 46. Vielen Dank! Fragen??? Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 46