Toute l'actualité du CMS TYPO3, typoscripts, extensions, liens et téléchargements
Nous sommes le 18/05/2012
Typoscript 2
Oui, beaucoup ne maitrisent pas le typoscript 2 et comme on dit, "la TSREF est ton amie". Il va donc falloir apprendre le typoscript 2 mais il semblerait que ce soit plus simple. Bertrand Keller a rédigé un billet à ce sujet. Vous pouvez le consulter sur son blog.
Avec la version 2, plus de HMENU, de TMENU ni de GMENU. Il n'y a qu'un seul type de menu chargé de collecter les informations à afficher sur le front office. Pour voir à quoi ressemble le Typoscript 2, ouvrez le fichier situé dans Packages/Sites/PhoenixDemoTypo3Org/Resources/Private/TypoScripts/homepage avec votre éditeur préféré.
Ce fichier configure l'affichage du site de démonstration.
Pas de cours de typoscript 2 ici. Notez que la page est partagée en trois parties :
- body pour l'appel du template sous Fluid
- head pour charger les CSS et les fichiers javascript
- parts pour les menus par exemple
/**
* Root TypoScript template for the TYPO3 Phoenix Demo Site
*/
page = Page
page.body = Template
page.body.source = 'resource://PhoenixDemoTypo3Org/Private/Templates/Page/Default.html'
page.body.sectionName = "body"
page.head {
stylesheets {
typo3Stylesheet = Stylesheet
typo3Stylesheet.source = 'resource://PhoenixDemoTypo3Org/Public/StyleSheets/stylesheet.css'
typo3Stylesheet.media = 'screen'
}
}
# Other parts of the page:
page.parts {
breadcrumbMenu = BreadcrumbMenu
firstLevelMenu = Menu
firstLevelMenu {
entryLevel = 2
}
secondLevelMenu = Menu
secondLevelMenu {
entryLevel = 2
maximumLevels = 3
}
}
Dans le gabarit html, le menu est affiché depuis l'appel d'un marqueur spécifique :
<div id="navigationSecondLevelMenu">
{parts.secondLevelMenu}
</div>
A partir de là, on se demande comment définir le HTML à afficher pour les menus.
En fait, les objets typoscript sont basé sur Fluid.
Le gabarit est situé dans le dossier suivant : Packages/Application/TYPO3/Resources/Private/Templates/TypoScriptObjects
Il s'agit du fichier Menu.html.
En voici le contenu :
{namespace typo3=F3\TYPO3\ViewHelpers}
<f:render section="itemList" arguments="{items: items}" />
<f:section name="itemList">
<ul>
<f:for each="{items}" as="item">
<li class="{f:if(condition: item.state.active, then: 'active')}">
<f:link.action package="TYPO3" controller="Node" arguments="{node: item.node}">{item.label}</f:link.action>
<f:if condition="{item.subItems}">
<f:render section="itemList" arguments="{items: item.subItems}" />
</f:if>
</li>
</f:for>
</ul>
</f:section>
Pour être affiché, ce gabarit fait appel au viewHelper <f:render>.
Voici la ligne :
<f:render section="itemList" arguments="{items: items}" />
Il reçoit en argument un tableau d'éléments renvoyés par l'objet typoscript.
Ensuite, la syntaxe de Fluid fait le reste dans la section intitulée "itemList".
On liste ensuite les items du tableau, donc les éléments du menu et on ajoute au passage une classe CSS "active" si l'état du lien est actif.
On liste également les éléments enfants, ici subitems. Les liens sont générés grâce au viewHelper <f:link> qui reçoit en argument l'id du node soit {node: item.node}
Conclusion
Voilà ce que je pouvais dire sur cette version "sprint release 4" de TYPO3 Phoenix. Ce n'est pas tant le front office qui impressionne mais plutôt toute la mécanique derrière TYPO3 Phoenix : FLOW3, Fluid, ExtJS, Content Repository... Les développeurs de la Core Team ont abandonné la norme JSR-283 pour créer une API qui s'en inspire. Ils ont également créé un système de template - Fluid - car aucun système existant ne répondait à leurs besoins. Tout ceci pour dire TYPO3 Phoenix est construit autour de technologies performantes et orientées objet. Ceci nous change beaucoup de la structure vieillissante de TYPO3 4.x même si FLOW3 a été porté via Extbase.
De nombreux concepts doivent être assimilés. Autant s'y mettre tout de suite pour ne pas rater la transition.
La prochaine version est prévue pour le 12 novembre 2010.
Ressources :
Ext Direct : http://www.sencha.com/products/js/direct.php
Aloha : http://aloha-editor.com/
TYPO3 Phoenix : http://flow3.typo3.org/typo3-phoenix/download/release-notes/sprint-release-4/