Flux Template engine.
Heute will ich, meine erste Erfahrung mit Typo3 Flux beschreiben und ein Page Layout anlegen.
Als erstes soll ein Seitenlayout erstellt werden.
Dazu verwende ich den Extension Builder um eine Extension zu erstellen. So wie ich die Flux Extension verstanden habe brauchen wir eine Anbieter Extension wo die Layouts hinein kommen.
In unserem Fall nenne ich die Anbieter Extension providertemplate.
Jetzt werden alle benötigen Felder im Extension Builder ausgefüllt.
Extension Key;providertemplate.
Vendor:sus.
Als nächstes installierte ich in der Typo3 Installation die benötigten Extensions.
-flux
-fluidcontent
-fluidpages
-vhs
Nicht vergessen das statische Template der Anbieter Extension einzubinden.
Die Typoscript Konfiguration die der Extension Builder angelegt hat kann so übernohmen werden.
Mit diesem Schritt sind die Vorbereitungen abgeschlossen.
Und jetzt geht es an die eigentliche Arbeit.
1. benötigen wir einen Ordner Page im Ordner Templates in unserer Anbieter/provider extension.
2. Col2.html in den schon vorhandenen Ordner Layouts anlegen.
Die Datei hat foldenden Inhalt:
<f:layout name="Col2"/>
<f:render section="Col1"/>
<f:render section="Col2"/>
Nun legen wir noch eine Col2.html Datei in den Ordner Page an mit folgendem Inhalt:
//Zuerst das XML Shema einbinden
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
// Der Layout Name muss der gleiche sein den wir voher vergeben haben
<f:layout name="Col2"/>
// Hier kommt die Configuration für das Backend hin was nachher auf der
Root seite unter Edit page Layout zu finden sind.
<f:section name="Configuration">
<flux:form id="Col2" label="Zwei Saplten Template">
<!-- Input field for Fluid variable 'pageClass' -->
<flux:field.input name="settings.pageClass" default="some-css-class"/>
</flux:form>
</f:section>
// In Backend Layout das Feld Left
<f:section name="Col1">
<!-- Render colPos=1 in this section -->
<div class=“col1“> <v:content.render column="1"/></div>
</f:section>
in BackendLayout das Feld Normal
<f:section name="Col2">
<!-- Render colPos=0 in this section -->
<div class=“col2“> <v:content.render column="0"/></div>
</f:section>
</div>
Dieser Vorgang kann jetzt öfters wiederholt werden, um weitere Layouts anzulegen.
Nach dem jetzt die Templates angelegt sind muss noch in die ext_table.php der Ordner Page angemeldet werden.
Am besten gleich den gesamten Inhalt löschen, den der wird nicht mehr benötigt.
Und fügen dann
t3lib_extMgm::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'Provider Tempaltes');Tx_Flux_Core::registerProviderExtensionKey('Sus.providertemplate', 'Page');
ein Sus ist unser vendor den wir beim Extensionbuilder vergeben haben und Providertemplate ist unser extension key.
Alle Infos habe ich von http://fluidtypo3.org/
Viel Spass weiterhin mit TYPO3 und Flux
Estefan Huerta Barroso
