De Hegyd Doc.

Sommaire 1 Composant: StyleProperties 1.1 Fonctionnement général 1.1.1 Arborescence générale 1.1.2 Les propriétés et leur lien avec les styles 1.2 Shéma relationnel 1.3 Shéma de classes 1.4 Configuration 1.4.1 définition des conteneurs 1.4.1.1 Structure 1.4.1.2 Héritage de conteneur 1.4.2 Création des conteneurs 1.4.3 Les propriétés 1.4.3.1 Types de champs 1.4.3.1.1 Champs génériques 1.4.3.1.2 Champs de masterProperty 1.4.3.1.3 Champs de propriétés conteneurs 1.4.3.2 La spécificité MasterProperty 1.4.3.2.1 Types existants 1.4.3.2.1.1 Background 1.4.3.2.1.2 menu 1.4.3.2.2 Ajouter un masterProperty 1.5 Publication

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

Arborescence générale

Un conteneur contient un ensemble de propriétés dont la valeur influe sur les styles d'un élément spécifique définis par le conteneur (le path css peut ensuite être affiné pour chaque propriété).

Les propriétés et leur lien avec les styles

Chaque propriété a 3 moyens différents d'impacter le css, décris ci dessous.

• utilisation du champ propertyToChange (voir types de champs).
• utilisation du champ targetElements (voir types de champs).
• utilisation des master properties.

Shéma relationnel

• StyleProperty: dans cette table sont référencées toutes les propriétés dédupliquées.

Exemple: le conteneur paragraphe, entité présente dans le contenu dans le menu de gauche et dans le menu de droite, aura ses propriétés enregistrées 3 fois, une fois par endroit. Description des champs de la table :

• • propertyId: identifiant
  • propertyName: nom de la propriété, reprenant le nom de son container et son nom propre, pour éviter les doublons: {nomconteneur}{nomblocconteneur}{nompropriete},Exemple:paragraphleftmenufontsize.
  • propertyType: type de la propriété: associée a la mise en page des bloc, ou a la mise en page des blocObject.
  • themeRelated: pour l'administration des thèmes indique si cette propriété peut être modifié dans le cadre de la modification d'un thème
  • colorPaletteRelated: pour l'administration des palettes de couleur, indique si cette propriété peut être modifiée dans le cadre de la modification d'une palette de couleur
  • relatedPropertyId: la valeur d'une propriété peut être dans certains cas associée a la valeur d'une autre. Ce champ contient l'id de la propriété de référence.

• stylePropertyValue: table utilisée pour enregistrer les valeurs qui seront reprise par la feuille de styles en production.

Description des champs:

• • valueId: identifiant unique
  • propertyId: identifiant de la propriété (lien avec styleProperty).
  • propertyValue: valeur
  • siteClientId: site client associé

• stylePropertyValue: table utilisée pour enregistrer les valeurs qui seront reprise par la feuille de styles pour le mode brouillon. Utilise les memes champs de que StylePropertyValue.

Shéma de classes

Configuration

Tous les styles éditables par l'utilisateur sont définis dans la configuration (les accordéons défini sur la page mise en page, et sur la page 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 stylesProperties.

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ésentent rien, mais sont utilisés 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 seront 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 ElementForm, utilisé pour générer les fields (element coeur du framework V2).

En complément, chaque propriété est enregistrée en base de données dans la table StylePropery.

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 Exemple: 'propertyToChange' => 'font-size'
• targetMultiple: dans le cas ou la propriété doit agir sur plusieurs propriétés CSS, passer ce paramètre a true. Ainsi la variable targetElements prendra le pas sur propertyToChange.
• targetElements: dans le cas ou la propriété 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 Exemple: array('p' => array('margin-top','margin-bottom'), 'p.block' => array('margin-bottom')

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

les propriétés conteneur n'ont que pour fonction de regrouper un ensemble de propriétés, d'un point de vue affichage au sein de l'éditeur uniquement.

Exemple: dans le defaultContainer, la propriété police est en fait un conteneur regroupant les propriétés de modification lié au texte (type, taille...). Sa création permet l'affichage en un seul bloc de toutes ses propriétés. Cela permet de prendre moins de place a l'affichage et de gcréer une notion de 'groupe'.

• 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

Dans certains cas, la relation modification sur un champ modifie une ou plusieurs propriétés css n'est plus valide.

En effet dans certains cas c'est la valeur d'un ensemble de champs qui va déterminer un ensemble de modifications de styles à apporter.

Dans ce cas, on crée des groupes qui permettent de lier entre eux plusieurs champs. La liaison se fait par le biais de l'attribut masterProperty et typeMasterProperty lors de la définition du champ dans la configuration. Tous les champs qui auront ces attributs identiques seront liés entre eux.

Ainsi cette relation permet de récupérer l'ensemble des champs a chaque fois que l'on souhaite regénérer les styles associés.

Types existants

Background

Ce type de masterProperty gère tout ce qui concerne l'attribution d'un fond aux éléments (image, dégradé, texture...) ainsi que le type de bordure. Dans ce cas, les valeurs d'un ensemble de champs definissent l'url de l'image de fond (et de styles annexes quand la génération d'unmage de fond n'est pas nécéssaire). L'image de fond est la seule solution compatible tout navigateur pour cumuler le type de fond et des bordures spécifiques (coins arrondis...).

menu

Cette master property à été crée pour gérer l'ajout de puces dans le menus, les titres etc.

Ajouter un masterProperty

Pour ajouter un nouveau type de MP, il faut se rendre dans la fonction getMasterProperty() de la classe StyleProperties, et y ajouter une clause qui permet de renvoyer le résultat d'une fonction en fonction d'un pattern. Le résultat de la fonction est un tableau contenant les nouvelles propriétés CSS.

A disposition de la fonction de retour: l'ensemble des champs contenu dans le groupe, leurs valeurs, et l'élément ciblé par les styles css.

La fonction devra retourner un tableau php du type :

array(
      "element CSS 1"=> array('propriete1'=>'valeur','propriete2'=>'valeur'),
      "element CSS 2"=> array('propriete1'=>'valeur','propriete2'=>'valeur')
)

Un tableau vide pourra également être renvoyé. Dans ce cas aucun changement de style n'aura lieu.

Publication