EXT: SAV Library Extension Generator¶

A propos de cette extension¶

Le générateur d'extensions “SAV Library” permet d'engendrer des extensions sans avoir besoin d'écrire du code en PHP grâce à l'utilisation de paramètres de configuration au niveau du “Kickstarter”, qui devient un véritable éditeur d'extension.

Le générateur “SAV Library” inclut :

• la création de vues multiples associées aux données,
• l'édition des données en “Front end”,
• la création de vues avec des onglets,
• une interface simple dans le “Kickstarter” avec une aide contextuelle,
• la génération de courriers électroniques,
• la génération de fichiers RTF en utilisant des marqueurs associées aux données,
• l'exportation des données au format CSV,
• beaucoup d'autres fonctionnalités.

Cette extension modifie le Kickstarter par un mécanisme de XCLASS. Toutes les fonctionnalités du Kickstarter sont préservées et il peut continuer à être utilisé normalement. La version actuelle du générateur d'extensions “SAV Library” repose sur la version 0.4.0 du Kickstarter.

Si vous avez développé des extensions avec la version précédente du générateur, c'est-à-dire une version 2.x.y, vous devrez mettre à jour toutes vos extensions. Un outil dans le gestionnaire d'extensions a été prévu à cet effet.

Voir aussi :

• les exemples “SAV Library” (“sav_library_exampleX”, où X est un nombre) – ces extensions sont engendrées par le générateur “SAV Library”. Elles sont décrites dans la partie “tutoriels”.
• les autres exemples peuvent de la section “Autres exemples” de ce manuel :
  • Télécharger des documents (sav_download)
  • Compte-rendu de réunions (sav_meetings)
• les filtres “SAV Library” (“sav_filter_name”, où “name” est le nom du filtre) – ces extensions ont été spécialement conçues pour être utilisées avec les extensions engendrées par “SAV Library”.
• l'extension “SAV Library Extends” (“sav_library_extends”) - cette extension a été conçue pour vous permettre d'ajouter des méthodes ou de surcharger les méthodes existantes du générateur “SAV Library”.

Les développements les plus récents du générateur d'extensions “SAV Library” sont disponibles sur la forge TYPO3 (projet Extension Generator).

Rappelez vous que “It's not a bug, it's a missingfeature”. Si vous trouvez un bug, merci d'utiliser le “bug tracker” sur la forge TYPO3.

Note : dans ce manuel en français, les captures d'écran sont celles du manuel en version anglaise. En fonction de la configuration de votre BE, l'aide en ligne sera en français ainsi que les champs du flexform de configuration de l'extension. Afin de faciliter la compréhension de certaines parties, les termes anglais ou les néologismes informatiques ont parfois été conservés.

Captures d'écran¶

Installation¶

Si elle n'est pas déjà installée, télécharger l'extension “kickstarter” et l'installer.

Télécharger l'extension “sav_library” et l'installer.

Lire les paragraphes consacrés aux exemples.

Mettre à jour des extensions existantes¶

Dans le cas d'une mise à jour majeure du générateur “SAV Library”, vous aurez besoin de mettre à jour toutes vos extensions créées grâce à lui.

Un outil est prévu à cet effet dans le gestionnaire d'extension (Extension Manager) pour réaliser cette tâche facilement. Cliquer sur le gestionnaire d'extension et sélectionner “SAV Library extensions update” à l'aide du sélecteur.

Toutes les extensions actives qui ont été engendrées avec le générateur “SAV Library” sont affichées.

Pour chaque extension, plusieurs informations sont affichées :

Le nom de l'extension, c'est-à-dire sa clé. En cliquant sur le nom, l'outil permet un accès rapide en l'ouvrant dans le Kickstarter.

Par défaut, le générateur d'extensions “SAV Library” crée un fichier de configuration en XML dans le répertoire “pi1” de l'extension. Vous pouvez préférer la configuration sous la forme d'un tableau php. Dans ce cas, décocher la case de la colonne “XML Generation”.

La liste des formulaires utilisés par l'extension (une extension peut contenir plusieurs formulaires). Pour chaque formulaire vous pouvez choisir s'il doit être de type “USER”, c'est-à-dire avec un mécanisme de cache. Par défaut, le “plugin” est de type “USER_INT” pour tous les formulaires, c'est-à-dire sans mécanisme de mise en cache. Si vous souhaitez un type “USER”, sélectionner la case pour le formulaire.

Sélectionner la case de la colonne “Update” pour reconstruire une extension. En cliquant sur le bouton “Update the extensions”, seules les extensions sélectionnées seront mises à jour.

La version du générateur qui a été utilisé pour engendrer l'extension est affichée. Si la version est plus ancienne que 3.0.0. “Unkown” est affiché.

La version actuelle de l'extension est affichée.

La version 0.4.0. du “Kickstarter” a introduit des changements dans le type de certains champs engendrés en SQL. L'outil “SAV Library extensions update” vous informera des changements proposés. Cliquer une nouvelle fois sur le bouton “Update the extensions” pour exécuter la mise à jour des champs SQL.

Exécution des tests¶

Des tests unitaires ont été développés pour le générateur “SAV Library”. Pour exécuter les tests :

Télécharger l'extension “phpunit” depuis le TER et l'installer.

Télécharger l'extension “sav_library_example1” depuis le TER et l'installer.

Cliquer sur “PHPunit” dans la partie “Admin tools”.

Sélectionner le test à exécuter.

De nouveaux tests seront ajoutés dans les prochaines versions du générateur d'extensions “SAV Library”.

Introduction¶

Les paragraphes suivants décrivent les différentes configurations possibles pour une extension engendrée par le générateur “SAV Library”. Il est vivement recommandé de lire les paragraphes relatifs aux exemples avant d'étudier cette partie .

“Flexform” associé au “plugin”¶

La configuration de chaque extension engendrée par le générateur “SAV Library” est réalisée par l'intermédiaire d'un “flexform”. Le “flexform” possède trois onglets :

• Général (“General”)
• Options de saisie (“Input controls”)
• Avancées (“Advanced”)

Aide : cliquer sur l'icône pour obtenir l'aide contextuelle.

Choisir un formulaire : utiliser ce sélecteur pour choisir le nom du formulaire à utiliser. Rappelons que le générateur “SAV Library” permet de construire plusieurs formulaires pour la même extension, fournissant des vues différentes pour les tables.

Tout montrer si pas de filtre : en sélectionnant cette entrée, tous les items sont affichés quand aucun filtre n'est appliqué comme, par exemple, l'extension “sav_filter_abc”.

Si aucune information disponible : Utiliser ce sélecteur pour choisir ce qui doit être affiché quand aucune information n'est disponible.

Nombre max d'éléments affichés : nombre maximum d'items qui seront affichés. Si la valeur 0 est utilisée, tous les items seront affichés.

Page d'aide : utiliser ce sélecteur pour choisir une page de votre site qui sera utilisée comme page d'aide pour votre extension. Dans ce cas, une icône sera affichée dans la barre de titre de l'extension.

Aide : cliquer sur l'icône pour obtenir l'aide contextuelle.

Saisie autorisée : en sélectionnant cette option, les entrées Front End sont autorisées.

Groupes autorisés : si vous sélectionnez des groupes d'utilisateurs, l'utilisateur de l'extension doit appartenir à l'un de ces groupes pour être autorisé à entrer des données en Front End.

Champ Admin : mettre dans ce champ une entrée de la forme “NomTable.NomChamp” (si vous utilisez seulement “NomChamp”, la table principale définie dans la requête sera utilisée pour “NomTable”). Ceci restreindra les entrées aux utilisateurs qui ont des droits “Admin” dans leur TS Config. Par exemple, si un utilisateur a “extKey_Admin=valeur1,valeur2” dans son TS Config , il sera autorisé à éditer et détruire les items pour lesquels “NomChamp” est égal à “valeur1” ou “valeur2” pour l'extension “extKey”. Les champs ou les onglets pour lesquels “editAdminPlus = 1;” est utilisé pourront être modifiés en Front End si l'utilisateur a les droits “Admin+”. Par exemple, si son TS Config est “extKey_Admin=valeur1+,valeur2”, l'utilisateur est “Admin+” pour les enregistrements où “nomChamp” est égal à “valeur1” et juste “Admin” pour les champs où “nomChamp” est égal à “valeur2”. Les utilisateurs deviennent “Super Admin” pour l'extension extKey, si leur TS Config est “extKey_Admin=*”.

Pas de bouton “Nouveau” : le bouton “Nouveau” ne sera pas ajouté au formulaire. Cela signifie que la modification d'enregistrements existants est possible mais que la création de nouveaux enregistrements est impossible.

Pas de bouton “Editer” : un bouton “Editer” ne sera pas ajouté devant chaque enregistrement dans les vues “Show All”.

Pas de bouton “Supprimer” : un bouton “supprimer” ne sera pas ajouté devant chaque enregistrement dans les vues “Show All”.

Ajouter un bouton “Supprimer” pour les enregistrements créés par l'utilisateur : ajoute un bouton “supprimer” seulement pour les enregistrements créés par l'utilisateur.

Date début saisie : si ce champ est utilisé, les entrées en Front End ne seront pas possibles avant cette date.

Date fin saisie : si ce champ est utilisé, les entrées en Front End ne seront pas possibles après cette date.

Appliquer la date à : Utiliser ce sélecteur pour choisir “Personne”, “Tous”, “Utilisateurs Admin plus”, “Tous sauf les Super Admin”. La date limite est appliquée en fonction de ce sélecteur.

Aide : cliquer sur l'icône pour obtenir l'aide contextuelle.

Filtre permanent : vous pouvez utiliser ce champ pour ajouter une clause WHERE qui sera ajoutée à la clause WHERE de la requête associée au formulaire.

Ajouter un fragment(#content id) aux liens : l'id du contenu sera ajouté comme fragment à l'url des liens.

Autoriser l'utilisation de la propriété “query” : la propriété “query” permet d'exécuter des requêtes dans les formulaires “input” ou “update”. Parce que n'importe quelle requête peut être exécutée, pour des raisons de sécurité, seuls les utilisateurs “admin” peuvent modifier ce champ.

Page de stockage des enregistrements : cette option permet de stoker vos enregistrements dans une page spécifique, par exemple un “Sysfolder”, sinon ils sont stockés dans la page courante. Quand cette option est utilisée, les enregistrements sont recherchés dans la page de stockage et, le cas échéant, dans les pages sélectionnées comme “point d'entrée”.

Appliquer le “cache” à : quand le “plugin” est de type “USER” pour le formulaire, c'est-à-dire quand le mécanisme de “cache” est actif, ces options contrôlent le “cache” pour différents boutons et liens. Si une option est sélectionnée, un paramètre “cHash” sera ajouté au lien.

Pages dont le “cache” sera vidé lors de la mise à jour des données : quand le plugin est de type “USER” pour le formulaire, c'est-à-dire quand le mécanisme de “cache” est actif, la mise à jour des données par une vue de type “inputForm” videra le “cache” de la page courante par défaut. Utiliser ce sélecteur pour ajouter d'autres pages dont le “cache” doit être vidé. Utiliser aussi cette option quand le “plugin” est de type “USER_INT” et que des pages utilisées par un autre formulaire pour lequel le “cache” est actif doivent être vidées.

Changer les icônes¶

Le générateur “SAV Library” est fourni avec différentes icônes associées aux diverses fonctionnalités. Il y a deux façons possibles pour changer ces icônes :

en créant un répertoire “res/icons” dans l'extension engendrée et en plaçant dans ce répertoire vos propres icônes avec les mêmes noms que ceux utilisés dans le répertoire “res/icons” de l'extension “sav_library”.

En créant un répertoire dans “fileadmin” et en plaçant vos icônes dedans avec les mêmes noms que ceux du répertoire par défaut. Puis, dans la partie “Setup” de votre template, écrire :plugin.tx_yourExtensionName_pi1.iconsDir = yourIconsDiroù “yourExtensionName” est la clé de l'extension créée avec le générateur et “yourIconsDir” est le chemin relatif du répertoire dans lequel vous avez placé les icônes.

Changer le gabarit (template) des vues¶

L'extension “sav_library” est fournie avec un gabarit (template) par défaut pour les vues. Il est dans le fichier “sav_library.tmpl” du répertoire “res” de l'extension “sav_library”. Il y a deux manières de changer le gabarit :

Mettre le fichier du gabarit dans le répertoire “res” de votre extension sous le nom “yourExtensionName.tmpl”, où “yourExtensionName” est la clé de l'extension que vous avez créée avec le générateur.

Mettre le fichier du gabarit à l'endroit que vous voulez dans le répertoire “fileadmin”. Puis, dans le champ “Setup” du gabarit TS écrire :plugin.tx_yourExtensionName_pi1.template = yourFileNameoù “yourExtensionName” est la clé de l'extension que vous avez créée avec le générateur et “yourFileName” est le nom du fichier avec son chemin relatif (i.e. fileadmin/....).

Changer la CSS par défaut¶

L'extension “sav_library” est fournie avec une configuration CSS par défaut qui est dans le fichier “ext_typoscript_setup.txt”. Vous pouvez surcharger les styles dans le fichier CSS de votre site pour les changer globalement. Vous pouvez aussi vouloir ne modifier certains styles par défaut que pour une extension particulière. Dans ce cas, vous avez juste besoin de placer un fichier CSS dans le répertoire “res” de votre extension sous le nom “yourExtensionName.css”, où “yourExtensionName” est la clé de l'extension que vous avez créée avec le générateur. Ce fichier CSS sera automatiquement ajouté dans la section <head> du contenu HTML engendré (voir “sav_library_example7” pour un tel cas).

Configuration des “Queriers”, “Viewers” et “Item Viewers”¶

L'extension “sav_library” est fournie avec une configuration par défaut des “queries”, “viewers” et “item viewers”. Elle peut facilement être modifiée.

La configuration est définie par le fichier “sav_library.xml” qui est dans le répertoire “res” de l'extension “sav_library”.

Le fichier XML contient trois parties :

• la définition des “queriers”,
• la définition des “viewers”,
• la définition des “item viewers”.

<update>
  UPDATE_defaultQuerier
</update>

<viewDate>
  <type>input</type>
  <conditions>
    <condition index="0">
      <field>eval</field>
      <ope>isEqual</ope>
      <value>date</value>
    </condition>
  </conditions>
</viewDateTime>

Modification de la configuration du générateur “SAV Library”¶

Vous pouvez vouloir changer la configuration et l'adapter à vos besoins spécifiques. A cet effet, une extension spéciale, appelée “sav_library_extends”, a été développée pour étendre le générateur. Télécharger cette extension depuis le TER et l'installer.

Dans le répertoire de l'extension, on trouve plusieurs classes qui étendent celles du générateur par un mécanisme de XCLASS. En analysant le fichier “sav_library_extends.xml” du répertoire “res”, on trouvera un nouvel “item viewer” nommé “Example”. Il est associé à un nouveau type “example”.

Analyser la classe “ux_tx_savlibrary_defaultItemviewers” du fichier “class.ux_tx_savlibrary_defaultItemviewers.php” pour comprendre comment ajouter un nouvel “item viewer”.

Analyser aussi la classe “ux_tx_savlibrary_defaultVerifiers” du fichier “class.ux_tx_savlibrary_defaultVerifiers.php” pour voir comme ajouter un nouveau “verifier”.

Maintenant télécharger l'extension “sav_library_example5” et l'installer. C'est un exemple très simple. Editer-le avec le Kickstarter pour comprendre comment le nouveau type est associé avec le champ. Finalement, utiliser l'extension en Front End. Taper “Hello” dans le champ pour voir l'effet du “verifier”.

Référence pour la configuration des champs¶

Le générateur “SAV Library” est fondé sur le Kickstarter. Par conséquent, la configuration TCA engendrée par le Kickstarter reste disponible et peut être modifiée, pour chaque vue, par l'intermédiaire d'une interface de configuration du champ. Dans l'exemple suivant, la taille par défaut (l'attribut “size” dans le TCA) est remplacée par la valeur 40.

Le générateur “SAV Library” permet l'entrée de données en “Front End”. Toutefois, comme les extensions sont engendrées avec le Kickstarter, dans la plupart des cas, les données peuvent être aussi entrées en “Back End” au moyen de l'interface usuelle.

Les configurations suivantes sont spécifiques au générateur “SAV Library”. Elles sont organisées selon l'ordre alphabétique et les types associés du TCA sont rappelés entre parenthèses. Bien sûr, aucun type n'est fourni pour la configuration générale dont les propriétés peuvent être appliquées à tous les champs. Il en va de même pour les propriétés associées aux fonctions. Dans ce manuel, on utilisera indifféremment les termes propriété ou attribut pour désigner ces configurations .

content =
 SELECT fe_users.uid as uid, fe_users.name as label
 FROM tx_mytable_rel_myfield_mm,fe_users
 WHERE
  tx_mytable_rel_myfields_mm.uid_local=###user###
 AND
  tx_mytable_rel_myfields_mm.uid_foreign=fe_users.ui
 ORDER by label;

format = %A %B %Y;

format = %A %B %Y at %H:%M;

AddToUploadFolderFromField = my_field;

windowBodyStyle = fontweight:bold\;font-color:blue\;;

xmlLabel = LLL:EXT:my_ext/locallang_db.xml:tx_myext.my_field.I.;

extKey_Admin=value

extKey_Admin=value+

SELECT email as value from fe_users where .....

SELECT email as value from fe_users where .....

SELECT email as value from fe_users where .....

reqValue= SELECT name AS value
FROM fe_users
WHERE uid=(SELECT cruser_id FROM tx_mytable WHERE uid=###uid###);

Configuration des champs au moyen du TSConfig de la page¶

La configuration d'un champ peut être changée au moyen du TSConfig de la page. La syntaxe est la suivante :

tx_extensionKey.formName.viewType.fieldName.fieldProperty = propertyValue.

Par exemple, supposons que l'on veuille changer la largeur et la hauteur de l'image de la vue “All” de l'exemple 1.

• “extensionKey” ne doit pas comporter de caractères “_” et prend la valeur “savlibraryexample1”,
• “formName” prend la valeur “Contact”,
• “viewType” prend la valeur “showAll” (utiliser “showSingle” ou “inputForm” pour les autres types),
• “fieldName” prend la valeur “image”,
• “fieldProperty” prend la valeur “width” ou “height”.

On obtient finalement la configuration suivante :

tx_savlibraryexample1.Contact.showAll.image.width =200
tx_savlibraryexample1.Contact.showAll.image.height = 200

Configurations de maintenance¶

Le générateur d'extensions “SAV Library” possède des indicateurs pour gérer les opérations de maintenance.

Un indicateur global de maintenance est disponible au niveau de l'extension “sav_library” dans le gestionnaire d'extensions. En activant la case de maintenance globale, un message de maintenance sera affiché pour toutes les extensions construites avec le générateur et les filtres ne seront pas affichés.

En fournissant une liste d'identificateurs, séparés par une virgule, d'utilisateurs FE, ceux-ci continueront à voir les extensions et les filtres. La maintenance globale est utile pour les développeurs quand des changements globaux sont effectués sur le générateur.

La configuration de la maintenance peut aussi être effectuée au niveau de l'extension. Pour obtenir un indicateur pour la maintenance dans le gestionnaire d'extension, vous devez sélectionner “Add maintenance” lorsque vous sauvez votre extension dans le Kickstarter. En sélectionnant cet indicateur, un message de maintenance sera affiché hormis pour les utilisateurs définis dans la configuration du générateur “SAV Library”.

Configuration de la génération du code¶

Vous pouvez choisir le type de configuration engendrée par le générateur. Celle-ci peut être sous la forme d'un fichier XML ou directement introduite comme un tableau php dans la classe du répertoire “pi1” de l'extension engendrée. Supposons que nous voulions engendrer l'extension “sav_library_example1”.

• En sélectionnant la case “Generate XML configuration”, la configuration sera sauvegardée dans le fichier “pi1/ tx_savlibraryexample1_ pi1.xml”. La méthode initExtConfig() est automatiquement modifiée pour lire la configuration dans le fichier XML. Cette configuration est celle par défaut lorsque le générateur est activé lors de la création de l'extension.
• Si vous ne sélectionnez pas cette case, la configuration est directement sauvegardée dans le fichier “pi1/class.tx_savlibraryexample1_ pi1.php” sous la forme d'un tableau dans la méthode initExtConfig().

Mise en cache¶

Un mécanisme de cache a été introduit avec la version 3.1.0 du générateur “SAV Library”. Le comportement du “plugin” peut être changé pour chaque formulaire. Par défaut, le “plugin” est de type USER_INT pour chaque formulaire, c'est-à-dire qu'il n'y a pas de mise en cache. En sélectionnant “Allow caching” dans la section “Forms” du Kickstarter, le “plugin” devient de type USER pour ce formulaire. Cela signifie que le mécanisme de cache devient opérationnel. Un paramètre “cHash” est alors ajouté à chaque lien permettant l'accès à la vue de type “showSingle” associée à l'item.

Un paramètre “cHash” peut aussi être ajouté à d'autres liens comme :

• le bouton “Fermer”,
• les flèches dans les formulaires et/ou sous-formulaires,
• les sélecteurs de page dans les formulaires et/ou sous-formulaires.

Cette configuration est possible dans l'onglet “Avancées” (“Advanced”) du flexform associé à l'extension (voir ci-dessous).

Quand le “plugin” est de type USER (cache actif) et qu'un item est mis à jour dans une vue de type “inputForm”, le cache de la page courante est vidé lors de la sauvegarde de sorte que les informations mises à jour puissent être affichées. Si vous avez besoin de vider le cache pour d'autres pages, sélectionner les dans le flexform.

Quand le “plugin” est de type USER_INT (pas de cache) et qu'un item est mis à jour dans une vue de type “inputForm”, il peut être nécessaire de vider le cache des pages d'un autre formulaire de la même extension qui est de type USER. C'est le cas, par exemple, quand un formulaire est utilisé pour l'administration et un autre pour l'affichage des données. Sélectionner les pages dont le cache doit être vidé dans le flexform.

Introduction¶

Cet exemple est repris de l'excellent “TYPO3Journal” http://www.typo3journal.info/articles/developpement.html . Il permet la création d'une liste de contacts avec nom, prénom, adresse, photo.

Vous pouvez télécharger cet exemple depuis le TER (sav_library_example1). Installez-le et utilisez-le. Les paragraphes suivants expliquent comment créer l'extension et les fonctionnalités associées, si vous préférez une approche progressive.

Création de l'extension¶

Créer l'extension en remplissant les sections relatives aux langages, plugin, tables ainsi que les champs en utilisant le Kickstarter comme dans le tutoriel originel.

Utilisation de l'extension¶

Créer une page, insérer un élément de contenu de type “plugin” puis sélectionner “Liste de contacts” (“Contact list” si votre BE est en anglais) dans la liste.

La configuration du “plugin” s'effectue par l'intermédiaire du “flexform” qui a certaines valeurs par défaut. Sélectionner le nom du formulaire, c'est-à-dire “Contact” dans le sélecteur “Choisir un formulaire” (“Select form” avec un BE en anglais), sauvegarder l'élément de contenu et vider le cache .

Visualiser la page en Front End. Vous devriez voir la capture d'écran suivante avec un message en français, si votre site utilise cette langue.

Cliquer sur l'icône de droite pour entrer dans le mode saisie. Une nouvelle icône apparait à gauche du formulaire. Cliquer sur cette icône pour créer un nouvel item.

La vue engendrée pour la saisie est affichée. Comme il peut être remarqué sur la capture d'écran suivante, la taille du champ “firstname” est plus grande que celle des autres champs. Ceci est dû au paramètre de configuration “size = 40;” que nous avons ajouté. La taille des autres champs est celle par défaut, c'est-à-dire 30.

Remplir le formulaire avec les informations. Télécharger l'image et sauvegarder.

Quand vous avez terminé les saisies, quitter le vue (vous pouvez aussi utiliser le bouton “Sauver et quitter”) Maintenant, un item est affiché dans votre vue “All”.

Cliquer sur le bouton de changement de mode pour ajouter un nouve item, modifier ou supprimer le précédent.

A ce niveau, rien de plus ne peut être fait et vous ne pouvez pas afficher les informations de la vue “Single”. Pour cela il faut modifier légèrement l'extension. Supposons, par exemple, que nous souhaitions ouvrir la vue “Single” en cliquant sur l'image.

Cliquer sur le gestionnaire d'extension, sélectionner votre extension puis sélectionner “Edit in Kickstarter”. Avec l'extension “sav_library”, le Kickstarter devient un outil de configuration.

Cliquer sur la table “Members” puis sur l'onglet “All” et finalement aller au champ “image” en cliquant sur son nom.

Nous allons maintenant ajouter un paramètre de configuration, aussi appelé propriété ou attribut, à ce champ. En utilisant la syntaxe “func = makeItemLink;” nous associons un lien à l'image.

Sauver l'extension en cliquant sur “View result” puis sur “WRITE” comme précédemment. Retourner en Front End, recharger la page, cliquer sur l'image pour accéder à la vue “Single”.

Noter qu'en cliquant sur l'icône en haut à droite, on accède à la vue “Input” et que l'on peut modifier le contenu.

Comment faire ?¶

<label index="pi_list_browseresults_page"></label>

Introduction¶

Cet exemple est tiré de la vidéo de Kasper Episode III (http://typo3.org/documentation/videos/wmv-format/). Il permet la création d'une liste de CD. Cela inclut le nom de l'artiste, le titre de l'album, la date d'achat, l'image de couverture, le site web des artistes, la catégorie de musique.

Vous pouvez télécharger cet exemple depuis le TER (sav_library_example2). Installer le plugin, ajouter vos catégories de CD dans le Back End . Les paragraphes suivants expliquent certains points de la création de l'extension et des nouvelles fonctionnalités si vous ne téléchargez pas l'exemple depuis le TER.

Création de l'extension¶

Procéder exactement comme dans la vidéo.

Définir vos vues, requêtes et formulaire comme dans l'exemple 1.

Utilisation de l'extension¶

Créer une page, insérer un élément de contenu de type “plugin” et sélectionner “Collection de CD” (“CD Collection”).

La configuration du “plugin” est réalisée au moyen d'un flexform qui possède certaines valeurs par défaut. Sélectionner le nom du formulaire “Liste de CD” (“CD Album” avec le sélecteur “Choisir un formulaire” (“Select form”), sauvegarder et vider les caches .

Ajouter vos catégories de CD en Back End (en mode liste, créer un ou plusieurs enregistrements “Catégorie de CD” : Rock, Jazz, Pop...).

Finalement, aller en Front End et ajouter les items de votre collection de CD.

Comme on peut le voir, une nouvelle icône est associée aux champs “artist” et “album_title”. Elle indique que ces champs sont obligatoires (si vous avez sélectionnez “Required” comme dans la vidéo, bien sûr !). Vous ne pourrez pas sauvegarder votre enregistrement si ces champs sont vides et un message d'erreur sera affiché.

Notons que vous pouvez rendre n'importe quel champ obligatoire en utilisant le paramètre de configuration suivant :

required = 1;

Vous pouvez utiliser le sélecteur de calendrier en cliquant sur le bouton associé à la date.

Les icônes affichées pour le RTE dépendent de sa configuration pour le Front End.

Comment faire ?¶

Introduction¶

Cet exemple illustre d'autres aspects du générateur d'extensions (tables avec une relation MM table, lien de courrier électronique, champs sur une même ligne).

Vous pouvez télécharger cet exemple depuis le TER (sav_library_example3). Installer l'extension et ajouter les catégories de CD en Back End. Les paragraphes suivants expliquent comment créer l'extension et les nouvelles fonctionnalités si vous ne la téléchargez pas.

Création de l'extension¶

Dupliquer l'extension “sav_library_example2” en utilisant le Kickstarter comme indiqué ci-dessous :

• Taper “sav_library_example3” dans la fenêtre de saisie.
• Cliquer sur “Update result”.
• Cliquer sur “WRITE”.
• Installer la nouvelle extension.

Comment faire ?¶

Introduction¶

Cet exemple permet d'ajouter vos amis et de gérer le prêt de vos CD. Il illustre de nouvelles fonctionnalités du générateur d'extensions (Sélecteur à deux fenêtres pour une relation MM, table qui n'est pas dans une relation avec un item).

Vous pouvez télécharger cet exemple depuis le TER (“sav_library_example4”). Installer l'extension, ajouter vos catégories de CD en Back End . Les paragraphes suivants expliquent les points principaux pour créer l'extension ainsi que les fonctionnalités nouvelles.

Création de l'extension¶

Dupliquer l'extension “sav_library_example3” comme expliqué dans le tutoriel précédent.

Utilisation de l'extension¶

Ajouter vos amis. Dans le sélecteur double, double-cliquer sur les items pour les faire passer d'une fenêtre à l'autre. La partie de gauche est ce qui sera sauvegardé en base de données.

Finalement, saisir les prêts de vos CD.

Introduction¶

Cet exemple montre comme étendre le générateur “SAV Library” avec vos propres méthodes. Ceci est expliqué au paragraphe Modification de la configuration du générateur “SAV Library”.

Introduction¶

Cet exemple met en évidence la manière d'utiliser la génération d'emails et de fichiers RTF. Vous pouvez télécharger cet exemple depuis le TER (sav_library_example6).

Installer l'extension.

Copier le fichier “invoice.rtf”, qui est dans le répertoire de l'extension, vers le répertoire “fileadmin”.

Ajouter la ligne suivante dans le champ TSConfig de la page où vous avez installé l'extension : tx_savlibraryexample6.View1.inputForm.email_flag.mailSender = `your_email@your <mailto:your_email@your>`_ _provider Cela surchargera l'adresse électronique de l'émetteur qui est définie dans l'extension, comme nous le décrirons dans le paragraphe consacré à la configuration.

L'objectif de cet exemple est un outil très simple d'inscription à une conférence. Il contient différents champs :

• le nom du participant,
• l'adresse du participant,
• les différents items pour l'inscription,
• l'adresse électronique du participant,
• un indicateur d'envoi des messages électroniques,
• la langue pour le courrier électronique,
• un lien pour le fichier RTF.

Utiliser le formulaire de saisie pour entrer un participant comme dans la figure suivante.

Sélectionner ensuite le langage pour le courrier électronique (défaut ou Français) et cliquer sur l'icône associée. Si l'adresse électronique est correcte, le formulaire changera légèrement comme ci- dessous. Vous ne pourrez plus cliquer sur l'icône d'envoi (si vous avez besoin de renvoyer le message, décocher la case à la droite de l'icône et sauvegarder le formulaire).

Vous devriez avoir reçu un email analogue à celui ci-dessous :

Dear Yolf,

Thank you for your registration to the conference.

Your registration includes:

X Conference
- Proceedings
X Meals
X Banquet


Your invoice will be available at the registration desk.

Looking forwards to seeing you.

Best regards,

The conference organization committee.

Pour engendrer le fichier RTF, cliquer sur l'icône associé à la facture puis ouvrir le fichier en cliquant sur le lien et l'imprimer (les champs sont automatiquement mis à jour).

Explication de la configuration¶

Ouvrir l'extension dans le Kickstarter et sélectionner “SAV Example6 – Email and RTF” dans “New Database Tables”, puis sélectionner l'onglet “Input”. Comme on peut le constater, seuls les champs “email_flag”, “email_language” et “invoice” ont une configuration spéciale.

Comment faire ?¶

Introduction¶

L'objectif de cette extension est de construire plusieurs formulaires pour la même table et d'expliquer la manière d'utiliser les vues de type “update”. L'exemple est un livre d'or qui est inspiré de l'extension “ve_guestbook ” (“Modern guest book”) disponible sur le TER. Vous pouvez télécharger cet exemple depuis le TER (“sav_library_example7”). Cette extension utilise une table avec les champs suivants :

• le prénom de l'internaute,
• son nom,
• son adresse électronique,
• son site web,
• son message,
• un commentaire.

Nous souhaitons disposer de trois formulaires associés à cette table :

• un formulaire pour la saisie par un internaute (FORM),
• un formulaire pour afficher les saisies des internautes (LIST),
• un formulaire des plus récentes saisies (TEASER).

Pour la saisie de l'internaute nous souhaitons éviter les “spams” et contrôler le contenu. Les fonctionnalités suivantes sont donc souhaitées :

l'internaute répondra à un “captcha” puis son adresse électronique sera requise.

S'il a donné une adresse correcte, il recevra un lien par courrier électronique à l'adresse fournie.

En utilisant ce lien, l'internaute pourra saisir une entrée sur le livre d'or. Ses nom et prénom ainsi que son message sont des champs obligatoires.

La saisie de l'internaute n'apparaitra sur le site qu'après validation des données.

Pour réaliser cette tâche, deux nouveaux concepts seront utilisés, celui de “update view” et le filtre “sav_filter_pageaccess” (vous connaissez déjà le filtre “sav_filter_abc” utilisé dans l'exemple 1 - cf. 5.1.10.4).

Aperçu de l'extension¶

Editer l'extension “sav_library_example7” dans le Kickstarter pour avoir un aperçu. Elle contient :

• trois formulaires (FORM, LIST, TEASER),
• quatre vues (FORM_update, FORM_All, LIST_All, TEASER_All),
• trois requêtes (FORM_Query, LIST_Query, TEASER_Query).

Formulaire de saisie (FORM)¶

Cliquer sur “FORM” dans la section “Forms”. Comme on peut le constater, le formulaire possède un vue “Show all”, une vue “alt” et une requête.

La vue “Alt”, nommée “FORM_Update” est utilisée pour engendrer la vue de saisie pour l'internaute. La vue “Show all” est utilisée pour valider les données en mode administration. Analysons maintenant chaque vue.

Liste des saisies des internautes (LIST)¶

Il n'y a rien de particulier à signaler pour le formulaire LIST. Il inclut une vue usuelle de type “show All”. Analyser la vue, la requête et la configuration des champs (utiliser l'aide contextuelle si nécessaire). Les paragraphes suivants fournissent quelques commentaires utiles.

L'accroche (TEASER)¶

Le formulaire “TEASER” possède une vue “show All” usuelle. Analysons la vue la requête et la configurations des champs (utiliser l'aide contextuelle en cas de besoin). La seule configuration spécifique concerne le champ “message”. Nous voulons couper le texte à 60 caractères et avoir un lien “En savoir plus” (“More”) pour aller à la page du formulaire “LIST”.

• “stdWrapValue =crop = 60|...;” définit une propriété TS stdWrap usuelle. Vous pouvez utiliser ici une syntaxe TS complète. Ne pas oublier que la propriété de configuration se termine par un point- virgule, aussi si vous avez besoin d'un point-virgule dans votre TS, écrire “;”.
• “addRightIfNotNull = $$$more$$$;” ajoute le label à la droite du contenu s'il n'est pas vide. Le marqueur de langue $$$more$$$ est utilisé à cet effet et sera remplacé par sa valeur définie dans “pi1/locallang.xml”.
• “funcRight = makeLink;” applique la fonction interne “makeLink”, qui crée un lien interne vers la partie de droite, c'est-à-dire le lien “En savoir plus” (“More”).
• “setUidRight = 123;” définit l'identifiant de la page associée au lien. La valeur 123 est donnée à titre d'exemple, vous pouvez la remplacer pour l'identifiant de votre page ou surcharger cette propriété en utilisant le TSConfig de la page, comme expliqué au paragraphe “Configuration des champs au moyen du TSConfig de la page”.

Si l'extension est correctement installée, vous devriez obtenir :

Installation et configuration¶

Click on the following link to access to the service
Guest input
This link is valid only for one request.

Gabarit et fichier CSS¶

Vous avez certainement remarqué que les formulaires et les styles utilisés dans cette extension ne sont pas les mêmes que ceux des autres exemples. La raison est très simple : l'extension “sav_library_example7” est fourni avec son propre gabarit et son fichier CSS. Par convention :

• si un fichier “extensionKey.tmpl” est dans le répertoire “res” d'une extension, ce fichier est utilisé comme gabarit à la place de celui par défaut,
• si un fichier “extensionKey.css” est dans le répertoire “res” d'une extension, ce fichier est chargé dans la section de la balise <head> du contenu HTML. Il est utilisé pour surcharger plusieurs styles par défaut.

Introduction¶

L'objectif de ce tutoriel est de montrer comment une extension peut simplement être construite à partir d'une table existante. On expliquera aussi comment exporter des données au format CSV depuis l'extension.

Cet exemple utilise la table “fe_users” à partir de laquelle nous construirons deux formulaires :

• le premier (USER) est pour un utilisateur authentifié qui souhaite gérer ses données personnelles.
• le second (ADMIN) est pour un administrateur FE qui pourra gérer tous les utilisateurs et exporter les données.

Vous pouvez télécharger cet exemple depuis le TER (sav_library_example8).

Extension overview¶

Editer l'extension “sav_library_example8” dans le Kickstarter pour avoir une vue d'ensemble. Elle contient :

• deux formulaires (USER, ADMIN),
• cinq vues (USER_All, User_Input, ADMIN_All, ADMIN_Single, ADMIN_Input),
• deux requêtes (USER_Query, ADMIN_Query).

L'organisation des formulaires est semblable à celle des exemples précédents. Cliquer sur les formulaires pour les analyser. Regardons les configurations associées à la table “fe_users” en cliquant sur le lien “fe_users”. Comme on peut le voir, tous les champs sont du type “Only shown in SAV Form”.

En cliquant sur le lien Import fields from table as “Only shown in SAV form” , tous les champs de la table “fe_users” ont été importés puis, les champs inutiles ont été supprimés.

Formulaire utilisateur (USER)¶

Dans cet exemple, il a été choisi de concevoir un formulaire très simple pour afficher l'image de l'utilisateur. L'image est associée a un lien, c'est-à-dire une balise <a>, pour permettre la saisie par l'utilisateur.

.tx-savlibraryexample8-pi1-USER .sav-library .showAll {width:62px;background-color:#ffffff;}
.tx-savlibraryexample8-pi1-USER .sav-library .showAll .title {display:none;}
.tx-savlibraryexample8-pi1-USER .sav-library .showAll .items .item {border:none;background-color:#ffffff;}

Le formulaire d'administration (ADMIN)¶

Le formulaire d'administration est utilisé en Front End pour gérer, donner des droits, exporter des utilisateurs FE. Ce formulaire repose sur une requête conventionnelle, des vues “Show all”, “Show single” et “Input form” pour lesquelles il n'y a aucune configuration particulière. Cliquer sur les différentes vues et onglets pour analyser la manière dont les champs sont groupés.

Installation et configuration¶

Exportation des données au format CSV¶

L'exportation des données est possible pour tout formulaire construit avec le générateur “SAV Library”. Pour autoriser cette fonctionnalité, ajouter la ligne suivante dans le TSConfig d'un utilisateur ou d'un de ses groupes :

sav_library_example8_Export = *

Ceci peut être fait en Back End. Toutefois, l'extension permet de le faire aussi en Front End pour un utilisateur comme montré ci-dessous.

Maintenant, fermer la vue et vérifier qu'une nouvelle icône “CSV” est présente dans la vue “Show All” du formulaire “ADMIN” . Cliquer sur cette icône pour afficher la vue d'exportation.

La partie “Configuration” peut être utilisée pour sauvegarder, charger, supprimer et export une configuration. Utiliser le bouton de changement de mode pour afficher tous les champs. Dans l'exemple ci- dessus, la configuration “test”, précédemment enregistrée, a été rechargée.

Des fichiers XML et XSLT peuvent être utilisés pour exporter les données vers d'autres formats (voir le paragraphe suivant).

Les cases à cocher servent à indiquer les champs à exporter.

Le champ “Clause Where” (“Where clause”) est utilisé pour filtrer les données à exporter. Noter qu'en double-cliquant sur le nom d'un champ, celui-ci est ajouté dans la fenêtre (“Clause Where”). C'est utile pour éviter les erreurs de frappe.

Le champ “Clause order” (“Order clause”) est utilisé pour ordonner les données à exporter.

“Tables additionnelles” (“Additional tables”) peut être utilisé pour des cas plus complexes où vous avez besoin d'effectuer une jointure avec d'autres tables. Dans ce cas, ne pas oublier d'ajouter la condition de jointure dans le champ “Clause where”).

“Exporter les enregistrements MM” (“Export MM records”) peut être activé quand l'extension utilise des relations MM et que vous souhaitez exporter toutes les données. Dans ce cas, vous aurez éventuellement besoin d'utiliser une “clause group by”.

“Inclure tous les champs” (“Include all fields”) peut être utilisé quand vous souhaitez exporter des champs comme uid, pid, crdate, ... qui sont cachés par défaut. Cliquer sur l'icône rouge CSV pour inclure to les champs. Cliquer sur le bouton de changement de mode si vous avez préalablement restreint l'affichage à des champs sélectionnés.

“Exporter le nom des champs” (“Export field names”) peut être utilisé quand vous souhaitez avoir le nom des champs dans la première ligne du fichier CSV.

“Ordre des champs” (“Order of the fields”) peut être utilisé pour changer l'ordre dans lequel les champs sont extraits. Par défaut, c'est l'ordre dans lequel les champs apparaissent dans la liste des cases à cocher de la gauche à la droite. Dans l'exemple utilisé, sans information dans ce champ, “fe_users.username” vient en premier , puis “fe_users.usergroup” est extrait, puis “fe_users.name”, etc. Fournir une liste de champs séparés par un point-virgule (un champ par ligne permet une lecture plus aisée) dans la zone prévue à cet effet. L'ordre sera celui de cette liste. Noter qu'un champ peut apparaitre plusieurs fois, ce qui peut parfois être utile quand le fichier CSV est traité directement.

Cliquer sur l'icône rouge CSV pour exporter vos données. Ci-dessous est illustré le résultat de l'exportation quand le fichier CSV est importé avec OpenOffice Calc.

Exportation des données vers d'autres formats¶

Le formulaire d'exportation des données contient deux champs “Fichier XML” et “Fichier XSLT” qui permettent l'exportation vers d'autres formats.

Le champ “Fichier XML file” doit contenir un fichier XML qui sera utilisé comme gabarit. Ce fichier peut contenir :

• des marqueurs de champ sous la forme usuelle pour le générateur d'extension SAV Library, c'est-à-dire ###field_name###,
• des marqueurs de langage sous la forme usuelle pour le générateur d'extension SAV Library, c'est-à-dire $$$tag$$$ pour un marqueur dans le fichier locallang.xml, $$$label[field_name]$$$ pour obtenir le label associé à un champ,
• des marqueurs pour les constantes sous la forme $$$constant[tag]$$$ (e.g. $$$constant[PATH_site]$$$).

Les balises XML peuvent contenir des attributs spéciaux :

• “sav_type” peut prendre les valeurs suivantes :
  • “replaceAlways”: la balise XML et ses descendants seront traités pour tous les enregistrements exportés,
  • “replaceDistinct”: la balise XML et ses descendants seront traités chaque fois que l'attribut associé “sav_id” change dans les enregistrements exportés,
  • “cutIfEmpty”: la balise XML et ses descendants seront traités si l'attribut associé “sav_id” est vide pour l'enregistrement,
  • “cutIfNotEmpty”: la balise XML et ses descendants seront traités si l'attribut associé “sav_id” attribute n'est pas vide pour l'enregistrement,
  • “cutIfEqual”, “cutIfNotEqual”, “cutIfgreater”, “cutIfLower”, “cutIfgreaterEqual”, “cutIfLessEqual”: la balise XML et ses descendants seront traités si l'attribut associé “sav_id” est respectivement égal, différent, plus grand, plus petit, plus grand ou égal, plus petit ou égal à ue valeur fournie par l'attribut “sav_value”.
• “sav_id” doit être un nom de champ,
• “sav_value” doit être une valeur.

Let us illustrate this principle to generate a docbook article. If your are not familiar with docbook, please read http://www.oasis- open.org/docbook/documentation/reference/html/docbook.html and http://www.sagehill.net/docbookxsl/ . The former is the docbook definitive guide and the later the docbook xsl complete guide.

Assume that we want to produce the FE user list under the form of a table with four columns: the user image, his/her name, email and groups. It can be solved used the XML file “to_docbook.xml”, available in the “res” directory of this extension. As it can be seen, this file uses several markers and attributes which are in bold in the following listing.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE article
  PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd">

<article lang="en">
  <title>List of FE users</title>
  <informaltable>
    <tgroup cols="4" align="left" colsep="1" rowsep="1">
      <thead>
        <row>
          <entry align="center"></entry>
          <entry align="center">$$$label[fe_users.name]$$$</entry>
          <entry align="center">$$$label[fe_users.email]$$$</entry>
          <entry align="center">$$$label[fe_users.usergroup]$$$</entry>
        </row>
      </thead>
      <tbody>
        <row sav_type="replaceAlways">
          <entry align="center">
            <mediaobject sav_type="cutIfEmpty" sav_id="fe_users.image">
              <imageobject>
                <imagedata fileref="$$$constant[PATH_site]$$$###fe_users.image###" width="2cm" scalefit="1" />
              </imageobject>
            </mediaobject>
          </entry>
          <entry>###fe_users.name###</entry>
          <entry>###fe_users.email###</entry>
          <entry>###fe_users.usergroup###</entry>
        </row>
      </tbody>
    </tgroup>
  </informaltable>
</article>

La démarche pour produire le fichier XML est la même que pour l'exportation en CSV. Chaque marqueur de champ doit être sélectionné et le fichier gabarit doit être fourni dans le champ “Fichier XML” (“XML file”) comme cela est montré dans la capture d'écran suivante (la configuration a été sauvegardée sous le nom “FE users (docbook)”).

Le nom du fichier produit est similaire au précédent, e.g. “sav_library_example8_admin_28_2009_08_04_08_37.csv”. Il est construit de la manière suivante : “extensionName_formName_contentId _year_month_day_hour_minute.csv”.

Sauvegarder le fichier engendré et le renommer le cas échéant. Utiliser ensuite votre processeur docbook préféré. Par exemple, la capture d'écran suivante montre le fichier PDF obtenu avec FOP ( http://xmlgraphics.apache.org/fop/ ).

Comme on peut aussi ajouter un fichier XSLT ( http://xmlfr.org/w3c/TR/xslt/ ), le résultat du traitement du template XML peut virtuellement être transformé vers tout type de format. Par exemple, ce processus a été utilisé pour produire des fichiers d'importations vers limesurvey ( http://www.limesurvey.org/ ). Il a aussi utilisé pour transformer le fichier XML docbook avant le traitement par FOP, en particulier avec des contenus de champ de type RTE. En effet, ceux-ci contiennent du contenu HTML pour lequel les balises <p>, <ul>, <ol>, ... doivent être transformées en balises docbook.

Introduction¶

L'objectif de ce tutoriel est de montrer comment utiliser des graphiques de type XML JpGraph dans une extension (voir l'extension “sav_jpgraph” pour plus de détails et un tutoriel).

Dans cet exemple, nous souhaitons afficher une liste d'évènements sous la forme de graphes de Gantt. Chaque graphe est associé à une période de temps comme le mois ou le trimestre. Deux formulaires sont utilisés :

• le premier (Admin) sera utilisé pour la saisie des évènements en FE. Un évènement comprend un titre, une date de début, une date de fin et une catégorie. Les catégories seront saisies en BE. Elles ont un nom et une couleur qui sera utilisée dans le graphe de Gantt.
• le second (Display) concerne l'affichage du graphe de Gantt.

Vous pouvez télécharger cet exemple depuis le TER (sav_library_example9).

FE input events (Admin)¶

Si vous avez suivi les tutoriels précédents, vous êtes devenu familier avec le générateur d'extensions “SAV Library”. Le formulaire “Admin” a trois vues : “Admin_All”, “Admin_Single” et “Admin_Input”.

Télécharger l'extension “sav_library_example9” depuis le TER et l'ouvrir dans le Kickstarter.

Analyser la configuration de chaque champ dans chaque vue en cliquant sur les onglets.

Créer une page et un “Sysfolder” comme montré ci-dessous.

Insérer l'extension dans la page “Admin” et configurer “Page de stockage” (“Storage page”) dans l'onglet “Avancées” (“Advanced”) de sorte à référencer le “Sysfolder” (“Events” dans cet exemple).

En mode liste (Web->List), créer les catégories et les périodes dans le “Sysfolder”. Utiliser des noms de couleur reconnus par la bibliothèque JpGraph. Dans cet exemple, les évènements annuels sont organisés par trimestre.

Aller en Front End et insérer des évènements. Les évènements sont affichés dans la vue “All” dans l'ordre décroissant des dates de début (voir la “Clause order” dans “Admin_Query”).

Affichage des graphes de Gantt (Display)¶

Le formulaire “Display” n'a qu'une vue : “Admin_All”. Cette vue affiche seulement un champ nommé “graph”. Sa configuration est la suivante :

Les champs de type XML JpGraph ne sont pas créés dans la table. Ils seront affichés par l'extension s'ils sont sélectionnés.

Cette configuration inclut plusieurs lignes :

• graphTemplate = typo3/ext/sav_library_example9/res/events.xml; définit le fichier à utiliser comme gabarit pour l'affichage du graphe.
• markers = marker#begin = ###beginPeriod###, marker#end = ###endPeriod###; Cet attribut est utilisé pour définir les marqueurs pour XML SAV JpGraph. La syntaxe est une liste de définitions séparées par une virgule. Analysons la première : “marker#begin = ###beginPeriod###”. Elle indique que le “marker” dont le nom est “begin” dans le gabarit sera remplacé par le marqueur “###beginPeriod###” du générateur SAV Library, c'est-à-dire par l'alias “beginPeriod”. Pas conséquent, il est nécessaire que cet alias soit défini dans la partie réservée à la requête pou ce formulaire.

Maintenant, télécharger l'extension “sav_jpgraph” depuis le TER et l'installer.

Ajouter un élément de contenu de type “plugin” dans la page où vous souhaitez afficher le graphe et choisir “SAV JpGraph”.

Dans l'onglet “Options” des propriétés la page, ajouter le “Sysfolder” contenant les données à “Page de stockage des enregistrements” (“General Record Storage page”).

Dans l'onglet “Général” (“General”), sélectionner “Display” et ajouter le “Sysfolder” contenant les évènements comme “Point d'entrée” (“Startingpoint”).

Dans l'onglet “Options de saisie” (“Input controls”), décocher “Input on form”.

Sauvegarder et aller en Front End. Vous devriez obtenir une vue semblable à la suivante, en fonction de vos évènements.

Enfin, ouvrir les fichiers “events.xml” et “eventsTemplate.xml” du répertoire “res” de l'extension et les analyser. Le fichier “eventsTemplate.xml” est le gabarit général pour afficher le graphe (voir l'extension “sav_jpgraph” pour plus de détails). Le fichier “events.xml” contient les définitions pour les références utilisées dans le gabarit général. La seule partie spéciale est l'utilisation de la variable SQL variable @row pour numéroter les éléments du graphe.

Utiliser le graphe avec un sélecteur d'année¶

Pour introduire un sélecteur sur l'année, nous allons utiliser une nouveau filtre “SAV Filter Selectors”.

Télécharger l'extension “sav_filter_selectors” depuis le TER et l'installer. Noter que cette extension est très utile pour développer rapidement des sélecteurs, cases à cocher, boutons de choix, zones de recherche pour filtrer les extensions produites avec le générateur d'extensions “SAV Library” ... même si la syntaxe est parfois surprenante !

Introduction¶

L'objectif de ce tutoriel est d'utiliser du TypoScript dans une extension.

Dans cet exemple, nous souhaitons afficher une galerie de photos. Pour cela, nous utilisons un formulaire avec trois vues pour des raisons de simplicité (voir les exemples précédents pour créer un formulaire d'administration) :

une vue “showAll” pour afficher les images en réduction.

une vue “inputForm” pour saisir la photo, son titre, une description et l'adresse du lieu.

une vue “showSingle” avec une organisation spéciale. La photo est à gauche puis, le titre et la description sont affichés à sa droite. Enfin, une géolocalisation par google map est placée complètement à droite. Les marqueurs sont fournis par l'adresse. En cliquant sur l'image, celle-ci est affichée dans sa taille originelle.

Plusieurs utilisateurs authentifiés peuvent utiliser le “plugin”. Chaque utilisateur ne peut modifier ou détruire que les items qu'il a créés.

• Télécharger cet exemple depuis le TER (sav_library_example10) et installer l'extension.
• Télécharger aussi l'extension “wec_map” depuis le TER, lire la documentation, obtenir une clé pour l'API google map et installer l'extension.

La vue “showAll”¶

Le gabarit (template) de cette vue est très simple puisqu'un seul champ doit être affiché. Toutefois, nous souhaitons tirer profit des capacités de traitement d'images par TYPO3 à la place d'utiliser la modification de la taille de l'image à l'aide des propriétés “width” et “height”.

Quand le champ est une image et que la propriété “tsProperties” est utilisée, un “cOject” IMAGE est engendré avec la configuration TS fournie. Des marqueurs peuvent être utilisés pour faire référence à des champs. Dans l'exemple, la configuration est la suivante :

func = makeItemLink;

tsProperties =
file = uploads/tx_savlibraryexample10/###image###
file.width= 100
;

La première propriété est déjà connue. Elle permet l'ouverture de la vue “showSingle” en cliquant sur l'image.

La seconde est juste de la syntaxe TypoScript pour un cObject IMAGE. Elle permet de définir le fichier en utilisant le marqueur ###image###, c'est-à-dire le nom du fichier et de définir la largeur de l'image à 100px. Vous pouvez aussi insérer d'autres propriétés TS comme, par exemple, GIFBUILDER.

La syntaxe utilisée est exactement la même que pour du TypoScript usuel. Ne pas oublier de terminer la propriété par un point- virgule. Si vous avez besoin d'un point-virgule dans une propriété TypoScript, utiliser “;”.

Le dernier problème à résoudre pour la vue “showAll” est la disposition de plusieurs images sur la même ligne à la place d'avoir un item par ligne. Ceci est simplement réalisé en changeant le style par défaut (voir le fichier “sav_library_example10.css” dans le répertoire “res”) comme suit :

.tx-savlibraryexample10-pi1-Gallery .sav-library .showAll .items .item {
        width:120px;height:100px;background-color:#ffffff;
}

La vue “inputForm”¶

Cette vue n'a pas de configuration particulière. Bien sûr, vous pouvez changer la taille des champs si vous le souhaitez.

La vue “showSingle”¶

Pour cette vue, deux problèmes doivent être traités :

• un positionnement correct des champ,
• l'exécution du plugin “wec_map”.

wrapItem = <div class="container"><div class="image"> | </div>;

tsObject = <plugin.tx_thePluginName_pi1;

tsObject = COA;

tsProperties =
10 = TEXT
10.dataWrap = <script type="text/javascript">setTimeout("drawMap_map{field:uid}()",500)\;</script>
20 = < plugin.tx_wecmap_pi1
20 {
 height = 300
 width = 300
 showDirections = 0
 prefillAddress = 0
 initialMapType = G_NORMAL_MAP
 showInfoOnLoad = 0
 controls {
 showOverviewMap = 0
 showMapType = 1
 showScale = 0
 mapControlSize = small
 }
 markers.1 {
 title = ###title###
 street = ###address###
 city = ###city###
 zip = ###zip###
 country = ###country###
 }
}
;

cutIf = address = EMPTY;

Configuration du plugin¶

La dernière étape est la configuration du “plugin” de sorte que les utilisateurs authentifiés ne puissent modifier que leurs propres images.

Cette opération est réalisée en utilisant le champ “cruser_id” dans le champ “Champ Admin” (“Input Admin Field”) du flexform, comme représenté ci-dessous.

Télécharger des documents (sav_download)¶

Compte-rendu de réunions (sav_meetings)¶

whereSelect=###group_list=sav_meetings###;

tx_savmeetings.Meetings.inputForm.participants.whereSelect = ###group_list=testgroup###
tx_savmeetings.Meetings.inputForm.proposed_by.whereSelect = ###group_list=testgroup###

Sponsors¶

Merci à :

Dipool ( http://www.dipool.net/ ) pour l'aide apportée lors du développement des propriétés “tsObject” et “tsProperties” ainsi que de l'extension “sav_library_example10”.

Remerciements¶

Merci à :

Paul Boomkamp et Thomas Hirt pour avoir détecté quelques erreurs dans la version 3.0.0.