Einführung
                                     in Fluid
                                    Templating made easy

       ...
Was ist Fluid?



                                             Inspiring people to
    Einführung in Fluid                ...
Was ist Fluid?
                            Moderne und
                            erweiterbare
                          ...
Templating-Engine
                            Daten                       Template



                                    ...
Templating-Bereiche in TYPO3
                            Seiten-Templates
                            Frontend-Plugins
   ...
Templating-Bereiche in TYPO3
                            Seiten-Templates (Marker/Subpart)
                            Fro...
Warum eine neue
                            Templating-Engine?


                                           Inspiring peop...
Template-Code in pi1
               // Template ermitteln
               $this->templateCode = $this->cObj->fileResource($c...
Nachteile der „Marker“-Methode
                            Layout und Code wird vermischt
                               D...
Ziel von Fluid
                            Einfache und elegante Template-Engine
                            Unterstützung...
Mitmachen!!
                            Extension: efempty
                              Nur ein Model +
                 ...
Extension: efempty

                            1 - Zuweisung (PHP)
                            2 - Template (HTML)




  ...
Fluid: Aufbau



                                            Inspiring people to
    Einführung in Fluid                  ...
Fluid
                            Eigene ViewHelper


                            Core-ViewHelper


                      ...
Fluid: Basis Syntax



                                            Inspiring people to
    Einführung in Fluid            ...
Variablen (Strings)
                            Zuweisung
                            $this->view->assign('helloworld1', '...
Arrays (numerisch)
                            Zuweisung
                            $array = array('Hello', 'World', '2!'...
Arrays (assoziativ)
                            Zuweisung
                            $array = array('first' => 'Hello', 'm...
Objekte
                            Zuweisung
                            $start = new Tx_Efempty_Domain_Model_Start;
    ...
Objekte
                            Automatischer Zugriff auf alle Objekteigenschaften
                            In Extb...
Fluid: ViewHelper



                                           Inspiring people to
    Einführung in Fluid               ...
ViewHelper - Basis-Syntax
                            INHALT
                            <...>INHALT</...>
               ...
ViewHelper - Argumente
                            Ein Argument beginnt mit { und endet mit }.
                           ...
ViewHelper - Argumente - Beispiel
                            // über den Parameter arguments wird ein Argument übergeben
...
ViewHelper - Namespace
                            <f:ViewHelperName Argumente>INHALT</f:ViewHelperName>
                 ...
ViewHelper Übersicht



                                            Inspiring people to
    Einführung in Fluid           ...
base
                            // Verwendung

                            <f:base />


                            // Au...
if - then -else
                   // Verwendung
                   <f:if condition="{blog.posts}">

                     ...
for
                   // Verwendung
                   <ul>
                   <f:for each="{key1: 'name1', key2: 'name2'...
form
                   // Verwendung
                   <f:form action= "" method="post">

                       <f:form...
form
                   // Ausgabe
                   <form method="post" action="index.php?id=6&amp;tx_efempty_pi1[contro...
translate
                   // Verwendung
                   <f:translate key="no.post.found" />

                   // l...
Weitere ViewHelper
                            format (crop, nl2br, printf, currency, date, html, ...)

                  ...
Eigene ViewHelper
                                schreiben


                                          Inspiring people t...
Eigene ViewHelper
                      Namen ausdenken

                      Datei: NamenViewHelper.php

               ...
Eigene ViewHelper
                      Dummytext-ViewHelper

                      public function render($length = 100) ...
Eigene ViewHelper
                      Dummytext-ViewHelper - Verwendung

                      {namespace efempty = Tx_E...
Fluid ohne Extbase


                                           Inspiring people to
    Einführung in Fluid               ...
Fluid ohne Extbase
                      function main($content, $conf) {
                         ...
                   ...
Layouts


                                      Inspiring people to
    Einführung in Fluid               share
Sonntag, 1...
Layouts




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


                                      Inspiring people to
    Einführung in Fluid               sh...
Weitere Informationen:
                    http://forge.typo3.org/projects/show/package-fluid
                    http://ty...
Weitere Informationen:
                    http://flow3.typo3.org/documentation/manuals/fluid/
                    Extension...
Weitere Informationen:
                    Enthält 3 Teile: klassische Extension Programmierung,
                    Extba...
Vielen Dank!
                               Fragen???




                                           Inspiring people to
 ...
Upcoming SlideShare
Loading in …5
×

TYPO3camp 2009 - Einführung in Fluid

7,310 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,310
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
52
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

TYPO3camp 2009 - Einführung in Fluid

  1. 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. 2. Was ist Fluid? Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 2
  3. 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. 4. Templating-Engine Daten Template Templating-Engine Ausgabe Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 4
  5. 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. 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. 7. Warum eine neue Templating-Engine? Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 7
  8. 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. 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. 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. 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. 12. Extension: efempty 1 - Zuweisung (PHP) 2 - Template (HTML) Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 12
  13. 13. Fluid: Aufbau Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 13
  14. 14. Fluid Eigene ViewHelper Core-ViewHelper Basis-Syntax Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 14
  15. 15. Fluid: Basis Syntax Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 15
  16. 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. 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. 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. 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. 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. 21. Fluid: ViewHelper Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 21
  22. 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. 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. 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. 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. 26. ViewHelper Übersicht Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 26
  27. 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. 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. 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. 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. 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. 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. 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. 34. Eigene ViewHelper schreiben Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 34
  35. 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. 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. 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. 38. Fluid ohne Extbase Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 38
  39. 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. 40. Layouts Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 40
  41. 41. Layouts Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 41
  42. 42. Weitere Informationen Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 42
  43. 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. 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. 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. 46. Vielen Dank! Fragen??? Inspiring people to Einführung in Fluid share Sonntag, 11. Oktober 2009 46

×