TypoScript By Example

Transcription

TypoScript By Example
Revised Kasper Spring 2001 – french release 11/2003 (terry Durant)
Extension Key: doc_core_tsbyex_fra
Copyright 2000-2002, Kasper Skårhøj, <[email protected]>
This document is published under the Open Content License
available from http://www.opencontent.org/opl.shtml
The content of this document is related to TYPO3
- a GNU/GPL CMS/Framework available from www.typo3.com
TypoScript By Example - 1
Table of Contents
TypoScript By Example............................... 1
Introduction.....................................................................3
Ce document.............................................................. 3
D'autres documentations........................................... 3
En ai-je besoin?......................................................... 3
Qu'est ce que le TypoScript template (gabarit)?......... 3
Préalable du traducteur.............................................. 3
Overview..................................................................... 3
Exemple cas : “Inclure un gabarit”..............................5
Gérer la hiérarchie des Templates............................. 6
Cas d'exemple : "Extension"..................................... 6
Managing extensions................................................. 7
Pour plus de lecture................................................... 8
Gabarit standard............................................................. 8
Introduction................................................................. 8
Table static_template................................................. 9
Content rendering details........................................... 9
Typical setup of a standard template (paramétrage
typique d'un gabarit standard).................................... 9
Tutorial de base : démarrez un nouveau website......10
Un simple website à partir de zéro...........................10
Un website avec un menu léger...............................12
Insérer un menu graphique...................................... 13
Contenu du site........................................................ 13
Concepts.................................................... 15
“&id” et “&type”........................................................... 15
Enveloppes (wraps)..................................................... 16
Structure de données (arrays) (1,2,3,4...) .................. 17
Numerical arrays (structure de données numériques).
17
String arrays (structure de données de chaîne de
caractères)................................................................17
“styles.content.[xxx]”.................................................. 18
Example from "content (default)"............................. 18
Sections éducatives................................... 21
Introduction...................................................................21
Code notation conventions:........................................ 21
stdWrap...................................................... 23
Le concept “stdWrap”................................................. 23
Propriétés de stdWrap ................................................ 24
Get data.................................................................... 24
Override / Conditions................................................ 26
Objets de contenu (cObject)...................... 28
Introduction...................................................................28
COA.......................................................................... 28
FILE.......................................................................... 30
IMAGE...................................................................... 30
IMG_RESOURCE.....................................................31
CLEARGIF................................................................ 31
HRULER................................................................... 31
CTABLE and OTABLE..............................................32
Gabarit (TEMPLATE)................................................ 35
FORM (formulaire)....................................................38
CAS d'exemple......................................................... 40
LOAD_REGISTER....................................................42
imgResource et GIFBUILDER.................... 44
Introduction...................................................................44
Un fichier normal en entrée......................................... 44
Masques Bitmap...................................................... 44
Importer une image.................................................. 45
GIFBUILDER................................................................. 47
GIFBUILDER - bases............................................... 49
+calc......................................................................... 49
.niceText................................................................... 50
L'objet GIFBUILDER TEXT.......................................51
L'objet IMAGE...........................................................51
Navigation.................................................. 53
HMENU.................................................................... 53
TMENU..................................................................... 53
IMGMENU................................................................ 55
optionSplit.................................................................57
GMENU.................................................................... 57
Images avec GMENU............................................... 59
GMENU_LAYER...................................................... 60
Prolonger un fond d'image au menu entier..............61
PHP include-scripts.................................... 64
PHP_SCRIPT cObject.............................................. 64
Inspiration................................................................. 64
Exemple: “Userdefined tags”....................................65
Content rendering (restitution de contenu)..
68
Introduction............................................................... 68
CONTENT.................................................................69
colPos.......................................................................70
styles.content (default)............................................. 73
lib.stdheader............................................................. 73
RECORD.................................................................. 74
Réponses aux Challenges......................... 77
Introduction
Ce document
C'est une introduction à l'utilisation de TypoScript. Il essaye de vous permettre de comprendre la manière dont est pensé et
fonctionne TypoScript. Beaucoup de petits exemples sont utilisés pour vous aider à saisir TypoScript qui vous préparent peu
à peu à aller de plus en plus loin.
D'autres documentations
Un document très important est TypoScript reference (TSref), qui contient tous les détails sur TypoScript. Le problème
avec un document de référence est qu'il y a très peu d'exemples. Ce présent document est une façon plus amicale pour le
lecteur de se familiariser avec TypoScript.
Tutoriels
Il y a une série d'autres didacticiels très productifs à lire également. Ainsi, “Content_rendering.pdf” en est un dont le sujet
traite de “content rendering” (restitution des contenus).
En ai-je besoin?
Oui. Si vous travaillez dans les couches (layer) au-dessus de F1 dans “Typo3 Overview”. Mais tout dépend de jusqu'où vous
voulez aller. Si vous trouvez TypoScript très embrouillé, vous obtiendrez un excellent résultat avec très peu d'options et
restituerez ensuite le contenu avec vos propres PHP-scripts. Vous pouvez aussi baser votre projet sur un des modèles
(templates) standards qui sont du type “fixed layout”, mais extrêmement facile à configurer pour une large possibilité
d'options différentes.
Qu'est ce que le TypoScript template (gabarit)?
Préalable du traducteur
Je me permets, Kasper m'en excusera d'introduire cet addendum pour tenter de vous faire rapidement et clairement
comprendre quelques mécanismes fondamentaux dans le fonctionnement de Typo3 quand à la restitution des pages.
Je dois cette “illumination” à Maries Cohen qui dans un document, “Typo3 Template Basics” que vous trouvez à cette
adresse http://www.mcuniverse.com/index.php?id=847&type=0 , réussit à nous expliquer, preuve à l'appui, c'est à dire son
site, et avec beaucoup de simplicité et d'efficacité les composants et comment ils interagissent.
Comme elle nous l'explique, vous constaterez qu'il existe trois éléments qui interagissent lors du processus de restitution
puis d'affichage d'une page par Typo3 :
1.
Part 1: “HTML Template“ (Gabarit Html) dont l'exemple qu'elle nous montre correspond à la structure de son site avec le
bandeau, puis le menu du dessus, etc ..
2. Part 2: “Typo3 Template” (Gabarit Typo3) dont elle nous montre le contenu et dont nous pouvons constater les effets sur
son site. Le Template (gabarit) Typo3 définit pour Typo3 au moment de la restitution comment il doit interagir avec le
“HTML Template” et le “CSS Stylesheet” ainsi que différentes manières qu'il doit appliquer pour afficher la page.. Le
“Typo3 Template” est composé de trois sections principales : “Constants”, “Setup” et “Static”.
3. Part 3: “CSS Stylesheet” (Feuille de Style en cascade) habituelle pour tous les habitués de la publication sur Internet ou
en Html.
Noterez la distinction introduite de restitution (pourrait aussi s'appeler mise en page mais ce serait trop restrictif) et affichage
qui met en jeu notamment le cache des pages.
Overview
Normalement un "template" est un FICHIER HTML qui décrit une composition (layout) et certaines des zones (areas) qui
devraient être substitués par un autre contenu (content) déterminé. Dans Typo3 vous pouvez utiliser cette approche, même
si vous faites du TypoScript. Voir les autres didacticiels pour plus d'information.
Mais un "template" ou un "template record" (gabarit enregistré) comme celui dont on parlera dans ce document est en fait
un enregistrement (record) dans une table, nommée "sys_template", de la base de données de Typo3. Le fait d'enregistrer
un lien entre une Page quelconque et ce "template record" va définir la manière dont la page va s'afficher en appliquant le
Template auquel on l'a associée.
Pour comprendre les Templates, vous devriez lire le “Guide d'introduction à TypoScript”. Vous trouverez aussi une
information précise et détaillée dans le document “TSREF” (Ts Référence).
Vous êtes connecté en tant que “admin” sur Typo3 et dans le menu (cadre de gauche) vous sélectionner l'option “Doc”, puis
sélectionner un Template dans la liste des objets proposés, par exemple "NEW SITE, based on standard" qui a été vu dans
“Quickstart tutorial”. Cette page est une vue d'ensemble des champs de la table du Template :
1.
"Template title": titre qui apparaîtra dans la liste des
enregistrements sur l'onglet “web-tab” Choix libre
2.
"Website title": titre du site apparaîtra comme titre du
Browser “HTML-title” et précédant celui des pages affichées
(page-titles). Sur cette page http://typo3.org/1421.0.html
“Typo3.org” (website title) précède “Document library”.
3.
"Constants": contient les "Constantes” que vous déclarez et
qui sont ensuite utilisées à fin de substitution dans le champ
“setup”. Exemple : "styles.content.textStyle.size" déclarée
est insérée dans le champ “setup” de la manière suivante
"{$styles.content.textStyle.size}". Les constantes sont
substituées dans le même ordre que ceux présenté dans ce
champ. Il est important de comprendre que des constantes
ne sont pas employées en tant que variables de
programmation. Elles substituent seulement les instances
des constantes déclarées lors de l'installation. Notez que les
instances des Constantes que vous déclarez sont rajoutées
à celles des gabarits (template) existants de la “rootline”
("RootLine". This is an array with information about title, uid
from $uid an back to the root) et s'ajoutent également aux
constantes déclarés dans les “gabarits inclus” (voir "Clear"
(6)).
4.
"Setup": Ce champ contient le code de configuration de
TypoScript. Employer les constantes du '"champ
Constantes" (3) pour insérer facilement des valeurs de
propriétés avec variantes ou des valeurs globales. Notez que
les instances du champ “setup” sont rajoutés à celles du
champ “setup” inclus dans les gabarits (template)
préexistants dans le rootline ainsi qu'à celles incluses dans
les “gabarits inclus” (voir au-dessous (6))"clear".
5.
"Ressources": Ce champ peut contenir des médias comme
des images, des masques, des polices Truetype, des feuilles
de styles (stylesheets), du HTML et des documents de texte
Ceux-ci peuvent être référencés depuis TypoScript (Datatype
"ressource") et sont alors alors copiés avec les gabarits
(template).
Lors de la libélisation d'une référence à une "ressource",
utilisez cette déclaration : "image*.gif" au lieu de :
"image.gif". L'emploi de l'astérisque prépare le Gabarit pour
la duplication car "image*.gif" permet d'assortir le gabarit
dupliqué avec son image correspondante dont le nom sera
"image_01.gif" qui est justement celui généré lorsque un
gabarit est reproduit par duplication.
6. "Clear" & "Rootlevel": "Clear" donne la possibilité d'annuler
les déclaratifs des champs “constantes” et/ou “configuration
(setup)” de gabarit pré-positionnés dans la lignée (rootline).
Pour une explication plus approfondie, se référer au TSref.
"Rootlevel" détermine que ce point de l'organigramme des
pages va se comporter comme la racine (startpage) d'un
nouveau site Web
7. l"Include static": vous laisse inclure des “gabarits statiques”
fournis avec Typo3 par défaut. L'ordre (à partir de la racine)
est l'ordre avec lequel, les gabarits sont inclus. Les “gabarits
statiques” sont inclus avant le Gabarit du champ "Inclure un
gabarit" (8).
"RootLine". This is an array with information
about title, uid from $uid an back to the root..
= Structure d'information concernant le Titre, le
Uid (identification)et le chemin depuis la
racine)
8. "Include basis template": Pour inclure vos propres Gabarits.
Voir le cas "Include basis template" exposé ci-après.
9. "Template on next level": Vous pouvez inclure un Gabarit qui
s'appliquera pour les pages à partir du prochain niveau dans
l'arbre-structure hiérarchique de Typo3!
10. "Description": Écrire vos propres notes ici..
Exemple cas : “Inclure un gabarit”
Une approche sympathique de l'utilisation des Gabarits est
celle permettant de créer des bibliothèques de code
TypoScript dans un Gabarit pour l'inclure ensuite dans un
autre Gabarit pour y réutiliser le code TypoScript. C'est
exactement ce qu'est le “Gabarit statique”
Mais les “Gabarits statiques” ne peuvent pas être édités. Ils
sont distribués avec Typo3 et ne sont pas destinés à être
changés, mais sont prévus pour que leurs capacités soient
étendues (de nouveaux gabarits statiques seront écrits).
Vous avez par contre la possibilité d'inclure des Gabarits
dans d'autres Gabarits.
Dans cet exemple je (Kasper) montrerai comment j'ai fait les
sites Web de www.typo3.com et www.typo3.dk. Ils sont très
semblables. Par conséquent, j'ai créé un Gabarit commun
pour contrôler la conception. Mais j'ai également fait
différentes "extensions" pour ce qui concerne l'anglais le
danois etc..
Afin de partager un Gabarit entre deux sites ou plus, les
sites doivent résider dans la même base de données. C'est
le cas du site Web Typo3 dans les deux langues. Les
avantages en sont très évidents : Tous les graphiques,
pages et arrangements (layout) sont faciles à copier et à
mettre à jour quand ils sont accessibles à partir de la même
page d'accès Typo3.
Regarder l'image ci-contre (clic-souris pour une fenêtre
séparée). Dans la page racine (rootpage) des sites '"com" et
'dk" il y a un Gabarit ("Rootlevel" étant cliqué). Chaque
Gabarit inclut le Gabarit principal, qui est trouvé dans le
dossier "Skabeloner" (signifie "template" en danois) Le
Template principal contrôle quasiment en totalité
l'arrangement (layout) des sites. Et chaque site partage en
commun ce Template ! !
Regardez maintenant les images ci-contre. Elles font partie
du contenu dans chacun des Templates de "com" et de "dk".
Vous y voyez quelques valeurs qui sont substituées
(remplacées). Pour chaque site, les contenus des métaétiquettes (meta-tag) "mots-clés” (keywords) et "description"
sont différents. Les constantes appropriées sont en effet
substituées afin de les changer. Vous noterez également
que le Template danois change quelques autres
paramètres.
C'est très intéressant. Les changements locaux sont
possibles dans un branchement du site Web tandis que
l'arrangement (layout) global peut encore être changé depuis
le Template principal. C'est fort sympathique de pouvoir
ainsi utiliser des Templates standards. Ils ont un ensemble
de constantes que vous pouvez modifier afin de
personnaliser à votre site.
Gérer la hiérarchie des Templates
Vous pouvez facilement superviser quels sont les Templates inclus dans votre site avec la fonction “Template Analyzer”
dans le module “web_ts” :
Celui-ci montre non seulement quels sont les “Templates” et les “Templates statiques” qui sont inclus mais également dans
quelles commandes (et de là où ils sont lancés) ils sont traités et si un quelconque de ces Templates a des commutateurs
(witch) activés ou non tels que "Clear constants" et "Clear setup"“Clear".
Cas d'exemple : "Extension"
Les exemples ci-dessus ont indirectement montré l'ampleur des possibilités des extensions ; Les changements spécifiques
au site étaient des extensions (TypoScript substitués ou constantes) du Template principal.
A présent, je vais vous montrer comment les pages FAQ de la section “developer” de ce site Web ont est créées :
Tout d'abord, j'utilise un autre genre d'en-tête pour la section FAQ. Ce “headertype” a un cadre gris autour et vous pouvez
choisir cet en-tête pour des items de “contenu” où que ce soit sur le site ("Layout 2"). Mais le type d'en-tête par défaut est
"Layout 1". Ainsi pour la section FAQ (les pages "blueish" sur la première image ci-dessous), j'ai fait une extension car le
type d'en-tête par défaut devrait être "2" et non "1" pour toutes les pages dans cette section, soit ce qui signifie "toutes les
pages de la section FAQ et aussi à l'extérieur". "all pages from FAQ and outwards".
La tâche est effectuée en créant un nouveau Template sur la page "FAQ". Dans ce Template les champs "Clear" et
"Rootline" ne doivent pas être activées. Si ils le sont, une nouvelle mouture du site Web démarrera en partant de ce point au
lieu d'être une extension au Template de base !
Les informations du Gabarit sont montrée sur la deuxième image. Comme vous le voyez le type d'en-tête par défaut est
spécifiée à "2" et la taille du bodytext par défaut est spécifiée à "1" (normalement "2").
Naturellement je pourrais changer la taille de police et le type d'en-tête pour chaque élément de contenu … mais
franchement, c'est une manière tout à fait pénible de faire, alors que vous pouvez la spécifier aussi simplement que ceci …
Contrôler la section FAQ pour voir pour vous-même ! Cela fonctionne. Aucune dispute.
Check the FAQ-section and see for yourself! It works. Aucun désagrément..
Managing extensions
Encore une fois, le “Template Analyzer” montre sa maniabilité ici :
Pour plus de lecture
Dans le TSref il y a également une explication de la façon dont les descripteurs fonctionnent.
Gabarit standard
Introduction
Typo3 offre une approche facile pour créer des sites Web et pour commencé avec TypoScript. Un groupe de Gabarits
standards est packagé avec Typo3.
La plupart des sites Web basés sur Typo3 se fondent sur des Gabarits de TypoScript. Afin de comprendre les Gabarits,
vous devriez lire cette introduction à TypoScript. Vous trouverez également une information complète dans le TSref.
Si vous voulez tester certains des Gabarits standards et étudier des exemples interactifs, se référer s'il vous plaît au
“demosite” sur le site “demo.typo3.com”.
Table static_template
Les Gabarits statiques sont des enregistrements de la table "static_template" et sont des enregistrements de niveau racine.
Cela signifie qu'ils sont toujours trouvés à la racine de la hiérarchie des pages (pagetree) et peuvent seulement être
visualisés par des administrateurs. La table est également "en lecture seulement" (configuration dans les tables.php). C'est
tous simplement parce que les Gabarits statiques ('"static_template") contiennent des enregistrements qui ne sont pas
censés être changés par n'importe qui. Ils agissent comme un socle pré-définis (preset chunks) de code de TypoScript. La
table "static_template" est distribuée avec chaque nouvelle version de Typo3 (contenant les enregistrements ajoutés).
Ci-dessous, vous pouvez voir le contenu du Gabarit statique tel qu'il était en septembre 2000. Celui-ci a pu avoir changé
pour la version en cours de Typo3. Mais il est utile pour expliquer comment cela fonctionne :
1. "template: ...": C'est le Gabarit standard. Quand vous voulez
créer un site Web basé sur un Gabarit standard, vous ajoutez
ceci en-tête de la liste des gabarits statiques inclus dans votre
Gabarit
Tous les Gabarits standards incluent le Gabarit"content
(default)" pour la fonction de restitution de Typo3.
2.
"content (default)": Ce Gabarit contient un cOject "tt_content"
qui sert pour restituer les items de contenu d'une page. Inclus
par tous les Gabarits jusqu'à présent. Certains des types les
plus exotiques (Ctype) concernant des items de contenu ne
sont cependant pas restitués. "styles.content (défaut)" est
inclus dans ce Gabarit.
3. "styles.content (défaut)" : Cet élément contient un grand
nombre d'objets TS prédéfinis pour l'usage avec par exemple
“content-rendering, "powered-by"-logos, content-inserting”,
"actionner-by"-logos, et ainsi de suite. Ces objets sont
largement utilisés par "content (default)" et beaucoup de
propriétés sont réglables en tant que constantes déclarées
pour une modification facile du comportement de la restitution
des contenus
4. "cSet (default)" : C'est un genre d'extension au Gabarit
"styles.content (default)". L'objectif est de substituer par
exemple des définitions cibles (target-definitions) dans un
grand nombre des objets du Gabarit "styles.content (default)"
par une constante commune, ce qui le rend beaucoup plus
commode la modification des valeurs pour tous les objets
cibles.”cSet” concerne également d'autres valeurs applicables
comme les couleurs de fond et les couleurs des polices et il
concerne donc la couche supérieure de “restitution”
(apparence). Très utile pour la création rapide des sites Web
basés sur les Gabarits standards ; 1) Inclure le Gabarit
standard. 2) Inclure "cSet (default)". 3) Remplacer quelques
paramètres de "cSet"..... Voyez comment il est utilisé dans les
Gabarits sur le “demo-site”.
5. "frame set.": Différents frame sets (jeu de cadre) standard.
Utilisé par quelques Gabarits standards.
6. "styles...": Certains objets standards comme les menus, les
sitemaps, les en-têtes et ainsi de suite. Cette section peut se
développer avec un bon nombre de pré réglages intéressants
comme des panneaux(boards), catalogues, calendriers
systèmes (calender-systems) et ainsi de suite.
Content rendering details
Lire le document content_rendering.pdf ou se référer à http://www.typo3.com/Content-rendering_an.1102.0.html
Typical setup of a standard template (paramétrage typique d'un gabarit standard)
C'est la hiérarchie d'un site Web fictif basé sur le Gabarit standard BUG :
Dans le “Template Analyzer” il ressemble à ceci :
Tutoriel de base : démarrez un nouveau website
A partir d'ici, encore plus d'exemples de TypoScript
Un simple website à partir de zéro
Si vous voulez commencer un site Web à partir du tout début, vous devez créer un Gabarit à la première page du site Web.
Cette page peut être référencée comme "racine du site Web" ou généralement “Page d'accueil”. La "page d'accueil" n'est
pas automatiquement la toute première page dans l'arbre hiérarchique des pages (pagetree) de Typo3 mais peut être toute
page de l'arbre que vous voulez voir se comporter en tant que point de départ d'un site Web !
Le Gabarit initial doit avoir les boîtes à cocher (checkboxes) "Clear constants and setup" et "Rootlevel" activées. Afin de
comprendre le pourquoi, vous devez savoir que tous les Gabarits à partir de la racine du pagetree et en parcourant le
pagetree sont lus et exécutés.Ceci s'appelle le "rootline" :
Dans cette image, sur la droite, le rootline (chemin à la racine) de la page "Experienced web...." (3) parcourt tout le chemin
depuis la page "www.typo3.com" (zéro). Ceci parce qu' il y a un Gabarit enregistré à la page "www.typo3.com" avec
l'indicateur de rootlevel activé (voir ci-dessous). Sur la gauche vous voyez comment le rootline est représenté à l'intérieur de
la zone de données PHP (PHP-array .
Si vous vous posez une question comme "Est-ce que la page 730 est dans le rootline?" alors la réponse est oui dans ce
cas-ci, parce que la page avec l'identification 730 ("Introduction") s'avère justement être la deuxième page dans le rootline (à
index 1). Veuillez voir le TSref pour plus d'information
La case "Rootlevel" activée implique que le Gabarit annonce le début d'un nouveau site Web pour la page où le Gabarit se
trouve mis en fonction. Si vous ne placez pas ce checkbox, le Gabarit agit en tant qu'extension à n'importe quel Gabarit
dans le rootline avant lui.
La case "Clear constants" activée implique que toutes les constantes des Gabarits précédents dans le rootline sont effacés
avant que le chargement du Gabarit activé sur cette page.
"Clear setup" activée implique que n'importe quel code de TypoScript des Gabarits précédents dans le rootline sont effacés
avant que le chargement du Gabarit activé sur cette page.
Si vous essayez de regarder la page maintenant, un errormessage apparaîtra
Vous devez écriture quelques instances de TypoScript dans les champs "Constants" et "Setup". Normalement vous incluez
certains des Gabarits statiques pour commencer, mais pour cet exemple nous faisons un petit Gabarit à partir de zéro.
Écrivez donc les instances suivantes dans le champ "Constants" :
bgCol = red
Vous avez à présent défini une constante appelée - "bgCol" – avec la valeur "red". Nous allons insérer d'autres constantes
dans le champ "setup" en insérant :
page = PAGE
page.typeNum = 0
page.bodyTag = <BODY bgColor="{$bgCol}">
page.10 = HTML
page.10.value = Hello World
page.10.value.case = upper
Ceci ressemble à ceci dans votre browser
Cet exemple montre un certain nombre de points concernant TypoScript. Commençons avec les deux premières lignes. Ici
"page" est définie pour être une “PAGE-object”. Une propriété exigée pour un “PAGE-object” est la valeur de 'typeNum” qui
est spécialement utilisé quand un site Web utilise des cadres (frames) (dans ce cas, le typeNum identifierait les différents
cadres). Si le typeNum est zéro, il correspond alors à une page sans la valeur de type, soit par exemple "?id=51". C'est le
cas des sites Web sans cadres (frames)
Une autre propriété de PAGE-objet est "bodyTag". A partir d'ici, vous entrez dans le domaine des étiquettes qui concernent
le corps de page. Veuillez noter que la couleur de fond est rouge parce que nous avons inséré la constante dans le champ
"Constants".
Enfin, un “Content-objet” du type "HTML" est défini. La valeur est mise à "Hello World". Ceci est envoyé hors fonction Typo3
au site Web (fonction Php). Mais vous verrez que la restitution est faite en “haut de casse” (majuscule) par ce que la valeur
et toutes les propriétés sont analysée par la fonction "stdWrap" (habillage standard). Une propriété de "stdWrap" est le
"case" qui peut être "upper" ou "lower". Faites une conjecture de ce que peut faire "lower" …
Un website avec un menu léger
Maintenant nous ajouterons un petit menu au site Web.Ce menu doit être situé au-dessus du texte "Hello World". Ajouter
maintenant ceci au bas du champ "Setup"
page.5 = HMENU
page.5.1 = TMENU
page.5.1.wrap = | <BR><BR>
page.5.1.NO {
linkWrap =  <font color=yellow> | </font> 
ATagBeforeWrap = 1
}
Et voici comment vous définissez un nouvel objet de contenu (contenu-objet) à la position 5 dans la “content-array”
(structure d'information) de la page. Le type d'objet est HMENU. HMENU a une structure d'information numérique des objets
“menu”. Ici nous utilisons "TMENU" comme menu-objet pour le premier niveau. Ceci nous donne un menu de type texte
“textbased”. Pour le “TMENU-objet” nous avons placé la propriété "enveloppe" (wrap). Comme vous pouvez vous en
rappeler, "a wrap” (enveloppe) signifiera qu'elle sera fractionnée par le caractère "|" et que les deux premières parties seront
placées autour de "quelque chose". Dans ce cas-ci (page.5.1.wrap = | < BR><BR >) le menu entier est enveloppé de sorte
que deux nouvelles lignes apparaissent après le menu.
Puis, quelques propriétés sont définies pour “.NO" sous TMENU. “.NO" signifiant l'installation des éléments de menu en
condition “normale”. Une autre des conditions peut être "ACT" (Active) qui entraînerait que quand un menu-élément est
quelque part dans le “chemin d'accès" (path), il est intégré dans le site Web. Par exemple vous pourriez changer la couleur
de l'élément en blanc si vous voulez indiquer visuellement sur le menu-élément qu'un visiteur surfer a récemment écrit sur
cette section du site.
Sous “.NO" vous définissez que chaque menu-élément est enveloppé dans une étiquette de police qui met en jaune le “lien”.
"ATagBeforeWrap" est une option qui vous indique que l'étiquette de ”Lien” (< A >) doit être habillé dans le menu-élément
avant l'application de l'étiquette de Police (ou bien la couleur jaune sera ignoré par l'étiquette-couleur normale).
Insérer un menu graphique
Au lieu du menu textuel que vous avez juste défini, vous pourriez insérer le menu graphique du site Web Typo3. Ceci serait
effectué en utilisant ce code en lieu et place du code précédent :
page.5 < temp.topmenu
Contenu du site
Maintenant vous voudriez ajouter le contenu au site Web. Dans la solution standard de TypoScript le table de contenu
principale est "tt_content". Ainsi vous ajoutez un nouvel objet contenu du type CONTENT. Vous avez mis la propriété "table"
avec la valeur “tt_content”.
Pour configurer la requête du “sql-select” vous définissez la propriété "pidInList" de l'objet "select". Quand vous le mettez à
"this" le pid correspondant à l'enregistrement du contenu (content-record) DOIT correspondre au “id” de la page actuelle !
"orderBy" est mis avec la valeur "sorting" qui correspond à la colonne dans la table tt_content qui va déterminer le tri des
éléments
page.10 = CONTENT
page.10 {
table = tt_content
select {
pidInList = this
orderBy = sorting
}
}
Pour que cela fonctionne, vous devez définir comment chaque enregistrement de contenu va être disposé (layouted). Par
défaut ceci est défini par le “root-object” l'objet racine "tt_content".
Voici un exemple court de TypoScript qui produirait du contenu pour l'en-tête et le texte de CType :
tt_content = CASE
tt_content.key.field = CType
tt_content.header {
1 = TEXT
1.field = header
1.wrap = {$cHeaderWrap}
1.space = 3 | 2
}
tt_content.text < tt_content.header
tt_content.text {
3 = TEXT
3.field = bodytext
3.fontTag = {$cBodyTextWrap}
3.br = 1
3.space = | 10
3.parseFunc {
makelinks = 1
makelinks.http.keep = path
makelinks.http.wrap = <B>|</B>
makelinks.mailto.keep = path
makelinks.mailto.wrap = <FONT color="blue">|</FONT>
makelinks.mailto.ATagBeforeWrap = 1
}
}
Il y a deux constantes ici, cBodyTextWrap et cHeaderW rap Celles-ci doivent être alors définies dans le champ
“Constantes” du Gabarit et avoir pour valeur i
cHeaderWrap = <FONT face="Verdana" size="3" color="#333333"><B>|</B></FONT>
cBodyTextWrap = <FONT face="verdana" size="2"> | </FONT><BR>
Maintenant, ceci nous donnerait une en-tête de taille 3, Verdana, en gris et gras. Le bodytext serait formaté également avec
le Verdana mais en taille 2 et avec une étiquette < BR>- après la section
Concepts
“&id” et “&type”
id se rapporte au "numéro de page" dans Typo3, au champ "uid" de la “table de page”. Indique quelle page montrer
type indique pour une page, quelle "partie" de la page montrer. Ceci est principalement employé quand vous faites de sites
basés sur des cadres 'frame'. Vous pourriez l'employer pour d'autres situations également. Je n'expliquerai pas le frameset
ici, mais vous trouverez de quoi dans le Tutoriel 3, "Frames avec Typo3". Par contre, je vais donner un conseil sur la façon
dont le paramètre "type" d'un URL est employé :
Considérer le testsite :
id=10 ("index.php?10") ramène cette même page. "type" n'est pas défini, mais par défaut, c'est zéro et le résultat est
identique Essayer de changer la valeur du type
&type=1
&type=2
&type=3
Comme vous pouvez voir une valeur du type avec 3 valeurs différentes donne le même résultats dans une page nonconfigurée. C'est logique parce qu'en regardant le TypoScript dans le Gabarit, nous nous rendons compte que "typeNum=3"
n'est pas défini
Mais comment le Gabarit apparaît?. Jetons un coup d'oeil dans le Template Analyzer
Comme vous voyez le Gabarit inclut beaucoup de “static_template” et le premier d'eux semble être un static_template avec
un cadre (frameset) dedans. En jetant un coup d'oeil à ce static_template, nous voyons ceci:
3 Objets “page” sont définis, "page", "left" et "frameset". Chaque objet PAGE définit l'apparence visible à l'affichage en se
servant de la valeur "&type"
Enveloppes (wraps)
L'enveloppe est un concept très important pour beaucoup d'objets de TypoScript. . Une enveloppe "wrap" est une chaîne de
caractères (text string), qui est délimité (divisé en parties) par "|" (ligne verticale, ALT+0124). Ceci est une enveloppe“wrap”:
<B>
|
</B>
Et si la chaîne de caractères "World" est enveloppée par l'enveloppe, le résultat est ceci :
<B>WORLD</B>
Noter que quoiqu'il y ait les espaces entre les parties de l'enveloppe et le diviseur ("|"), chaque pièce d'enveloppe est
équilibrée (le réglage doit enlever les espaces blancs "whitespace" avant et après quelque chose. Les "Whitespace" sont le
caractère “espace”, “tabulation” et le “linebreak”
Vous allez pouvoir réaliser que c'est très, très utile parce que le HTML est tout à fait sur le même principe qui consiste à
envelopper des “choses” dans des étiquettes HTML. De cette façon, il sera très facile de le contrôler et de l'exploiter. (BTW:
L'enveloppe est énumérée comme un “type de donnée” dans le Tsref).
Structure de données (arrays) (1,2,3,4...)
Parfois, vous verrai les propriétés listées comme suit : "1,2,3,4..." ou "Array...". UN autre cas rencontré est le “datatype set to
"array of strings".
Numerical arrays (structure de données numériques)
Il est nécessaire de comprendre que TypoScript n'est pas un langage comme le Javascript. TypoScript est plus une liste de
déclarations (définitions). L'ordre des déclarations est positionné par les “array numbers”. En fait TypoScript est enregistré
dans une structure de données (array) PHP. Il n'est pas exact de dire qu'on ne puisse enregistrer des déclarations qu'avec
TypoScript. En effet, quelques déclarations fonctionnent par appel de fonctions PHP (comme le stdWrap). Ils peuvent
manipuler et même obtenir des données de résultat. C'est pourquoi TypoScript est beaucoup plus flexible et puissant que
les simples descripteurs de HTML.
Un bon exemple des propriétés qui soient de type “structure de données numériques” (numerical array) est l'objet Page. Le
fait à noter concernant l'objet PAGE est qu'il devrait renvoyer un certain contenu. Afin qu'il puisse le faire, vous devez lui
rattacher quelques objets “contenu” (contents) (cObject) (nous le verrons plus tard). Un objet “cObject” assez simple est
"HTML" ou "TEXT". Ils font la même chose (mais pas de la même manière).
page = PAGE
page.typeNum=0
page.10 = TEXT
page.10.value = Hello world
Ceci définit un objet Page et affichera les textes "Hello world" sur votre browser. "10" pourrait être 934290873 ou tous
nombres entiers. Mais pourquoi "10" alors. Pour moi c'est une tradition, mais ce sujet intervient maintenant, parce que si
vous voulez ajouter encore plus de contenu à la page, comment vous faites cela ? Et bien, vous ajoutez juste un autre
cObject à la structure de données (array) comme ceci :
page = PAGE
page.typeNum=0
page.10 = TEXT
page.20 = TEXT
page.20.value = <BR>Are you listening?
Maintenant pourquoi utiliser "20" ? Bien, en fait, utilisez n'importe quel nombre plus grand que “10”. Mais laissez de la place
pour de nouveaux cObjects entre 10 et 20. On ne sait jamais…
Une chose importante à comprendre est que les alignements numériques sont toujours triés. Les alignements non
numériques n'ont jamais n'importe quelle commande attachée à eux, mais les alignements numériques ont. La
conséquence des alignements numériques trié par leur nombre est celle :
Une chose importante à comprendre est qu'une “structure de données” numérique est toujours triée. Les "structures de
données" non numériques n'ont jamais d'ordre rattachée à eux, mais les "structures de données" numériques en ont
toujours. La conséquence des "structures de données" numériques triées par leur nombre est celle-ci :
page = PAGE
page.typeNum=0
page.10 = TEXT
page.5 = TEXT
page.5.value = <BR>Are you listening?
... la ligne "<BR>Are you listening?" est maintenant affichée avant "Hello world" quoiqu'elle aient été définies dans un ordre
inverse. Normalement vous verrez TypoScript qui est bien codé dans l'ordre de la "structure de données" numériques, mais
c'est juste une bonne habitude du programmeur du fait qu'il est plus lisible de cette façon.
String arrays (structure de données de chaîne de caractères)
Chaque fois qu'une chaîne de caractères est défini (comme l'objet de META dans TypoScript), c'est parce que les clés
(éléments dans l'array) sont uniques et cela à un sens. META est un bon exemple. Si vous voulez mettre des Métaétiquettes "description" et "mots-clés"(keywords) sur votre page, faites ceci:
page = PAGE
page.typeNum=0
page.meta.REFRESH = 60; index.php?id=34
page.meta.DESCRIPTION = This is the description of the content in this document
page.meta.KEYWORDS = key, words, ...
Ceci a comme conséquence ce code HTML dans l'en-tête du site (qui est très, très vide, si vous essayez ceci …)
<meta http-equiv="REFRESH" content="60; index.php?id=34">
<meta name="DESCRIPTION" content="This is the description of the content in this document">
<meta name="KEYWORDS" content="key, words, ...">
“styles.content.[xxx]”
Si vous étudiez le static_template, particulièrement "content (default)", vous verrez une utilisation étendue des objets du
"styles.content.[xxx]".
Tout d'abord, vous devez comprendre que les objets de niveau supérieur (toplevels object) nommés "temp" et "styles" sont
totalement exclus après qu'un Gabarit ait été (parsed) analysé et "compilé" (by serialize()) pour enregistrement dans
l'antémémoire allouée au gabarits (cache_hash). La raison en est que parfois il est très utile de pouvoir réutiliser un objet
dans beaucoup d'endroits du TypoScript. Créer des objets quelque part dans les objets “styles” ou “Temp” a pour avantage
que les objets peuvent y être recopiés depuis vers vos scripts tout en étant à la fin éliminés pour ménager l'espace libre
dans le cache de gabarits.
Vous devrez utiliser "temp." pour vos propres objets partagés, "styles." étant réservé pour fournir les objets partagés en
commun pour leur utilisation dans les static_templates.
Example from "content (default)"
# CType: image
tt_content.image = COA
tt_content.image {
10 = < lib.stdheader
20 < styles.content.imgtext
}
Dans cet exemple un objet du static_template "styles.content (défaut)" est copié sur la position "tt_content.image.20". Et
cela ressemble à ce que vous voyez dans ce navigateur d'objet (browser object):
Regarder dans le Gabarit statique (tatic_template) "styles.content (défaut)" nous voyons que l'objet "styles.content.imgtext"
est défini comme ceci :
# imgtext
styles.content.imgtext = IMGTEXT
styles.content.imgtext {
imgList.field = image
textPos.field = imageorient
imgPath = uploads/pics/
imgObjNum = 1
1 {
file.import.current = 1
file.width.field = imagewidth
params = align="top"
imageLinkWrap = 1
....
}
maxW = {$styles.content.imgtext.maxW}
maxW.override.data = register:maxImageWidth
....
}
Maintenant, si je veux changer la valeur de "styles.content.imgtext.maxW" en "400", alors j'ai deux options. Mais on y voit
aussi une erreur très commune et on doit plutôt essayer ceci:
styles.content.imgtext.maxW = 400
Vous voyez, ceci ne vous aidera pas. La raison en est que l'on change la valeur dans l'objet "styles.content.imgtext" et pas
dans "tt_content.image.20" où il est de fait et au final utilisé dans ce cas-ci. Alors, vous pouvez choisir l'une de ces
possibilités
1) Puisque "styles.content.imgtext" est copié "tt_content.image.20" par l'opérateur "<" de TypoScript, toutes les propriétés de
"styles.content.imgtext" sont maintenant également dans "tt_content.image.20". Par conséquent vous pouvez changer la
valeur de cette façon:
tt_content.image.20.maxW = 400
C'est manifestement en accord avec le “nodetree” (arbre de noeud) du browser d'objet, n'est-ce pas ?
2) Si vous changez la valeur de "styles.content.imgtext.maxW" directement, vous devez également la reproduire là ou elle
est utilisée :
tt_content.image.20 < styles.content.imgtext
Ceci fonctionne également, mais on se rende compte qu'on efface tous les changements précédents faits dans
"tt_content.image.20" (à la manière de la méthode 1 présentée dans l'exemple)
Je recommande la méthode 1
Quoi qu'il en soit vous devez vous rendre compte que l'avantage astucieux des objets 'styles.content.[xxx ]" réside dans ce
qu'il fournit les propriétés par défaut qui peuvent être utilisés dans tout vos Gabarits. Alors que le fait de changer
"styles.content.[xxx]" et de le recopier ailleurs n'apporte pas de changement aux autres objets qui ont été positionnés sur
"styles.content.[xxx]"
Pour exemple, considérez "tt_content.textpic.20" qui utilise également "styles.content.imgtext" :
tt_content.textpic = COA
tt_content.textpic {
10 = COA
10.if.value = 25
10.if.isLessThan.field = imageorient
10.10 = < lib.stdheader
}
20.text.10 = COA
20.text.10 {
if.value = 24
if.isGreaterThan.field = imageorient
}
20.text.20 = < tt_content.text.20
Afin de changer également la valeur ici, vous devez ajouter cette ligne:
tt_content.textpic.20.maxW = 400
Maintenant, pourriez-vous ajouter ceci maintenant ?
tt_content.image.20 < styles.content.imgtext
tt_content.textpic.20 < styles.content.imgtext
La réponse est "non" dans ce cas-ci, parce que si vous jetez un coup d'oeil sur le TypoScript pour “tt_content.textpic”, les
propriétés de “styles.content.imgtext” sont modifiées après que l'objet soit copié
...
20.text.10 = COA
20.text.10 {
if.value = 24
if.isGreaterThan.field = imageorient
}
20.text.20 = < tt_content.text.20
...
Cette situation est généralement résolue en utilisant les constantes largement mises en application, et dans ce cas
spécifique vous avez l'occasion de changer la constante "styles.content.imgtext.maxW".
Sections éducatives
Introduction
A partir de maintenant, vous êtes encouragé à suivre les exemples en utilisant le “Testsite” fourni avec Typo3. A tout moment, référez-vous à
TSref de manière à vous familiariser avec lui. Ce sera votre bible quand vous travaillez avec Typo3. (When you're not working with Typo3, I can
recommend the true God's Word instead. Much better in real life.)
Utiliser le Testsite standard avec votre nouveau Gabarit rattaché à la racine du branchement de la page "Startpage".
Code notation conventions:
1) Tous les codes TypoScript utilisent la fonte courrier
page = PAGE
page.typeNum=0
page.10 = TEXT
2) La plupart des exemples omettent les deux premières lignes qui sont supposées présentes :
page.10 = TEXT
3) Le code peut être raccourci dans le cas d'exemples où le changement ne concerne qu'une
seule ligne. Les changements sont mis en valeur en rouge)
page.10 = TEXT
page.10.case = upper
a pu également être énoncé de cette manière:
...
stdWrap
Le concept “stdWrap”
(Prononcé "Standard wrap" - “enveloppe standard”). stdWrap est un “assistant” qui conviens dans beaucoup de situations.
Ce concept d'enveloppe est mature. Pour illustrer avec des exemples, je vous présenterai l'utilisation des objets de contenu
“TEXT” et “HTML” (cObjects). Ré ferrez-vous à TSref:
Le "TEXT" cObject semble avoir pour propriété “.value”.Le “Datatype” est ".value" lequel est ce que vous souhaitez du
moment qu'il figure dans la liste des datatypes. (Avec datatype qui est "HTML-color", vous auriez à indiquer une couleur
HTML comme valeur, telle que le “red” ou encore le code "#FF0000").
Le cOobject "HTML" lui aussi a pour propriété “.value”. Il est défini comme étant "HTML" – ce qui concrètement reviens au
même que pour l'objet “TEXT”. De fait, c'est tout simplement une valeur de “chaîne de caractères” (st ring-value).
La différence entre les deux cObjects semble être la manière dont stdWrap est implémenté (mis en oeuvre). Mais jetez
d'abord un coup d'oeil sur la description de l'objet stdWrap dans le TSref.
Ce sont certaines des propriétés de stdWrap. Fondamentalement l'objet stdWrap (parfois également appelé "fonction")
traite (principalement du moins) le contenu de manière quelconque. Une propriété qui a une fonction apparente immédiate
est la propriété “.case” (cass e de caractère) de l'objet stdWrap. ".case" n'est pas énuméré dans ces exemples, mais aller
regarder par vous-même dans le TSref (au fait, il est vraiment temps que vous ouvriez “Le livre")
La propriété “.case” peut convertir la casse (ensemble des caractères d'une même police) en entrée. A présent, en accord
avec la description des cObject TEXT et HTML, on va présenter la manière dont ils fonctionnent :
Le cObject TEXT :
Les propriétés de stdWrap sont incluses dans l'objet TEXT lui même. Ceci signifie que :
page = PAGE
page.typeNum=0
page.10 = TEXT
... va afficher en résultat "HELLO WORLD"
Le cObject HTML:
Les propriétés de stdWrap sont incluses dans la propriété “.value” de l'objet HTML. Cela impliquera que
page = PAGE
page.typeNum=0
page.10 = HTML
page.10.value.case = upper
... va afficher "HELLO WORLD"
(Commentaires: Les propriétés de stdWrap sont un peu in conséquemment mis en application sur l'objet de TEXT parce
que la propriété '.value" est "mélangée" avec les propriétés de stdWrap. Heureusement la propriété ".value" n'est pas définie
pour l'objet stdWrap. Mais de toute façon, c'est une mauvaise conception - peut-être aussi une confusion concernant l'objet
"TEXT". C'est le cas également de quelques autres objets comme “CARRAY”
Tandis que vous en êtes là...
Essayez de regarder la source de la page que vous avez juste créée. Notez que Typo3 définit par défaut une en-tête et la
bodysection de HTML pour vous ! En plaçant des propriétés pour l'objet “Page”, vous pourrez cependant modifier la teneur
de ces derniers sections. Voir même les neutraliser.
Implémentation générale
Le stdWrap est très puissant et ainsi compense le fait que TypoScript ne peut pas vraiment être programmé pour contrôler
aucun des éléments de la structure, à l'exception de "conditions", puisque vous pouvez faire en sorte que std Wrap compare
des valeurs, puis sur la base du résultat de choisir de renvoyer une autre valeur, et ainsi de suite.
Normalement vous verrez des propriétés stdWrap mises en application comme vous avez pu voir la propriété de “.value” du
cObject HTML. Réferrez-vous à l'exemple “acn” dans le TSref qui est tout comme.... enfin, presque la moitié des valeurs des
propriétés que vous pouvez définir, y compris plusieurs des propriétés pour le stdWrap elle-même!'
Propriétés de stdWrap
Comme nous avons vu précédemment, stdWrap est un concept qui fonctionne - basé sur ses propriétés – et sur un certain
“.value”. Mais il y a une autre tâche importante effectuée par stdWrap qui peut être bien plus populaire (ou nécessaire).
C'est celle permettant d'aller récupérer un contenu externe, par exemple le titre de la page, la date du jour, d'un cObject, du
nombre de rangées d'une requête, d'une liste de fichiers d'un répertoire ou d'une variable globale.
En fait, stdWrap est un concept divisé en trois parties.
1. Get data (obtenir)
2. Override / Conditions
3. Parse data (analyse et traitement)
L'exemple au-dessus montre seulement les possibilités de “parsing” du stdWrap (3). Nous allons maintenant regarder le
"Get Data" (1) et le "Override/Condition" (2), qui fournissent une manière de faire des structures de commande dans Typo3
(bien que de manière un peu simpliste et compliqué)
Get data
La propriété primaire ici est "field". Ceci ramène la valeur du champ donné par la propriété. La bonne question est : "...
valeur d'un champ provenant d'où, quel enregistrement?".
La réponse est par défaut la page encours "by default, the page record..." (ici, “page" se réfère à la page courante sur
laquelle nous sommes) "... Mais pour 'inside of' CONTENT, RECORD and HMENU cObjects, c'est le 'current record' avec
lequel nous sommes en train d'opérer présentement. Vous trouverez des notes à ce sujet en regardant les descriptions
d'objet.
Techniquement tout ceci va dans le contenu de tslib_content rattaché à la classe tslib_cObj et le 'current record' est défini
par cObj->data.
“.current” - Qu'est-ce?
Souvent la valeur courante est référée à quelques fonctions qui doivent passer une simple valeur au "public" (c'est nous et
stdWrap...) et positionne donc sur un registre "register" appelé "current", la valeur que nous avons pu facilement passer par
la propriété de stdWrap ".current = 1" (boolean). Toutes les fois que le registre "courant" devra être utilisé, ce sera précisé
dans le TSref.
Exemple:
page.10 = TEXT
page.10.field = title
(Après ces lignes "page = PAGE" et "page.typeNum=0" sont présumés “vrai”)
L'affichage devient "Startpage" et non pas "Hello world". C'est parce que la valeur d'entrée du cObject TEXT est écrasée par
la valeur du champ "title", défini par la propriété du “.field” de stdWrap. Wo w! Si vous voulez voir, quels champs sont
disponibles et leur contenu, ajoutez la propriété ".debugData=1"
C'est ce que vous obtenez (tableau en-dessous). Si vous examinez le code HTML, vous verrez que ceci doit être exactement
les informations de debug ("debug-information") parce qu'elles sont envoyées sur le browser avant n'importe lequel des
contenus de la page.
Maintenant, essayez d'atteindre la page une seconde fois. Ceci n'est pas réapparue parce que la page s'affiche depuis le
cache stocké lors du premier affichage ! Wow. Ainsi parce que ce service produit seulement l'information pendant
l'exécution de TypoScript (pendant la restitution et affichage de la page), vous devez continuellement effacer le cache (ou
placer une option no_cache) afin de voir le processus d'affichage complet (restitution et affichage).
Exemple: Obtenir un autre champ
page.10 = TEXT
page.10.field = crdate
Ceci produit un nombre, qui est le temps “UNIX” écoulé depuis 1970 (en nombre de secondes).
Challenge (stdWrap/1)
En utilisant les ”parsing-properties” (propriétés d'analyse et traitement) du stdWrap, pouvez-vous formater cette date sous
une apparence de résultat humainement lisible ?
Exemple: ”.data”
Si vous vouliez obtenir d'autres valeurs, la propriété “.data” est le plus souvent suffisante. Vous pouvez même l'employer
pour obtenir vos champs comme précédemment. Ainsi
page.10 = TEXT
ET
page.10 = TEXT
page.10.data = field:title
fait la même chose dans ce cas-ci (exception de l'objet TMENU, pour lequel le '->') Va obtenir la valeur d'une variable
globale. Avant que vous continuiez ici, veuillez aller sur "index.php?id=5"
page.10 = TEXT
page.10.data = global:id
donne "5"
page.10 = TEXT
page.10.data = global:HTTP_GET_VARS|id
donne aussi "5" (cette fois ci proviens de HTTP_GET_VARS[id])
page.10 = TEXT
page.10.data = leveltitle:1
donne "Content elements" (ce qui est le titre de la page au niveau 1 dans la rootline - vous êtes actuellement dans la
branche 'Startpage/Content elements/Insert content')
Pouvez-vous faire en sorte que la propriété “.data” ramène le titre de la page située un niveau avant la page courante ('page
du parent ') ?
Override / Conditions
stdWrap fournit simplement un "control structures" (structure de contrôle) au mo yen de la comparaison de certaines
propriétés. Mentionnons certaines d'entre elles qui sont appelés “override”, “ifEmpty”, “required”, “if”, “fieldRequired”.
page.10 = TEXT
page.10.override = Hello heaven
donne "Hello heaven" parce que si “override” revoit quelque contenu que ce soit, alors la valeur originale est substituée.
page.10 = TEXT
page.10.override.field = subtitle
Meilleur exemple, parce que maintenant "Hello world" est substituée seulement si le champ de substitution de la page
courante n'est pas vide. Dans la plupart des cas ce champ est vide, mais essayez avec "index.php?id=20"...
Pourriez vous le contourner en employant d'autres propriétés comparatives (comparing properties) - de sorte que la valeur
par défaut soit le sous-titre, mais au cas où elle serait vide, elle serait remplacée par "Hello World"
Avec vos résultats obtenus lors du défi 3, pourriez vous l'envelopper en entier avec les étiquettes <h3>...</h3>? Et pourriezvous remplacer "Hello world" avec le page-titre à sa place, lequel – dans le cas présent – est enveloppé (wrapped) par <font
color="red"> ... </font>
Objets de contenu (cObject)
Introduction
Les objets de contenu (cObjects) sont ceux qui permettent à TypoScript d'y répondre. Ils fournissent des blocs de contenu
de diverses sortes tels que des images, des sources de text/html, des sources à partir d'un fichier, des enregistrements
choisis d'une base de données ou même du code PHP que vous choisissez de coder vous-même
Les cObjects TEXT et HTML ont déjà été expliqués. Ils sont largement utilisés, mais principalement en raison des
propriétés de stdWrap.
COA
Une structure de données (array) de cObjects. Rapide démonstration:
page.10 = COA
page.10.10 = TEXT
page.10.10 {
value = This is the page title:
wrap = <font face="verdana" size=1>|</font>
wrap2 = | <BR>
case = upper
}
page.10.20 = TEXT
page.10.20.field = title
Donne ceci :
Cela pourrait tenir sur une ligne, mais ce choix est un atout pour s'adapter à la situation.
page.10 = TEXT
page.10.wrap = <font face="verdana" size=1>THIS IS THE PAGE TITLE:</font><BR> |
Donnons nous un autre exemple :
page.10 = COA
# Header to this section
page.10.10 = TEXT
page.10.10 {
wrap = <font face="verdana" size=1>|</font>
wrap2 = | <BR>
case = upper
}
# Output page title / subtitle
page.10.20 = COA
page.10.20 {
10 = TEXT
10.field = title
10.wrap = Page title: <B> | </B><BR>
20 = TEXT
20.field = subtitle
20.wrap = Subtitle: <B> |</B>
}
donne cela :
Challenge (cObject/1)
Je voudrais que le sous-titre soit renvoyé sur le browser seulement s'il est présent. Qu'allez-vous faire ?
Faire en sorte que tout le COA (page.10) soit renvoyé au browser seulement si le sous-titre est présent.
Faire en sorte que tout le COA (page.10) soit renvoyé au browser seulement si nous sommes au niveau 2 et plus avant dans
le rootline (c'est-à-dire, si nous sommes sur une subpage, par exemple. "Content elements")
FILE
C'est très simple, aussi je vais juste montrer un exemple court :
page.10 = FILE
page.10.file = fileadmin/tsbyex/include_me.txt
donne :
This is a simple textfile with a few HTML-tags in.
… qui est la teneur exacte du dossier. Noter que la propriété de “.file” est un datatype de "ressource", ce qui signifie que les
fichiers doivent résider dans les répertoires /media/ /fileadmin/ et /uploads/ ou encore /typo3temp/. C'est un dispositif de
sécurité afin d'empêcher des programmeurs TS d'inclure tout et n'importe quoi sur le serveur.
Ceci est techniquement installé par “array” $allowedPaths = Array ("media/","fileadmin/","uploads/","typo3temp/"); par “class
t3lib_tstemplate”
Si vous incluez des fichiers images, ils sont montrés à la place en tant que < IMG-étiquettes >.
IMAGE
Inclut une image avec l'étiquette < img>.
Exemple:
page.10 = IMAGE
page.10.file = fileadmin/tsbyex/alligator.jpg
Ceci insère une jolie image d'un bébé alligator (cordialement, un instantané de la Floride).
La propriété de “.file” est une "imgResource" (prononcé "ressource d'image") et il y a plus d'options et de possibilités
disponibles que vous n'en rêvez. Ainsi nous obtiendrons de nouveau celui-ci.
Mais essayons juste quelques petites choses avec l'image. Cet exemple met la largeur à 200 Pixels et ajoute un lien à
l'image qui l'affiche dans une autre fenêtre dans le format de taille originale du document :
page.10 = IMAGE
page.10 {
file = fileadmin/tsbyex/alligator.jpg
file.width = 200
imageLinkWrap = 1
}
imageLinkWrap.enable = 1
Recharger la page. L'image s'affiche maintenant avec une largeur de 200 Pixel dans le browser. Essayer de cliquer l'image,
et une nouvelle fenêtre de browser s'ouvrira affichant l'image avec sa largeur originale.
Questions (cObject/4)
Qu'est ce que Typo3 a fait à l'image quand la taille a été placée à 200 Pixel ? Etait-ce seulement le code HTML qui a été
changé ou l'image a-t-elle été réellement redimensionnée ? Regarder les noms de fichier du premier exemple sans
“file.width” et l'exemple courant. Quels sont les noms et le chemin d'accès affichés ?
En se référant à l'objet ->imageLinkWrap dans TSref, pouvez-vous faire en sorte que 'imageLinkWrap' ouvre l'image
agrandie dans une fenêtre de JavaScript ?
IMG_RESOURCE
Celui-ci fait pareil que le cObject “IMAGE” à la différence très importante que l'étiquette < l'IMG> n'habille (enveloppe-wrap)
pas le fichier.
Exemple:
page.10 = IMG_RESOURCE
page.10 {
file.width = 200
}
donne :
typo3temp/3de305c72b.jpg
Pouvez-vous faire en sorte que l'image soit en fond d'écran d'un Tableau ?
CLEARGIF
Insérez un fichier “gif-file” (fichier d'une image vide), “clear.gif”:
page.10 = CLEARGIF
page.10.width = 200
produira ce code HTML:
<img src="clear.gif" width=200 height=1 border=0><BR>
Notez que l'étiquette <BR> est toujours ajouté au début. Vous êtes toujours libres d'employer le fichier “clear.gif” que vous
trouverez à la racine du site
HRULER
Ceci insère une "règle" horizontale. Pas celui du style HTML, mais fait avec une table et une couleur de fond.
Exemple:
page.5 = TEXT
page.5.value = Before ruler
page.10 = HRULER
page.10 {
lineThickness = 3
lineColor = red
}
page.15 = TEXT
page.15.value = After ruler
Donnera ce résultat:
Amusez-vous avec les autres propriétés et voyez quels en sont les résultats. Vérifier le code source. En outre, pouvez-vous
placer un espace au-dessus de (10 Pixel) et au-dessous de (20 Pixel) de la règle afin de créer de l'espace pour le texte ?
CTABLE and OTABLE
Ces cObjects ont pour objet de vous donner une possibilité d'obtenir des tableaux instantanés pour y placer votre contenu.
Exemple of OTABLE:
page.10 = OTABLE
page.10 {
tableParams = border=1
offset = 10,10
10 = TEXT
10.value = What a cute little alligator! Dear Lord, may it never grow up!
10.wrap = |<BR>
20 = IMAGE
20.file = fileadmin/tsbyex/alligator.jpg
20.file.width=200
}
a pour résultat :
Ce que fait “offset” ici parait évident. Mais normalement vous voudriez disposer de quelques autres paramètres pour
l'étiquette <table>. Ainsi ce qui suit pourrait être une meilleure solution:
page.10 = OTABLE
page.10 {
tableParams = border=0 cellpadding=0 cellspacing=0 width=100
offset = 10,10
...
Si vous ne précisez pas “.tableParams”, "<TABLE border=0 cellspacing=0 cellpadding=0>" s'applique par défaut <TABLE>start tag.
Installer une OTABLE qui décale avec précision (offset) le coin supérieur gauche à "0, 20" et où le contenu se place dans
une colonne de 250 Pixels. Conseil : Le réglage des marges de bodytag exige que vous regardiez les propriétés de l'objet
“Page”.
Exemple de CTABLE:
Un CTABLE propose un dispositif plus riche pour envelopper (habillage) que le simple OTABLE par ailleurs fort utile. Il
comporte un dispositif avec une colonne de contenu et quatre colonnes l'entourant. Celles-ci peuvent être utiles pour y
mettre des menus. Mais regardez donc ce simple exemple tout d'abord:
page.bodyTagMargins = 0
page.10 = CTABLE
page.10 {
tableParams = border=1 cellpadding=0 cellspacing=0
offset = 0,20
c.10 = TEXT
c.10.value = CONTENT cell
}
produira quelque chose tout à fait identique à ce que produirait le OTABLE avec ceci :
page.10 = OTABLE
page.10 {
offset = 0,20
10 = TEXT
10.value = CONTENT cell
}
Pareil, à l'exception du fait que CTABLE ajoute le "valign=top" aux étiquettes < td>.
Regardez maintenant un exemple plus complexe :
page.10 = CTABLE
page.10 {
offset = 0,20
c.10 = TEXT
c.10.value = CONTENT cell
rm.10 = TEXT
rm.10.value = RIGHT cell
lm.10 = TEXT
lm.10.value = LEFT cell
tm.10 = TEXT
tm.10.value = TOP cell
}
bm.10 = TEXT
bm.10.value = BOTTOM cell
Dans ce cas-ci nous employons chacune des cinq "cellules de contenus" ("content cells") de CTABLE et on obtiendra ceci :
Maintenant, vous pouvez mettre n'importe quel OBJECTS que vous aimez dans les cellules. Mais il y a encore deux
dispositifs à regarder en détail. Avec "cMargin" vous pouvez ajouter des marges entre les cellules et toute autour d'elles et
avec “cWidth” vous pouvez automatiquement fixer l'espace en dehors de la cellule de contenu à une certaine largeur grâce à
l'utilisation de “clear-GIF”..
Essayez d'ajouter:
...
offset = 0,20
cMargins = 10,20,30,40
cWidth=300
rm.TDParams = bgcolor=red valign=bottom
...
... et voilà ce que vous obtenez:
Noter que la cellule de droite (rm) a quelques paramètres supplémentaires qui lui ont été spécifiés avec pour résultat le
rouge du fond de la cellule du tableau. Juste pour le “fun”, laissez vous aller à regarder ce TypoScript dans le “Object
Browser” :
Instructif, n'est-ce pas...
Gabarit (TEMPLATE)
Parfois, vous pouvez vouloir employer un gabarit HTML au lieu de le faire en entier dans TypoScript. C'est exactement pour
çà que l'objet TEMPLATE existe.
Exemple:
Pour que le Gabarit soit actif, c'est tout ce dont vous avez besoin:
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/tsbyex/template.html
… et ceci est apparemment ce qui obtenez :
Mais après qu'une inspection plus minutieuse du code source, on s'aperçoit que la totalité du fichier a été inséré :
...
// End Hiding Script -->
</script>
</head>
<body bgcolor="#FFFFFF">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
This is a template that demonstrates the concept of subparts and markers.

This is a <i>###SIMPLE_WORD###</i> textfile with a few HTML-tags in.<br>
<br>
Check out the link to the front page.

</body>
</html>
</body></html>
… et celui n'était pas l'intention - à moins que nous voulions que le dossier entier fût inséré, naturellement. Mais on peut
facilement arranger cela, parce que pour le “cObejct” TEMPLATE vous pouvez définir un "subpart" pour travailler dessus.
Les “Subpart” sont encadrés par deux marqueurs (par défaut "###" ajouté au début) qui peuvent ou ne peuvent pas être
dans un “comment” HTML.
Notre subpart est "###DOCUMENT###", aussi essayez avec ceci:
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/tsbyex/template.html
page.10.workOnSubpart = DOCUMENT
Bien mieux. La source du code HTML obtenu nous donne maintenant ceci:
...
</head>
This is a <i>###SIMPLE_WORD###</i> textfile with a few HTML-tags in.<br>
<br>
Check out the link to the front page.
</body></html>
Maintenant notre intention est de substituer ###SIMPLE_WORD### par le titre de la page et de substituer le subpart
###LINK### par lui-même, mais mais lié à la page d'accueil du site Web (et c'est dur !
Exemple:
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/tsbyex/template.html
workOnSubpart = DOCUMENT
marks.SIMPLE_WORD = TEXT
marks.SIMPLE_WORD.field = title
subparts.LINK = TEXT
subparts.LINK.current = 1
subparts.LINK.debugFunc = 1
}
Voilà ce qu'on obtiens:
Et le code source HTML obtenu est celui-là:
...
// End Hiding Script -->
</script>
</head>
This is a <i>Content elements</i> textfile with a few HTML-tags in.<br>
<br>
Check out the link to the front page.
</body></html>
Comme vous pouvez le voir, le marqueur SIMPLE_WORDS a été correctement substitué. Le “Lien-subpart” semble
également fonctionner. Au moins les comments HTML n'y sont plus. Mais la valeur n'est pas traitée au-delà. En fait, c'était
le but afin d'étudier un petit détail :
Selon le TSref, "De plus, la valeur courante est chargée avec le contenu de chaque subpart juste avant que le cObject pour
le subpart soit analysé. " Ainsi ce que les lignes ...
subparts.LINK.debugFunc = 1
... devrait faire est de charger le cObject TEXT avec la valeur du registre "courant" (voir stdWrap) et parce que j'étais curieux
au sujet du contenu que l'objet “TEXT” contenait réellement, je l'ai étudié avec le “flag” ".debugFunc = 1" lequel – de la
même manière que nous l'avons montré avec “debugData” précédemment (voir stdWrap) – restitue comme résultat la valeur
contenue durant "l'exécution" du TypoScript.
Aussi, maintenant je monte d'un niveau - l'encapsulation du subpart LINK avec un lien.
...
}
subparts.LINK.typolink {
parameter = 1
}
Ceci ajoute la bonne étiquette de lien au subpart qui maintenant permet d'atteindre la page avec le id=1.
Dans ce cas-ci le id=1 s'avère être la "page d'accueil (frontpage)" de mon site, mais je voudrais une solution plus flexible,
ainsi ce que je vais faire est d'aller chercher le ”uid” de la page au niveau 0 dans le rootline. Nous savons déjà comment
faire (.data = leveluid:0 - voir stdWrap et les datatypes dans TSref), mais ne savons pas, si le paramètre de la propriété de
l'objet "typolink" a des propriétés stdWrap ... (obtenir la référence, trouver la fonction de typolink.... regarder. ... YES!).
...
parameter.data = leveluid:0
}
}
Pouvez-vous faire en sorte que le lien vous envoie à la page du niveau 1 dans le rootline au lieu de la page d'accueil ?
Pouvez-vous définir la cible du lien pour être "_ blank" ? Et pouvez-vous également envelopper le lien dans des étiquettes
<B> ?
FORM (formulaire)
Bien sûr, vous pouvez créer des formulaires manuellement, mais l'avantage de laisser Typo3 le faire est que la syntaxe est
assez simple pour l'enseigner aux non techniciens (nn-techies) et vous pouvez le faire valider automatiquement (manière
simple) par JavaScript.
Exemple:
page.10 = FORM
page.10.data = Label | input
page.10.layout = ###LABEL###: ###FIELD###<BR>
C'est le minimum absolu d'information requis pour créer un formulaire.
La propriété “.data” prend les informations en entrée, ce qui est conforme à la syntaxe définie dans TSref et “.layout” est un
minitemplate (mini-gabarit) où ###LABEL### et ###FIELD### représentent respectivement l'étiquette et le champ inséré.
Tout d'abord, comment ajoutons-nous plus de champs ? Et bien, normalement, les valeurs d'entrée qui génèrent le
formulaire vient d'un champ “texte” de la base de données, normalement "bodytext" d'un enregistrement de “tt_content”.
Dans ces valeurs d'entrée chaque ligne représente un nouvel élément. Nous ne pouvons pas faire cela en envoyant une
chaîne de caractère en entrée (with “string-input”) directement sur la propriété de “.data”, alors le moyen détourné
(workaround) est d'entrer un double "|" équivalent à un changement de lgne (linebreak). Par conséquent…
page.10 = FORM
page.10.data = Name|input
||
Address|textarea
||
Send|submit|Send the form
..va nous donner cela :
Le script “tslib/index_ts.php” (qui est le script d'entrée principal, voir Typo3Overview, F1) est capable d'envoyer des
formulaires par emails (formmail-emails). Pour créer un formulaire pour email vous devez au moins préparer ceci:
page.10 = FORM
page.10.data = Name|*input,40 || Address|textarea,40,10 || Send it...|formtype_mail=submit|Send the form ||
|subject=hidden|This is the subject
page.10.recipient = [email protected]
page.10.locationData = 1
page.10.REQ=1
page.10.REQ.layout = ###LABEL### (Required): ###FIELD###<BR>
Noter les changements en rouge :
•
Les champs d'entrée ont donnés un paramètre de taille
•
de même que le textarea
•
le bouton de soumission(submit-button) est appelé "formtype_mail" afin que le script se rendre compte qu'un email est
sur le point d'être envoyé
•
le sujet est placé (subject)
•
le destinataire est placé (recipient)
•
le locationData est mis à “ON” (requis si le script index_ts.php doit envoyer le email)
•
On met en oeuvre REQ qui permet le contrôle du champ requis (required-field) (celui dont le champ "Name" est marqué
comme exigé “as due” par la présence de l'astérisque devant le mot "input” (entrée))
•
REQ.layout est proposé alternativement aux champs exigés.
Cela ressemble à ceci ::
Si vous voulez entrer dans des détails sur ce sujet, allez voir svp les “form-définitions” dans le gabarit statique
"styles.content (defaut)” / “styles.content.mailform”
CAS d'exemple
Ce cObject fournit maintenant une "structure de co mmande"(control structure) à TypoScript. Cela fonctionne comme un
générateur de commutateur (switch-construct) :
Exemple:
page.10 = CASE
page.10.key = cheese
page.10.cheese = IMAGE
page.10.cheese {
file.width=200
wrap = Cheese....  |   is what this guy says
}
page.10.tomatoes = TEXT
page.10.tomatoes.value = Tomatoes are so tasty
page.10.default = TEXT
page.10.default.value = If nothing else is going on, this happens...
Ceci est le résultat obtenu:
Comme vous pouvez le voir, la variable reservèe « key » à l'intèrieur de cObject est « cheese ». Ce qui permet la recherche
de la variable associèe cObject : page.10.cheese.
NB : la liste des variables reservèes : "setCurrent", "key", "default", "stdWrap" et "if".
Remplacez la variable cheese par tomates ou laissez la vide (dans ce dernier cas, page.10.default apparait) Ceci est très
utile si vous souhaitez insérer des donnèes au lieu de valeurs numèriques. Jettons un oeil aur le script.
temp.cheese = IMAGE
temp.cheese {
file.width=200
wrap = Cheese....  |   is what this guy says
}
temp.tomatoes = TEXT
temp.tomatoes.value = Tomatoes are so tasty
temp.default = TEXT
temp.default.value = If nothing else is going on, this happens...
page.10 = CASE
page.10.key.data = level:1
page.10.1 < temp.cheese
page.10.2 < temp.tomatoes
page.10.default < temp.default
page.20 = TEXT
page.20.data = level:1
page.20.wrap = <HR> | page.30 = TEXT
le rèsultat :
Essayez d'atteindre les pages "Startpage", "Content ele ments", "Insert content" et parce que chacune est à son propre
niveau spécifique, vous obtiendrez des contenus spécifiques.
...
page.10.1 < temp.cheese
page.10.2 < temp.tomatoes
page.10.default < temp.default
...
Un autre petit conseil concernait mon utilisation des objets provisoires créés dans l'objet “temp. toplevel” temporaire du
niveau supérieur (lisez en plus sur ceci d'ailleurs). Il peut être très utile de définir des gros blocs de TypoScript dans cet
objet de toplevel et puis plus tard de les copier au bon endroit. Ceci crée une occasion d'obtenir une meilleure vue
d'ensemble de vos TypoScripts.
Challenge
Prendre un peu de temps pour examiner le static_template "content (default)". Essayer d'améliorer votre maîtrise avec le
CAS d'exemple cObject utilisé dans l'objet tt_content de toplevel. Toutes les fois que nécessaire, se référer à "styles.content
(default)" qui fournit beaucoup d'objets “préfabriqués” afin d'être utilisé dans "content (default)"
LOAD_REGISTER
Ce cObject ne renvoie aucune valeur. Vous pouvez Plutôt l'employer pour placer quelques valeurs dans le “registre". C'est
un genre de procédé pour passer des valeurs à l'entour entre les objets de TypoScript mais c'est un détournement (hack)
afin de l e permettre à un degré restreint. Se rappeler que TypoScript "n'est pas exécuté" comme du JavaScript. Il reste
toujours un groupe en grappe (bunchof configuration) de configurateurs.
Quoiqu'il en soit, cet exemple montre comment cela fonctionne:
page.10 = LOAD_REGISTER
page.10.MY_VALUE = The register value!
page.5 = TEXT
page.5.value = The default value
page.5.override.data = register:MY_VALUE
page.5.wrap = | <HR>
page.15 < page.5
This is the result:
Explication:
Considérez le TypoScript:
L'objet à la position "5" dans la structure de données (array) de l'object PAGE "page" est “exécuté" avant celui en position
"10" lequel est où le registre MY_VALUE est placé pour la première fois. Puisque la valeur de registre était jusque-là vide
"page.5" a renvoyé la valeur de la propriété de “.value”. C'était "la valeur par défaut"
Quand "page.10" est exécutée la valeur du registre est placée.
Quand "page.20" est exécuté, le registre n'est désormais plus vide, donc la valeur écrase (override) la valeur par défaut. Et le
résultat en sortie devient "valeur du registre!"
Challenge
Essayer de regarder les static_templates "TEMPLATE; FIRST " et "TEMPLATE; MM". Tous les deux utilisent ce dispositif.
Pour accomplir quoi ?
imgResource et GIFBUILDER
Introduction
Le datatype de quelque une des propriétés est apparemment "imgResource". En jetant un coup d'oeil à la définition du
datatype, nous apprenons qu'il peut faire une deux choses.
Soit "imgResource" est une référence à un fichier dans cette même logique du concept de "ressource" mais avec quelques
propriétés additionnelles pour modifier l'image.
Ou bien "imgResource" est un objet GIFBUILDER qui nous laisse concevoir une image en combinant les objets graphiques
comme des images, texte et boîtes pleines.
Un fichier normal en entrée
Nous avons déjà fait ceci (avec l'image de l'alligator), parce que la propriété “.file” du cObject IMAGE est une
"imgResource". Mais donnons nous un autre défi ici. Nous voudrions définir un fond d'image pour notre Gabarit.
En regardant les propriétés d'un objet PAGE, “.bgImg” semble être le choix à faire et il est aussi une imgResource.
Essayez-donc cela:
page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg
Vous devez à présent voir ceci:
[N/A...] (non applicable ...)
Essayez alors d'ajouter cela .. :
page.bgImg.width = 200
Et vous devez voir cela ::
Masques Bitmap
Avant que nous continuions, amusons nous un peu. Nous allons employer un concept d'image Bitmap appelé “masque ou
cache” (masking). Fondamentalement un masque est une image de grayscale employée pour combiner deux images de
manière à ce que les secteurs noirs et blancs du masque déterminent quels secteurs des deux images combinées sont
visibles ou pas.
Ceci est notre masque (cache), "mask.jpg":
Donc, essayons maintenant avec ceci ::
page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpg
page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg
Résultat:
Essayons plutôt avec ceci
page.bgImg.m.bgImg.params = -rotate 90
Résultat:
[N/A...]
Importer une image
OK, nous voudrions que le fond d'image soit attaché aux différentes pages, ainsi nous pouvons changer l'image facilement
pour chaque page. Dans ce but nous devons associer et rattacher l'image à l'enregistrement de la page dans le champ
prévu à cet effet pour inclure des fichiers médias.
Faites ceci d'abord :
Puis, essayez d'insérer ce TypoScript sur la page (champ setup=:
page.10 =TEXT
page.10.debugData = 1
Vous devriez voir ceci quand vous aller sur la page (la première fois que nous y allons, rappelez-vous que nous sommes en
mode debug pour l'affichage !)
Le champ "média" contient des références aux images en les énumérant séparées par des virgules. Simple, hein ?
Nous voudrions extraire un simple fichier à partir de la liste, plus précisément la deuxième image, "doggiebus.jpg" :
page.10 =TEXT
page.10.field = media
page.10.listNum = 1
".listNum" est le grand tour de passe-passe utilisé ici. Voyez TSref pour une description...
Tout ce dont nous avons besoin est maintenant de savoir où les images sont stockées réellement, ainsi nous pourrons
ajouter le chemin d'accès (filepath) correct. Aussi nous allons sur le module "Tools" et dans le sous-module de
"Configuration" (tools_config), nous passons en revue la structure de données (array) “$tc” :
Comme vous voyez, le chemin de téléchargement était uploads/media.
Afin de réutiliser cette connaissance sur “imgResource”, regardons ce que contient la propriété “.import” (TSref). De ceci,
nous pouvons en conclure que le TypoScript devrait ressembler à :
page.bgImg {
import = uploads/media/
import.field = media
import.listNum = 1
}
Résultat:
[N/A]
Doggiebus est partout. Naturellement vous pouvez toujours ajouter "page.bgImg.width = 200" si vous aimez un plus petit
carreau pour un plus grand sourire : -)
Challenge (imgResource/1)
Vous voudriez un fond d'image par défaut pour une page au cas où il n'y aurait aucune image chargée en position n° 1 dans
le champ des médias associés. Pouvez-vous faire cela ? (il n'est pas si facile – servez-vous de TSref, bonne chance.)
GIFBUILDER
Commençons par un exemple simple:
page.10 = IMAGE
page.10.file = GIFBUILDER
page.10.file.XY = 200,300
page.10.file.backColor = olive
page.10.file.10 = BOX
page.10.file.10 {
dimensions = 20,20,160,260
color = green
}
Résultat:
OK, essayons en combinant avec le fond d'image précédent :
page.bgImg = GIFBUILDER
page.bgImg {
XY = 200,300
colbacks = olive
10 = BOX
10 {
dimensions = 20,20,160,260
color = green
}
}
page.bgImg.m.bgImg.params = -rotate 90
... et le résultat ... est .. :
[N/A...]
… autre chose que ce que nous avions imaginé.
La raison?. Le TypoScript est erroné. Le dispositif censé masquer avec le "m.bgImg...." s'applique aux imgResources si la
valeur de l'imgResource est un nom de fichier et pas un GIFBUILDER. Dans le dernier cas, les propriétés qui s'appliquent
sont trouvées dans une de ses propres sections … Tellement désolé.
Mais vous pouvez le faire, si l'objet de GIFBUILDER n'est pas le "base-image" :
# The base image:
page.bgImg = fileadmin/tsbyex/alligator.jpg
page.bgImg.height = 200
# The GIFBUILDER overlay:
page.bgImg.m.bgImg = GIFBUILDER
page.bgImg.m.bgImg {
XY = 300,200
colbacks = olive
10 = BOX
10 {
dimensions = 20,20,260,160
color = green
}
}
# The mask (not the movie...)
page.bgImg.m.mask = fileadmin/tsbyex/mask2.gif
Et le résultat obtenu est
Le masque "mask2.gif" ressemble à ceci :
GIFBUILDER - bases
Retour aux bases. Le premier exemple nous a montré comment créer une boîte colorée. Maintenant nous allons ajouter un
un peu de texte :
page.10 = IMAGE
page.10.file {
XY = 200,300
colbacks = olive
10 = BOX
10.dimensions = 20,20,160,260
10.color = green
}
20 = TEXT
20.text = Hello World
20.offset = 10,10
Voilà le résultat :
+calc
Beaucoup de valeurs de “integet” peuvent être définies par des opérations arithmétiques simples comme +, -,/et *. Un usage
particulier est celui qui vous permet d'insérer des codes dans ces expressions qui sont substituées avec la largeur ou la
taille d'un objet “TEXT” ou “ IMAGE-GIFBUILDER”. De cette façon nous pouvons contrôler par exemple la largeur de l'image
en la basant sur la largeur du texte.
Exemple:
page.10 = IMAGE
page.10.file {
XY = [20.w]+20, 30
colbacks = olive
10 = BOX
10.dimensions = 20,20,160,260
10.color = green
}
20 = TEXT
20.offset = 10,15
Résultat:
Prolongeant ceci à l'objet “BOX” de manière à ce que nous puissions employer l'objet BOX pour créer et souligner du TEXT.
En faisons l'essai de la propriété “.nice” de l'objet “TEXT”.
...
10.dimensions = 11,20,[20.w],1
10.color = blue
}
20 = TEXT
20.offset = 10,15
20.niceText = 1
Résultat:
Évidemment l'objet BOX s'est ajusté selon nos espérances. Mais l'autre changement - l'option “.nice' de l'objet TEXT que
nous avons permise - a eu pour conséquence de modifier le mode de restitution du texte.
.niceText
A voir, ceci est un contournement (workaround) pour compenser le fait que la bibliothèque de freetype employée par GDLib
dans PHP ne peut pas toujours fournir des anti-crénelages (antialiasing) satisfaisants ("soft edges" pour empêcher le
déchiqueté, pixélisés des bords). Ainsi ce “flag” fait en sorte que Typo3 restitue le texte au double de sa taille sur un fichier
cache (mask-file) qui est alors réduit (de moitié) pour corriger la taille et qui est utilisé avec l'outil “combine” (composite) de
ImageMagick permettant de "superposer" (masque/cache) le texte sur le fond. Ceci consomme plus de ressources du CPU.
Le résultat est également meilleur (habituellement).
A gauche : texte normal Anti-crênelage par Freetype. Milieu: .niceText=1 A droite: .antiAlias=0 (Anticrênelage désactivé)
L'objet GIFBUILDER TEXT
Maintenant, nous allons essayer encore plus d'options pour le texte :
...
20 = TEXT
20.offset = 10,15
20.niceText = 1
20.fontSize= 20
20.fontFile = t3lib/fonts/verdana.ttf
20.fontColor = #660000
20.shadow.offset = 2,2
20.shadow.blur = 60
20.shadow.opacity = 40
}
Le résultat est là :
Challenge (GIFBUILDER/1)
Pouvez-vous produire un texte, qui semble être gravé en refief sur le fond ? Et pourriez-vous faire en faire la page de titre et
non pas une valeur statique comme "Hello World" ?
L'objet IMAGE
Vous pouvez également ajouter une image aux objets de GIFBUILDER.
Exemple:
page.10 = IMAGE
page.10.file {
XY = 200, [10.h]
10 = IMAGE
10.file = fileadmin/tsbyex/sunset_keywest.jpg
10.file.width= 200
20 = TEXT
20.text.field = title
20.offset = 0,120
20.niceText = 1
20.align=center
20.fontSize= 40
20.fontColor = yellow
30 = IMAGE
30.file.width=50
30.tile = 2,2
30.align = c,c
}
Dans cet exemple il y a même deux images impliquées. L'une d'entre elles est couverte de carreaux répartis deux fois
horizontalement et verticalement, l'autre étant aussi alignée au centre dans les mêmes deux directions. Résultat :
Pouvez-vous faire en sorte que les images d'alligator apparaissent dans les coins de la grande image, à 5 Pixels du bord ?
(vous pouvez - si vous souhaitez – ignorer le fond d'image et le titre.)
Pouvez-vous, aussi, créer un “frame” cadre rouge de 2 Pixel tout autour de l'image ?
Navigation
HMENU
Le' cObject "HMENU" est employé pour produire "des menus hiérarchiques" - c'est la navigation.
Exemple:
page.10 = HMENU
page.10.1 = TMENU
page.10.1.NO {
linkWrap = <B>|</B><BR>
}
Résultat:
Très simple. Maintenant, les choses importantes à savoir à propos de l'objet racine ("mother"-object) HMENU ("TMENU"
dans l'exemple est un enfant dans cette terminologie) est qui est a
•
une structure de données numérique de "menuObj" (menu objects)
•
une définition d'entrée “.entryLevel”. “Entrylevel” détermines à quel niveau dans la rootline, le menu est disposé.
•
Une défnition pour “.begin” et “.maxItems” utile pour commander le nombre d'articles.
Mais vous devriez également savoir qu'un menu se compose des liens version des pages avec le type "Standard",
"Advanced", "External URL" et "Shortcut". Selon la configuration le type "Spacer" peut également apparaître (si .SPC est
définit), mais une page "Spacer" est seulement un placeholder - une manière d'insérer un espace dans un menu si la
menu-configuration est conçue de cette manière.
Cet exemple montre un menu qui fonctionne sur les items de la page "Level2" (rootline level 1).
page.10 = HMENU
page.10.entryLevel = 1
page.10.1 = TMENU
page.10.1.NO {
linkWrap = <B>|</B><BR>
}
Le résultat:
(Ceci apparaît seulement si vous mettez id=2, parce qu'aucune des autres pages (excepté de la page d'accès restreinte) n'a
des sous-ages. La Rootlevel ne montre pas de menu parce que l'entryLevel est placé à 1)
TMENU
Le TMENU est un menu basé sur du texte. Il y a un bon nombre d'exemples alentour. Regarder dans la table du
static_template. Le Gabarit "content (default)" a un groupe d'exemples attachés à la définition de tt_content.menu
Voici un exemple pris du static_template "TEMPLATE; BUSINESS":
page.10 = HMENU
page.10.1 = TMENU
page.10.1.target = page
page.10.1 {
expAll = 1
wrap = <table width="300" border=1 cellspacing=0 cellpadding=0><tr><td><img src="clear.gif" width=1
hspace=200 height=1 vspace=3 border=0></td></tr> | </table>
NO.linkWrap = <font face=Arial size=2 color=black><b> |</b></font>
NO.allWrap = <tr><td><img src="clear.gif" width=1 height=1 vspace=3 border=0><br> | </td></tr>
}
page.10.2 = TMENU
page.10.2 {
wrap = <tr><td nowrap> | </td></tr>
target = page
NO {
beforeImg = media/bullets/bullet1_n.gif
beforeROImg = media/bullets/bullet1_h.gif
beforeImgTagParams = hspace=2
RO = 1
after = <br>
ATagBeforeWrap = 1
linkWrap= <font face=Verdana size=1 color=black> | </font>
}
}
Résultat:
Vous devriez savoir une chose au sujet de TMENU: Il y a deux propriétés, “.before” et “.after”. Elles ont des propriétés
stdWrap toutes les deux et elles sont réellement identiques. Mais - comme indiqué dans TSref – le cObj->data array utilisé
par la propriétés de “.field” du stdWrap's n'est pas chargé avec le page-record de l'item du menu courant lorsqu'il est
exécuté. À l'origine c'était une erreur de conception, mais le contournement afin d'être compatible avec des versions
antérieures a été que stdWrap pet récupérer le field-values de la page du menu-item par le biais de la propriétés ”.data”.
Ainsi au lieu de "before.field = title" (ce qui permet d'obtenir le titre principal de page) utilisez "before.data = page:title".
Challenge (TMENU/1)
Réglez finement le menu à votre goût et insérez une autre image-buleet (image puce), mais en l'insèrent à la droite des
articles !
Challenge (TMENU/2)
Ajouter un troisième niveau
Challenge (TMENU/3)
Ajouter un dispositif qui change la couleur des items en rouge si l'item est "actif" (c'est-à-dire, si un items est l'une des
pages dans la rootline)
Challenge (TMENU/4)
Créer ce menu :
Exemple (TMENU)
C'est une capture d'écran de www.fladsaa.dk. Le code utilisé ici pour le menu est trouvé dans la section Challenge plus
haut, si vous voulez le voir :
IMGMENU
C'est un menu d'imagemap (basé sur image).
Exemple:
temp.topmenu = HMENU
temp.topmenu.1.target = _top
temp.topmenu.maxItems = 6
temp.topmenu.entryLevel = 0
temp.topmenu.1 = IMGMENU
temp.topmenu.1.imgMapExtras = <AREA SHAPE="rect" alt="Frontpage" COORDS="5,5,69,70"
href="http://www.typo3.com" target="_top">
temp.topmenu.1 {
wrap = |<BR>
main.XY = [10.w] , [10.h]
main.10 = IMAGE
main.10.file = fileadmin/tsbyex/imglogo.gif
main.reduceColors = 16
dWorkArea = 77,68
NO.distrib = textX+10, 0
NO.10 = TEXT
NO.10 {
text.field = title
fontSize = 11
fontColor = black
niceText = 1
offset = 0,0
imgMap.explode = 3,2
}
}
NO.20 =
|| BOX
NO.20 {
dimensions = -5,-9,1,11
color = white
}
Résultat:
Commentaires:
main.
Ceci place l'image de base de l'imagemap. “.reduceColors” est une propriété générale de GIFBUILDER que vous devriez
appliquer largement afin de maintenir la taille de fichiers au plus bas. Moins de couleurs et moins grande sera la taille
dWorkArea = 77,68
Ceci définit l'excentrage des items du menu à partir du coin gauche supérieur
NO.
En général “.main” décrit le fond d'imagemap et “NO.” décrit chaque item sur le “image map”.
NO.distrib = textX+10,0
Ceci définit que chaque article devrait être décalé l'un par rapport à l'autre par la largeur de l'article précédent plus 10 Pixels
supplémentaires.
imgMap.explode
Définit de combien le polygone de 'imagemap” autour de chaque item est augmenté afin de couvrir une surface un peu un
plus grande (ou plus petite avec des nombres “neg.”) que les “textlabels” eux-mêmes.
temp.topmenu.1.imgMapExtras = <AREA SHAPE="rect" alt="Frontpage" COORDS="5,5,69,70"
href="http://www.typo3.com" target="_top">
Ceci ajoute une définition de “Area” (zone) à l'imagemap. La zone couverte dans ce cas-ci est à angle droit vers la gauche
sur le fond d'image. Cette zone est un lien vers http://www.typo3.com
NO.20 =
|| BOX
L'opérateur" "||" (double ligne verticale) est une partie d'un concept très complexe appelé "optionSplit". Ce concept est plus
déroutant qu'un répertoire absent d'une installation de Windows, donc faites attention si vous commencez à jouer avec.
Personnellement je me réfère toujours aux exemples dans le TSref. Voir la discussion ci-dessous
Challenge (IMGMENU/1)
Pouvez vous réarranger les éléments afin qu'ils apparaissent presque comme ceci :
optionSplit
Mais qu'est-ce que c'est “optionSplit” ? Pourquoi est-ce que je m'inquiéterais ?
“optionSplit” est très puissant parce qu'il fournit une manière de définir différentes valeurs pour les propriétés de vos objets
de menu et ceci relié à leur position, qu'ils soient en premier, denier ou au milieu dans l'ordre des éléments du menu
"optionSplit" fonctionne avec toutes les propriétés et leurs valeurs de TypoScript pour la totalité de l'objet “menu”!
Par exemple, si je veut que le premier élément soit jaune, le dernier élément bleu et tous les autres blancs, j'indique :
fontColor = yellow |*| white |*| blue
comme ceci et j'obtiens ce résultat :
Si j'ajoute une autre page au testsite, le menu sera mis à jour en conséquence:
Pouvez-vous définir un optionSplit pour la couleur de la ligne verticale qui la changerait en blanc ou noir ?
GMENU
Maintenant essayons de nous occuper de l'objet de menu GMENU.
Example:
page.10 = HMENU
page.10.1 = GMENU
page.10.1.NO {
XY = [10.w],[10.h]
colbacks = #cccccc || #eeeeee
10 = TEXT
10.offset = 0,7
}
Résultat:
C'est pas loin d'être le plus simple GMENu que vous puissiez créer. Modifions le un peu plus pour le rendre plus utilisable:
page.10 = HMENU
page.10.1 = GMENU
page.10.1.NO {
XY = [10.w]+20,20
colbacks = |*| #cccccc || #eeeeee |*|
10 = TEXT
10.offset = 0,13
10.align = center
10.niceText = 1
}
Résultat:
Mieux maintenant. Allons-y pour ajouter un effet “roll over” (recouvrement):
page.10 = HMENU
page.10.1 = GMENU
page.10.1.NO {
XY = [10.w]+20,20
colbacks = |*| #cccccc || #eeeeee |*|
10 = TEXT
10.offset = 0,13
10.align = center
10.niceText = 1
}
page.10.1.RO < page.10.1.NO
page.10.1.RO = 1
page.10.1.RO {
colbacks = red
10.fontColor = white
}
Résultat:
Challenge (GMENU/1)
Pourriez-vous parvenir à créer ce menu avec les éléments de relief comme celui que nous avons fait avec l'objet
GIFBUILDER plus haut dans ce document ? Et pourriez-vous le faire de sorte que l'effet de refief soit inversée quand vous
faites un “rollover” de l'élément ?
Images avec GMENU
Vous pouvez employer des fonds d'image pour vos items de menu
Exemple:
page.10 = HMENU
page.10.1 = GMENU
page.10.1.NO {
wrap = | <BR>
XY = [4.w], [4.h]
colbacks = olive
4 = IMAGE
4.file = fileadmin/tsbyex/menuback.gif
}
10 = TEXT
10.offset = 0,14
10.align = center
10.niceText = 1
L'image "menuback.gif" apparaît comme ceci:
Résultat:
Exemple élaboré (GMENU)
Si vous voulez étudier cet exemple élaboré, où le GMENU crée dynamiquement un fond en relief pour des menuitems,
veuillez aller à la section de Challenge.
Challenge (GMENU/2)
Pourriez-vous créer ce menu, basé sur ce que vous connaissez de l'objet GIFBUILDER ?
Trois images,
left.gif
middle.gif and
right.gif
issu du répertoire “/media/buttons/” sont utilisés
GMENU_LAYER
Typo3 supporte également l'utilisation des menus DHTML basés sur des “layers” (couches). Mais il exige du HMENU de se
composer de deux objets de menu où le premier est GMENU_LAYER. Le second peut être un TMENU ou GMENU
Exemple:
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 = HMENU
page.10.1 = GMENU_LAYERS
page.10.1 {
layerStyle = position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden;
xPosOffset =-10
lockPosition = x
expAll=1
NO {
colbacks = #cccccc
XY = [10.w]+10, 14
10 = TEXT
10.offset = 5,10
}
}
page.10.2 = GMENU
page.10.2.wrap = |<BR>
page.10.2.NO {
colbacks = #99cccc
XY = 120, 14
10 = TEXT
10.offset = 5,10
}
Résultat:
Challenge (GMENU_LAYERS/1)
Pouvez vous modifier ce menu avec une disposition comme ceci :
(Toutes les modifications sont faites à l'objet de menu “object 2”, le GMENU)
Pouvez vous modifier ce menu selon une disposition à peu près comme ceci (au moins l'orientation du menu) :
(Toutes les modifications sont faites à l'objet de menu “object 1”, le GMENU_LAYER)
Prolonger un fond d'image au menu entier
Je voudrais démontrer un dispositif puissant de l'objet de GMENU : Prolonger un fond d'image au-dessus du menu entier :
Basé sur ce menu:
page.10 = HMENU
page.10.1 {
xPosOffset =-10
lockPosition = x
expAll=1
NO {
colbacks = #cccccc
XY = [10.w]+10, 14
10 = TEXT
10.offset = 5,10
}
}
page.10.2 = GMENU
page.10.2.NO {
colbacks = #99cccc
XY = 200, 20
10 = TEXT
10.offset = 5,15
10.fontColor = white
10.niceText = 1
10.fontSize = 20
}
... ajouter ces lignes:
...
page.10.2 = GMENU
page.10.2.NO {
colbacks = #99cccc
XY = 200, 20
5 = IMAGE
10 = TEXT
10.offset = 5,15
...
Cela a permis d'insérer l'image “sunset” comme fond. Mais nous voudrions que cette image se prolonge pour le menu
entier, ce qui est effectué par l'ajout d'une propriété à l'objet GMENU au sujet duquel les objets GIFBUILDER sont à modifier
pour ce qui concerne les valeurs d'excentrage (offset). Aussi, ajoutez :
page.10.2.applyTotalH = 5
... et voici ce que vous obtenez!
Concernant la propriété “.applyTotalH”, regardez plus avant dans le TSref. Fondamentalement c'est un indicateur qui
fonctionne comme ceci:
Enfin vous pouvez créer de tels menus tout en souhaitant que vos menus aient une taille en hauteur toujours aussi grande
que celle de l'image de fond pour ne pas couper (“crop”) l'image de fond. Ajoutez ceci:
...
page.10.2 = GMENU
page.10.2.applyTotalH = 5
page.10.2.min = , 200
page.10.2.max = , 200
page.10.2.NO {
colbacks = #99cccc
XY = 200, 20
5 = IMAGE
5.height = 200
10 = TEXT
...
Résultat:
Note: Les propriétés “.min” et “.max” définissent les dimensions “x” et “y”. Dans ce cas, nous n'avons spécifié que la valeur
de la dimension “y” par l'utilisation de la virgule “,”:
page.10.2.min = , 200
page.10.2.max = , 200
PHP include-scripts
PHP_SCRIPT cObject
Il n'y a pas beaucoup plus à dire à ce sujet qui n'a pas été déjà dit. Ainsi ce que je vais faire est de vous diriger vers le TSref,
section "PHP include scripts" à la fin du document. Il y une étude de cas ("Casestory”) très pointu que vous pouvez faire
comme exercice.
Il y a en outre une grande démonstration sur le Testsite, mais en fait, vous travaillez dessus. Malheureusement vous avez
travaillé sur un Template de test, aussi en vous dirigeant vers la page "index.php?id=30" vous n'y voyiez seulement que vos
dernières aventures avec le Template de test. Donc, désactivez votre Template de test pour un instant et échappez vous de
ce guide :
(Rappelez-vous d'activer "Clear All Cache" dans le [menu] after deactivating...)
Inspiration
Si vous avez besoin d'inspiration pour vos scripts, vous devriez vraiment jeter un coup d'oeil à certains des scripts d'origine.
Le plus fondamental est le script “af media/scripts/guest.inc” du “guestbook”. Je ne vais pas énumérer le code ici. Il y en a
trop.
N'oubliez pas de regarder le static_template '"content.tt_guest" également. Le TypoScript inclut dedans est la la clef pour
comprendre comment vous reliez TypoScript à vos propres scripts.
Exemple: “Userdefined tags”
J'ai pensé à un grand exemple pour un script d'inclusion (include script). Vraiment utile. Sur le site Web www.typo3.com
j'énumère parfois du code TypoScript. Cela est fait avec une étiquette spéciale que je vais vous présenter ici. Afin de
l'essayer, nous le rajouterons au testsite original, parce qu'il comporte un certain contenu qui viennent nous faciliter les
choses ici.
1) Ouvrir le Template de testsite et ajouter ceci :
# Add the custom tag, <TS>...</TS> to the parseFunc of bodytext
tt_content.text.20.parseFunc.tags {
ts.stripNL = 0
ts = PHP_SCRIPT
ts.file = fileadmin/tsbyex/testtag.inc
}
2) Ouvrir le document fileadmin/tsbyex/testtag.inc avec votre éditeur de texte favori et vérifiez qu'il y a ce contenu :
<?
?>
$contentOfTag = $this->getCurrentVal();
$content = '<B>'.$contentOfTag.'</b>';
3) Ouvrir "Startpage" sur le testsite et ajouter les étiquettes du < ts>… </ts > comme vous voyez ici :
… et espérez pour. Ceci est le résultat :
Avançons nous un peu plus loin, et incluons une bibliothèque avec une classe (class). Par le temps qui court, c'est une
nécessité de toute façon, donc …
1) Ajoutez/modifiez ceci au Template de TypoScript :
# Add the custom tag, <TS>...</TS> to the parseFunc of bodytext
tt_content.text.20.parseFunc.tags {
ts.stripNL = 0
ts = PHP_SCRIPT
ts.file = fileadmin/tsbyex/testtag2.inc
}
includeLibs.testclass_example = fileadmin/tsbyex/testclass.inc
2) ouvrez le document fileadmin/tsbyex/testtag2.inc et fileadmin/tsbyex/testclass.inc avec votre éditeur de texte favori et
vérifiez que le contenu est :
fileadmin/tsbyex/testtag2.inc
<?
?>
$test_object = new testClass;
$contentOfTag = $this->getCurrentVal();
$content = $test_object->formatTS($contentOfTag, 1);
fileadmin/tsbyex/testclass.inc
<?
class testClass {
function formatTS($input, $ln)
{
$input = ereg_replace("^[^".chr(10)."]*.","",$input);
$input = chop($input);
$cArr = explode(chr(10),$input);
}
?>
}
reset($cArr);
$n = ceil(log10(count($cArr)));
$lineNum="";
while(list($k,$v)=each($cArr))
{
if ($ln)
$lineNum = sprintf("% ".$n."d",($k+1)).":
$v=htmlspecialchars($v);
$cArr[$k] = str_replace(" ",chr(160),$lineNum.$v);
}
$output = implode($cArr, "<BR>")."<BR>";
$output = '<font face=verdana size=1 color=maroon>'.$output.'</font>';
return $output;
";
3) Pour finir, saisissez ceci dans le “content record”:
… et vous devriez voir ceci dans votre browser frontend, quand vous rechargez :
Challenge (PHP_SCRIPT1)
Écrire un script qui montre deux formfields, saisissez y deux nombres et quand ils sont envoyés sur la même page, vous
calculez la somme. Et vous l'affichez.
Découvrez ce que la fonction “enableFields()” de la classe cObj (tslib/content.php) fait. (portant la fonction courante est dans
t3lib/page.php). Quels arguments prend-il et comment pourriez vous les employer effectivement ?
Content rendering (restitution de contenu)
Introduction
Vous devriez lire le document Pdf "content_rendering.pdf" sur ce sujet.
Mais une page de contenu régulier est normalement restituée par le static_template "content (default)" que vous incluez
avec votre Template :
Le contenu de static_template "content (default)" inclut lui-même d'autres static_template. L'un d'entre eux est le célèbre
"styles.content (default)" lequel contient beaucoup d'objets TypoScript “premade” (prédéfinis) et qui sont copiés dans des
endroits utiles de la “nodetree” (arbres des noeuds).
Regardez dans le “Object Browser” et vous y verrez qu'un objet “rootlevel” "tt_content" est apparu. L'objet toplevel
"tt_content" est le cObject qui effectue la restitution des contenus à partir de la table "tt_content" par défaut! Et il
semble débuter par un “Case” sur un objet de contenu qui détermine le type de content de l'élément content en question.
CONTENT
Le cObject "CONTENT" est utilisé pour chercher le contenu à partir de la table "tt_content". Il effectue un SELECT-query sur
la database et le résultat est alors - record par record - “rendered” (restitué) par l'objet toplevel "tt_content." (à moins que
nous n'indiquions autre chose)
Exemple:
(d'abord : inclure le static_template "content (default)" si vous ne l'avez pas déjà fait!)
page.10 = CONTENT
page.10 {
table = tt_content
select.orderBy = sorting
select.where = colPos=0
}
Résultat:
C'est aussi simple que cela !
colPos
Mais qu'est-ce "colPos=0"?
Bon, Typo3 peut (par défaut) travailler sur quatre colonnes de contenu définies par le champ "colPos" de la table tt_content.
Ceci montre comment l'interface affiche les colonnes et comme vous le voyez actuellement, il n'y a aucun item dans les
autres colonnes :
Essayez de créer quelque nouveaux contenus dans la colonne "border" :
… et il apparaît bien dans la colonne "border" :
Afin d'insérer le contenu sur le site Web, vous devez savoir quelle valeur le champ "colPos" a pour la colonne “border” (de
bord). Aussi, allez sur “$tc-browser” dans le module “Tools” :
La valeur est "3". Modifiez ainsi votre TypoScript comme ceci :
page.10 = CONTENT
page.10 {
table = tt_content
}
Résultat:
styles.content (default)
Donnons nous une minute pour regarder dans le static_template "styles.content (default)". Tel que indiqué, il contient un
gros paquets de “premade” TypoScript disponible pour que nous l'employons. En fait les tâches ci-dessus pourraient avoir
été beaucoup plus faciles si elles avaient été basées sur ce que nous voyons ici :
page.10 < styles.content.get
substitutes
page.10 = CONTENT
page.10 {
table = tt_content
}
et de même avec la colonne "border":
page.10 < styles.content.getBorder
Vous l'avez? Bon.
lib.stdheader
Dans le static_template "content (default)" vous y voyez un objet "lib.stdheader" ainsi défini :
lib.stdheader = COA
lib.stdheader {
stdWrap.wrapAlign.field = header_position
stdWrap.typolink.parameter.field = header_link
stdWrap.fieldRequired = header
stdWrap.if {
equals.field = header_layout
value = 100
negate = 1
}
...
… et utilisé à beaucoup d'endroits :
# CType: bullet
tt_content.bullets = COA
tt_content.bullets {
20 = CASE
...
# CType: text
tt_content.text = COA
tt_content.text {
20 = TEXT
20 {
...
# CType: multimedia
tt_content.multimedia = COA
tt_content.multimedia {
20 = MULTIMEDIA
...
A l'opposé de l'utilisation normale d'un "shared code" qui est copié réellement à d'autres endroits, des cOjects peuvent être
partagés par référence à un objet “toplevel” (voir le TSref, section "cObjects").
En regardant dans le “Object Browser”, nous nous rendons compte que c'est vrai :
tt_content.text.10 a la valeur "< lib.stdheader" – pas les propriétés de l'objet!
C'est une implémentation très intelligente dans ce cas-ci parce que si le “header” de tous les éléments “content” est rendu
par le même objet “lib.stdheader”, c'est le seul endroit où faire des changements pour changer le rendu du “header” !
Exemple:
page.10 < styles.content.getBorder
lib.stdheader >
lib.stdheader = TEXT
lib.stdheader.value = ALTERNATIVE HEADER !!
donne le résultat :
Indépendamment de ceci, je ne vais pas vous aider davantage avec le rendu de contenu standard. En se basant sur le
matériel de ce document, vous devez passer en revue “tt_content node-treepar” et voir pour vous-même.
C'est comme pour les réponses aux grandes questions de la vie : "tout est dans le “”Scriptures””". : -)
RECORD
Ce cObject est utilisé pour ramener des enregistrements uniques. CONTENT a été conçu pour obtenir une liste
d'enregistrements – normalement depuis la table tt_content. Mais cela pourrait être n'importe quelle table :
Un example rapide:
page.10 = RECORDS
page.10.source = 1
page.10.tables = tt_content
page.10.conf.tt_content = TEXT
page.10.conf.tt_content {
field = header
case = upper
wrap = <B> | </B>
}
résultat :
… parce que l'enregistrement dans la table "tt_content" avec l'uid "1" était :
Un autre exemple:
dans la table “tt_address”, il y a quelques enregistrements avec des personnages des Simpsons. Ils sont à la page "Another
site in.../Lists/Addresses/"
temp.tt_address = COA
temp.tt_address.wrap = | <HR>
temp.tt_address.10 = TEXT
temp.tt_address.10 {
field = name
case = upper
wrap = <B> | </B><BR>
}
temp.tt_address.20 = IMAGE
temp.tt_address.20 {
file.import.field = image
file.import = uploads/pics/
file.import.listNum = 0
file.height = 100
}
page.10 = RECORDS
page.10.source = 3,1,5
page.10.tables = tt_address
page.10.conf.tt_address < temp.tt_address
Résultat ici :
Notez comment "tt_content" dans le premier TypoScript est devenu "tt_address" parce que nous travaillons sur une table
différente.
Une exécution alternative qui fait exactement la même chose est ceci :
tt_address = COA
tt_address.wrap = | <HR>
tt_address.10 = TEXT
tt_address.10 {
field = name
case = upper
wrap = <B> | </B><BR>
}
tt_address.20 = IMAGE
tt_address.20 {
file.import.field = image
file.import = uploads/pics/
file.import.listNum = 0
file.height = 100
}
page.10 = RECORDS
page.10.source = 3,1,5
page.10.tables = tt_address
Notez comment la ligne "page.10.conf.tt_address < temp.tt_address" a été retirée. Cette ligne a copié l'objet
"temp.tt_address" et l'a utilisée pour le “rendering” de l'enregistrement. Mais l'option par défaut doit employer l'objet de
toplevel nommé comme la table. Donc "tt_address" au “toplevel” restituera l'enregistrement si cette ligne est omise et est
exactement ce ce que l'exemple montre ("temp.tt_address" a été changé en "tt_address").
Réponses aux Challenges
Vous pouvez employer le date et le “strftime”. Chaque propriété a un type de donnée (datatype), "date-conf" et "strftime-conf"
qui sont de base dans le manuel PHP
page.10 = TEXT
page.10.date = d-m-y H:i
Donne
01-07-00 15:48
page.10 = TEXT
page.10.strftime = %A %e. %B, %I:%M %p
Donne
Saturday 1. July, 03:48 PM
page.10 = TEXT
page.10.strftime = %A %e. %B, %I:%M %p
config.locale_all = deutsch
Donne
Samstag 1. Juli, 03:48
page.10 = TEXT
page.10.data = leveltitle:-2
page.10 = TEXT
page.10.field = subtitle
page.10.ifEmpty = Hello world
page.10 = TEXT
page.10.ifEmpty {
field = title
required = 1
wrap = <font color="red">|</font>
}
page.10.wrap = <H3>|</H3>
"ifEmpty" (du stdWrap) est une valeur de chaîne de caractères avec des propriétés de stdWrap, tant et si bien que le jeu
continue, en utilisant “.field” et “.required” (lequel est retourné si “.field” retourne une valeur vide) et “.wrap” (qui est
seulement exécuté si “.required” ne donne pas lieu à un retour de valeur)
Alternativement (en utilisant “.if” au lieu du “.required”)
page.10 = TEXT
page.10.ifEmpty {
field = title
if.isTrue.field = title
wrap = <font color="red">|</font>
}
page.10.wrap = <H3>|</H3>
page.10 = COA
# Header to this section
page.10.10 = TEXT
page.10.10 {
...
20.wrap = Subtitle: <B> |</B>
20.required=1
}
page.10 = COA
page.10.if.isTrue.field = subtitle
...
Voir le TSref (- > if) pour des propriétés de cet objet. Dans ce cas-ci le ->if renvoie vrai (true) si le fieldvalue du sous-titre
n'est pas vide
page.10 = COA
page.10.if.value = 1
page.10.if.isGreaterThan.data = level:1
...
Ici nous comparons deux valeurs. C'est un peu 'backwards' un retour en arrière, mais voilà comment cela fonctionne : "if
retourne “true” si le “level” où nous sommes (rootline level, démarre à zéro pour la rootpage) est plus grande que la valeur
définies by le “if.value"”
Questions (cObject/4)
Typo3 redimensionne réellement l'image.
Le premier exemple a le nom de fichier "fileadmin/tsbyex/alligator.jpg".
Le deuxième exemple a le nom de fichier "typo3temp/3de305c72b.jpg". Le nom de fichier est le résultat retaillé d'un “md5hash” calculé pour l'image lors de la fabrication du code de TypoScript. Notez qu'un changement des propriétés pour
“imgResource”, c'est également un nouveau fichier dans le répertoire /typo3temp/ et donc celui ci avec le temps
rassemblera beaucoup d'images inutilisées.
Version exhaustive :
page.10 = IMAGE
page.10 {
file.width = 200
imageLinkWrap = 1
imageLinkWrap.JSwindow = 1
}
La version "Rolls Royce":
page.10 = IMAGE
page.10 {
file.width = 200
imageLinkWrap = 1
imageLinkWrap.JSwindow = 1
imageLinkWrap {
bodyTag = <BODY bgColor=black>
wrap = <A href="javascript:close();"> | </A>
width = 400m
height = 300
JSwindow = 1
JSwindow.expand = 22,30
}
}
... donne pour résultat:
La fenêtre est fermée avec un clic sur l'image qui est limitée au une dimensions maximale de 400x300. La taille de la
fenêtre Javascript est basée sur la taille de l'image mais 22 et 30 Pixels sont ajoutés afin de mettre des bords à la fenêtre.
page.10 = IMG_RESOURCE
page.10 {
file.width = 200
}
page.10.stdWrap.wrap = <table border=1 cellpadding=30 background="|"><tr><td><BR><font color=white
size=4><B>Hello World</b></font></td></tr></table>
(la dernière ligne est une ligne !)
page.5 = TEXT
page.5.value = Before ruler
page.5.wrap = | <BR>
page.10 = HRULER
page.10 {
lineThickness = 3
lineColor = red
}
page.10.stdWrap.spaceAfter = 20
page.10.stdWrap.spaceBefore = 10
page.15 = TEXT
page.15.value = After ruler
Ceci a comme conséquence :
Notez que nous avons du mettre une étiquette <BR> après le "Before ruler" text. Dans le cas contraire, l'espace ci-dessus
n'aurait pas fonctionné. Le code HTML:
Before ruler<BR>
<table border=0 cellspacing=0 cellpadding=0 width=99%>
<tr>
<td bgColor="red"><img src="clear.gif" width=1 height=3></td>
</tr>
</table>
After ruler
page.10 = OTABLE
page.10 {
tableParams = border=0 cellpadding=0 cellspacing=0 width=1
offset = 0,20
10 = TEXT
10.value = What a cute little alligator! Dear Lord, may it never grow up!
10.wrap = |<BR>
20 = IMAGE
20.file.width=200
}
30 = CLEARGIF
30.width=250
30.stdWrap.wrap = <BR> |
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/tsbyex/template.html
workOnSubpart = DOCUMENT
marks.SIMPLE_WORD = TEXT
marks.SIMPLE_WORD.field = title
parameter.data = leveluid:1
wrap = <B>|</B>
target = _blank
}
}
Voir le fileadmin/tsbyex/test_calculate.inc
Essayer ce TypoScript (avec votre Gabarit d'essai) :
page.10 = PHP_SCRIPT
page.10.file = fileadmin/tsbyex/test_calculate.inc
Voici le résultat
Essayer d'entrer quelques nombres et de cliquez "Calculate!"
Voici la liste du code :
<?
if (is_object($this))
{
if (t3lib_div::GPvar("submit"))
{
// Calculate result.
// Disable cache, because the result must not be cached:
$GLOBALS["TSFE"]->set_no_cache();
// Get values:
$value_1 = t3lib_div::GPvar("value_1");
$value_2 = t3lib_div::GPvar("value_2");
// Output result:
$content.="Result is: ".($value_1 + $value_2);
} else {
// Draw the form:
$content.='
<form action="index.php?id='.$GLOBALS["TSFE"]->id.'&type='.$GLOBALS["TSFE"]->type.'&no_cache=1"
method="POST">
<input type="Text" name="value_1"> + <input type="Text" name="value_2"> =<br>
<input type="Submit" name="submit" value="Calculate!">
</form>
';
}
} else die("You MUST include this script as a PHP_SCRIPT cObject.");
?>
Particulièrement, je voudrais que vous notiez que le “URL” du formulaire est la page courante et que le paramètre
“&no_cache=1” est envoyé. Ce paramètre force le script de “index_ts.php” à "exécuter" le TypoScript du Template (restituant
de ce fait les cOjects).Si ce paramètre n'est pas placé, nous pourrions au lieu d'obtenir ce résultat, voir le formulaire du fait
du cache des pages!
Quand le résultat est affiché, le cache est déjà neutralisé si le paramètre de “&no_cache” est envoyé. Mais au cas où il ne le
serait pas, nous nous assurons que la page n'est pas cachée avec la fonction “$GLOBALS["TSFE"]->set_no_cache()”.
Dans vos scritps “include” vous pouvez employer la fonction “$this->enablefields("[table-name>]")” pour obtenir de la partie
provenant de la “Where-clause” les enregistrements “deselects” d'une table, du moment qu'ils sont soit en “cache” ou
“hidden” ou “timed” ou encore user-disabled” - basés sur les paramétrages dans “tables.php”.
Voilà pourquoi il est brillant ! Il vous fournit une manière “blindée” pour obtenir des résultats corrects pour vos “SQL-queries”
en tenant compte des dispositifs dissimulés du “start-/endtime” et du “fe_group” pour les enregistrements retournés - si ces
dispositifs apparaissent.
Essayer cet exemple :
dans votre template (votre template de test)
page.10 = PHP_SCRIPT
page.10.file = fileadmin/tsbyex/test_enablefields.inc
Allez sur le site:
|pages|
| AND NOT pages.deleted AND NOT pages.hidden AND (pages.starttime<=985903309) AND (pages.endtime=0 OR
pages.endtime>985903309) AND pages.fe_group IN (0,-1)|
|tt_content|
| AND NOT tt_content.deleted AND NOT tt_content.hidden AND (tt_content.starttime<=985903309) AND
(tt_content.endtime=0 OR tt_content.endtime>985903309) AND tt_content.fe_group IN (0,-1)|
|tt_address|
| AND NOT tt_address.deleted AND NOT tt_address.hidden|
Comme vous pouvez voir, la fonction va afficher avec le debug() function, voyez le fichier /
”/fileadmin/tsbyex/test_enablefields.inc” le résultat de la “WHERE-clause”.
Pour toutes les “table”, "page", "tt_content" et "tt_address" le champ “deleted” ne peut contenir “true”. Ce champ “deleted”
est disposé pour les enregistrements supprimés de Typo3. Ainsi toutes les tables sont 'checked' sur leur “hidden-field”
Mais apparemment, la table "tt_address" n'a pas de champs “startime” et “endtime” au contraire de "pages" et de
"tt_content".
Une rapide vérification dans “tables.php”:
(pages)
...
$tc[pages] = Array (
"ctrl" => Array (
"label" => "title",
"tstamp" => "tstamp",
"sortby" => "sorting",
"title" => "Page|Side|Seite|Side|Pagina|Page",
"type" => "doktype",
"delete" => "deleted",
"crdate" => "crdate",
"cruser_id" => "cruser_id",
"enablecolumns" => Array (
"fe_group" => "fe_group",
"disabled" => "hidden",
"starttime" => "starttime",
"endtime" => "endtime"
),
"mainpalette" => 1,
"useColumnsForDefaultValues" => "doktype,fe_group,hidden"
...
(tt_content)
$tc[tt_content] = Array (
"ctrl" => Array (
"label" => "header",
"sortby" => "sorting",
"title" => "Pagecontent|Sideindhold|Seiteninhalt|Sideinnhold|Contenuto pagina|Contenu de la
page",
"type" => "CType",
"fe_group" => "fe_group",
"disabled" => "hidden",
"starttime" => "starttime",
"endtime" => "endtime"
),
"typeicon_column" => "CType",
"typeicons" => Array (
...
(tt_address)
$tc[tt_address] = Array (
"ctrl" => Array (
...
),
"label" => "name",
"default_sortby" => "ORDER BY name",
"title" => "Address|Adresse|Adresse|Adresse|Indirizzo:",
"disabled" => "hidden"
),
"thumbnail" => "image"
Ces exemples montrent où les "enablefields" sont configurés.
“Code” de "fileadmin/tsbyex/test_enablefields.inc"
<?
debug("pages",1);
debug($this->enableFields("pages"),1);
debug("tt_content",1);
debug($this->enableFields("tt_content"),1);
debug("tt_address",1);
debug($this->enableFields("tt_address"),1);
?>
Challenge (imgResource/1)
page.bgImg.import {
cObject = TEXT
cObject.value = fileadmin/tsbyex/alligator.jpg
cObject.override {
required = 1
field = media
listNum = 1
wrap = uploads/media/ |
}
}
page.10 = IMAGE
page.10.file {
XY = [20.w]+20, 30
colbacks = olive
}
20 = TEXT
20.offset = 10,20
20.niceText = 1
20.fontSize= 20
20.fontColor = #660000
20.emboss {
offset = -2,-2
highColor = olive : +30
lowColor = olive : -30
blur = 30
opacity = 80
}
Résultat:
Notez les définitions de couleur dans la propriété “.emboss”. Le TSref indique que la valeur est "GraphicColor" laquelle a
une option qui nous laisse arithmétiquement changer la valeur de couleur. Dans ce cas-ci, la couleur "high" (light) est
éclaircie (linear brightness value) de “30” et la "low" est obscurcie de même de “30”. Malheureusement, Typo3
(ImageMagick...) ne supporte pas le mode “blend” (combinaison) "multiply" et "screen" qui sont habituels pour beaucoup
des programmes de manipulation d'image. Ces modes auraient été plus correctes dans ces situations.
page.10 = IMAGE
page.10.file {
XY = 200, 160
colbacks = silver
}
20 = TEXT
20.offset = 0,120
20.niceText = 1
20.align=center
20.fontSize= 40
20.fontColor = yellow
# Left, top
30 = IMAGE
30.file.width=50
30.offset = 5,5
# Left, bottom
31 < .30
31.align = , b
31.offset = 5,-5
# Right, top
32 < .30
32.align = r , t
32.offset = -5,5
# Right, bottom
33 < .30
33.align = r , b
33.offset = -5,-5
Résultat:
Les propriétés “.align” et “.offset” sont reliées entre elles comme vous voyez. Si vous spécifiez l'alignement à "r,b" (right bottom), l'excentrage est relatif à cette position et vous devez spécifier "-5, -5" pour décaler l'image vers le haut et la gauche.
Notez, en outre, comment la syntaxe de TypoScript est utilisée pour copier le premier objet à la position adéquate dans
l'autre objet, nous préservant de ce fait de redondances qu'auraient impliqué la définition du même nom de fichier à
plusieurs reprises, encore et encore… Voilà comment il apparaît dans le “Object Browser”:
Ajoutez:
}
# Left border
40 = BOX
40.color = red
40.dimensions = 0,0,2,160
# Right border
41 < .40
41.align = r
# Top border
42 < .40
# Bottom border
43 < .42
43.align = ,b
Résultat:
Challenge (TMENU/1)
...
target = page
NO {
afterImg = media/bullets/bullet1_n.gif
afterROImg = media/bullets/bullet1_h.gif
afterImgTagParams = hspace=2
RO = 1
after = <br>
...
Challenge (TMENU/2)
...
after = <br>
ATagBeforeWrap = 1
}
}
page.10.3 < page.10.2
page.10.3.wrap >
page.10.3.NO.before = <font size=1>   </font>
page.10.2.expAll = 1
Résultat:
(afin d'avoir assez d'items de menu, j'ai dû déplacer quelques pages provenant de "Another site in...")
Challenge (TMENU/3)
page.10 = HMENU
page.10.1 = TMENU
page.10.1.target = page
page.10.1 {
expAll = 1
wrap = <table width="300" border=1 cellspacing=0 cellpadding=0><tr><td><img src="clear.gif" width=1
hspace=200 height=1 vspace=3 border=0></td></tr> | </table>
NO.linkWrap = <font face=Arial size=2 color=black><b> |</b></font>
NO.allWrap = <tr><td><img src="clear.gif" width=1 height=1 vspace=3 border=0><br> | </td></tr>
NO.ATagBeforeWrap = 1
ACT < .NO
ACT = 1
ACT.linkWrap = <font face=Arial size=2 color=red><b> |</b></font>
}
page.10.2 = TMENU
page.10.2 {
target = page
NO {
afterImg = media/bullets/bullet1_n.gif
afterROImg = media/bullets/bullet1_h.gif
afterImgTagParams = hspace=2
RO = 1
after = <br>
ATagBeforeWrap = 1
}
ACT < .NO
ACT =1
ACT.linkWrap = <font face=Verdana size=1 color=red> | </font>
}
Challenge (TMENU/4)
temp.challengeMenu = HMENU
temp.challengeMenu.stdWrap.wrap = <TABLE width="200" border="0" cellspacing="0" cellpadding="0"
bgcolor="#004828"><TR><TD><TABLE border="0" width="100%" cellspacing="1" cellpadding="2">|
</TABLE></TD></TR></TABLE>
temp.challengeMenu.entryLevel = 0
temp.challengeMenu.1 = TMENU
temp.challengeMenu.1.target = _top
temp.challengeMenu.1.NO {
allWrap = <TR><TD bgcolor="#638E7B" align="center" valign="top" width="5"><IMG
src="media/bullets/blackdot.gif" width="5" height="9"></TD><TD bgcolor="#638E7B" width="160"> | </TD></TR>
ATagBeforeWrap = 1
linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#004B2C"> | </FONT>
stdWrap.case = upper
}
temp.challengeMenu.1.ACT < temp.challengeMenu.1.NO
temp.challengeMenu.1.ACT = 1
temp.challengeMenu.1.ACT {
linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="white"> | </FONT>
}
temp.challengeMenu.2 = TMENU
temp.challengeMenu.2.target = _top
temp.challengeMenu.2.NO {
allWrap = <TR><TD colspan="2" bgcolor="#D0DCD8">|</TD></TR>
ATagBeforeWrap = 1
linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#004B2C">|</FONT>
}
temp.challengeMenu.2.ACT < temp.challengeMenu.2.NO
temp.challengeMenu.2.ACT = 1
temp.challengeMenu.2.ACT {
allWrap = <TR><TD colspan="2" bgcolor="#FFFBE7">|</TD></TR>
}
linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#004B2C">|</FONT>
page.noLinkUnderline =1
page.10 < temp.challengeMenu
Exemple (TMENU)
temp.leftmenu = HMENU
temp.leftmenu.entryLevel = 0
temp.leftmenu.1 = TMENU
temp.leftmenu.1.target = _top
temp.leftmenu.1.collapse = 1
temp.leftmenu.1.wrap = <table border=0 cellpadding=0 cellspacing=0> | </table>
temp.leftmenu.1.NO {
allWrap = <TR><TD colspan=2><img src="clear.gif" width=1 height=5></TD></TR><TR><TD colspan=2> |
</TD></TR>
ATagBeforeWrap = 1
linkWrap = <b><font face="verdana" size=1 color=black> | </font></b>
}
temp.leftmenu.2 = TMENU
temp.leftmenu.2.target = _top
temp.leftmenu.2.wrap = | <TR><TD><img src="clear.gif" width=1 height=10></TD><TD></TD></TR>
temp.leftmenu.2.NO {
allWrap = <TR><TD><img src="clear.gif" width=10 height=1></TD><TD> | </TD></TR>
after = <BR><img src="media/bullets/stipler3.gif" height=1 vspace=1> |*||*| <img src="clear.gif" width=1
height=1><BR>
ATagBeforeWrap = 1
linkWrap = <font face="verdana" size=1 color=black> | </font>
}
page.10 < temp.leftmenu
Résultat:
...
dWorkArea = 77,15
}
NO.distrib = 0, 15
NO.10 = TEXT
NO.10 {
text.field = title
fontSize = 11
fontColor = black
niceText = 1
offset = 0,0
imgMap.explode = 3,2
}
NO.20 = BOX
NO.20 {
dimensions = 0,3,120,1
color = white
}
Note que le "||" du "NO.20" est supprimé afin que la ligne blanche apparaisse sous chaque élément!
Challenge (IMGMENU/2):
...
NO.20 = BOX
NO.20 {
dimensions = 0,3,120,1
color = |*| white || black |*|
}
}
Résultat:
Challenge (GMENU/1)
page.10 = HMENU
page.10.1 = GMENU
page.10.1.NO {
XY = [10.w]+20,20
colbacks = olive
10 = TEXT
10.offset = 0,13
10.align = center
10.niceText = 1
10.emboss {
offset = -2,-2
highColor = olive : +30
lowColor = olive : -30
blur = 30
opacity = 80
}
}
page.10.1.RO < page.10.1.NO
page.10.1.RO = 1
page.10.1.RO {
10.emboss.offset = 2,2
}
Exemple élaboré (GMENU)
Mettre ceci dans le champ “Constants”:
buttonH = 25
buttonColor = #ccccff
Mettre ceci dans le champ “Setup”:
temp.topmenuText = TEXT
temp.topmenuText {
text.field = title
offset = 10,17
fontFile = fileadmin/fonts/arial_bold.ttf
fontSize = 15
}
niceText = 1
temp.topmenu = HMENU
temp.topmenu.1 = GMENU
temp.topmenu.1.target = _top
temp.topmenu.1.accessKey = 1
temp.topmenu.1.NO {
XY = [100.w]+22, {$buttonH}
colbacks = {$buttonColor}
10 = IMAGE
10.file = GIFBUILDER
10.file {
XY = 6,30
colbacks = {$buttonColor} : *0.5
100 = SCALE
100.width = 6
100.height = {$buttonH}
}
10.mask = GIFBUILDER
10.mask {
XY = 6,30
10 = IMAGE
10.file = media/buttons/maskpart1.tif
100 = SCALE
100.width = 6
}
20 = IMAGE
20.align = r
20.file {
XY = 6,30
100 = SCALE
100.width = 6
}
20.mask {
XY = 6,30
10 = IMAGE
100 = SCALE
100.width = 6
}
30 = IMAGE
30.offset = 6,0
30.file {
XY = [100.w]+10,{$buttonH}
100 < temp.topmenuText
100.hide = 1
}
30.mask {
XY = [40.w], [40.h]
40 = IMAGE
60 = SCALE
60.width = [100.w]+10
100.hide = 1
}
}
temp.topmenu.1.RO < temp.topmenu.1.NO
temp.topmenu.1.RO=1
temp.topmenu.1.RO.100.fontColor = white
Résultat:
Challenge (GMENU/2)
page.10 = HMENU
page.10.1 = GMENU
page.10.1.NO {
XY = [10.w]+20,20
colbacks = olive
4 = IMAGE
4.file = media/buttons/middle.gif
4.tile = 10
5 = IMAGE
5.file = media/buttons/left.gif
6 = IMAGE
6.file = media/buttons/right.gif
6.align = r
}
10 = TEXT
10.offset = 0,13
10.align = center
10.niceText = 1
page.10 = HMENU
page.10.1 {
xPosOffset =-10
lockPosition = x
expAll=1
NO {
colbacks = #cccccc
XY = [10.w]+10, 14
10 = TEXT
10.offset = 5,10
}
}
page.10.2 = GMENU
page.10.2.NO {
colbacks = |*| #99cccc || #99cccc : *1.2 |*|
XY = 120, 20
10 = TEXT
10.offset = 5,13
10.niceText = 1
20 = BOX
20.color = #660000
21 < .20
21.align = r
22 = BOX ||
22.color = #660000
23 = |*||*|
|| BOX
}
23.color = #660000
23.align = ,b
Résultat:
Commentaires: Les objects GIFBUILDER 22 et 23 sont activées par optionSplit. Dans le cas du "22" optionSplit assigne
"BOX" comme valeur pour le premier item du menu. Dans le cas du "23" optionSplit assigne "BOX" comme valeur
seulement pour le dernier item. Référez-vous à l'exemple optionSplit de TSref.
page.10 = HMENU
page.10.1 {
yPosOffset =-30
lockPosition = y
expAll=1
NO {
wrap = |<BR>
colbacks = |*| #ff6600 || #ff6600 : -30 |*|
XY = 130, 15
10 = TEXT
10.text.case = upper
10.offset = 5,10
10.niceText = 1
10.fontFace = t3lib/fonts/verdana.ttf
10.fontSize = 8
10.spacing = 2
20 < .10
}
RO < .NO
RO=1
RO.backColor = #ff9900
}
page.10.2 = GMENU
page.10.2.NO {
colbacks = |*| #99cccc || #99cccc : *1.2 |*|
XY = 120, 20
10 = TEXT
10.offset = 5,13
10.niceText = 1
20 = BOX
20.color = #660000
21 < .20
21.align = r
22 = BOX ||
22.color = #660000
23 = |*||*|
|| BOX
23.color = #660000
23.align = ,b
}
Résultat:
Commentaires:
La chose principale est de changer l'orientation du GMENU_LAYERS ici est de réarranger les paramètres pour les couches
dynamiques (dynamic layers):
yPosOffset =-30
lockPosition = y
Quand vous appliquerez le menu sur une page, vous aurez besoin de fignolez (“tweek”) ces paramètres pour adapter le
design de la page afin que le menu apparaisse correctement avec les coordonnées spécifiées.
Entre autres choses astucieuses dans ce menu, il y a
20 < .10
Ceci crée une copie du textobject, parce que sans le texte, il tend à être trop faiblard. Ainsi c'est un “workaround”
(contournement) du fait que nous ne disposons pas de la version "bold" de la police. Voilà à quoi il ressemblerait sans:

TypoScript By Example

Transcription

Documents pareils

Office de Tourisme et du Thermalisme de La Roche

Paris, le 09/ 11/ 06 Bonjour Grisette. Je suis content d`être ton ami

Maquettage avec TemplaVoila - Jean

demande de preavis avant resiliation de contrat

taille reelle / actual size

5th grade

CRFPA-Guide de l`oral d`anglais au CRFPA

4 GRADE : ENGLISH SKILLS CM1 : COMPETENCES D`ANGLAIS