• DE

vimeo.com/135645158

-> einige ViewHelper als Beispiele für das FrontEnd

-> f:if
-> docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/If.html
-> mit einfachen Beispielen -> Simple examples -> und komplexen konditionalen statements -> Complex conditional statements

-> als Beispiel -> wenn das aside-Element rechts neben dem Hauptelemnt leer ist -> soll das Hauptelement nach rechts erweitert werden

-> hier das aktuelle DefaultTemplate.html -> ohne conditionalem Fluid

<f:layout name="DefaultLayout" />


<f:section name="Main">
    <div class="main-container">
        <div class="main wrapper clearfix">

            <article>
    <f:format.raw>{contentMain}</f:format.raw>
            </article>

            <f:format.raw>{contentAside}</f:format.raw>

        </div> <!-- #main -->
    </div> <!-- #main-container -->
</f:section>

-> hier das neue DefaultTemplate.html -> mit conditionalem Fluid

<f:layout name="DefaultLayout" />
<f:section name="Main">
<div class="main-container">
    <div class="main wrapper clearfix">
        <f:if condition="{contentAside}">
            <f:then>
                <article>
            </f:then>
            <f:else>
                <article class="wide">
            </f:else>
        </f:if>
            <f:format.raw>{contentMain}</f:format.raw>
        </article>

        <f:format.raw>{contentAside}</f:format.raw>

    </div> <!-- #main -->
</div> <!-- #main-container -->
</f:section>

-> Erklärungen zum DefaultTemplate.html -> mit conditionalem Fluid
-> <f:if condition="{contentAside}"> -> bedeutet: wenn die Variable "contentAside" irgendeinen Wert hat
-> <f:then> <article> -> bedeutet: gib das Article-Element aus
-> <f:then> <f:else> <article class="wide"> -> bedeutet: gib das Article-Element mit einer zusätzlichen CSS-Klasse "wide" aus
-> die Klasse article.wide -> in die main.css -> und width = 100%
-> im firebug hat article schon die css-Klasse wide

-> ein anderer Fluid-ViewHelper
-> der f:debug viewHelper -> damit lassen sich Werte von Varablen anzeigen -> aber auch alle Varablen mit {all}
-> <f:debug>{all}</f:debug>
-> bei der Ausgabe wird ein "Extbase Variable Dump" ausgegeben
-> darin ist auch das data array -> darin sind unterschiedliche daten -> Klick auf Button!
-> das data array kann auch nur ausgegeben werden -> <f:debug>{data}</f:debug>


-> data -> z.B. -> uid -> das ist die pageID einer Seite im Seitenbaum ->
-> subtitle -> Untertitel einer Seite
-> crdate -> create date einer Seite -> gibt nur einen Timestamp aus -> der muß noch in eine lesbare Form umgesetz werden


-> diesen vieHelper in dieser Form z.B. -> auf eine Seite geben:

<p>Diese Seite wurde angelegt am: <f:format.date format="d.m.Y, H:i">{data.crdate}</f:format.date> Uhr.<p>

-> {data.crdate} ist die Variable für den Timestamp des create dates
-> mit format="d.m.Y, H:i werden die gewünschten Infos aus dem Timestamp gezogen -> das ist d=day m=month ,=Komma Y=Year H=Hour i=minutes
-> z.B.: 28.02.2015, 22:02 Uhr
-> <:format.date> </d:format.date> ist der viewHelper