Bearbeiten von „Fluid - Snippets“

== Links ==

http://wiki.typo3.org/Category:De:fluid

http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/Index.html

== Debugging ==
 <f:debug title="band">{band}</f:debug>
 <f:debug>{_all}</f:debug>

== Lokalisierung - Mehrsprachigkeit ==
 <f:translate key="tx_gbbandpass_domain_model_band.name" />
 Tool zum erstellen der Lokalisierungsdateien (Sprachdateien): http://lbrmedia.net/tools/xliff_translation_file_erstellen/xlfC/Pi1/

== Links erzeugen ==
http://wiki.typo3.org/De:ViewHelper/Link
=== Link auf Action Controller z.B. Einzelansicht (show) - f:link.action ===
 <f:link.action action="show">action link</f:link.action>
 <f:link.action action="show" arguments="{band : band}"> {band.name}</f:link.action>

=== E-Mail Link - f:link.email ===
 <f:link.email email="foo@bar.tld" />

=== Externer Link - f:link.external ===
Standard Scheme ist http es gehen aber auch andere z.B. ftp:
 <f:link.external uri="typo3.org" defaultScheme="ftp">external ftp link</f:link.external>

=== Seitenlink - f:link.page ===
 <f:link.page pageUid="1" additionalParams="{foo: 'bar'}">page link</f:link.page>

=== Link Beispiele ===
==== Springen zu einem Anchor-Punkt====
Section entspricht der ID eines Divs
 <f:link.page section="frame">Top</f:link.page>
====Link auf eine interne Seite====
 <f:link.page pageUid="3">Kontakt</f:link.page>
==== Link mit Parameter Übergabe ====
 <f:link.page pageUid="3"  additionalParams="{name: 'wert'}">Kontakt</f:link.page>
====Link auf eine externe Adresse====
 <f:link.external url="http://www.typo3.org" target="_blank">Link zy TYPO3</f:link.external>
====Link auf eine E-Mail-Adresse====
 <f:link.email email="adresse@domain.com" />

== Bilder ==
 <f:image src="EXT:myext/Resources/Public/typo3_logo.png" alt="alt text" maxWidth="200"/>

==== Beispiele für Bilder einer eigenen Extension in Fluid ====

'''Beispiel''' (Quelle: http://keinerweiss.de/755-typo3-fal-in-einer-eigenen-extbasefluid-extension-einsetzen.html 2014/11)

Hier nutzt man den '''File Abstraction Layer (FAL)'''. Ausgehend von einer mit dem Extension Builder erzeugtem Modell mit Typ Image ein paar Schnipsel für die Ausgabe im template (list.html)
<pre>
Mein Model:                       root
Das FileReference Model:          root.image
Der sys_file_reference Datensatz: root.image.originalResource
Der sys_file Datensatz:           root.image.originalResource.originalFile

<f:for each="{roots}" as="root">
Orginal-Attribute:<br />
Dateiname:    {root.image.originalResource.originalFile.name}<br />
Titel:        {root.image.originalResource.originalFile.title}<br />
Beschreibung: {root.image.originalResource.originalFile.description}<br />
Alt-Text:     {root.image.originalResource.originalFile.alternative}<br />
UID:          {root.image.originalResource.originalFile.uid}<br />
Pfad:         {root.image.originalResource.publicUrl}<br /><br />

Referenz-Attribute:<br />
Titel:        {root.image.originalResource.title}<br />
Beschreibung: {root.image.originalResource.name}<br /><br />

Ausgabe als Bild:<br />
<f:image src="{root.image.originalResource.originalFile.uid}" alt="" /><br />
<f:image src="{root.image.uid}" alt="" treatIdAsReference="TRUE" /><br /><br />

Als Link:<br />
<a href="{file.originalResource.publicUrl}">{file.originalResource.title}</a><br /><br />

<f:for each="{root.files}" as="file">                           
        <p>{file.originalResource.originalFile.title}</p>
</f:for>

</f:for>
</pre>

== Conditions, If-Else-Bedingungen in Fluid Templates ==
http://www.extbasefluid.com/fluid/bedingungen-ifelse/

===Beispiel===

'''TypoScript'''
<pre> 
partialAuswahl = TEXT
partialAuswahl.value = 1

# FLUID Template definieren
fluidTemplate = FLUIDTEMPLATE
fluidTemplate {
  ...
  variables {
    partial < partialAuswahl
  }
}
</pre>
'''Template (view-helper)'''
Fluid kann im Moment nur nummerische Werte überprüfen, deswegen partialAuswahl.value = 1 und {partial} == 1

<pre>
<f:if condition="{partial} == 1">
    <f:then>
      Partial {partial} ausgegeben.
    </f:then>
  
    <f:else>
        Keine Partial-Angabe gefunden
    </f:else>
</f:if>
</pre>

=== Template Variable mit String vergleichen ===
http://www.typo3lexikon.de/typo3-tutorials/extensions/fluid/fluid-tipps-und-tricks.html

Funktioniert im Moment (2014) noch nicht:
<pre>
<f:if condition="{data.ctype} == 'table'">
 {data.bodytext}
</f:if>
</pre>

So geht's:

Über einen Alias
<pre>
<f:alias map="{myText: 'table'}">
 <f:if condition="{data.ctype} == {myText}">
 {data.bodytext}
 </f:if>
</f:alias>
</pre>

Über ein Array (die beiden Operatoren werden in ein Array konvertiert, welches Fluid interpretieren kann)
<pre>
<f:if condition="{0:data.ctype} == {0:'table'}">
 {data.bodytext}
</f:if>
</pre>
Die Array-Lösung hat auch noch den Vorteil, dass man mehrere Werte gleichzeitig überprüfen kann:
<pre>
<f:if condition="{0:data.ctype,1:data.hidden,2:data.deleted} == {0:'table',1:'0',2:'0'}">
 {data.bodytext}
</f:if>
</pre>

=== Switches (ab Typo3 6.2 ===
<pre>
<f:switch expression="{person.gender}">  
   <f:case value="male">Mr.</f:case>  
   <f:case value="female">Mrs.</f:case>  
   <f:case default="TRUE">Mrs. or Mr.</f:case> 
</f:switch>
</pre>

== RTE Inhalte Rendern ==
 <f:format.html>{content.bodytext}</f:format.html>
Funktioniert aber nicht bei allen CTypes, weil die entsprechenden CSS_Styled_Content Funktionen nicht ausgeführt werden
<pre>
<f:if condition="{content.ctype}">
 <f:cObject typoscriptObjectPath="tt_content.{content.ctype}.20" data="{content}" />
</f:if>
</pre>
Beachtet aber, dass Ihr für diese Lösung auch alle benötigten tt_content-Felder in Eurem Model definiert habt.

== CSS und JS einbinden ==
Eventuell wäre hier TypoScript vorzuziehen.
=== CSS und JS Dateien über Fluid ===
 <link rel="stylesheet" href="{f:uri.resource(path:'Css/bootstrap.css')}">
 <script type="text/javascript" src="{f:uri.resource(path:'Js/jquery.shuffle.js')}"></script>
Funktioniert nicht für Dateien in fileadmin. Der Pfad bezieht sich auf 
 typo3conf/ext/myExtKey/Resources/Public/

=== Inline JS über Fluid ===
Wrap über CData:

<pre>
<![CDATA[
...
]]>
</pre>

Wrap über Fluid cdata ViewHelper
<pre>
<f:format.cdata>
  <script type="text/javascript">
    var myLayout;
    $(document).ready(function() {
      myLayout = $('body').layout({
        north__size: 27,
        north__initClosed: false,
        north__initHidden: false,
        center__maskContents: true // IMPORTANT - enable iframe masking
      });
    });
  </script>
</f:format.cdata>
</pre>

== Schleifen ==
=== 4 Spalten mit Modulo ===
<pre>
<f:for each="{images}" as="image" iteration="iteration">
     <f:image src="upload/tx_myextension/{image.source}" width="200" height="150" alt="Mein Bild {image.caption}" />
     <f:if condition="{iteration.cycle}%4==0"><br/></f:if>
</f:for>
</pre>

== TypoScript in Fluid ==
==== Texte direkt aus dem TypoScript Objekt holen====
TypoScript
 inhaltSpalteNormal < styles.content.get
HTML
 <f:cObject typoscriptObjectPath="inhaltSpalteNormal" />

====Texte direkt aus dem TypoScript Objekt holen kombiniert====
'''TypoScript'''
<pre>
meinText = TEXT
meinText {
  wrap = <p>Hier steht der Text aus dem Template:&nbsp;<b>"|"</b></p>
  # Ohne diese Einstellung würde die | nicht
  # mit dem Text aus dem Template ersezt werden
  current = 1
}
</pre>

==== TypoScript holen ====
Hier gibt es zwei Varianten. Die eine per data-Attribut den Text übergeben und die Andere
zwischen den f:cObject-Tags.
 <f:cObject typoscriptObjectPath="meinText" data="Das ist der Text aus dem Template, er wird ersetzt"/>

oder
<pre>
<f:cObject typoscriptObjectPath="meinText">
  Platzhaltertext
</f:cObject>
</pre>

===Inline Notation===

'''TypoScript'''
<pre>
anredeHerr = TEXT
anredeHerr.value = 1

# FLUID Template definieren
fluidTemplate = FLUIDTEMPLATE
fluidTemplate {
  ...
  variables {
    anredeHerr < anredeHerr
  }
}
</pre>

'''Template (View-Helper)'''
<pre>
<p>
  Sehr geehrte{f:if(condition: '{anredeHerr}', then: 'r Herr', else: '&nbsp;Frau')} XY, <br />
  wir m&ouml;chten Ihnen mitteilen, dass...
</p>
</pre>

== Anderes ==
=== Weitere Beispiele ===
Quellen:

http://itype3.blogspot.de/2013/03/fluid-template.html


====Unix Timestamps als Datum anzeigen====
 <f:format.date = format="d.m.Y - H:i:s">@1362784580</f:format.date>

====Text auf eine gewisse Länge abschneiden====
append wird dem abgekürztem Text am Ende eingefügt, wie z.B. ein Leerzeichen und drei Punkte um zu symbolisieren, dass der Text abgekürzt wurde.
 <f:format.corp maxCharacters="50" append="&nbsp; ...">Hier folgt der TEXT</f:format.corp>


== Kommentare in Fluid ==
Comment-View-Helper

Man kann im Fluid-Template Kommentare hinterlassen, ohne dass diese im Frontend ausgegeben werden.
<pre>
<f:comment>
    Das ist ein Comment für den Entwickler, der im Quelltext
    im Gegensatz zum HTML-Comment nicht zu sehen ist
</f:comment>
</pre>