+ All Categories
Home > Technology > TYPO3camp 2009 - Einführung in Fluid

TYPO3camp 2009 - Einführung in Fluid

Date post: 03-Sep-2014
Category:
Upload: patrick-lobacher
View: 8,878 times
Download: 5 times
Share this document with a friend
Description:
Einführung in Fluid - der Templating Engine für TYPO3 4.3.
Popular Tags:
46
Einführung in Fluid Inspiring people to share Einführung in Fluid Templating made easy 10. Oktober 2009 - TYPO3camp München Patrick Lobacher 1 Sonntag, 11. Oktober 2009
Transcript
Page 1: TYPO3camp 2009 - Einführung in Fluid

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

Page 2: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Was ist Fluid?

2Sonntag, 11. Oktober 2009

Page 3: TYPO3camp 2009 - Einführung in Fluid

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

Page 4: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

Templating-Engine

Daten Template

Templating-Engine

Ausgabe

4Sonntag, 11. Oktober 2009

Page 5: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

Templating-Bereiche in TYPO3

Seiten-Templates

Frontend-Plugins

Backend-Module

5Sonntag, 11. Oktober 2009

Page 6: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

Templating-Bereiche in TYPO3

Seiten-Templates (Marker/Subpart)

Frontend-Plugins (Fluid)

Backend-Module (Fluid)

6Sonntag, 11. Oktober 2009

Page 7: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Warum eine neue Templating-Engine?

7Sonntag, 11. Oktober 2009

Page 8: TYPO3camp 2009 - Einführung in Fluid

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

Page 9: TYPO3camp 2009 - Einführung in Fluid

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

Page 10: TYPO3camp 2009 - Einführung in Fluid

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

Page 11: TYPO3camp 2009 - Einführung in Fluid

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

Page 12: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Extension: efempty

1 - Zuweisung (PHP)

2 - Template (HTML)

12Sonntag, 11. Oktober 2009

Page 13: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Fluid: Aufbau

13Sonntag, 11. Oktober 2009

Page 14: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Fluid

Basis-Syntax

Core-ViewHelper

Eigene ViewHelper

14Sonntag, 11. Oktober 2009

Page 15: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Fluid: Basis Syntax

15Sonntag, 11. Oktober 2009

Page 16: TYPO3camp 2009 - Einführung in Fluid

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

Page 17: TYPO3camp 2009 - Einführung in Fluid

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

Page 18: TYPO3camp 2009 - Einführung in Fluid

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

Page 19: TYPO3camp 2009 - Einführung in Fluid

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

Page 20: TYPO3camp 2009 - Einführung in Fluid

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

Page 21: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Fluid: ViewHelper

21Sonntag, 11. Oktober 2009

Page 22: TYPO3camp 2009 - Einführung in Fluid

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

Page 23: TYPO3camp 2009 - Einführung in Fluid

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

Page 24: TYPO3camp 2009 - Einführung in Fluid

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

Page 25: TYPO3camp 2009 - Einführung in Fluid

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

Page 26: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

ViewHelper Übersicht

26Sonntag, 11. Oktober 2009

Page 27: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

base// Verwendung

<f:base />

// Ausgabe

<base href="http://www.example.com/" />

27Sonntag, 11. Oktober 2009

Page 28: TYPO3camp 2009 - Einführung in Fluid

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

Page 29: TYPO3camp 2009 - Einführung in Fluid

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

Page 30: TYPO3camp 2009 - Einführung in Fluid

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

Page 31: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

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>

31Sonntag, 11. Oktober 2009

Page 32: TYPO3camp 2009 - Einführung in Fluid

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

Page 33: TYPO3camp 2009 - Einführung in Fluid

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

Page 34: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Eigene ViewHelper schreiben

34Sonntag, 11. Oktober 2009

Page 35: TYPO3camp 2009 - Einführung in Fluid

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

Page 36: TYPO3camp 2009 - Einführung in Fluid

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

Page 37: TYPO3camp 2009 - Einführung in Fluid

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

Page 38: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Fluid ohne Extbase

38Sonntag, 11. Oktober 2009

Page 39: TYPO3camp 2009 - Einführung in Fluid

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

Page 40: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Layouts

40Sonntag, 11. Oktober 2009

Page 41: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

Layouts

41Sonntag, 11. Oktober 2009

Page 42: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Weitere Informationen

42Sonntag, 11. Oktober 2009

Page 43: TYPO3camp 2009 - Einführung in Fluid

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

Page 44: TYPO3camp 2009 - Einführung in Fluid

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

Page 45: TYPO3camp 2009 - Einführung in Fluid

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

Page 46: TYPO3camp 2009 - Einführung in Fluid

Einführung in FluidInspiring people toshare

typofaktumlobacher und laruel le gbr

typofaktumtypofaktum

Vielen Dank!Fragen???

46Sonntag, 11. Oktober 2009


Recommended