SlideShare ist ein Scribd-Unternehmen logo
1 von 46
Downloaden Sie, um offline zu lesen
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->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
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('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
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: 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
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&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
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-fluid
                    http://typo3.org/podcasts/kasper




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

Weitere ähnliche Inhalte

Mehr von die.agilen GmbH

Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRdie.agilen GmbH
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...die.agilen GmbH
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlindie.agilen GmbH
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationdie.agilen GmbH
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...die.agilen GmbH
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...die.agilen GmbH
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerkdie.agilen GmbH
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerkdie.agilen GmbH
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...die.agilen GmbH
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...die.agilen GmbH
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkdie.agilen GmbH
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...die.agilen GmbH
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkdie.agilen GmbH
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkdie.agilen GmbH
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkdie.agilen GmbH
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkdie.agilen GmbH
 
WTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design ThinkingWTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design Thinkingdie.agilen GmbH
 
Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015die.agilen GmbH
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15die.agilen GmbH
 

Mehr von die.agilen GmbH (20)

Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
 
WTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design ThinkingWTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design Thinking
 
Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
 

TYPO3camp 2009 - Einführung in Fluid

  • 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