.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ===================== TypoScript By Example ===================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: .. . :Changed: 2004-08-16T19:46:43 :Author: Kasper Skårhøj :Email: kasper@typo3.com :Info 3: durant_terry@hotmail.com (traducteur) :Info 4: .. _TypoScript-By-Example: 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, 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 .. _Table-of-Contents: 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: Introduction ------------ .. _Ce-document: 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: D'autres documentations ^^^^^^^^^^^^^^^^^^^^^^^ Undocument 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”** enest un dont le sujet traite de “content rendering” (restitution des contenus). .. _En-ai-je-besoin: 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: Qu'est ce que le TypoScript template (gabarit)? ----------------------------------------------- .. _Pralable-du-traducteur: Préalable du traducteur ^^^^^^^^^^^^^^^^^^^^^^^ Je me permets, Kasper m'en excuserad'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 constaterezqu'il existe trois élémentsqui interagissent lors du processus de restitution puis d'affichage d'une page par Typo3 : 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 .. 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”. 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'appelermise en page mais ce serait trop restrictif) et affichage qui met en jeu notamment le cache des pages. .. _Overview: 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 : .. ### BEGIN~OF~TABLE ### .. _Template-title-titre-qui-apparatra-dans-la-liste-des: "Template title": titre qui apparaîtra dans la liste des """""""""""""""""""""""""""""""""""""""""""""""""""""""" .. container:: table-row a "Template title": titre qui apparaîtra dans la liste des enregistrements sur l'onglet “web-tab” Choix libre "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”. "Constants": contientles "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èresuivante "{$styles.content.textStyle.size}". Les constantes sont substituées dans le même ordre que ceuxpré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)). "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'àcellesincluses dans les “gabarits inclus” (voir au-dessous (6))"clear". "Ressources": Ce champ peut contenir des médias comme des images, des masques, des polices Truetype, desfeuillesde 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 lesgabarits(template). Lors de lalibélisationd'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 legabaritdupliqué 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. "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'organigrammedes pages va se comporter comme la racine (startpage) d'un nouveau site Web 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). "Include basis template": Pour inclure vos propres Gabarits.Voir le cas "Include basis template" exposé ci-après. "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! "Description": Écrire vos propres notes ici.. b |img-1| :: "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) .. ###### END~OF~TABLE ###### .. _Exemple-cas-Inclure-un-gabarit: Exemple cas : “Inclure un gabarit” ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _Une-approche-sympathique-de-l-utilisation-des-Gabarits-est-celle: Une approche sympathique de l'utilisation des Gabarits est celle """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" .. container:: table-row a 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!! |img-2| |img-2| .. _Regardez-maintenant-les-images-ci-contre-Elles-font-partie-du-contenu: Regardez maintenant les images ci-contre. Elles font partie du contenu """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" .. container:: table-row a 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. |img-2| |img-3| .. ###### END~OF~TABLE ###### .. _Grer-la-hirarchie-des-Templates: 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". |img-4| .. _Cas-d-e-xemple-Extension: Cas d'e **xemple** : "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.. |img-5| |img-6| .. _Managing-extensions: Managing extensions ^^^^^^^^^^^^^^^^^^^ Encore une fois, le “Template Analyzer” montre sa maniabilitéici: |img-7| .. _Pour-plus-de-lecture: Pour plus de lecture ^^^^^^^^^^^^^^^^^^^^ Dans le TSref il y a également une explication de la façon dont les descripteurs fonctionnent. .. _Gabarit-standard: Gabarit standard ---------------- .. _Introduction: 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: Table static\_template ^^^^^^^^^^^^^^^^^^^^^^ Les Gabarits statiques sont des enregistrements de la table "static\_template" et sont des enregistrements de niveau racine. Celasignifie 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 queles 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: .. ### BEGIN~OF~TABLE ### .. _template-C-est-le-Gabarit-standard-Quand-vous-voulez-crer-un: "template: ...": C'est le Gabarit standard. Quand vous voulez créer un """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" .. container:: table-row a "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 GabaritTous les Gabarits standards incluent le Gabarit **"content (default)"** pour la fonction de restitution de Typo3. "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. "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 tantque constantes déclarées pour une modification facile du comportement de la restitution des contenus "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”. "frame set.": Différentsframe sets(jeu de cadre) standard. Utilisé par quelques Gabarits standards. "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 depré réglagesintéressants comme des panneaux(boards), catalogues, calendriers systèmes (calender-systems) et ainsi de suite. b |img-8| .. ###### END~OF~TABLE ###### .. _Content-rendering-details: 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-paramtrage-typique-d-un-gabarit-standard: 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: |img-9| Dans le “Template Analyzer” il ressemble à ceci : |img-10| .. _Tutorielde-base-dmarrez-un-nouveau-website: Tutorielde base : démarrez un nouveau website --------------------------------------------- A partir d'ici, encore plus d'exemples de TypoScript .. _Un-simple-website-partir-de-zro: 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": |img-11| 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. |img-12| Si vous essayez de regarder la page maintenant, un errormessage apparaîtra |img-13| 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éfiniune 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 = page.10 = HTML page.10.value = Hello World page.10.value.case = upper Ceci ressemble à ceci dans votre browser |img-14| Cet exemple montre un certain nombre de points concernant TypoScript.Commençonsavec 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 valeurdetype, 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-lger: 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 duchamp "Setup" :: page.5 = HMENU page.5.1 = TMENU page.5.1.wrap = |

page.5.1.NO { linkWrap =   |   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'objetest 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>
) 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). |img-15| |img-16| |img-17| .. _Insrer-un-menu-graphique: 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: 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 correspondreau “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 celafonctionne, 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 = | makelinks.mailto.keep = path makelinks.mailto.wrap = | makelinks.mailto.ATagBeforeWrap = 1 } } Il y a deux constantes ici, cBodyTextWrap et cHeaderWrap Celles-ci doivent être alors définies dans le champ “Constantes” du Gabarit et avoir pour valeur i :: cHeaderWrap = | cBodyTextWrap = |
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 taille2 et avec une étiquette < BR>- après la section .. _Concepts: Concepts ======== .. _id-et-type: “&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 leTutoriel3, "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: |img-18| 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ésultatest identique Essayer de changer la valeur du type :: &type=1 &type=2 &type=3 |img-18| Comme vous pouvez voir une valeur du type avec 3 valeurs différentes donne le même résultats dans une page non-configuré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 |img-19| 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: |img-20| 3 Objets “page” sont définis, "page", "left" et "frameset". Chaque objet PAGE définit l'apparence visible à l'affichage en se servant de lavaleur"&type" .. _E-nveloppes-wraps: E **nveloppes (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”: :: | :: Et si la chaîne de caractères "World" est enveloppée par l'enveloppe, le résultat est ceci : WORLD 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églagedoit 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-donnes-a-rrays-1-2-3-4: **Structure de données (a** rrays) (1,2,3,4...) ----------------------------------------------- Parfois, vous verrai les propriétéslisté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-donnes-numriques: Numerical arrays (structure de données numériques) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Il est nécessairede 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.10.value = Hello world page.20 = TEXT page.20.value =
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.10.value = Hello world page.5 = TEXT page.5.value =
Are you listening? ... la ligne"
Are you listening?" est maintenant affichéeavant "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-donnes-de-chane-de-caractres: 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 etcelaà 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 …) :: .. _styles-content-xxx: “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éeau 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: 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". Etcelaressemble à ce que vous voyez dans ce navigateur d'objet (browser object): |img-21| 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: :: styles.content.imgtext.maxW = 400 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 < styles.content.imgtext 20.text.10 = COA 20.text.10 { if.value = 24 if.isGreaterThan.field = imageorient 10 = < lib.stdheader } 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? :: styles.content.imgtext.maxW = 400 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 < styles.content.imgtext 20.text.10 = COA 20.text.10 { if.value = 24 if.isGreaterThan.field = imageorient 10 = < lib.stdheader } 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". |img-22| .. _Sections-ducatives: Sections éducatives =================== .. _Introduction: 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". |img-23| |img-24| .. _img-25-Code-notation-conventions: |img-25| Code notation conventions: ----------------------------------- .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _1-Tous-les-codes-TypoScript-utilisent-la-fonte-courrier: 1) Tous les codes TypoScript utilisent la fonte courrier """""""""""""""""""""""""""""""""""""""""""""""""""""""" :: page = PAGE page.typeNum=0 page.10 = TEXT page.10.value = Hello world .. _2-La-plupart-des-exemples-omettent-les-deux-premires-lignes-qui-sont-supposes-prsentes: 2) **La plupart des exemples omettent les deux premières lignes qui sont supposées présentes** : """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" :: page.10 = TEXT page.10.value = Hello world .. _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: 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.value = Hello world page.10.case = upper a pu également être énoncé de cette manière: :: ... page.10.case = upper .. _stdWrap: stdWrap ======= .. _Le-concept-stdWrap: Le concept “stdWrap” -------------------- (Prononcé"Standard wrap" - “enveloppe standard”). stdWrap est un “assistant” quiconviensdans 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: |img-26| 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ètementreviensau même que pour l'objet “TEXT”. De fait, c'est tout simplement une valeur de “chaîne de caractères” (string-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. |img-27| 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” (casse 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 vraimenttemps 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 ilsfonctionnent: .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Le-cObject-TEXT: Le cObject TEXT : """"""""""""""""" Les propriétés de stdWrap sont incluses dans l'objet TEXT lui même. Ceci signifieque : :: page = PAGE page.typeNum=0 page.10 = TEXT page.10.value = Hello world page.10.case = upper ... va afficher en résultat "HELLO WORLD" .. _Le-cObject-HTML: Le cObject HTML: """""""""""""""" Les propriétés de stdWrap sont incluses dans la propriété “.value” de l'objet HTML. Celaimpliquera que :: page = PAGE page.typeNum=0 page.10 = HTML page.10.value = Hello world page.10.value.case = upper ... va afficher "HELLO WORLD" (Commentaires: Les propriétés de stdWrap sont un peuin conséquemmentmis 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- êtreaussiune 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 stdWrap 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!' .. _Proprits-de-stdWrap: 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. Get data (obtenir) Override / Conditions 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: 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 parcObj->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 etstdWrap...)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. .. _generated: ((generated)) """"""""""""" .. _Exemple: Exemple: ~~~~~~~~ :: page.10 = TEXT page.10.value = Hello world 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. Wow! 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. |img-28| 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.value = Hello world page.10.field = crdate Ceci produit un nombre, qui est le temps “UNIX” écoulé depuis 1970 (en nombre de secondes). .. _Challenge-stdWrap-1: 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: 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 page.10.field = title 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 proviensde 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 larootline - vous êtes actuellement dans la branche'Startpage/Content elements/Insert content') .. _Challenge-stdWrap-2: Challenge (stdWrap/2) """"""""""""""""""""" 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: Override / Conditions ^^^^^^^^^^^^^^^^^^^^^ stdWrap fournit simplement un "control structures" (structure de contrôle) au moyen 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.value = Hello world page.10.override = Hello heaven donne "Hello heaven" parce que si “override”revoitquelque contenu que ce soit, alors la valeur originale est substituée. :: page.10 = TEXT page.10.value = Hello world 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"... |img-29| .. _Challenge-stdWrap-3: Challenge (stdWrap/3) """"""""""""""""""""" 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" .. _Challenge-stdWrap-4: Challenge (stdWrap/4) """"""""""""""""""""" Avec vos résultats obtenus lors du défi 3, pourriez vous l'envelopper en entier avec les étiquettes

...

? Et pourriez-vous remplacer "Hello world" avec le page-titre à sa place, lequel – dans le cas présent – est enveloppé (wrapped) par ... .. _Objets-de-contenu-cObject: Objets de contenu (cObject) =========================== .. _Introduction: 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: 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 = | wrap2 = |
case = upper } page.10.20 = TEXT page.10.20.field = title Donne ceci : |img-30| Cela pourrait tenir sur une ligne, mais ce choix est un atout pour s'adapter à la situation. :: page.10 = TEXT page.10.field = title page.10.wrap = THIS IS THE PAGE TITLE:
| Donnons nous un autre exemple: :: page.10 = COA # Header to this section page.10.10 = TEXT page.10.10 { value = This is the page title: wrap = | wrap2 = |
case = upper } # Output page title / subtitle page.10.20 = COA page.10.20 { 10 = TEXT 10.field = title 10.wrap = Page title: |
20 = TEXT 20.field = subtitle 20.wrap = Subtitle: | } donne cela : |img-31| .. _Challenge-cObject-1: Challenge (cObject/1) """"""""""""""""""""" Je voudrais que le sous-titre soit renvoyé sur le browser *seulement* s'il est présent. Qu'allez-vous faire? .. _Challenge-cObject-2: Challenge (cObject/2) """"""""""""""""""""" Faire en sorte que tout le COA (page.10) soit renvoyé au browser *seulement* si le sous-titre est présent. .. _Challenge-cObject-3: Challenge (cObject/3) """"""""""""""""""""" 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: 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: IMAGE ^^^^^ Inclut une image avec l'étiquette < img>. .. _generated: ((generated)) """"""""""""" .. _Exemple: 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). |img-32| 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: 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? .. _Challenge-cObject-5: Challenge (cObject/5) """"""""""""""""""""" 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: 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. .. _generated: ((generated)) """"""""""""" .. _Exemple: Exemple: ~~~~~~~~ :: page.10 = IMG_RESOURCE page.10 { file = fileadmin/tsbyex/alligator.jpg file.width = 200 } donne : :: typo3temp/3de305c72b.jpg .. _Challenge-cObject-6: Challenge (cObject/6) """"""""""""""""""""" Pouvez-vous faire en sorte que l'image soit en fond d'écran d'un Tableau? .. _CLEARGIF: 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* : ::
Notez que l'étiquette
est toujours ajouté au début. Vous êtes toujours libres d'employer le fichier “clear.gif” que voustrouverezà la racine dusite .. _HRULER: HRULER ^^^^^^ Ceci insère une "règle" horizontale. Pas celui du style HTML, mais fait avec une table et une couleur de fond. .. _generated: ((generated)) """"""""""""" .. _Exemple: 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: |img-33| .. _Challenge-cObject-7: Challenge (cObject/7) """"""""""""""""""""" 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: CTABLE and OTABLE ^^^^^^^^^^^^^^^^^ Ces cObjects ont pour objet de vous donner une possibilitéd'obtenir des tableaux instantanés pour y placer votre contenu. .. _generated: ((generated)) """"""""""""" .. _Exemple-of-OTABLE: 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 = |
20 = IMAGE 20.file = fileadmin/tsbyex/alligator.jpg 20.file.width=200 } a pour résultat : |img-34| Ce que fait “offset” ici parait évident. Mais normalement vous voudriez disposer de quelques autres paramètres pour l'étiquette . 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”, "
" s'applique par défaut
-start tag. .. _Challenge-cObject-8: Challenge (cObject/8) """"""""""""""""""""" 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: 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 chosetout à fait identique à ce que produirait le OTABLE avec ceci : :: page.bodyTagMargins = 0 page.10 = OTABLE page.10 { tableParams = border=1 cellpadding=0 cellspacing=0 offset = 0,20 10 = TEXT 10.value = CONTENT cell } Pareil, à l'exception du fait que CTABLE ajoute le "valign=top" aux étiquettes < td>. Regardezmaintenant un exemple plus complexe: :: 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 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: |img-35| Maintenant, vous pouvez mettre n'importe quel OBJECTS que vous aimez dans les cellules. Mais il y a encore deux dispositifs àregarderen détail. Avec "cMargin" vous pouvez ajouter des marges entre les cellules et toute autour d'elles et avec “cWidth” vous pouvez automatiquementfixerl'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: |img-36| 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”: |img-37| Instructif, n'est-ce pas... .. _Gabarit-TEMPLATE: 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. .. _generated: ((generated)) """"""""""""" .. _Exemple: 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: |img-38| 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 --> Untitled This is a template that demonstrates the concept of subparts and markers. This is a ###SIMPLE_WORD### textfile with a few HTML-tags in.

Check out the link to the front page. … 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: :: ... This is a ###SIMPLE_WORD### textfile with a few HTML-tags in.

Check out the link to the front page. Maintenant notre intention est de substituer###SIMPLE\_WORD### par le titre de la page et de substituerle subpart ###LINK### par lui-même, mais mais lié à la page d'accueil du site Web(et c'est dur! .. _Exemple: 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: |img-38| Et le code source HTML obtenu est celui-là: :: ... // End Hiding Script --> This is a Content elements textfile with a few HTML-tags in.

Check out the link to the front page. 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 = TEXT subparts.LINK.current = 1 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ésultatla 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 = TEXT subparts.LINK.current = 1 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!). :: ... subparts.LINK = TEXT subparts.LINK.current = 1 subparts.LINK.typolink { parameter.data = leveluid:0 } } .. _Challenge-cObject-9: Challenge (cObject/9) """"""""""""""""""""" 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 ? .. _FORM-formulaire: 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. .. _generated: ((generated)) """"""""""""" .. _Exemple: Exemple: ~~~~~~~~ :: page.10 = FORM page.10.data = Label | input page.10.layout = ###LABEL###: ###FIELD###
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 page.10.layout = ###LABEL###: ###FIELD###
..va nous donner cela : |img-39| 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 = your@email.com page.10.layout = ###LABEL###: ###FIELD###
page.10.locationData = 1 page.10.REQ=1 page.10.REQ.layout = ###LABEL### (Required): ###FIELD###
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 :: |img-40| 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” |img-41| .. _CAS-d-exemple: CAS d'exemple ^^^^^^^^^^^^^ Ce cObject fournit maintenant une "structure de commande"(control structure) à TypoScript. Cela fonctionne comme un générateur de commutateur (switch-construct) : .. _generated: ((generated)) """"""""""""" .. _Exemple: Exemple: ~~~~~~~~ :: page.10 = CASE page.10.key = cheese page.10.cheese = IMAGE page.10.cheese { file = fileadmin/tsbyex/alligator.jpg 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: |img-42| 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 = fileadmin/tsbyex/alligator.jpg 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 =
| - page.30 = TEXT page.30.field = title le rèsultat : |img-43| Essayez d'atteindre les pages "Startpage", "Content elements", "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 enplus 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: 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: 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 toujoursun 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 = |
page.15 < page.5 This is the result: |img-44| **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 plusvide, donc la valeur écrase (override) la valeur par défaut. Et le résultat en sortie devient "valeur du registre!" |img-45| .. _Challenge: Challenge """"""""" Essayer de regarder les static\_templates "TEMPLATE; FIRST " et "TEMPLATE; MM". Tous les deux utilisent ce dispositif. Pour accomplir quoi? .. _imgResource-et-GIFBUILDER: imgResource et GIFBUILDER ========================= .. _Introduction: 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-entre: 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 = fileadmin/tsbyex/sunset_keywest.jpg page.bgImg.width = 200 Et vous devezvoir cela:: |img-46| .. _Masques-Bitmap: 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": |img-47| Donc, essayons maintenant avec ceci :: :: page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg page.bgImg.width = 200 page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpg page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg Résultat: |img-48| Essayons plutôt avec ceci :: page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg page.bgImg.width = 300 page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpg page.bgImg.m.bgImg.params = -rotate 90 page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg Résultat: [N/A...] .. _Importer-une-image: 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 incluredes fichiers médias. |img-49| 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!) |img-50| 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émentla 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... |img-51| 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 contientla 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: 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 passi facile – servez-vous de TSref, bonne chance.) .. _GIFBUILDER: 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: |img-52| 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 = fileadmin/tsbyex/alligator.jpg page.bgImg.m.bgImg.params = -rotate 90 page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg ... 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.width = 300 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 |img-53| Le masque "mask2.gif" ressemble à ceci: |img-47| .. _GIFBUILDER-bases: 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 = GIFBUILDER 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 : |img-54| .. _calc: +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 permetd'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. |img-55| .. _generated: ((generated)) """"""""""""" .. _Exemple: Exemple: ~~~~~~~~ :: page.10 = IMAGE page.10.file = GIFBUILDER page.10.file { XY = [20.w]+20, 30 colbacks = olive 10 = BOX 10.dimensions = 20,20,160,260 10.color = green 20 = TEXT 20.text = Hello World 20.offset = 10,15 } Résultat: |img-56| 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.text = Hello World 20.offset = 10,15 20.niceText = 1 } Résultat: |img-56| É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: .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). |img-57| **A gauche :** texte normal Anti-crênelage par Freetype. **Milieu:** .niceText=1 A droite **:** .antiAlias=0 (Anticrênelage désactivé) .. _L-objet-GIFBUILDER-TEXT: L'objet GIFBUILDER TEXT ^^^^^^^^^^^^^^^^^^^^^^^ Maintenant, nous allons essayer encore plus d'options pour le texte: :: ... 20 = TEXT 20.text = Hello World 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à : |img-58| .. _Challenge-GIFBUILDER-1: 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: L'objet IMAGE ^^^^^^^^^^^^^ Vous pouvez également ajouter une image aux objets de GIFBUILDER. .. _generated: ((generated)) """"""""""""" .. _Exemple: Exemple: ~~~~~~~~ :: page.10 = IMAGE page.10.file = GIFBUILDER 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.fontFile = t3lib/fonts/verdana.ttf 20.fontColor = yellow 30 = IMAGE 30.file = fileadmin/tsbyex/alligator.jpg 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: |img-59| .. _Challenge-GIFBUILDER-2: Challenge (GIFBUILDER/2) """""""""""""""""""""""" 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.) .. _Challenge-GIFBUILDER-3: Challenge (GIFBUILDER/3) """""""""""""""""""""""" Pouvez-vous, aussi, créer un “frame” cadre rouge de 2 Pixel tout autour de l'image? .. _Navigation: Navigation ========== .. _generated: ((generated)) ------------- .. _HMENU: HMENU ^^^^^ Le' cObject "HMENU" est employé pour produire "des menus hiérarchiques" - c'est la navigation. .. _generated: ((generated)) """"""""""""" .. _Exemple: Exemple: ~~~~~~~~ :: page.10 = HMENU page.10.1 = TMENU page.10.1.NO { linkWrap = |
} Résultat: |img-60| 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 = |
} Le résultat: |img-61| (Ceci apparaît seulement si vousmettezid=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: 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 dustatic\_template "TEMPLATE; BUSINESS": :: page.10 = HMENU page.10.1 = TMENU page.10.1.target = page page.10.1 { expAll = 1 wrap =
|
NO.linkWrap = | NO.allWrap =
| } page.10.2 = TMENU page.10.2 { wrap = | target = page NO { beforeImg = media/bullets/bullet1_n.gif beforeROImg = media/bullets/bullet1_h.gif beforeImgTagParams = hspace=2 RO = 1 after =
ATagBeforeWrap = 1 linkWrap= | } } Résultat: |img-62| Vous devriez savoir une chose au sujet deTMENU: Il y a deux propriétés, “.before” et “.after”. Elles ont des propriétésstdWrap 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 lepage-record de l'item du menu courant lorsqu'il est exécuté. À l'origine c'était une erreur deconception, mais le contournement afin d'être compatible avec des versions antérieures a été questdWrap pet récupérerle 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 quipermetd'obtenir le titre principal de page) utilisez "before.data = page:title". .. _Challenge-TMENU-1: Challenge (TMENU/1) """"""""""""""""""" Réglez finement le menu à votre goût et insérezune autre image-buleet (image puce), mais en l'insèrent à la droite des articles! .. _Challenge-TMENU-2: Challenge (TMENU/2) """"""""""""""""""" Ajouter un troisième niveau .. _Challenge-TMENU-3: 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: Challenge (TMENU/4) """"""""""""""""""" Créer ce menu: |img-63| .. _Exemple-TMENU: Exemple (TMENU) """"""""""""""" C'est une capture d'écran dewww.fladsaa.dk. Le code utiliséicipour le menu est trouvédans lasectionChallenge plus haut, si vous voulez le voir: |img-64| .. _IMGMENU: IMGMENU ^^^^^^^ C'est un menu d'imagemap (basé sur image). .. _generated: ((generated)) """"""""""""" .. _Exemple: 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 = Frontpage temp.topmenu.1 { wrap = |
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 } } page.10 < temp.topmenu **Résultat:** |img-65| **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 = Frontpage 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.Cettezone 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'uneinstallationde 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: Challenge (IMGMENU/1) """"""""""""""""""""" Pouvez vous réarranger les éléments afin qu'ils apparaissent presque comme ceci: |img-66| .. _optionSplit: 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 veutque 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'obtiensce résultat : |img-67| Si j'ajoute une autre page au testsite, le menu sera mis à jour en conséquence: |img-68| |img-69| .. _Challenge-IMGMENU-2: Challenge (IMGMENU/2) """"""""""""""""""""" Pouvez-vous définir un optionSplit pour la couleur de la ligne verticale qui la changerait en blanc ou noir ? .. _GMENU: GMENU ^^^^^ Maintenant essayons de nous occuper de l'objet de menu GMENU. .. _generated: ((generated)) """"""""""""" .. _Example: Example: ~~~~~~~~ :: page.10 = HMENU page.10.1 = GMENU page.10.1.NO { XY = [10.w],[10.h] colbacks = #cccccc || #eeeeee 10 = TEXT 10.text.field = title 10.offset = 0,7 } Résultat: |img-70| 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.text.field = title 10.offset = 0,13 10.align = center 10.niceText = 1 } Résultat: |img-71| 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.text.field = title 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: |img-72| .. _Challenge-GMENU-1: 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? |img-72| .. _Images-avec-GMENU: Images avec GMENU ^^^^^^^^^^^^^^^^^ Vous pouvez employer des fonds d'image pour vos items de menu .. _generated: ((generated)) """"""""""""" .. _Exemple: Exemple: ~~~~~~~~ :: page.10 = HMENU page.10.1 = GMENU page.10.1.NO { wrap = |
XY = [4.w], [4.h] colbacks = olive 4 = IMAGE 4.file = fileadmin/tsbyex/menuback.gif 10 = TEXT 10.text.field = title 10.offset = 0,14 10.align = center 10.niceText = 1 } L'image "menuback.gif" apparaîtcomme ceci: |img-73| Résultat: |img-74| .. _Exemple-labor-GMENU: 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. |img-75| .. _Challenge-GMENU-2: Challenge (GMENU/2) """"""""""""""""""" Pourriez-vous créer ce menu, basé sur ce que vous connaissez de l'objet GIFBUILDER? Trois images, |img-76| *left.gif* |img-77| *middle.gif* and |img-76| *right.gif* issu du répertoire “/media/buttons/” sont utilisés |img-72| .. _GMENU-LAYER: 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 .. _generated: ((generated)) """"""""""""" .. _Exemple: 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.text.field = title 10.offset = 5,10 } } page.10.2 = GMENU page.10.2.wrap = |
page.10.2.NO { colbacks = #99cccc XY = 120, 14 10 = TEXT 10.text.field = title 10.offset = 5,10 } Résultat: |img-78| .. _Challenge-GMENU-LAYERS-1: Challenge (GMENU\_LAYERS/1) """"""""""""""""""""""""""" Pouvez vous modifier ce menu avec une disposition comme ceci: |img-79| (Toutes les modifications sont faites à l'objet de menu “object 2”, le GMENU) .. _Challenge-GMENU-LAYERS-2: Challenge (GMENU\_LAYERS/2) """"""""""""""""""""""""""" Pouvez vous modifier ce menu selon une disposition à peu près comme ceci (au moins l'orientation du menu): |img-80| (Toutes les modifications sont faites à l'objet de menu “object 1”, le GMENU\_LAYER) .. _Prolonger-un-fond-d-image-au-menu-entier: **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.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.text.field = title 10.offset = 5,10 } } page.10.2 = GMENU page.10.2.wrap = |
page.10.2.NO { colbacks = #99cccc XY = 200, 20 10 = TEXT 10.text.field = title 10.offset = 5,15 10.fontColor = white 10.niceText = 1 10.fontSize = 20 } |img-81| ... ajouter ces lignes: :: ... page.10.2 = GMENU page.10.2.wrap = |
page.10.2.NO { colbacks = #99cccc XY = 200, 20 5 = IMAGE 5.file = fileadmin/tsbyex/sunset_keywest.jpg 10 = TEXT 10.text.field = title 10.offset = 5,15 ... |img-81| 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 |img-81| ... 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: |img-82| 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.wrap = |
page.10.2.NO { colbacks = #99cccc XY = 200, 20 5 = IMAGE 5.file = fileadmin/tsbyex/sunset_keywest.jpg 5.height = 200 10 = TEXT 10.text.field = title ... Résultat: |img-83| 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 include-scripts =================== .. _generated: ((generated)) ------------- .. _PHP-SCRIPT-cObject: 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: |img-84| |img-85| |img-86| (Rappelez-vous d'activer "Clear All Cache" dans le [menu] after deactivating...) .. _Inspiration: 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: 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 <../../TheProject/doc/T3/doc%20typo3.fr%20sxw/www.typo3.com>`_ j'énumère parfois du codeTypoScript. 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, ... to the parseFunc of bodytext tt_content.text.20.parseFunc.tags { ts.stripNL = 0 ts = PHP_SCRIPT ts.file = fileadmin/tsbyex/testtag.inc } |img-87| 2) Ouvrir le document fileadmin/tsbyex/testtag.inc avec votre éditeur de texte favori et vérifiez qu'il y a ce contenu: :: getCurrentVal(); $content = ''.$contentOfTag.''; ?> 3)Ouvrir "Startpage" sur le testsite et ajouter les étiquettes du < ts>… comme vous voyez ici: |img-88| … et espérez pour. Ceci est le résultat : |img-89| 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, ... 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 contenuest : fileadmin/tsbyex/testtag2.inc :: getCurrentVal(); $content = $test_object->formatTS($contentOfTag, 1); ?> fileadmin/tsbyex/testclass.inc :: ")."
"; $output = ''.$output.''; return $output; } } ?> |img-90| 3) Pour finir, saisissezceci dans le “content record”: … et vous devriez voir ceci dans votre browser frontend, quand vous rechargez: |img-91| .. _Challenge-PHP-SCRIPT1: 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. .. _Challenge-PHP-SCRIPT2: Challenge (PHP\_SCRIPT2) """""""""""""""""""""""" 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: Content rendering (restitution de contenu) ========================================== .. _generated: ((generated)) ------------- .. _Introduction: 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 : |img-92| 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). Regardezdans 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. |img-93| .. _CONTENT: 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) .. _generated: ((generated)) """"""""""""" .. _Exemple: 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: |img-94| C'est aussi simple que cela! .. _colPos: 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: |img-95| |img-96| Essayez de créer quelque nouveaux contenus dans la colonne "border": … et il apparaît bien dans la colonne "border": |img-97| 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”: |img-98| La valeur est "3". Modifiezainsi votre TypoScript comme ceci: :: page.10 = CONTENT page.10 { table = tt_content select.orderBy = sorting select.where = colPos=3 } Résultat: |img-99| .. _styles-content-default: 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: |img-100| :: page.10 < styles.content.get substitutes page.10 = CONTENT page.10 { table = tt_content select.orderBy = sorting select.where = colPos=0 } et de même avecla colonne "border": :: page.10 < styles.content.getBorder Vous l'avez? Bon. .. _lib-stdheader: 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 { 10 = < lib.stdheader 20 = CASE ... # CType: text tt_content.text = COA tt_content.text { 10 = < lib.stdheader 20 = TEXT 20 { ... # CType: multimedia tt_content.multimedia = COA tt_content.multimedia { 10 = < lib.stdheader 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: |img-101| 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”! .. _generated: ((generated)) """"""""""""" .. _Exemple: Exemple: ~~~~~~~~ :: page.10 < styles.content.getBorder lib.stdheader > lib.stdheader = TEXT lib.stdheader.value = ALTERNATIVE HEADER !! donne le résultat: |img-102| 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: RECORD ^^^^^^ Ce cObject est utilisé pour ramener des enregistrements uniques. CONTENT a été conçu pour obtenir une liste d'enregistrements– normalementdepuis la table tt\_content. Mais cela pourrait être n'importe quelle table: .. _generated: ((generated)) """"""""""""" .. _Un-example-rapide: 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 = | } résultat : |img-103| … parce que l'enregistrement dans la table "tt\_content" avec l'uid "1" était: |img-104| .. _Un-autre-exemple: Un autre exemple: ~~~~~~~~~~~~~~~~~ dans la table “tt\_address”, il y a quelquesenregistrementsavec des personnages des Simpsons. Ils sont à la page"Another site in.../Lists/Addresses/" :: temp.tt_address = COA temp.tt_address.wrap = |
temp.tt_address.10 = TEXT temp.tt_address.10 { field = name case = upper wrap = |
} 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 : |img-105| 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 = |
tt_address.10 = TEXT tt_address.10 { field = name case = upper wrap = |
} 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"). .. _Rponses-aux-Challenges: Réponses aux Challenges ======================= .. _generated: ((generated)) ------------- .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Challenge-stdWrap-1: Challenge (stdWrap/1) """"""""""""""""""""" 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.field = crdate page.10.date = d-m-y H:i Donne :: 01-07-00 15:48 :: page.10 = TEXT page.10.field = crdate page.10.strftime = %A %e. %B, %I:%M %p Donne :: Saturday 1. July, 03:48 PM :: page.10 = TEXT page.10.field = crdate page.10.strftime = %A %e. %B, %I:%M %p config.locale_all = deutsch Donne :: Samstag 1. Juli, 03:48 .. _Challenge-stdWrap-2: Challenge (stdWrap/2) """"""""""""""""""""" :: page.10 = TEXT page.10.data = leveltitle:-2 .. _Challenge-stdWrap-3: Challenge (stdWrap/3) """"""""""""""""""""" :: page.10 = TEXT page.10.field = subtitle page.10.ifEmpty = Hello world .. _Challenge-stdWrap-4: Challenge (stdWrap/4) """"""""""""""""""""" :: page.10 = TEXT page.10.field = subtitle page.10.ifEmpty { field = title required = 1 wrap = | } page.10.wrap =

|

"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.field = subtitle page.10.ifEmpty { field = title if.isTrue.field = title wrap = | } page.10.wrap =

|

.. _Challenge-cObject-1: Challenge (cObject/1) """"""""""""""""""""" :: page.10 = COA # Header to this section page.10.10 = TEXT page.10.10 { value = This is the page title: ... 20.wrap = Subtitle: | 20.required=1 } .. _Challenge-cObject-2: Challenge (cObject/2) """"""""""""""""""""" :: 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 .. _Challenge-cObject-3: Challenge (cObject/3) """"""""""""""""""""" :: 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: 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 “md5-hash” calculé pour l'imagelors 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. .. _Challenge-cObject-5: Challenge (cObject/5) """"""""""""""""""""" Version exhaustive: :: page.10 = IMAGE page.10 { file = fileadmin/tsbyex/alligator.jpg file.width = 200 imageLinkWrap = 1 imageLinkWrap.enable = 1 imageLinkWrap.JSwindow = 1 } La version "Rolls Royce": :: page.10 = IMAGE page.10 { file = fileadmin/tsbyex/alligator.jpg file.width = 200 imageLinkWrap = 1 imageLinkWrap.enable = 1 imageLinkWrap.JSwindow = 1 imageLinkWrap { bodyTag = wrap = | 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. |img-106| .. _Challenge-cObject-6: Challenge (cObject/6) """"""""""""""""""""" :: page.10 = IMG_RESOURCE page.10 { file = fileadmin/tsbyex/alligator.jpg file.width = 200 } page.10.stdWrap.wrap =

Hello World
(la dernière ligne est *une* ligne!) |img-107| .. _Challenge-cObject-7: Challenge (cObject/7) """"""""""""""""""""" :: page.5 = TEXT page.5.value = Before ruler page.5.wrap = |
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: |img-33| Notez que nous avons du mettre une étiquette
après le "Before ruler" text. Dans le cas contraire, l'espace ci-dessus n'aurait pas fonctionné.Le code HTML: :: Before ruler


After ruler .. _Challenge-cObject-8: Challenge (cObject/8) """"""""""""""""""""" :: page.bodyTagMargins = 0 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 = |
20 = IMAGE 20.file = fileadmin/tsbyex/alligator.jpg 20.file.width=200 30 = CLEARGIF 30.width=250 30.stdWrap.wrap =
| } .. _Challenge-cObject-9: Challenge (cObject/9) """"""""""""""""""""" :: 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.typolink { parameter.data = leveluid:1 wrap = | target = _blank } } .. _Challenge-PHP-SCRIPT1: Challenge (PHP\_SCRIPT1) """""""""""""""""""""""" 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 |img-108| Essayer d'entrer quelques nombres et de cliquez"Calculate!" |img-109| Voici la liste du code : :: 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.='
id.'&type='.$GLOBALS["TSFE"]->type.'&no_cache=1" method="POST"> + =
'; } } 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! |img-110| 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()”. .. _Challenge-PHP-SCRIPT2: Challenge (PHP\_SCRIPT2) """""""""""""""""""""""" 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étragesdans “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 afficheravec 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 enregistrementssupprimé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", "tstamp" => "tstamp", "title" => "Pagecontent|Sideindhold|Seiteninhalt|Sideinnhold|Contenuto pagina|Contenu de la page", "delete" => "deleted", "type" => "CType", "enablecolumns" => Array ( "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", "tstamp" => "tstamp", "delete" => "deleted", "title" => "Address|Adresse|Adresse|Adresse|Indirizzo:", "enablecolumns" => Array ( "disabled" => "hidden" ), "thumbnail" => "image" ), ... Ces exemples montrent où les "enablefields" sont configurés. “Code” de "fileadmin/tsbyex/test\_enablefields.inc" :: 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: 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.bgImg.width = 200 .. _Challenge-GIFBUILDER-1: Challenge (GIFBUILDER/1) """""""""""""""""""""""" :: page.10 = IMAGE page.10.file = GIFBUILDER page.10.file { XY = [20.w]+20, 30 colbacks = olive 20 = TEXT 20.text.field = title 20.offset = 10,20 20.niceText = 1 20.fontSize= 20 20.fontFile = t3lib/fonts/verdana.ttf 20.fontColor = #660000 20.emboss { offset = -2,-2 highColor = olive : +30 lowColor = olive : -30 blur = 30 opacity = 80 } } Résultat: |img-111| 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. .. _Challenge-GIFBUILDER-2: Challenge (GIFBUILDER/2) """""""""""""""""""""""" :: page.10 = IMAGE page.10.file = GIFBUILDER page.10.file { XY = 200, 160 colbacks = silver 20 = TEXT 20.text.field = title 20.offset = 0,120 20.niceText = 1 20.align=center 20.fontSize= 40 20.fontFile = t3lib/fonts/verdana.ttf 20.fontColor = yellow # Left, top 30 = IMAGE 30.file = fileadmin/tsbyex/alligator.jpg 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: |img-112| 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'excentrageest relatif à cette position et vous devez spécifier "-5, -5" pour décaler l'image vers le hautet 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”: |img-113| .. _Challenge-GIFBUILDER-3: Challenge (GIFBUILDER/3) """""""""""""""""""""""" 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 42.dimensions = 0,0,200,2 # Bottom border 43 < .42 43.align = ,b } Résultat: |img-114| .. _Challenge-TMENU-1: Challenge (TMENU/1) """"""""""""""""""" :: ... wrap = | target = page NO { afterImg = media/bullets/bullet1_n.gif afterROImg = media/bullets/bullet1_h.gif afterImgTagParams = hspace=2 RO = 1 after =
... .. _Challenge-TMENU-2: Challenge (TMENU/2) """"""""""""""""""" :: ... after =
ATagBeforeWrap = 1 linkWrap= | } } page.10.3 < page.10.2 page.10.3.wrap > page.10.3.NO.before =     page.10.2.expAll = 1 |img-115| 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: Challenge (TMENU/3) """"""""""""""""""" :: page.10 = HMENU page.10.1 = TMENU page.10.1.target = page page.10.1 { expAll = 1 wrap = |
NO.linkWrap = | NO.allWrap =
| NO.ATagBeforeWrap = 1 ACT < .NO ACT = 1 ACT.linkWrap = | } page.10.2 = TMENU page.10.2 { wrap = | target = page NO { afterImg = media/bullets/bullet1_n.gif afterROImg = media/bullets/bullet1_h.gif afterImgTagParams = hspace=2 RO = 1 after =
ATagBeforeWrap = 1 linkWrap= | } ACT < .NO ACT =1 ACT.linkWrap = | } |img-116| .. _Challenge-TMENU-4: Challenge (TMENU/4) """"""""""""""""""" :: temp.challengeMenu = HMENU temp.challengeMenu.stdWrap.wrap =
|
temp.challengeMenu.entryLevel = 0 temp.challengeMenu.1 = TMENU temp.challengeMenu.1.target = _top temp.challengeMenu.1.NO { allWrap = | ATagBeforeWrap = 1 linkWrap = | stdWrap.case = upper } temp.challengeMenu.1.ACT < temp.challengeMenu.1.NO temp.challengeMenu.1.ACT = 1 temp.challengeMenu.1.ACT { linkWrap = | } temp.challengeMenu.2 = TMENU temp.challengeMenu.2.target = _top temp.challengeMenu.2.NO { allWrap = | ATagBeforeWrap = 1 linkWrap = | stdWrap.case = upper } temp.challengeMenu.2.ACT < temp.challengeMenu.2.NO temp.challengeMenu.2.ACT = 1 temp.challengeMenu.2.ACT { allWrap = | linkWrap = | } page.noLinkUnderline =1 page.10 < temp.challengeMenu .. _Exemple-TMENU: 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 = |
temp.leftmenu.1.NO { allWrap = | ATagBeforeWrap = 1 linkWrap = | stdWrap.case = upper } temp.leftmenu.2 = TMENU temp.leftmenu.2.target = _top temp.leftmenu.2.wrap = | temp.leftmenu.2.NO { allWrap = | after =
|*||*|
ATagBeforeWrap = 1 linkWrap = | } page.10 < temp.leftmenu Résultat: |img-117| .. _Challenge-IMGMENU-1: Challenge (IMGMENU/1) """"""""""""""""""""" :: ... 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 } } page.10 < temp.topmenu Note que le "\|\|" du "NO.20" est supprimé afin que la ligne blancheapparaissesous chaque élément! .. _Challenge-IMGMENU-2: Challenge (IMGMENU/2): """""""""""""""""""""" :: ... NO.20 = BOX NO.20 { dimensions = 0,3,120,1 color = |*| white || black |*| } } Résultat: |img-118| .. _Challenge-GMENU-1: Challenge (GMENU/1) """"""""""""""""""" :: page.10 = HMENU page.10.1 = GMENU page.10.1.NO { XY = [10.w]+20,20 colbacks = olive 10 = TEXT 10.text.field = title 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 } |img-72| .. _Exemple-labor-GMENU: 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 100.height = {$buttonH} } 20 = IMAGE 20.file = GIFBUILDER 20.align = r 20.file { XY = 6,30 colbacks = {$buttonColor} : *0.5 100 = SCALE 100.width = 6 100.height = {$buttonH} } 20.mask = GIFBUILDER 20.mask { XY = 6,30 10 = IMAGE 10.file = media/buttons/maskpart2.tif 100 = SCALE 100.width = 6 100.height = {$buttonH} } 30 = IMAGE 30.file = GIFBUILDER 30.offset = 6,0 30.file { XY = [100.w]+10,{$buttonH} colbacks = {$buttonColor} : *0.5 100 < temp.topmenuText 100.hide = 1 } 30.mask = GIFBUILDER 30.mask { XY = [40.w], [40.h] 40 = IMAGE 40.file = media/buttons/maskpart3.tif 60 = SCALE 60.width = [100.w]+10 60.height = {$buttonH} 100 < temp.topmenuText 100.hide = 1 } 100 < temp.topmenuText } temp.topmenu.1.RO < temp.topmenu.1.NO temp.topmenu.1.RO=1 temp.topmenu.1.RO.100.fontColor = white page.10 < temp.topmenu Résultat: |img-75| .. _Challenge-GMENU-2: 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.text.field = title 10.offset = 0,13 10.align = center 10.niceText = 1 } |img-72| .. _Challenge-GMENU-LAYERS-1: Challenge (GMENU\_LAYERS/1) """"""""""""""""""""""""""" :: 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.text.field = title 10.offset = 5,10 } } page.10.2 = GMENU page.10.2.wrap = |
page.10.2.NO { colbacks = |*| #99cccc || #99cccc : *1.2 |*| XY = 120, 20 10 = TEXT 10.text.field = title 10.offset = 5,13 10.niceText = 1 20 = BOX 20.dimensions = 0,0,2,20 20.color = #660000 21 < .20 21.align = r 22 = BOX || 22.dimensions = 0,0,120,2 22.color = #660000 23 = |*||*| || BOX 23.dimensions = 0,0,120,2 23.color = #660000 23.align = ,b } Résultat: |img-79| 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. .. _Challenge-GMENU-LAYERS-2: Challenge (GMENU\_LAYERS/2) """"""""""""""""""""""""""" :: page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php page.10 = HMENU page.10.1 = GMENU_LAYERS page.10.1 { layerStyle = position:absolute;left:120px;top:30px;width:10px;VISIBILITY:hidden; yPosOffset =-30 lockPosition = y expAll=1 NO { wrap = |
colbacks = |*| #ff6600 || #ff6600 : -30 |*| XY = 130, 15 10 = TEXT 10.text.field = title 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.wrap = |
page.10.2.NO { colbacks = |*| #99cccc || #99cccc : *1.2 |*| XY = 120, 20 10 = TEXT 10.text.field = title 10.offset = 5,13 10.niceText = 1 20 = BOX 20.dimensions = 0,0,2,20 20.color = #660000 21 < .20 21.align = r 22 = BOX || 22.dimensions = 0,0,120,2 22.color = #660000 23 = |*||*| || BOX 23.dimensions = 0,0,120,2 23.color = #660000 23.align = ,b } Résultat: |img-80| **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): :: layerStyle = position:absolute;left:120px;top:30px;width:10px;VISIBILITY:hidden; 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 apparaissecorrectement 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: |img-119| |img-120| TypoScript By Example **- 92** .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 600 .. :id: Grafik2 .. :name: Grafik2 .. :width: 303 .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :height: 487 .. :id: Grafik3 .. :name: Grafik3 .. :width: 400 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 238 .. :id: Graphic7 .. :name: Graphic7 .. :width: 412 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 631 .. :id: Grafik10 .. :name: Grafik10 .. :width: 511 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 240 .. :id: Grafik6 .. :name: Grafik6 .. :width: 417 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 212 .. :id: Grafik7 .. :name: Grafik7 .. :width: 383 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 609 .. :id: Grafik11 .. :name: Grafik11 .. :width: 510 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 452 .. :id: Graphic3 .. :name: Graphic3 .. :width: 283 .. |img-9| image:: img-9.png .. :align: left .. :border: 0 .. :height: 270 .. :id: Grafik9 .. :name: Grafik9 .. :width: 423 .. |img-10| image:: img-10.png .. :align: left .. :border: 0 .. :height: 210 .. :id: Grafik12 .. :name: Grafik12 .. :width: 500 .. |img-11| image:: img-11.png .. :align: left .. :border: 0 .. :height: 165 .. :id: Grafik141 .. :name: Grafik141 .. :width: 418 .. |img-12| image:: img-12.png .. :align: left .. :border: 0 .. :height: 57 .. :id: Graphic4 .. :name: Graphic4 .. :width: 300 .. |img-13| image:: img-13.png .. :align: left .. :border: 0 .. :height: 154 .. :id: Graphic5 .. :name: Graphic5 .. :width: 364 .. |img-14| image:: img-14.png .. :align: left .. :border: 0 .. :height: 524 .. :id: Grafik1 .. :name: Grafik1 .. :width: 657 .. |img-15| image:: img-15.png .. :align: left .. :border: 0 .. :height: 149 .. :id: Grafik85 .. :name: Grafik85 .. :width: 561 .. |img-16| image:: img-16.png .. :align: left .. :border: 0 .. :height: 100 .. :id: Grafik86 .. :name: Grafik86 .. :width: 210 .. |img-17| image:: img-17.png .. :align: left .. :border: 0 .. :height: 305 .. :id: Grafik87 .. :name: Grafik87 .. :width: 493 .. |img-18| image:: img-18.png .. :align: left .. :border: 0 .. :height: 273 .. :id: Grafik13 .. :name: Grafik13 .. :width: 347 .. |img-19| image:: img-19.png .. :align: left .. :border: 0 .. :height: 443 .. :id: Grafik18 .. :name: Grafik18 .. :width: 503 .. |img-20| image:: img-20.png .. :align: left .. :border: 0 .. :height: 149 .. :id: Grafik19 .. :name: Grafik19 .. :width: 280 .. |img-21| image:: img-21.png .. :align: left .. :border: 0 .. :height: 430 .. :id: Grafik20 .. :name: Grafik20 .. :width: 251 .. |img-22| image:: img-22.png .. :align: left .. :border: 0 .. :height: 116 .. :id: Grafik21 .. :name: Grafik21 .. :width: 642 .. |img-23| image:: img-23.png .. :align: left .. :border: 0 .. :height: 219 .. :id: Grafik26 .. :name: Grafik26 .. :width: 301 .. |img-24| image:: img-24.png .. :align: left .. :border: 0 .. :height: 349 .. :id: Grafik27 .. :name: Grafik27 .. :width: 312 .. |img-25| image:: img-25.png .. :align: left .. :border: 0 .. :height: 154 .. :id: Grafik28 .. :name: Grafik28 .. :width: 306 .. |img-26| image:: img-26.png .. :align: left .. :border: 0 .. :height: 150 .. :id: Grafik22 .. :name: Grafik22 .. :width: 642 .. |img-27| image:: img-27.png .. :align: left .. :border: 0 .. :height: 288 .. :id: Grafik23 .. :name: Grafik23 .. :width: 642 .. |img-28| image:: img-28.png .. :align: left .. :border: 0 .. :height: 522 .. :id: Grafik25 .. :name: Grafik25 .. :width: 211 .. |img-29| image:: img-29.png .. :align: left .. :border: 0 .. :height: 122 .. :id: Grafik29 .. :name: Grafik29 .. :width: 431 .. |img-30| image:: img-30.png .. :align: left .. :border: 0 .. :height: 68 .. :id: Grafik30 .. :name: Grafik30 .. :width: 170 .. |img-31| image:: img-31.png .. :align: left .. :border: 0 .. :height: 77 .. :id: Grafik31 .. :name: Grafik31 .. :width: 253 .. |img-32| image:: img-32.jpeg .. :align: left .. :border: 0 .. :height: 252 .. :id: Graphic2 .. :name: Graphic2 .. :width: 387 .. |img-33| image:: img-33.png .. :align: left .. :border: 0 .. :height: 273 .. :id: Grafik35 .. :name: Grafik35 .. :width: 388 .. |img-34| image:: img-34.png .. :align: left .. :border: 0 .. :height: 279 .. :id: Grafik37 .. :name: Grafik37 .. :width: 423 .. |img-35| image:: img-35.png .. :align: left .. :border: 0 .. :height: 99 .. :id: Grafik38 .. :name: Grafik38 .. :width: 245 .. |img-36| image:: img-36.png .. :align: left .. :border: 0 .. :height: 200 .. :id: Grafik39 .. :name: Grafik39 .. :width: 497 .. |img-37| image:: img-37.png .. :align: left .. :border: 0 .. :height: 674 .. :id: Grafik41 .. :name: Grafik41 .. :width: 509 .. |img-38| image:: img-38.png .. :align: left .. :border: 0 .. :height: 281 .. :id: Grafik40 .. :name: Grafik40 .. :width: 428 .. |img-39| image:: img-39.png .. :align: left .. :border: 0 .. :height: 316 .. :id: Grafik43 .. :name: Grafik43 .. :width: 344 .. |img-40| image:: img-40.png .. :align: left .. :border: 0 .. :height: 286 .. :id: Grafik44 .. :name: Grafik44 .. :width: 470 .. |img-41| image:: img-41.png .. :align: left .. :border: 0 .. :height: 406 .. :id: Grafik45 .. :name: Grafik45 .. :width: 475 .. |img-42| image:: img-42.png .. :align: left .. :border: 0 .. :height: 326 .. :id: Grafik46 .. :name: Grafik46 .. :width: 454 .. |img-43| image:: img-43.png .. :align: left .. :border: 0 .. :height: 474 .. :id: Grafik47 .. :name: Grafik47 .. :width: 449 .. |img-44| image:: img-44.png .. :align: left .. :border: 0 .. :height: 95 .. :id: Grafik48 .. :name: Grafik48 .. :width: 179 .. |img-45| image:: img-45.png .. :align: left .. :border: 0 .. :height: 209 .. :id: Grafik49 .. :name: Grafik49 .. :width: 283 .. |img-46| image:: img-46.jpeg .. :align: left .. :border: 0 .. :height: 394 .. :id: Graphic6 .. :name: Graphic6 .. :width: 400 .. |img-47| image:: img-47.png .. :align: left .. :border: 0 .. :height: 191 .. :id: Grafik63 .. :name: Grafik63 .. :width: 306 .. |img-48| image:: img-48.jpeg .. :align: left .. :border: 0 .. :height: 311 .. :id: Graphic8 .. :name: Graphic8 .. :width: 425 .. |img-49| image:: img-49.png .. :align: left .. :border: 0 .. :height: 343 .. :id: Grafik64 .. :name: Grafik64 .. :width: 624 .. |img-50| image:: img-50.png .. :align: left .. :border: 0 .. :height: 116 .. :id: Grafik67 .. :name: Grafik67 .. :width: 425 .. |img-51| image:: img-51.png .. :align: left .. :border: 0 .. :height: 377 .. :id: Grafik68 .. :name: Grafik68 .. :width: 453 .. |img-52| image:: img-52.png .. :align: left .. :border: 0 .. :height: 339 .. :id: Grafik70 .. :name: Grafik70 .. :width: 271 .. |img-53| image:: img-53.jpeg .. :align: left .. :border: 0 .. :height: 281 .. :id: Graphic9 .. :name: Graphic9 .. :width: 368 .. |img-54| image:: img-54.png .. :align: left .. :border: 0 .. :height: 64 .. :id: Grafik74 .. :name: Grafik74 .. :width: 255 .. |img-55| image:: img-55.png .. :align: left .. :border: 0 .. :height: 104 .. :id: Grafik75 .. :name: Grafik75 .. :width: 326 .. |img-56| image:: img-56.png .. :align: left .. :border: 0 .. :height: 77 .. :id: Grafik76 .. :name: Grafik76 .. :width: 169 .. |img-57| image:: img-57.png .. :align: left .. :border: 0 .. :height: 123 .. :id: Grafik78 .. :name: Grafik78 .. :width: 638 .. |img-58| image:: img-58.png .. :align: left .. :border: 0 .. :height: 118 .. :id: Grafik79 .. :name: Grafik79 .. :width: 293 .. |img-59| image:: img-59.png .. :align: left .. :border: 0 .. :height: 193 .. :id: Graphic10 .. :name: Graphic10 .. :width: 299 .. |img-60| image:: img-60.png .. :align: left .. :border: 0 .. :height: 121 .. :id: Grafik88 .. :name: Grafik88 .. :width: 206 .. |img-61| image:: img-61.png .. :align: left .. :border: 0 .. :height: 173 .. :id: Grafik89 .. :name: Grafik89 .. :width: 203 .. |img-62| image:: img-62.png .. :align: left .. :border: 0 .. :height: 247 .. :id: Grafik90 .. :name: Grafik90 .. :width: 455 .. |img-63| image:: img-63.png .. :align: left .. :border: 0 .. :height: 257 .. :id: Grafik93 .. :name: Grafik93 .. :width: 269 .. |img-64| image:: img-64.png .. :align: left .. :border: 0 .. :height: 342 .. :id: Grafik114 .. :name: Grafik114 .. :width: 284 .. |img-65| image:: img-65.png .. :align: left .. :border: 0 .. :height: 115 .. :id: Grafik94 .. :name: Grafik94 .. :width: 554 .. |img-66| image:: img-66.png .. :align: left .. :border: 0 .. :height: 107 .. :id: Grafik95 .. :name: Grafik95 .. :width: 273 .. |img-67| image:: img-67.png .. :align: left .. :border: 0 .. :height: 118 .. :id: Grafik96 .. :name: Grafik96 .. :width: 255 .. |img-68| image:: img-68.png .. :align: left .. :border: 0 .. :height: 164 .. :id: Grafik97 .. :name: Grafik97 .. :width: 194 .. |img-69| image:: img-69.png .. :align: left .. :border: 0 .. :height: 111 .. :id: Grafik98 .. :name: Grafik98 .. :width: 258 .. |img-70| image:: img-70.png .. :align: left .. :border: 0 .. :height: 80 .. :id: Grafik100 .. :name: Grafik100 .. :width: 428 .. |img-71| image:: img-71.png .. :align: left .. :border: 0 .. :height: 84 .. :id: Grafik101 .. :name: Grafik101 .. :width: 515 .. |img-72| image:: img-72.png .. :align: left .. :border: 0 .. :height: 91 .. :id: Grafik102 .. :name: Grafik102 .. :width: 514 .. |img-73| image:: img-73.png .. :align: left .. :border: 0 .. :height: 24 .. :id: Grafik107 .. :name: Grafik107 .. :width: 160 .. |img-74| image:: img-74.png .. :align: left .. :border: 0 .. :height: 173 .. :id: Grafik108 .. :name: Grafik108 .. :width: 214 .. |img-75| image:: img-75.png .. :align: left .. :border: 0 .. :height: 106 .. :id: Grafik112 .. :name: Grafik112 .. :width: 611 .. |img-76| image:: img-76.png .. :align: left .. :border: 0 .. :height: 20 .. :id: Grafik109 .. :name: Grafik109 .. :width: 13 .. |img-77| image:: img-77.png .. :align: left .. :border: 0 .. :height: 20 .. :id: Grafik110 .. :name: Grafik110 .. :width: 28 .. |img-78| image:: img-78.png .. :align: left .. :border: 0 .. :height: 154 .. :id: Grafik116 .. :name: Grafik116 .. :width: 464 .. |img-79| image:: img-79.png .. :align: left .. :border: 0 .. :height: 183 .. :id: Grafik117 .. :name: Grafik117 .. :width: 474 .. |img-80| image:: img-80.png .. :align: left .. :border: 0 .. :height: 196 .. :id: Grafik119 .. :name: Grafik119 .. :width: 274 .. |img-81| image:: img-81.png .. :align: left .. :border: 0 .. :height: 201 .. :id: Grafik122 .. :name: Grafik122 .. :width: 465 .. |img-82| image:: img-82.png .. :align: left .. :border: 0 .. :height: 148 .. :id: Grafik125 .. :name: Grafik125 .. :width: 320 .. |img-83| image:: img-83.jpeg .. :align: left .. :border: 0 .. :height: 366 .. :id: Graphic11 .. :name: Graphic11 .. :width: 649 .. |img-84| image:: img-84.png .. :align: left .. :border: 0 .. :height: 215 .. :id: Grafik50 .. :name: Grafik50 .. :width: 403 .. |img-85| image:: img-85.png .. :align: left .. :border: 0 .. :height: 69 .. :id: Grafik51 .. :name: Grafik51 .. :width: 247 .. |img-86| image:: img-86.png .. :align: left .. :border: 0 .. :height: 266 .. :id: Grafik52 .. :name: Grafik52 .. :width: 498 .. |img-87| image:: img-87.png .. :align: left .. :border: 0 .. :height: 271 .. :id: Grafik54 .. :name: Grafik54 .. :width: 539 .. |img-88| image:: img-88.png .. :align: left .. :border: 0 .. :height: 222 .. :id: Grafik53 .. :name: Grafik53 .. :width: 614 .. |img-89| image:: img-89.png .. :align: left .. :border: 0 .. :height: 166 .. :id: Grafik55 .. :name: Grafik55 .. :width: 437 .. |img-90| image:: img-90.png .. :align: left .. :border: 0 .. :height: 305 .. :id: Grafik56 .. :name: Grafik56 .. :width: 622 .. |img-91| image:: img-91.png .. :align: left .. :border: 0 .. :height: 268 .. :id: Grafik57 .. :name: Grafik57 .. :width: 451 .. |img-92| image:: img-92.png .. :align: left .. :border: 0 .. :height: 402 .. :id: Grafik127 .. :name: Grafik127 .. :width: 518 .. |img-93| image:: img-93.png .. :align: left .. :border: 0 .. :height: 497 .. :id: Grafik128 .. :name: Grafik128 .. :width: 468 .. |img-94| image:: img-94.png .. :align: left .. :border: 0 .. :height: 321 .. :id: Grafik129 .. :name: Grafik129 .. :width: 481 .. |img-95| image:: img-95.png .. :align: left .. :border: 0 .. :height: 350 .. :id: Grafik130 .. :name: Grafik130 .. :width: 508 .. |img-96| image:: img-96.png .. :align: left .. :border: 0 .. :height: 240 .. :id: Grafik131 .. :name: Grafik131 .. :width: 315 .. |img-97| image:: img-97.png .. :align: left .. :border: 0 .. :height: 148 .. :id: Grafik132 .. :name: Grafik132 .. :width: 296 .. |img-98| image:: img-98.png .. :align: left .. :border: 0 .. :height: 682 .. :id: Grafik133 .. :name: Grafik133 .. :width: 497 .. |img-99| image:: img-99.png .. :align: left .. :border: 0 .. :height: 121 .. :id: Grafik134 .. :name: Grafik134 .. :width: 337 .. |img-100| image:: img-100.png .. :align: left .. :border: 0 .. :height: 274 .. :id: Grafik135 .. :name: Grafik135 .. :width: 576 .. |img-101| image:: img-101.png .. :align: left .. :border: 0 .. :height: 54 .. :id: Grafik136 .. :name: Grafik136 .. :width: 313 .. |img-102| image:: img-102.png .. :align: left .. :border: 0 .. :height: 72 .. :id: Grafik137 .. :name: Grafik137 .. :width: 341 .. |img-103| image:: img-103.png .. :align: left .. :border: 0 .. :height: 79 .. :id: Grafik138 .. :name: Grafik138 .. :width: 323 .. |img-104| image:: img-104.png .. :align: left .. :border: 0 .. :height: 138 .. :id: Grafik139 .. :name: Grafik139 .. :width: 417 .. |img-105| image:: img-105.png .. :align: left .. :border: 0 .. :height: 435 .. :id: Graphic12 .. :name: Graphic12 .. :width: 324 .. |img-106| image:: img-106.jpeg .. :align: left .. :border: 0 .. :height: 320 .. :id: Graphic13 .. :name: Graphic13 .. :width: 432 .. |img-107| image:: img-107.png .. :align: left .. :border: 0 .. :height: 139 .. :id: Grafik34 .. :name: Grafik34 .. :width: 192 .. |img-108| image:: img-108.png .. :align: left .. :border: 0 .. :height: 91 .. :id: Grafik58 .. :name: Grafik58 .. :width: 373 .. |img-109| image:: img-109.png .. :align: left .. :border: 0 .. :height: 65 .. :id: Grafik59 .. :name: Grafik59 .. :width: 177 .. |img-110| image:: img-110.png .. :align: left .. :border: 0 .. :height: 88 .. :id: Grafik60 .. :name: Grafik60 .. :width: 247 .. |img-111| image:: img-111.png .. :align: left .. :border: 0 .. :height: 92 .. :id: Grafik80 .. :name: Grafik80 .. :width: 195 .. |img-112| image:: img-112.png .. :align: left .. :border: 0 .. :height: 219 .. :id: Grafik82 .. :name: Grafik82 .. :width: 249 .. |img-113| image:: img-113.png .. :align: left .. :border: 0 .. :height: 592 .. :id: Grafik83 .. :name: Grafik83 .. :width: 511 .. |img-114| image:: img-114.png .. :align: left .. :border: 0 .. :height: 199 .. :id: Grafik84 .. :name: Grafik84 .. :width: 243 .. |img-115| image:: img-115.png .. :align: left .. :border: 0 .. :height: 291 .. :id: Grafik91 .. :name: Grafik91 .. :width: 427 .. |img-116| image:: img-116.png .. :align: left .. :border: 0 .. :height: 243 .. :id: Grafik92 .. :name: Grafik92 .. :width: 459 .. |img-117| image:: img-117.png .. :align: left .. :border: 0 .. :height: 246 .. :id: Grafik115 .. :name: Grafik115 .. :width: 210 .. |img-118| image:: img-118.png .. :align: left .. :border: 0 .. :height: 116 .. :id: Grafik99 .. :name: Grafik99 .. :width: 243 .. |img-119| image:: img-119.png .. :align: left .. :border: 0 .. :height: 105 .. :id: Grafik121 .. :name: Grafik121 .. :width: 176 .. |img-120| image:: img-120.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102