De Hegyd Doc.

Version du 29 juin 2010 à 14:49

Composant: StyleProperties

Ce composant gère toute la partie qui permet a l'utilisateur de personnaliser l'apparence de son site:

• modification de l'apparence des Blocs
• modification de l'apparence des BlocObjects
• application d'un thème
• application d'une palette de couleur

Fonctionnement général

shéma général

Configuration

Tous les styles éditables par l'utilisateurs sont définis dans la configuration (les accordéons défini sur la page mise en page et styles de l'éditeur).

La configuration est découpé en deux parties:

• la configuration principale: conf/styleProperties.php
• les fichiers de configurations annexes dans le répertoire stylesProeprties.

Voici le process effectué par la configuration principale:

• définition des conteneurs
• création des conteneurs:
  • création d'un conteneur pour chaque partie de page ou il apparait
  • prefixage des chemin css avec celui de la partie de page associée
  • prefixage du nom par celui de la partie de la page associée

Chacun des fichiers du repertoire styleProperties contient les propriétés d'un conteneur, qui seront chargés plus tard dans le processus.

définition des conteneurs

Structure

Un conteneur représente un élément de style a configurer: un titre, un paragraphe, ou meme un bloc entier: le footer, le menu... Il est représenté par un tableau php :

        'paragraphe' => array(
                'blocId'=>array(Bloc::TYPE_CONTENT,Bloc::TYPE_LEFT_MENU,Bloc::TYPE_RIGHT_MENU), //bloc de contenu dans lequel il sera éditable
                'blocObjectId'=>BlocObject::TYPE_TEXT, //[[SP:Composant:BlocObject|blocObject]] associé
                'type'=>StyleProperties::TYPE_FONT, //type d'élément: TYPE_FONT: styles sur élément intra page (paragraphe, formulaire,liens...). TYPE_MEP: element constituant la page: header,menus,contenu ou
 footer
                'label'=>'Paragraphe', //nom qui sera affiché dans l'accordéon
                'targetElements' => array('.p'), //chemin css associé a l'élément. ce chemin doit être relatif et uniquement se reduire a sa version minimale. Il sera préfixé de facon automatique selon que le
 bloc soit dans le menu, le contenu ou encore le footer
                'associatedContainer'=>array('defaultContainer','background','withBackgroundContainer') //un conteneur peut utiliser les propriétés d'autres conteneurs. Seules leurs propriétés sont reprises
                 'isAbstract' => false //un conteneur peut être abstrait, cad ne représenter aucun élément, et être seulement repris par d'autres conteneurs pour ses propriétés. Ce système permet de 
factoriser les blocs de propriétés qui changent peu d'un élément à un autre
                ),

Héritage de conteneur

IL y a deux type de conteneurs:

• conteneurs effectifs = un element de page: paragraphe, titre, header, footer, menu...
• conteneurs abstraits = ne représntent rien, mais sont utilisé par les conteneurs effectifs pour leur ensemble de propriétés. Permet de rassembler ainsi toutes les propriétés communes à certains blocs à un seul endroit.

Les conteneur effectifs peuvent hériter de 0..n conteneur abstraits. Seul leur propriétés sont héritées, les confirmation sur le conteneur lui meme ne le sont pas. Les propriétés du conteneur effectif prennent le pas sur celles héritées.

Création des conteneurs

Un conteneur effectif est associée a une plusieurs partie de page (header,menus,contenu,footer). Pour chaque partie de page, on va créer un clone du conteneur initial. Ce clone diffère cependant de l'original a deux niveaux :

• chemin css: le chemin css est préfixé par celui correspondant a la partie de page
• nom: son nom est également préfixé par le nom de la partie de la page concernée

Les propriétés

Chaque propriété se présente sous forme de tableau php. La structure utilise celle des fields de la classe ElementForm. Ces propriétés seonrt transformés de la meme manière que les fields en champs de formulaire. Il est donc possible d'utiliser tous les type de champs référencés dans l'object Element.

Ci dessous les différentes champs qui permettent d'identifier et de cnfigurer une popriété CSS:

Types de champs

Champs génériques

• label: nom qui sera affiché sur l'interface
• type: type de la propriété (l'un des types disponible dans l'object ElementForm)
• options: options liés au tip (cf . ElementForm)
• propertyToChange: propriété css associée
• targetElements: dans le cas ou la propriétés doit agir sur plusieurs propriétés CSS qui peuvent appartenir a des éléments différents, alors ce champ sera utilisé a la place de propertyToChange

Champs de masterProperty

• masterProperty: nom de la La spécificité MasterProperty associée
• typeMasterProperty: type de la La spécificité MasterProperty associée

Champs de propriétés conteneurs

• subContainerDisplaylabel: affiche le label d'une propriété se trouvant dans une propriété conteneur (à definir pour la propriété fille)
• fields: tableau listant les propriétés fille du conteneur

La spécificité MasterProperty

La spécificité Conteneur

Shéma relationnel

Shéma de classes