15. März 2012

Templating 3.0 mit TYPO3 – FLUIDTEMPLATE (Teil 1)

in ExtBase/Fluid, Tutorial, TYPO3, TypoScript

Nachdem ich auf dem TYPO3camp München 2011 und der T3AK12 (auch in München) schon Sessions bzw. Vorträge über das Thema gehalten habe, möchte ich eine kleine Reihe von Tutorials hier anbieten.

Angefangen wird mit dem neuen TypoScript Objekt FLUIDTEMPLATE.

Als Alternative zum Marker Based Templating (richtig Old School) und dem teils gehasstem, teils verehrtem TemplaVoilá gibt es nun seit TYPO3 4.5 das FLUIDTEMPLATE. Es ist keine Installation nötig, man kann es direkt per TypoScript initialisieren:

page = PAGE
page.10 = FLUIDTEMPLATE
page.10.file = fileadmin/template/my_template.html

Hiermit haben wir dem System gesagt, dass das Template my_template.html genutzt werden soll.

Wie üblich, werden verschiedene Elemente des Templates im TypoScript zusammengebaut, wie z.B. verschiedene Menus. Diese speichern wir in temporären Objekten namens temp.mainMenu, temp.subMenu oder auch temp.footerMenu.

Ich gehe jetzt mal davon aus, dass jeder weiß, wie man ein Menu im TypoScript erstellt, daher kopieren wir das fertige Objekt direkt in das FLUIDTEMPLATE:

page.10.variables {
  mainMenu < temp.mainMenu
  subMenu < temp.subMenu
  footerMenu < temp.footerMenu
}

Wir kopieren unsere erstellen Menustrukturen in Variablen im FLUIDTEMPLATE, um sie dann im HTML direkt anzusprechen:

<div id="mainMenu">
  <f:format.html>{mainMenu}</f:format.html>
</div>

Man sieht an dem Tag, dass ein Fluid Tag genutzt wird. „format.html“ ist ein ViewHelper, der die Ausgabe in reinem HTML ausgibt. Die vorher definierte Variable wird mittels den geschweiften Klammern {variable} angesprochen, die wir ja vorher im TypoScript mit einem MENU Objekt gefüllt haben.

Das Gesamte kann jetzt natürlich mit allen möglichen TypoScript Objekten gefüllt werden. Auch Partials und Sections sind nutzbar, doch der Einfachheit halber soll dieses Beispiel ausreichen.

Natürlich kann man auch das HTML je nach TypoScript Objekt abhängig machen, indem man die Wenn-Abfrage von Fluid nutzt. So kann ich die HTML-Struktur abhängig von einem möglichen zweiten Menu machen und die Ebenen jeweils benennen:

<f:if condition="{submenu}">
  <f:then>
    <div id="content_wrap">
      <div id="submenu">
        <f:format.html>{subMenu}</f:format.html>
      </div>
      <div id="content">
        <f:format.html>{content}</f:format.html>
      </div>
    </div>
  </f:then>
  <f:else>
    <div id="content_wide">
      <f:format.html>{content}</f:format.html>
    </div>
  </f:else>
</f:if>

Im zweiten Teil erkläre ich, wie man die backend_layouts nutzen kann, um den Content Bereich gemütlich mit verschiedenen Layouts zu füttern.

22 Reaktionen zu “Templating 3.0 mit TYPO3 – FLUIDTEMPLATE (Teil 1)”

Kommentare abonnieren (RSS) oder TrackBack URL

hmm,
ganz gutes Feature, allerdings gibt es mittlerweile ein sehr viel ausgereifteres Templating System (http://www.fedext.net), das deutlich mehr Möglichkeiten und Usability im Backend bietet und von einem professionellen Entwickler-Team beteut wird…

fff am 16. März 2012 um 09:21

Sehr spannend – vielen Dank! Die größte Frage für mich bleibt aber, ob es auf diesem Weg auch eine gute Alternative zu den FCE in TemplaVoila gibt (denn die sind die eigentliche Macht von TemplaVoila). Damit kann man eigene Elemente super schnell erstellen ohne eine Extension bauen zu müssen (zumindest wenn man seinen Widerwillen gegen die XML-Strukturen überwunden hat). Und natürlich sind die Container/Sections auch toll (ein bisschen in die richtung geht es ja mit der EXT:gridelements auch – gibt es dazu eigentlich irgendwo eine Doku?).

http://www.fedext.net ist spannend und übrigens auch eine ganz gute Doku (nur auf einem kleinen Bildschirm ist die Navigation der Seite leider murks). Allerdings muss sich jeder überlegen, ob er auf so eine dicke Extension zurückgreifen möchte (weniger ist im professionellen TYPO3-Umfeld oft mehr).

Philipp am 16. März 2012 um 11:12

Hallo Philipp. Jeder der schon einmal eine Datenbank normalisiert hat, weiß das FCE nicht gleich Macht bedeutet. Die Daten werden faktisch für externer Abfragen unbrauchbar, da die Informationen in XML gespeichert werden. Gridelements, FLUX und Extensions sind brauchbare und gute Alternativen. Eine Datenbank zu Kickstarten und IRRE integrieren dauert nicht viel länger als sich mich FF-Sections rumzuschlagen. Ich sehe inzwischen in TV keinen Vorteil mehr…

Tim Lochmüller am 16. März 2012 um 12:56

Hi zusammen,
und schonmal ein riesengroßes Dankeschön an Thomas fürs schreiben dieses How Tos. Natürrlich kenne ich die Schritte schon, irgendwo gelesen, gesehen und aufgeschnappt hat man das alles schonmal, dennoch ist es um so besser, wenn es mal irgendwo zusammen Dokumentiert ist. Und wo wenn nicht hier wäre der perfekte Ort dafür?

Ich habe eine Frage, die vielleicht etwas abseits der normalen Fragen stehen mag. Wenn ich mir die Mühe mache die FLUID Technologie zu Nutze zu machen, wäre es für mich auch interessant mir Objekte ins FLUID zu laden. Zum Beispiel UserObjekte ( fe_user oder halt fe_user Objekte eigener Extensions ). Ist so etwas irgendwie sauber und ohne Zusatzextension möglich oder muss ich da alt bekannte Wege gehen?

Schönes Wochenende und einen Gruß aus Oberhausen,

Bastian

Bastian Bringenberg am 18. März 2012 um 03:26

@Bastian:

Hi Bastian, auch mit pi_base Extensions kannst du auf das FLUID zugreifen, es gibt ein Standalone FLUID Objekt.
Da FLUID auch bei Extbase mit Objekten arbeitet, sehe ich da kein Problem.

Thomas Löffler am 18. März 2012 um 09:33

Morgen Thomas,

danke für die schnelle Antwort! Mein großes Problem ist nicht ob ich auf FLUID zugreifen kann, sondern ob ich irgendwie aus TYPOScript mein UserObjekt Assignen kann, oder ob ich ne Extension dazwischen brauche.

Grade so ein User ist ja oft etwas, was man wirklich im Template der Seite braucht und nicht nur in Plugin Bereichen…

Schönen Sonntag dir,

Bastian

Bastian Bringenberg am 18. März 2012 um 11:30

Hi Bastian,

man kann über die Variablen natürlich auch Objekte wie das TSFE übertragen, siehe http://typo3.toaster-schwerin.de/typo3_dev/2011_12/msg00059.html.

Hilft dir das weiter?

Gruß
Thomas

Thomas Löffler am 18. März 2012 um 11:42

Hi Thomas,

ausgezeichnet, genau sowas hatte ich im Kopf, allerdings hatte ich nicht Vermutet, dass Text an der Stelle das ist, was ich haben möchte^^.

Danke sehr!

Bastian

Bastian Bringenberg am 18. März 2012 um 11:44

Freue mich auch auf weitere Tutorials betreffend Fluid und vorallem wie man auch eigene Content-Elemente erstellen kann!

Templavoila ist für mich auch gestorben.

An Dokumentationen zu gridelements oder weiteren Beispiele für FED Content Elements wäre ich auch sehr interessiert!

Momentan nutze ich wec_contentelements.

Lukas am 19. März 2012 um 16:05

@Lukas: http://www.fedext.net

fff am 22. März 2012 um 10:15

@Tim: XML-Strukturen in einem Datenbank-Feld zu speichern ist gängige Praxis in vielen CMS/CRM Systemen und v.a. vom Performance-Aspekt bei Hochlast-Systemen völlig in Ordnung. Relationale DBs schön und gut, aber in der Praxis stossen diese häufig an ihre Grenzen. Normalisierung ja, aber nicht nur um der Theorie willen oder um ein akademische Ideal zu erreichen.

fff am 22. März 2012 um 10:18

@fff: Beim Thema XML in der DB möchte ich Dir nicht zustimmen. Vom reinen Performance-Aspekt der DB her mag es stimmen was Du sagst. Aber performancetechnisch und vor Allem vom Programmier-Overhead her finde ich es schon äußerst müßig, für simple Eigenschaften, die auch direkt als DB-Feld zurück kommen könnten, eine weitere XML-Parser-Instanz bemühen zu müssen. Wenn ich Code-Fehleranfälligkeit, Stundensätze, Wartbarkeit und so weiter zumindest bei nicht extrem (!) großen Sites dem Gewinn an DB-Performance gegenüberstelle, dann finden sich sicher bessere Wege, als eine relationale Datenbank zum Speichern von XML in einem Feld zu verwenden.

Gut, so pauschal sollte ich das auch nicht sagen, denn es gibt immer Anwendungsfälle, bei denen es sinnvoll ist. Aber man sollte sich die Entscheidung da eben nicht zu leicht machen. In den meisten Fällen finde ich schon, dass die Kontra-Argumente überwiegen.

Arne am 01. April 2012 um 03:01

Mir stellt sich die Frage, ob es ein Unterschied gibt, wenn man seine Typoscript-Objekte über page.10.variables dem Fluid-Template hinzufügt oder direkt im Fluid-Template über angibt. Gibt es Unterschiede, welche Methode ist besser? Wenn es keine Unterschiede gibt, dann finde ich das über den ViewHelper cObject angenehmer, da man bei Änderungen nicht immer ins Typoscript muss.

Würde mich freuen, falls jemand dazu eine Antwort parat hat.

Philip am 04. Juni 2012 um 23:00

über
[…]
f:cObject typoscriptObjectPath=“lib.navigation_tmenu“
[..]
angibt.
—-
sollte das heißen 😉

Philip am 04. Juni 2012 um 23:01

Take care to use f:format.raw to output TypoScript defined or rendered objects. This ensures that elements like the HTML content element are left alone and are not parsed with the default parseFunc.
I had trouble getting a canvas element to render properly when using f:format.html. Using f:format.raw solved the issue.

Michiel Roos am 04. Februar 2013 um 09:47

Wie Michiel Roos schon geschrieben hat: Der eingesetzte Helper f:format.html ist falsch, mindestens bei mir auf meiner lokalen 6.0 Installation. Es muss so heissen:

{content}

Thomas am 14. Februar 2013 um 21:34

Danke für dieses Tutorial. Hat mir sehr weitergeholfen. In Deinem Snippet checkst Du mit das Submenü ab. Leider funktioniert das ganze bei mir nicht. Meines Wissens können doch nur Zahlen abgefragt werden. Wie genau lässt Du denn das {submenu} befüllen?

Pocoloco am 09. April 2014 um 17:47
Trackbacks & Pingbacks

[…] Templating 3.0 mit TYPO3 – FLUIDTEMPLATE (Teil 1) Es ist keine Installation nötig, man kann es direkt per TypoScript initialisieren: Hiermit haben wir dem System gesagt, dass das Template my_template.html genutzt werden soll. Wie üblich, werden verschiedene Elemente des Templates im TypoScript … Read more on TYPO3 News Blog (Blog) […]

Pingback von CosmoShop bietet seinen Anwendern ab sofort die neuen gesetzeskonformen … › Vorlagen Templates und Themes am 20. März 2012 um 00:37

[…] Im ersten Teil bin ich auf die Einbindung des FLUIDTEMPLATEs eingegangen, heute will ich speziell den Content-Bereich eines Templates eingehen. […]

Pingback von Templating 3.0 mit TYPO3 – backend_layout (Teil 2) | TYPO3 Blogger am 20. März 2012 um 21:10

[…] […]

Pingback von Was ist TemplaVoila und wie genau funktionierts. Ein Beispiel mit allen Templates - Seite 4 am 09. Oktober 2012 um 16:13

[…] Templating 3.0 mit TYPO3 – FLUIDTEMPLATE, Teil 1 […]

Pingback von Extension-Entwicklung mit TYPO3 Extbase & Fluid: Teil 7 - typoblog am 07. Juli 2014 um 16:41

[…] […]

Pingback von HTML5 Template mit Fluid am 25. September 2014 um 21:27

Kategorien

Archiv