Bearbeiten von „Typo3 - Templates mit Fluid“

Fluid soll dafür sorgen, daß die Ausgabe Logik mit ins Template kommt. Dadurch soll das Arbeiten übersichtlicher werden.
== Links ==
http://blog.sbtheke.de/web-development/typo3-verschiedene-seiten-templates-mit-fluid-und-be-layout

http://t3n.de/magazin/seitentemplates-fluid-226788/

[[TYPO3 mit Fluid - komplettes Beispiel]]


== Fluid Quickstart ==
=== Vorbereitung ===
Extensions fluid und extbase müssen installiert sein.

== Einführung in Fluid Templates ==
* Bisher nur für Extensions
* Ab TYPO3 4.5 FLUIDTEMPLATE TypoScript-Objekt. Dieses steht für Templates zur Verfügung und nutzt im Hintergrund das neu eingeführte Fluid-Standaloneview.

=== Unterschiede in der Vorgehensweise ===
==== Old School mit Markern und Subparts ====

HTML:
<pre>
<!-- ###DOCUMENT begin -->
<div id =“content“>
###CONTENT###
</div>
<!-- ###DOCUMENT end -->
</pre>

TypoScript:
<pre>
page = PAGE
page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/site/template/tpl_main.html
	workOnSubpart = DOCUMENT
	marks {
		CONTENT < styles.content.get
...
</pre>

==== Mit Fluid ====
HTML-Template mit Fluid Variable "content"
<pre>
<div id =“content“>
    {content}
</div>
</pre>


TypoScript mit Fluidtemplate-Objekt statt Template-Objekt

<pre>
page = PAGE

page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/templates/fluid/1col.html
  partialRootPath = fileadmin/templates/fluid/partials/
  layoutRootPath = fileadmin/templates/fluid/layouts/
  variables {
    content < styles.content.get
    content.select.where = colPos = 0
  }
}
</pre>

=== Formatoptionen in Fluid ===
Im Beispiel oben wird einfach der '''Inhalt der Datenbank''' ausgegeben, ohne die Formatierung über css_styled_content. Dies kann man jetzt direkt im Template regeln. Im Fluidtemplate kann man verschiedene Optionen mitgeben. Dabei bedient sich fluid der Punktschreibweise. Mit '''f:format.html''' wird der '''Inhalt als HTML''' ausgegeben.
<pre>
<div id =“content“>
<f:format.html>{content}</f:format.html>
</div>
</pre>

=== Seiteneigenschaften ausgeben ===
Die Seiteneigenschaften (uid, title etc.) können über das data Array abgerufen werden:

 UID: {data.uid}, Titel: {data.title}
 Alle Eigenschaften: <f:debug>{data}</f:debug>

=== Conditions / Bedingungen ===
In Fluid kann man mit dem If-ViewHelper Bedingungen für die Ausgabe setzen:
<pre>
<f:if condition="{data.layout}==1">
    <f:then>
        Layout-Feld steht auf dem Wert "Layout 1"
    </f:then>
    <f:else>
        Layout-Feld steht NICHT auf dem Wert "Layout 1"
    </f:else>
</f:if>
</pre>

=== TypoScript Objekte einbinden ===
==== TypoScript Objekte anzeigen ====
Bei Marker-Templates mußte man im TypoScript Objekte einem Marker oder Subpart zuweisen. In Fluid kann man mit dem '''CObject-ViewHelper''' direkt aus dem Template auf beliebige TypoScript Objekte zugreifen.

TypoScript
<pre>
lib.test1 = TEXT
lib.test1.value = Aus dem TypoScript!
</pre>

HTML
<pre>
<f:cObject typoscriptObjectPath="lib.test1" />
</pre>
==== Übergabe von Content an TypoScript ====
Man kann vor der Ausgabe eines TypoScript Objektes auch Inhalt an dieses senden.
<pre>
lib.test2 = IMAGE
lib.test2 {
	file = GIFBUILDER
	file {
		XY = 300,30
		backColor = #cc0000
		10 = TEXT
		10.text.current = 1
		10.fontColor = #ffffff
		10.offset = 10, 25
	}
}
</pre>
<pre>
<f:cObject typoscriptObjectPath="lib.test2">Das wird als Bild gerendert</f:cObject>
</pre>

Dazu wird mittels der stdWrap-Eigenschaft „current = 1“ Inhalt an das TS Objekt geschickt. Im Beispiel wird der Text innerhalb des typoscriptObbjectPath Tags an das Gifbuilder Objekt gesendet.

== Layout und Partial ==

Falls das Template sich wiederholende oder besonders komplexe Elemente enthält, können diese in ein sogenanntes Partial ausgelagert werden. Diese müssen in eigenen HTML-Dateien in dem Ordner liegen, der im FLUIDTEMPLATE-Objekt mit dem partialRootPath-Attribut beschrieben wurde. Ein solches Partial kann im eigentlichen Template mit dem 
 <f:render>
ViewHelper angesprochen werden (wichtig: Das Partial muss ohne Dateiendung angegeben werden):
<pre>
<div id=“search“>
  <f:render partial=“search“ />
</div>
</pre>

Über den <f:render>-ViewHelper können auch Layouts angesprochen werden; deren Verwendung macht allerdings nur Sinn, wenn innerhalb derselben Seite mehrere Fluid-Templates zum Einsatz kommen sollen.

== TypoScript-Optionen ==

TypoScript-Optionen, die mit dem Content-Objekt FLUIDTEMPLATE möglich sind.

Auf "file", "layoutRootPath" und "partialRootPath" können zudem stdWrap Eigenschaften angewendet werden.

<pre>
Option	Bemerkung
file	Pfad zur Templatedatei (string + stdWrap)
format	Format – Default ist HTML
extbase. pluginName	Festlegen des Plugin-Namens
extbase. controllerExtensionName	Festlegen des Extension-Namens
extbase. controllerName	Festlegen des Controller-Namens
extbase. controllerActionName	Festlegen des Action-Namens
layoutRootPath	Pfad zu den Layout-Dateien (string + stdWrap)
partialRootPath	Pfad zu den Partial-Dateien (string + stdWrap)
variables	Array von Content-Objekten, auf die im Template via Schlüssl zugegriffen werden kann
stdWrap	StdWrap-Eigenschaften auf die gesamte Ausgabe anwenden
</pre>

== Fluid Snippets ==

== Fluid Templates mit BE-Auswahl ==
Dafür wird das File über ein Case Objekt statt direkt ausgewählt.

=== BE Layouts erstellen ===
* Ordner erstellen
* BE Datensätze für jedes Layout erstellen
* PageTS
<pre>
# Speicherseite der gridlayout Datensätze
TCEFORM.pages.backend_layout.PAGE_TSCONFIG_ID=29
TCEFORM.pages.backend_layout_next_level.PAGE_TSCONFIG_ID=29

# Optional: verstecken des "kein Layout" Labels
TCEFORM.pages.backend_layout_next_level.removeItems= -1
TCEFORM.pages.backend_layout.removeItems= -1

# Benennen der Labels
## "empty" label
TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout
TCEFORM.pages.backend_layout.altLabels.1 = 1 Spaltig
TCEFORM.pages.backend_layout.altLabels.2 = 2 Spaltig
TCEFORM.pages.backend_layout.altLabels.3 = Nur Inhalt
</pre>