Creare un sito con fluidpages

Da quando TYPO3 4.5 ha introdotto la grid (template layout) come elemento per estendere le vecchie 4 colonne si è aperta una nuova possibilità di personalizzare il backend. Però, un pò per la presenza del più flessibile Templavoilà, un po per la complessità pochi le hanno usate.

Oggi rientrano in corsa, non come backend layout, ma come fluidpages. Questa estensione fa parte del mondo FEDEXT, e permette di personalizzare le pagine proprio come faceva templavoilà.



Ecco come facilmente possiamo creare un template nuovo per il nostro sito:

Struttura

La struttura si basa sulla struttura dei template di fluid (in realtà è un template di fluid esteso):

Nella cartella Layouts vanno messi i layouts che vengono usati, i partial li vediamo dopo, e nella cartella Page dentro a Templates i template di Fluid.

Il layout sarà una pagina HTML come questa:

1. {namespace v=Tx_Vhs_ViewHelpers}
2. <f:layout name="LayoutForNature2Column"/>
4. <v:page.header name="fluitutorialheader">
5.     <f:render section="Resources" optional="TRUE" arguments="{_all}"/>
6. </v:page.header>
7. <div id='background'>
8.   <div class="menu">Qui ci metti il menu</div>
9.   <div class="colonnaDiSinistra"><v:page.content.render column="0"/></div>
10.   <div class="colonnaPrincipale"><v:page.content.render column="1"/></div>
11.   <div id="footer">Footer</div>
12. </div>
    
    
    
    

Il layout quindi rappresenta l'intelaiatura del sito (o del template) e può essere condiviso da più template.
come vedete dal nome io ho chiamato il mio layout "LayoutForNature2Column.html" e l'ho messo nella cartella Layouts.
Il passo successivo è quello di creare il template vero e proprio, ecco un template:

1. {namespace v=Tx_Vhs_ViewHelpers}
2. {namespace flux=Tx_Flux_ViewHelpers}
3. <f:layout name="LayoutForNature2Column"/>
4. <div xmlns="http://www.w3.org/1999/xhtml" lang="en"
5.        xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
6.        xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
7.        xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
10.     <f:section name="Configuration">
11.         <flux:flexform id="nature2column" label="Nature 2 Column">
12.             <flux:flexform.grid>
13.                 <flux:flexform.grid.row>
14.                     <flux:flexform.grid.column colPos="0" name="Left Column"/>
15.                     <flux:flexform.grid.column colPos="1" name="Main Column"/>
16.             </flux:flexform.grid>
17.         </flux:flexform>
18.     </f:section>
20.     <f:section name="Resources">
21.         <f:render partial="Resources" section="Resources"/>
22.     </f:section>
23. </div>

Come vedete, anche questo è un template in formato fluid ed usa due namespace di viewhelpers: vhs e flux, entrambi creati in FEDEXT.

La sezione Configuration che inizia alla riga 10 è la griglia che definirà la struttura della pagina nel backend e con che colonna verranno salvati nella tabella tt_content.
Alla riga 11 è necessario definire l'id del template (univoco) e il titolo che sarà mostrato nella lista dei templates disponibili.
Dalla riga 12 alla 16 viene, invece, definita la tabella con le colonne e le righe, in questo caso semplicemente una riga con 2 colonne. Si può però creare una struttura molto più complessa con n righe, n colonne, colspan e rowspan.

Alla riga 20 invece viene creata la sezione Resources che era poi richiamata alla riga 5 del layout, e viene usato lo helper di Fluid render per recuperare il contenuto del file partial Resources.html che si trova dentro la cartella Partials.

Ritornando, invece, al layout alla riga 9 e alla riga 10 vengono recuperati i contenuti della colonna 0 e della colonna 1.

Per finire basta soltanto un piccolo typoscript da inserire ed il gioco è fatto:

   0:  #include basic path for dynamic backend template
   1:  plugin.tx_fed {
   2:   page.NatureTheme {
   3:    templateRootPath = fileadmin/Resources/Private/Templates/
   4:    partialRootPath = fileadmin/Resources/Private/Partials/
   5:    layoutRootPath = fileadmin/Resources/Private/Layouts/
   6:   }
   7:  }
   8: 
   9:  plugin.tx_flux.view.widget.Tx_Fluid_ViewHelpers_Widget_PaginateViewHelper.templateRootPath < plugin.tx_fed.page.fluidpages.templateRootPath
  10:  plugin.tx_news.view.widget.Tx_Fluid_ViewHelpers_Widget_PaginateViewHelper.templateRootPath < plugin.tx_fed.page.fluidpages.templateRootPath

Ed infine, come per templavoilà devo rendere la pagina e lo faccio usando il plugin di fluipages:

   0: page = PAGE
   1: page {
   2:  typeNum = 0
   3: 
   4:  10 = USER
   5:  10.userFunc = tx_extbase_core_bootstrap->run
   6:  10.extensionName = Fluidpages
   7:  10.pluginName = Page
   8: }

et voilà, il vostro sito è già funzionante, ora andate nel backend e nel tab appearance trovate la scelta del layout, sia per la pagina in cui siete, sia per le eventuali sottopagine.