Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

Fr:Ts45min

From TYPO3Wiki
(Redirected from Fr:ts45min)
Jump to: navigation, search
Extension detail information
ts45min_fr
this introduction is to give you a comprehension of how TypoScript works.
documentation state publish document state list
licence OCL
forgeproject
mailinglist
usergroups list of usergroups forDevelopers, forBeginners
author(s) Ricol, Sylvain Kocet (Pyksel), Squalou, Xavier Perseguers, Francois Suter
TER category doc_tut
dependency

<< Back to Extension manuals page

[edit]


Reviews

  • by Xavier Perseguers: many typos have recently been added :-(,
  • by Francois Suter: some changes

Vue d'ensemble de TypoScript

Cette introduction de TypoScript est une première étape. La version actuelle est 0.5, ce qui signifie que nous sommes conscients qu'elle peut être améliorée. Mais nous pensons qu'elle est suffisamment complète pour aider certain d'entre vous. Nous comptons sur vous pour la compléter.

Les personnes suivantes ont fourni une contribution :

  1. Susanne Moog
  2. Daniel Brüßler
  3. Martin Holtz


Les personnes suivantes ont aidé aux indications, corrections, etc. :

  1. M4rtijn
  2. Kees van der Hall
  3. Xavier Perseguers
  4. et bien d'autres


Traduit en français par (ajouter votre pseudo) :

  1. Ricol
  2. Sylvain Kocet (Pyksel)
  3. Squalou

Needed changes (by Francois Suter)

notice - Note

French users: please add these into the manual before we can publish it

1) In the chapter "Présentation", the area #4 is said to be the "docheader". This is wrong (and is probably wrong in the English version too). I'm not sure how it's called actually, but it is not the docheader. The docheader appears at the top of area #3 and contains things like 3rd level navigation, shortcut icon, etc.

2) In the chapter "Arborescence des pages", point 6 in the numbered list, the word "tendez" should be "tentez" instead. In point 7, "repertoire" should be "répertoire".

3) In the chapter "Travailler avec du contenu", in the ordered list after "Figure 6", point 3 should end after "icônes" (strip the trailing ", ou"). Point 6 is wrong because it says the 3rd content element is hidden. This is not the case in the screenshot.
After "Figure 7", at the beginning of the second sentence, it should read "La seconde option est visible uniquement" instead of "La seconde option n'est visible uniquement".

4) In the chapter "Editer du contenu", the word "text" should be spelled "texte" in the first paragraph. In the first paragraph after "Figure 8", content element types "texte" and "texte avec image" are written in italics, where they are in bold in the rest of the document. At the end of the sentenced starting with "La sixième [6] icône" someone tried using the <u> tag which not supported and not recommended. Some other style of emphasis should be used.

5) In the chapter "Travailler avec des images", again content element tpyes "texte avec image" and "images seules" are in italics instead of bold.

6) In the chapter "Travailler avec des pages", 2nd paragraph before the end, there's a typo. "déplaceer" should read "déplacer". In the last paragraph, the second sentence begins with "Par inaccessible je n'entends pas une page d'erreur", which represents a change of style by being in the first person instead of being in the passive form. It would be better if it read "Par inaccessible, il ne faut pas entendre une page d'erreur".

7) In the chapter "Langues multiples / Site multilingue", there's a carriage return missing after the "Figure 20" caption.

Introduction

L'objectif de cette introduction n'est pas de se dire "Ca marche enfin !", mais "J'ai enfin compris comment ça marche !". En d'autres termes, cette introduction doit vous donner une compréhension de la façon dont TypoScript fonctionne. Quand on ne connait pas TypoScript on ajoute quelques propriétés arbitraires sur des objets, mais, pour quelqu'un qui connait TypoScript, il est clair qu'une telle pratique ne fonctionne pas ainsi. Lire la suite vous permettra par la suite d'économiser du temps. Le diagnostique et la compréhension des pannes sera facilité. Sans cela tout devient aléatoire.

Cette documentation est venue à la suite d'un petit atelier pour "TYPO3-User-Group Münster". Son objectif est de clarifier les relations de base du rendu. L'objectif de cette documentation est de ne pas avoir une installation de TYPO3 qui fonctionne, mais d'offrir une explication - comment ca fonctionne - à tous ceux qui ont installé TYPO3.

Configuration du BackEnd

TypoScript a de l'influence à beaucoup d'endroits différents. Si TypoScript est utilisé dans les champs User/Usergroup ou dans les champs page-typoscript, il affectera le rendu et le comportement des formulaires dans le backend. Le frontend est défini par un template en TypoScript. Ce document traite uniquement du rendu dans le frontend avec une utilisation générale du TypoScript.

Pré-requis

Nous supposons que le lecteur de cette documentation possède une installation standard de TYPO3 et qu'il connaît les opérations de base. La différence entre pages et éléments du contenu ne sera pas traitée ici. Nous supposons aussi que vous savez que le contenu d'une page est réuni par une combinaison d'éléments de contenus divers et que ces éléments de contenus sont stockés dans la table tt_content. Le champ "CType" dans la base de données permet de définir le type de contenu dont nous disposons. Selon le CTYPE utilisé, un certains nombre de données sont chargées.

Pour une meilleure compréhension de TYPO3 et du TypoScript il est important de savoir ce qu'il se passe dans la base de données. L'extension phpmyadmin permet de manière simple et intuitive d'avoir accès à la base de données depuis le backend et permettre d'avoir une vue d'ensemble sur les relations entre les pages, tt_content et le backend. Il est important de savoir que le PID (pour Paginer ID) est l'ID d'une page et l'UID (ID Unique) correspond à un enregistrement unique.

Pourquoi TypoScript ?

Strictement parlant, TypoScript est un langage de configuration. Nous ne pouvons pas programmer avec TypoScript mais il est possible d'effectuer une configuration très complète avec lui. Avec TypoScript, nous définissons le rendu du site Web. Nous définissons notre navigation, certains contenus fixes mais aussi la manière dont les différents éléments de contenu seront rendus sur une page.

TYPO3 est un système de gestion de contenus qui a pour but de séparer contenu et présentation. TypoScript permet de faire le lien entre contenu et présentation. Le contenu qui se trouve dans la base de données, est lu et préparé par TypoScript et rendu dans le frontend.

Pour effectuer ce rendu, il faut définir ce contenu et la manière dont il est rendu. Le "quoi" est contrôlé par le backend (l'endroit où les pages et les contenus sont générés). Le "comment" est contrôlé par TypoScript. Le "où" étant le frontend.

Avec TypoScript, nous allons définir la manière dont chaque élément de contenu sera rendu dans le frontend. Comme par exemple la manière dont une balise div contenant un élément ou un titre <h1> sera intégré.

TypoScript qui définit la manière dont les pages sont rendues, se trouve dans un template où le rootlevel du site est défini.

Rootlevel.png

Pour effectuer le rendu d'une page, TYPO3 parcourt l'arborescence pour trouver un template. Habituellement, il y a plusieurs templates. Pour l'instant, nous supposons que nous avons un seul template.

La syntaxe de Typoscript est très simple. Il y a les objets qui possèdent des propriétés. Ces propriétés possèdent des valeurs.Les objets et les propriétés sont séparés par un point ".".

La notion de gabarit (template)

Le terme gabarit (template) possède un double sens dans TYPO3. Nous avons le template HTML d'un côté qui est le squelette de présentation du contenu. De l'autre côté nous avons le template TypoScript qui peut être créé dans les pages.

Les erreurs rencontrées avec des gabarit (template) ressemblent à ceci :

No template found.png

"No template found" : Cette erreur apparaît si aucun gabarit (template) n'a été trouvé lorsque le rootlevel est activé dans l'arborescence.

The page is not configured.png

"The page is not configured" : Cette erreur apparaît lorsque le rootlevel est activé mais que l'objet PAGE n'a pas été trouvé.

Le code suivant permet de supprimer cette erreur :
TS TypoScript:
page = PAGE
page.10 = TEXT
page.10.value = Hello world

Typoscript n'est qu'un tableau

Le Typoscript est juste stocké à l'intérieur d'un tableau PHP (PHP-array). Il est ulilisé et analysé par différentes classes en fonction du type d'objet.
TS TypoScript:
page = PAGE
page.10 = TEXT
page.10.value = Hello world
page.10.wrap = <h2>|</h2>

sera converti dans le tableau PHP suivant :

PHP script:
$data['page'] = 'PAGE';
$data['page.'][10] = 'TEXT';
$data['page.']['10.']['value'] = 'Hello world';
$data['page.']['10.']['wrap'] = '<h2>|</h2>';

Lors du traitement, l'objet "PAGE" sera créé en premier et le paramètre $data['page'] sera assigné. L'objet "PAGE" cherchera ensuite toutes les propriétés qui le définisse. Dans ce cas, il trouvera seulement l'entrée numérique "10" qui devra être traitée. Un nouvel objet "TEXT" avec le paramètre $data['page."][10.] sera créé. L'objet "TEXT" connaissant le paramètre "value", il en prendra par conséquence la valeur. Tous les autres paramètres seront passés grâce à la fonction stdWrap ("TEXT" est implémenté de cette manière. Nous reviendrons en détail sur stdWrap par la suite). La propriété 'wrap' étant connue, le texte "Hello world" sera inséré à la place du pipe (|) et sera retourné.

Cette relation est importante pour comprendre le comportement de Typoscript dans de nombreux cas. Si par exemple, on rajoute les lignes suivantes :

TS TypoScript:
page.10.myFunction = TEST!
Cette entrée sera mise dans le tableau PHP suivant:
PHP script:
$data['page.']['10.']['myFunction'] = 'TEST!';

Dans ce cas, ni l'objet "TEXT", ni la fonction StdWrap ne connaissent la propriété "myFunction". En conséquence, cette entrée n'aura aucun effet.

Aucune vérification de syntaxe n'est faite.

Ceci doit-être pris en considération - surtout lors du dépannage d'un script.

Premiers Pas

C'est la configuration du gabarit principal (main_template) qui défini le rendu de base.

Typoscript est constitué essentiellement d'objets qui ont des propriétés. Certaines de ces propriétés peuvent accepter d'autres objets, d'autres servent à certaines fonctions ou définissent le comportement de l'objet.

L'objet PAGE est responsable de l'affichage.

TS TypoScript:
 # l'objet "mypage" est défini comme objet de type PAGE
 mypage = PAGE

 # Il a une propriété "typeNum"
 mypage.typeNum = 0

 # et un objet "10" de type [[T3Doc:TyposcriptReference/ContentObjects/Text|TEXT]]
 mypage.10 = TEXT

 # L'objet "10" a la propriété "value"
 mypage.10.value = Hello world

L'objet PAGE permet d'utiliser, en plus de nombreuses propriétés, un nombre infini d'objets identifiées par leur numéro (ce qu'on appelle un tableau de contenu). Lors du rendu final, les objets seront triés selon leur numéro croissant. En premier, l'objet avec le plus petit nombre, en dernier l'objet avec le plus grand nombre. L'ordre de saisie dans le typoscript n'a rien à voir avec l'ordre du rendu.

TS TypoScript:
 mypage.30 = TEXT
 mypage.30.value = This is the end

 # Lors de l'affichage, l'objet 10 sera le premier, puis l'objet 20 et 30 à la fin. 
 # Un objet 25 serait positionné entre 20 et 30
 mypage.20 = TEXT
 mypage.20.value = This is the center

 #Ce sera le premier objet
 mypage.10 = TEXT
 mypage.10.value = Hello world!
 
 # ici une seconde page est créée spécialement pour l'impression
 printing = PAGE
 printing.typeNum = 98
 printing.10 = TEXT
 printing.10.value = This will be printed

Chaque entrée est enregistrée dans un tableau PHP multidimensionnel. Chaque objet et chaque propriété est donc unique. On pourrait définir un nombre arbitraire d'objets PAGE cependant le typenum doit être unique. Pour chaque typenum il ne peut y avoir qu'un objet PAGE.

Dans l'exemple, le paramètre typeNum = 98 permet de créer un type de sortie différent. En utilisant les typeNum différentes sorties peuvent êtres définies. En général, le typeNum = 0 est utilisé pour la sortie HTML. La requête pour l'HTML devra être index.php?id=1 et pour l'impression index.php?id=1&type=98. La valeur de &type définie quel objet PAGE sera affichée. C'est comme ça qu'il est possible d'obtenir un sortie imprimable, une sortie HTML et même une sortie PDF avec une même et unique configuration. En faisant ainsi, les configurations qui doivent être utilisées dans toutes les vues peuvent être copiées et légèrement modifiées dans des nouveaux objets. (par exemple, le contenu normal de la page peut être copié dans la vue pour impression mais pas le menu)

Note : Les sorties de ces exemples sont toutes au format texte standard. Mais, notamment avec des sorties en WML, le header HTTP peut aussi être modifié. Ceci n'est pas traité ici.

L'exemple précédent ressemblerai à ceci dans un tableau PHP :

PHP script:
 $typoscript['mypage'] = 'PAGE';
 $typoscript['mypage.']['typenum'] = 0;
 $typoscript['mypage.']['10'] = 'TEXT';
 $typoscript['mypage.']['10.']['value'] = 'Hello world!';
 $typoscript['mypage.']['20'] = 'TEXT';
 $typoscript['mypage.']['20.']['value'] = 'This is the center';
 $typoscript['mypage.']['30'] = 'TEXT';
 $typoscript['mypage.']['30.']['value'] = 'This is the end';

Les espaces vides au début et à la fin seront supprimés par TYPO3 (trim()).

Avec le signe "=", on voie les bases de l'attribution : un valeur est attribuée.

TS TypoScript:
 # = La valeur est attribuée
 test = TEXT
 test.value = Holla
 
 # < L'objet sera copié
 # mypage.10 returns "Holla"
 mypage.10 < test

 # L'objet copié sera modifié
 # Le changement n'aura pas d'effet sur mypage.10
 test.value = Hello world

 # =< Signifie que l'objet est référencé (l'objet est lié)
 test.value = Holla
 mypage.10 =< test

 # Si un objet référence est modifié
 # les changements ont un effet sur mypage.10
 # mypage.10 retournera Hello world
 test.value = Hello world

Les objets sont toujours écrits en lettres capitales. Les paramètres et les fonctions sont en général écrits en "camelCase" (Premier mot en minuscules, mot suivant avec une majuscule au début). Il y a cependant quelques exceptions.

Avec le "." comme séparateur, les fonctions et les objets enfants sont référencés et peuvent être fixés à une valeur.

TS TypoScript:
mypage.10.wrap = <h1>|</h1>

Les objets, paramètres et fonctions qui existent peuvent être référencés dans le TypoScript-Reference

Si quelques objets sont inclus (wrapped) les uns dans les autres et que de nombreux paramètres leur sont assignés, cela peut rendre l'écriture et la lecture plus complexe.

TS TypoScript:
 mypage = PAGE
 mypage.typenum = 0
 mypage.10 = TEXT
 mypage.10.value = Hello world
 mypage.10.typolink.parameter = http://www.martinholtz.de/
 mypage.10.typolink.additionalParams = &nothing=nothing

 #Remarquez que ATagParams n'utilise pas la "camelCase" standard
 mypage.10.typolink.ATagParams = class="externalwebsite"
 mypage.10.typolink.extTarget = _blank
 mypage.10.typolink.title = The website of Martin Holtz, the author of these pages.
 mypage.10.postCObject = HTML
 mypage.10.postCObject.value = This Text also appears in the link text
 mypage.10.postCObject.value.wrap = |, because the postCobject is executed before the typolink function

Pour simplifier l'écriture, les accolades {} permettent de définir le niveau objet. De plus, les parenthèses () permettent d'écrire du texte sur plus d'une ligne. L'exemple ci-dessus peut ainsi être réécrit de la façon suivante:

TS TypoScript:
 mypage = PAGE
 mypage {

   typenum = 0

   10 = TEXT
   10 {

      value = Hello world
      typolink {

         parameter = http://www.martinholtz.de/
         additionalParams = &nothing=nothing
         
         # ATagParams unforunately does not use the standardized "camelCase"
         ATagParams = class="externalwebsite"

         extTarget = _blank
         title = The website of Martin Holtz, the author of these pages.
      }
      postCObject = HTML
      postCObject {

         value = This Text also appears in the link text
         value {
            wrap (
             |, because the postCobject is executed before the typolink function
            )
         }
      }
   }
}

Ainsi, le risque d'erreur est réduit et le script est plus lisible. Si l'on souhaite renommer mypage, on a juste besoin de modifier les deux premières lignes au lieu du script entier.

Lecture des enregistrements de contenu

notice - Note

Le paragraphe suivant sert d'exemple pour une meilleure compréhension du background et de ses relations. Les scripts contenus dans cette section, n'ont pas besoin d'être ressaisis manuellement car ils existent déjà dans le css_styled_contend et s'appliquent donc par défaut. Cependant, si un élément du contenu doit être affiché totalement différemment, ou que vous programmez une extension avec un nouvel élément, il sera nécessaire de comprendre ces relations.

Nous n'allons pas écrire tous les éléments du contenu avec typoscript. C'est un travail trop fastidieux et qui relève du rôle du rédacteur.

On crée un élément de contenu de type "TEXT" puis on fait un script Typoscript pour interpréter ce contenu automatiquement. Cet exemple créera une page avec un titre et un texte issu de chaque élément de contenu de la page courante.

Tout d'abord, on crée l'objet PAGE sans quoi il n'y aura aucun rendu. Dans cet objet PAGE, on crée l'objet CONTENT qui peut être contrôlé par de nombreux paramètres de Typoscript.

TS TypoScript:
 page = PAGE
 page.typenum = 0
 
 # L'objet content exécute une requête sur la base de donnée et charge le contenu
 page.10 = CONTENT
 page.10.table = tt_content
 page.10.select {

      # "sorting" est une colonne de la table tt_content qui garde en mémoire l'ordre d'affichage qui à été choisi dans le backend
      orderBy = sorting

      # normal column
      where = colPos = 0
 }
 
 # Pour chaque enregistrement retourné par la requête, renderObj est exécutée 
 # puis le tableau de données est rempli avec son contenu. Ce qui permet d'appeler
 # les propriétés de .field et d'obtenir la valeur correspondante.
 page.10.renderObj = COA
 page.10.renderObj {

   10 = TEXT

   # Le champ tt_content.header contient normalement le titre.
   10.field = header

   10.wrap = <h1>|</h1>

   20 = TEXT

   # Le champ  tt_content.bodytext contient le texte du contenu
   20.field = bodytext

   20.wrap = <p>|</p>
 }

L'objet CONTENT exécute une requête sql sur la base de données. La requête est contrôlée par le "Select". "Select" indique que nous voulons tous les enregistrements de la colonne 0 (la colonne "NORMAL" dans le backend) et que le résultat sera trié selon le champ "sorting". Si la propriété pidInList n'a été pas précisée ou a été enlevée, la requête se limitera au contenu de la page courante. C'est dire que si la page avec l'ID 100 est référencée, l'objet CONTENT retournera uniquement les enregistrements de la page dont pid=100.

La propriété renderObj définie la façon dont les enregistrements seront retournés. Ici, elle est définie comme un COA (Content Object Array) qui peut contenir un nombre arbitraire d'objets typoscript. Dans notre cas deux objets TEXT sont utilisés et seront retournés l'un après l'autre. L'ordre d'affichage n'est pas contrôlé par l'ordre dans le script mais par le nombre par lequel ils sont définis. L'objet TEXT "10" sera affiché avant l'objet TEXT "20".

Le but est d'afficher tous les éléments du contenu comme le webdesigner l'aura prédéterminé. Ainsi, on peut créer une définition pour chaque champ (par exemple une pour image, image-size, image-position, on top, index, etc.).


La variété des éléments de contenu

Si l'on veut afficher une image au lieu du texte, on doit choisir d'autres champs de la table tt_content et les afficher différemment que du texte standard. Il faut procéder de la même manière que pour du "texte avec images" ("text with image"), des "headline" ("headline"), etc.

Le type d'élément de contenu est enregistré dans la colonne CType de la table tt_content. Dans l'exemple suivant, on montre comment l'objet CASE permet de différencier comment chaque élément du contenu sera affiché selon son type :

TS TypoScript:
 10.renderObj = CASE
 10.renderObj {
   #Le champ CType permet de différencier le type de contenu
   key.field = CType

   # Le contenu de type "headline" sera stocké localement comme "header"
   header = TEXT
   header.field = header
   header.wrap = <h1>|</h1>

   # Le texte sera utilisé comme du texte
   text = COA
   text {

     10 = TEXT
     # Le champ tt_content.header contient normalement le titre.
     10.field = header
     10.wrap = <h1>|</h1>

     20 = TEXT
     # Le champ tt_content.bodytext contient le contenu du texte
     20.field = bodytext
     20.wrap = <p>|</p>
   
   }

   textpic = COA
   textpic {
     10 = TEXT
     10.field = header
     10.wrap = <h1>|</h1>
    
     20 = TEXT
     20.field = bodytext
     20.wrap = <p>|</p>
    
     30 = IMAGE
     30.file.import = uploads/pics/
     30.file.import.field = image
     30.wrap = |
   }
   
   # ... other definitions follow here
 }

css_styled_content

Il serait très fastidieux de programmer tout ceci à chaque installation de TYPO3 car les éléments sont les mêmes ou ont des fonctionnalités très similaires. C'est pour cette raison que TYPO3 permet d'utiliser un gabarit statique ("static templates"). Dans la dernière version, il s'agit du "css_styled_content" qui contient une définition complète de chaque élément de contenu.

Son utilisation est là aussi assez simple. Les définitions sont accessibles grâce à l'objet tt_content :

TS TypoScript:
 10.renderObj < tt_content

Cette copie correspond à la configuration par défaut de l'élément CONTENT. Si le gabarit statique "css_styled_content" est disponible, il n'y a pas besoin d'utiliser le paramètre "renderObj".

Ainsi à chaque élément de TYPO3 correspond une définition dans "css_styles_content". Dans le navigateur d'objets (object browser) le résultat est le suivant :

Object browser tt content case.png

On peut ainsi retrouver de quelle manière est configuré chaque élément de contenu. Si un élément de contenu doit être configuré différemment alors il faut effacer ce qui aurait du être fait avec tt_content.internal identifier of the content element . Ci-dessous, un exemple montre comment les propriétés standards du header peuvent être remplacées :

TS TypoScript:
 # Puisque TYPO3 enregistre tout dans un gros tableau, les propriétés qui ne sont pas remplacées sont conservées et peuvent
 # produire un résultat étrange. C'est pour cette raison que les propriétés doivent être effacées.
 tt_content.header >
 
 # Chaque header devra être affiché avec la balise H1, indépendamment des propriétés de l'élément contenu.
 tt_content.header = TEXT
 tt_content.header.wrap = <h1>|</h1>
 tt_content.header.field = header

Il n'y a pas que le renderObj qui n'a pas besoin d'être recréé. L'objet CONTENT est lui aussi déjà défini dans css_styled_content.

styles.content.get

TS TypoScript:
 # Notre code vu précédemment
 page.10 = CONTENT
 page.10.table = tt_content
 page.10.select {

     # Use the sorting of the backend we could as well use the date field or the header
     orderBy = sorting

     # Normal columns
     where = colPos = 0
 }

Grâce au css_styled_content il suffit d'écrire ce qui suit pour obtenir le même résultat:

TS TypoScript:
 # Returns the column "Normal"
 page.10 < styles.content.get

Il y a aussi des définitions par défaut pour les autres colonnes:

TS TypoScript:
 # Renvoie le contenu de la colonne de gauche
 page.10 < styles.content.getLeft
 
 # Renvoie le contenu de la colonne de droite
 page.10 < styles.content.getRight
 
 # Renvoie le contenu de la colonne du bord
 page.10 < styles.content.getBorder

Dans css_styled_content la bordure est défini comme suit:

TS TypoScript:
 # La colonne normal est copiée
 styles.content.getBorder < styles.content.get
 
 # Aprés ça colPos est modifié
 styles.content.getBorder.select.where = colPos=3

Créer un menu sous forme de liste

Jusqu'à maintenant nous avons appris à afficher le contenu des pages cependant il manque encore toute la navigation.

Pour ce faire, TYPO3 possède un objet spécial HMENU. (Le H de menu signifie Hiérarchique) A partir de ce menu, on peut construire une diversité de menus.

Un menu se construit comme une liste imbriquée :

XML / HTML:
<ul>
   <li>auf der 1. Ebene</li>
   <li>auf der 1. Ebene
       <ul>
           <li>auf der 2.Ebene</li>
       </ul>
   </li>
   <li>auf der 1. Ebene</li>
</ul>

Afin de le contrôler, nous allons créer un nouveau sysFolder et une nouvelle extension du gabarit. Puis nous définissons un nouvel objet que l'on pourra rajouter dans le gabari principal plus tard. De cette façon on peut définir beaucoup d'objets séparément qui resteront sûr pour de futurs projets. Les extensions du gabarit peuvent êtres rajoutées en utilisant "include basis template".

Normalement ces objets sont définis comme des sous-objets de "lib". On peut utiliser n'importe quel terme qui n'est pas déjà assigné.

TS TypoScript:
 lib.textmenu = HMENU
 lib.textmenu {
 
   # On défini le premier niveau comme du texte de menu (TMENU)
   1 = TMENU
 
   # On défini l'état ''NO''rmal
   1.NO.allWrap = <li>|</li>
 
   # On définit l'état ''ACT''if
   1.ACT = 1
   1.ACT.wrapItemAndSub = <li>|</li>
 
   # Wrap de la totalité du menu 
   1.wrap = <ul class="level1">|</ul>

   # Le second niveau doit être configuré exactement de la même façon
   # Remarquez que l'on peut copier des objets entre les accolades.
   # On utilise le "." pour défini qu'un objet se trouve entre des accolades
   2 < .1
   2.wrap = <ul class="level2">|</ul>
   3 < .1
   3.wrap = <ul class="level3">|</ul>
 }

L'objet HMENU permet de créer une grande diversité de menus. Pour chaque niveau du menu, un objet menu peut être créé pour faire l'affichage. Ainsi, il est possible de créer un GMENU pour le premier niveau et d'utiliser TMENU pour le second et le troisième niveau.

Le premier niveau du menu sera défini avec le numéro 1, le second avec le numéro 2, etc. Bien évidemment, il ne doit pas manquer de numéro (par exemple, si le 3ème niveau n'est pas défini, le 4ème ne s'affichera pas.)

Pour chaque niveau du menu, on peut définir différents états pour les éléments du menu - Menu-items (NO = "normal" ACT = "pages faisant partie de l'arborescence ouverte :"rootline" en anglais, c'est à dire la page actuellement ouverte et toutes les pages au dessus CUR= "La page courante"). A ce sujet, une attention spéciale doit être apportée au fait qu'à part l'état normal ("NO") les autres états doivent d'abords êtres activés (par exemple ACT = 1).

Désormais, nous pouvons utiliser le menu et l'implémenter sur notre page.

TS TypoScript:
 page.5 < lib.textmenu

Insérer du contenu dans un gabarit (template)

Maintenant nous savons comment afficher du contenu et comment créer un menu. Mais nous n'avons pas encore complètement un vrai site.

On pourrait construire un site avec des COAs et créer le squelette HTML avec typoscript bien que ce soit très complexe et sujet à erreurs.

Si le gabarit HTML du site à été fait par un WebDesigner et est livré complètement terminé, c'est encore plus compliqué, surtout lorsqu'il faut faire de légères modifications dans la mise en page.

Heureusement il existe l'élément TEMPLATE avec lequel on peut parcourir un gabarit HTML et y insérer un menu, du contenu... à la bonne place.

TS TypoScript:
 page.10 = TEMPLATE
 page.10 {
  template = FILE
 
  # On charge le gabarit HTML
  template.file = fileadmin/test.tmpl
 
  # Text-areas
  # <!-- ###MENU### begin -->
  # Ceci est un exemple de remplacement de contenu. Tout ce qui se trouve en les marqueurs
  # sera remplacé par le contenu de la sous partie; dans ce cas le menu
  # <!-- ###MENU### end -->

  subparts {
    MENU < lib.textmenu
    CONTENT < styles.content.get
    COLUMNRIGHT < styles.content.getRight
  }
 
  # Marques(=marqueur seul) i.e. Il n'y a pas de marqueur de début et de fin. C'est le marqueur lui même qui est remplacé.
  # ###LOGO###
  # Sera remplacé par le LOGO
  marks {
    LOGO = IMAGE

    # L'image logo*.gif sera ajoutée dans le champ ressource du gabarit typoscript.
    LOGO.file = logo*.gif

    # Lien du logo pour la page ayant l'ID = 1
    LOGO.stdWrap.typolink.parameter = 1
  }
  workOnSubpart = DOCUMENT
 }

Une alternative à cette solution peut être l'extension automaketemplate avec laquelle il est possible d'abandonner complétement les marqueurs. A la place on utilise des IDs comme reférence ce qui permet une meilleure coopération avec les WebDesigners.

Un autre alternative peut être l'extension templavoila. Cette extension fournit une interface très visuelle. Malgré tout ce n'est pas très recommandé pour les débutants.

Utiliser css_styled_content

Nous savons déjà que nous pouvons définir nous même les différents éléments de TYPO3. Mais l'utilisation de css_styled_content réduit le travail d'environ 2000 lignes de typoscript.

Il est enrichissant, même si ce n'est pas forcément évident au départ, d'avoir une vision globale du Typoscript. Dans TYPO3, on doit être sur la page qui a le setup-template. Ensuite dans le module "Template", on choisi "Template Analyser" dans la boite de sélection en haut de la fenêtre.

Une liste des gabarits typoscript actifs utilisés apparaît. Ils sont affichés de haut en bas par TYPO3 et réunis dans un tableau de configuration.

En cliquant sur "EXT:css_styled_content/static/" le contenu du gabarit s'affichera. Les constantes s'afficheront en premier puis le setup-typoscript.

L'extension css_styled_content ajoutera de nombreuses classes aux éléments HTML. Ce qui a l'avantage de na pas avoir a entrer toutes les classes à la main. Il suffit de de trouver quel élément HTML posséde quelle classe et d'ajouter un style CSS dessus.

Exemple:
<div class="csc-textpic-imagewrap">...

Les descriptions des classes sont simples et intuitives (pour ceux qui connaissent les rouages de TYPO3). Toutes les classes commencent avec "csc"; qui signifie "css_styled_content". Dans l'exemple, il est suivi de "textpic", qui signifie qu'il s'agit de l'élément typoscript "textpic" (texte avec images). "imagewrap" indique qu'un conteneur div enveloppera l'image.

Ce qui se produit exactement peut être compris en faisant une page vide avec un seul élément et en regardant le code source généré pour cette page.

Par exemple, les titre sont généralement numérotés ce qui permet de traiter le premier de façon spécifique. Dans un tableau HTML, les classes "odd" et "even" sont insérées de manière a ce qu'il soit facile de coloré les lignes différemment. De la même façon, les colonnes des tableaux peuvent êtres manipulées individuellement.

Pour les puristes du HTML, ça signifie que de nombreuses classes css inutiles seront insérées. Pour s'en débarrasser il faut éditer de nombreuses extensions du css_styled_content.

Les objets COA Typoscript

aucune traduction valable pour le moment

Objekte, die Abfragen der Dabenbank durchführen (??)

aucune traduction valable pour le moment

Dépendants du contenu (??)

aucune traduction valable pour le moment

Les autres objets

aucune traduction valable pour le moment

Fonctions de TypoScript

aucune traduction valable pour le moment

imgResource

notice - Draft

Change the {{draft}} marker to {{review}} when you need a reviewer for text and TypoScript. info

La fonction de la structure de donnée "imgResource" permet la modification d'image, comme le nom le sous entend. L'objet IMAGE a la propriété "file" qui hérite de la structure de donnée "imgResource". Par exemple, ce code permet le redimensionnement d'une image :

TS TypoScript:
temp.myImage = IMAGE
temp.myImage {

	file = toplogo.gif
 	file.width = 200
	file.height = 300

}


Entrer une taille maximal (ou minimal) :

TS TypoScript:
temp.myImage = IMAGE
temp.myImage {

	file = toplogo.gif

        # for maximum size
 	file.maxW = 200
	file.maxH = 300

	# for minimum size
	file.minW = 100
	file.minH = 120

}

et aussi un accés direct au fonction d'ImageMagick :

TS TypoScript:
temp.myImage = IMAGE

temp.myImage {

	file = toplogo.gif
 	file.params = -rotate 90

}

Un des exemple les plus courants de l'utilisation d'imgResource est l'implémentation d'image dynamique directement depuis le champ média dans les propriétés de page. L'avantage, pour les éditeurs, est de pouvoir changer l'image sans utiliser une ligne de TypoScript. Ça vous permet de changer l'image d'entête de page pour différente partie d'un site avec seulement quelques lignes de TS (TypoScript).

TS TypoScript:
temp.dynamicHeader = IMAGE
temp.dynamicHeader { 
 	file {

		# Défini l'emplacement des images
		import = uploads/media/

 		import {

			# S'il n'y a pas d'image dans la page, recherche récursive sur les sous dossiers
			data = level:-1, slide

			# Entrer le champ dans lequel l'image est défini
 			field = media

			# Définir quelles images seront montrées (dans ce cas, la première rencontrée)
 			listNum = 0

		}
}

Le répertoire "uploads/media/" est l'emplacement des fichiers qui sont insérés dans les propriétés "fichiers". (pour TYPO3 version 4.2.x il s'agit de l'onglet "Resources").


The typoscript in the brackets of import completly consists of stdWrap-functions which are used to define from where and which image will be imported. Finally stdwrap returns the filename of the image which will then be imported from the import path (uploads/media).

imageLinkWrap

En utilisant "imageLinkWrap" vous pouvez entourer l'image d'un lien avec la class "showpic.php". Ce script ouvrira l'image dans une nouvelle fenêtre avec des paramètres prédéfinis, comme l'arrière plan, la taille de l'image, etc. Cette fonction peut être utilisée pour créer une interaction de "clic-agrandissement" (on clique sur une petite image (de prévisualisation) pour ouvrir l'image en taille réelle dans une nouvelle fenêtre).

TS TypoScript:
temp.myImage = IMAGE
temp.myImage {
	file = toplogo.gif

	imageLinkWrap = 1
	imageLinkWrap {

			# active ImageLinkWrap 
		enable = 1

			# définit la balise body pour la nouvelle fenêtre
 		bodyTag = <body class="original Image">

			# Largeur de l'image (m redimensionne proportionnellement)
		width = 800m

 			# Hauteur de l'image
		height = 600

 			# Crée une nouvelle fenêtre pour l'image
		JSwindow = 1

 			# Ouvre une nouvelle fenêtre pour chaque image (au lieu d'utiliser la même fenêtre)
		JSwindow.newWindow = 1

			# Espacement intérieur (bordure) pour la nouvelle fenêtre
		JSwindow.expand = 17,20
	}
}

numRows

aucune traduction valable pour le moment

select

aucune traduction valable pour le moment

split

aucune traduction valable pour le moment

if

aucune traduction valable pour le moment

typolink

notice - Draft

Change the {{draft}} marker to {{review}} when you need a reviewer for text and TypoScript. info

TypoLink est LA fonction TYPO3 qui vous permet de créer toute sorte de lien. Si possible, nous devrions utiliser cette fonction pour générer tous nos liens, parce qu'ils sont "enregistrés" dans TYPO3 - c'est un pré requis par exemple pour realURL, pour créer des chemin de liens "user-friendly", ou pour la protection antispam des adresses mail. -

Dans cette optique, évitez d'utiliser <a href=“...“>

Les fonctionnalités de typolink très facile à utiliser. Typolink lit le texte défini selon les paramètres voulus. Un exemple:
TS TypoScript:
 temp.link = TEXT
 temp.link {

     # notre texte défini
     value = Beispiellink

     # la fonction typolink
     typolink {

         # l'adresse de notre lien
         parameter = http://www.example.com/

         # notre cible(_blank ouvre une nouvelle fenêtre)
         extTarget = _blank

         # ajoute une class au lien qui nous permettra de la peaufiné en CSS
         ATagParams = class="linkclass"
     }
 }
L'exemple ci-dessus générera ce code HTML : <a class="linkclass" target="_blank" href="http://www.example.com/" >Beispiellink</a>

Typolink works almost like a wraper - the content which i.e. is defined by value will be wrapped by the the HTML anchor tag. If no content is defined it will be generated automatically. With a link to a page the page title will be used. With an external URL the URL will be shown.

One can shorten this example because the "parameter"-tag from the typolink-function does some of the thinking for you. Here the short example which will generate the exact same HTML-code.
TS TypoScript:
 temp.link2 = TEXT
 temp.link2 {

     # again the defined text
     value = Beispiellink

     # the parameter with the summary of the parameter in the first example (explanation follow below)
     typolink.parameter = www.example.com _blank linkclass
 }
The "parameter"-part from the typolink function analyses the entry on specific characters and converts the respective sections. Initially the parameter entry will be sepperated at the blank spaces. If then a dot "." is found (if the case may be in before a slash "/") a external link will be generated. If the dot "." is found after a slash "/" a filelink is generated. If an @ is found a e-mail link would be generated. If a integer is found like "51" an internal link to the page with the id "51" will be generated. If a leading hash "#" is found a certain content element will be linked. (i.e. for a link to the content-element with the id #234 on the current page. In order to link to the page with ID 51 and content element #234 one would use 51#234).

The second part of the parameter describes the goal of the link. Normally this would be - like in the first example - defined by extTarget (for external links) or target (for internal links) but it can be overwritten by using a second parameter.

The third part will be converted to a class attribute for the link.

If only a class attribute is needed and no target one has to fill the target part anyway because the function would not recognize the class being on the third place. So without a target the line would be the following (with a minus sign "-" as divider)

typolink.parameter = www.example.com – linkclass

With the usage of the typolink-function and the target attribute its also possible to open links in javascript-popups.

TS TypoScript:
temp.link = TEXT

temp.link {

     # the link text
     value = Open a popup window


     typolink {
          # 1. Parameter = PageID of the target page, 2. parameter = size of the popup
          parameter = 10 500x400

          # The title tag of the link
          title = Click here to open a popup window

          # The parameters of the popup window
          JSwindow_params = menubar=0, scrollbars=0, toolbar=0, resizable=1

     }
}

It is important to note that many of the properties of typolink are of the type stdWrap. This means that values can be calculated or read out of the database.

TS TypoScript:
lib.stdheader >
lib.stdheader = TEXT
lib.stdheader {
   field = header
   typolink.parameter.field = header_link
   wrap = <h2>|</h2>
}

The headline will be displayed and a link will be placed with goal which is defined in the field header_link. The first line removes the default settings from css_styled_content.

encapsLines

EncapsLines est un raccourci pour dire "encapsulation de lignes". Cette fonction TypoScript vous permet de définir comment les lignes de contenu sont enveloppées. Pour exemple, si aucun paramètre n'est défini, un <p> ou un <div> englobera l'ensemble. Un autre exemple sera le remplacement des balises <p> par <strong>.


Un exemple simple:

Dans le RTE (Rich Text Editor : editeur de texte avancé) nous avons le texte suivant :

Simple texte sans rien de spécial
XML / HTML:
 <div class="myclass">Du texte englobé de balise DIV.</div>

En typoscript nous avons
TS TypoScript:
encapsLines {
 
       # définis les balise qui envelopperont le texte
       encapsTagList = div,p
 
       # Lines which are not already encapsulated with tags from the encapsTagList will be wrapped with <p>-tags         
       wrapNonWrappedLines = <p>|</p>
 
       # remplace tout les DIV par des P
       remapTag.DIV = P
 
       # si une ligne est vide, on lui assigne un caractère d'espacement
       innerStdWrap_all.ifEmpty = &nbsp;
}


Le résultat ressemble à cela en HTML

XML / HTML:
<p>Simple texte sans rien de spécial.</p>

<p>&nbsp;</p>

<p class="myclass">Du texte englobé de balise DIV</p>
Dans la plupart des projets, le code précédent n'est pas utilisé. Mais avec l'extension "css_styled_content" certains paramètres définis via la fonction peuvent être changés au besoin. Voici donc un exemple standard de "css_styled_content" pour clarifier son fonctionnement.
TS TypoScript:
lib.parseFunc_RTE {

        nonTypoTagStdWrap.encapsLines {
 
 
               # balise qui engloberont
               encapsTagList = div,p,pre,h1,h2,h3,h4,h5,h6
 
               # converti les balise DIV en P
               remapTag.DIV = P
 
               # englobe les lignes qui ne le sont pas déjà avec la balise P
               nonWrappedTag = P
 
               # remplace les ligne vide avec un caractère d'espacement (pour la validation w3c)
                innerStdWrap_all.ifBlank = &nbsp;
 
               # ici - infamous - le bodytext est placé
               addAttributes.P.class = bodytext
 
               # on utilise l'attribut addAttributes si aucun autre n'est utilisé
               addAttributes.P.class.setOnly=blank
       }
}
Comparez le premier et deuxième code et vous verrez qu'il y a deux paramètres qui font la même chose. Premièrement "wrapNonWrappedLines" et ensuite "nonWrappedTag". La différence est que "nonWrappedTag" peux être surchargé tandis que "wrapNonWrappedLines" non. Si les lignes sont déjà enveloppées comme suit : <p class=“blubb“>|</p> et "wrapNonWrappedLines" est défini à <p>|</p> le résultat sera un mélange de balises P avec ou sans classes au lieu d'un résultat cohérent. Pour le démontrer clairement : La plupart du temps, la définition de classe : class="bodytext" est inutile. Pour l'enlever, vous n'avez qu'à insérer la ligne suivante :
TS TypoScript:
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >

filelink

aucune traduction valable pour le moment

parseFunc

aucune traduction valable pour le moment

tags

aucune traduction valable pour le moment

HTMLparser

aucune traduction valable pour le moment

Bien utiliser stdWrap

aucune traduction valable pour le moment

La structure du code n'est pas cruciale (??)

aucune traduction valable pour le moment

Utilisation récurrente

aucune traduction valable pour le moment

Type de données

aucune traduction valable pour le moment

Multilinguisme

aucune traduction valable pour le moment

cObject

Le paramètre cObject peut être utilisé pour remplacer le contenu par un Objet-TS. Cela peut être un COA, un Plugin ou un texte comme dans cet exemple.
TS TypoScript:
 10.typolink.title.cObject = TEXT
 10.typolink.title.cObject.value = Imprimer
 10.typolink.title.cObject.lang.en = Print

Perspective à l'avenir

notice - Draft

Change the {{draft}} marker to {{review}} when you need a reviewer for text and TypoScript. info
* Traduction de BabelFish - A revoir

Points que nous voudrions prendre en considération dans les prochaines versions :

  • La section menu sera développée plus clairement
  • L'effet avec des TemplaVoila devrait être tiré/décrit (en particulier FCEs)
  • TypoScript à Debuggen décrire
  • Ajout de la descripion de la fonction stdWrap
  • décrivent : La série de données deviendra des formulaires ouvert, gerendert, cela par l'intermédiaire de TCA et des Seiten-TS est orientée, alors stocké, dans le chemin de fer (manière spéciale, RTE atterrissent les données décrivent aussi encore ?). Alors, le côté dans le Frontend est appelé et les données pour les dépenses produit à HTML sur des TypoScript pris et.
  • Des raccourcis, au meilleur dans un glossaire imprimer déclarer. D'autres questions ou incitations ouvertes peuvent être ajoutées volontiers ici.