Utilisation des valves, génération du site web de l'ULB - format xml
sommairesommaireindexindexdébutdébutpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

Style d'une information

Outre la possibilité de donner un style à l'ensemble du bloc d'informations et d'utiliser une puce, une numérotation ou une ligne de séparation entre les informations, il est également possible d'afficher chaque information dans un bloc individuel, avec un style particulier.

Pour cela, il faut utiliser un élément <affichage> qui va supporter tout les attributs de mise en forme d'un bloc.

Outre sa fonction de mise en page, cet élément <affichage> servira également à choisir les données à afficher pour chaque information (titre, aperçu, contenu, vignette, auteur, date de publication...)

On peut placer cet élément dans l'élément <valves>, auquel cas il s'appliquera à toutes les informations de toutes les sources. On peut également le placer à l'intérieur d'un élément <source-xxx>, auquel cas il est valable pour les informations de cette source-là (chaque source peut ainsi avoir son propre style).

On peut également utiliser plusieurs éléments <affichage> pour changer de style en fonction de différentes conditions (styles différents pour la première ou la dernière information, styles différents pour les informations paires et impaires, etc.).


L'élément <affichage> pour sélectionner le style d'une information

Pour mettre chaque information dans un bloc avec un style particulier, on utilise un élément <affichage> avec tous les attributs nécessaires à la mise en page désirée. Ces attributs sont les mêmes que ceux utilisés dans tous les blocs: style, bords et ses variantes, etc.

Remarque: outre le style, cet élément <affichage> sert également à sélectionner les données à afficher pour chaque information.


L'exemple ci-contre utilise, pour chaque information, le style class4.

Code de cet exemple
<valves maximum="3">
   <affichage style="class4"/>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/>                 
</valves>

Ce qui donne:

loading...ajax1

Titre de l'information dans le style du bloc

Plutôt que d'écrire le titre de l'information dans le contenu du bloc, comme dans les exemples qui précèdent, vous pouvez écrire ce titre de manière intégrée dans le style du bloc. Pour cela, il suffit de mentionner dans l'attribut style un nom de style avec l'extension '+titre'.

L'exemple ci-contre utilise le style class4+titre, ce qui va avoir pour effet d'intégrer le titre de l'information dans le style du bloc.

Ceci sera valable pour tous les styles dont le nom se termine par '+titre'.

Code de cet exemple
<valves maximum="3">
   <affichage style="class4+titre"/>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/>
</valves>

Ce qui donne:

loading...ajax2

Combinaison de styles

Vous pouvez combiner un style pour le bloc d'informations et un style individuel pour chaque information. De même, vous pouvez opter pour une puce, une numérotation ou une ligne de séparation entre les informations et un style pour chaque information.

L'exemple ci-contre combine un style pour le bloc d'informations (voile) et un style pour chaque information (clair).

Des bords arrondis sont utilisés pour les deux.

Code de cet exemple
<valves maximum="3" style="voile" bords="arrondis">
   <affichage style="clair" bords="arrondis"/>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/>                 
</valves>

Ce qui donne:

loading...ajax3

Ici, on combine un style pour les informations avec une numérotation et une ligne de séparation.

Code de cet exemple
<valves séparateur="colorDots5" numérotation="I.">
    <affichage style="class6" bords="arrondis"/>
    <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/>
</valves>

Ce qui donne:

loading...ajax4

Actualités dans des blocs refermables

Pour alléger une page, on peut afficher les informations dans des blocs refermables (comme c'est le cas de tous les blocs).

Pour cela, on utilise les attributs refermable, état, groupe...

Attention que ceci n'est pas compatible avec l'utilisation d'un <résumé> de l'actualité (qui lui aussi utilise le principe des blocs refermables).


Ici, les blocs d'informations sont refermables grâce à l'attribut refermable.

Code de cet exemple
<valves>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml">
        <affichage style="class1" bords="arrondis" refermable="oui"/>
    </source-xml>
</valves>

Ce qui donne:

loading...ajax5

Ici, les blocs d'informations sont fermés par défaut et le titre de l'information apparaît dans la zone titre du bloc (grâce à l'extension +titre dans le nom du style).

Code de cet exemple
<valves>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml">
        <affichage style="class4+title" bords="arrondis" refermable="oui" état="fermé"/>
    </source-xml>
</valves>

Ce qui donne:

loading...ajax6

Dans cet exemple, l'utilisation de l'attribut cible="ouvrirFermer" permet d'ouvrir et de fermer l'information en cliquant n'importe où sur l'information (et pas uniquement sur l'icône).

Code de cet exemple
<valves>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml">
      <affichage style="class4+titre" bords="arrondis" 
                 refermable="oui"  cible="ouvrirFermer"
                 groupe="news" état="premier-ouvert-sinon-fermé">
          <titre/>
          <vignette/>
          <contenu/>
      </affichage>   
   </source-xml>
</valves>

Un seul bloc sera ouvert à la fois, grâce à l'attribut groupe (quand vous ouvrez une information les autres se ferment automatiquement).

Par défaut, le premier sera ouvert et les autres fermés grâce à la valeur de l'attribut état.

loading...ajax7

Placer l'élément <affichage> dans <valves> ou dans <source>


Style identique pour l'ensemble des sources

Mettre l'élément <affichage> dans l'élément <valves> permet de définir un style pour l'ensemble des informations, même si elles proviennent de différentes sources.


L'exemple ci-contre utilise, pour chaque information, le style colorBar4 et des bords arrondis.

Trois sources différentes sont utilisées, mais le style sera le même pour chacune des sources.

Code de cet exemple
<valves maximum="3">
   <affichage style="colorBar4" bords="arrondis"/>
   <source-babelbox box="1" type="2" maximum="1"/>
   <source-rss href="http://www.lesoir.be/feed/La%20Une/destination_une_block"  maximum="1"/>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1"/>
</valves>

Ce qui donne:

loading...ajax8

Style propre à chaque source

Plutôt que de placer l'élément <affichage> dans l'élément <valves>, on peut le placer dans chacun des éléments <source-babelbox>, <source-rss>, <source-xml> ou <source-difusion> utilisé.

Ainsi, chacune des sources aura son propre style. Il est même possible de mentionner deux fois la même source avec des styles différents, pour créer des effets visuels différents.


L'exemple ci-contre utilise trois sources différentes. Chaque source aura son propre style (l'élément <affichage> est en effet placé dans chaque élément <source-xxx>).

Code de cet exemple
<valves maximum="4"> 
   <source-babelbox box="1" type="2" maximum="1">
      <affichage style="colorBar2" bords="arrondis"/>
   </source-babelbox>
   <source-rss href="http://www.lesoir.be/feed/La%20Une/destination_une_block"  maximum="1">
      <affichage style="colorBar3" bords="arrondis"/>
   </source-rss>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1">
      <affichage style="colorBar4" bords="arrondis"/>
   </source-xml>
</valves>

Ce qui donne:

loading...ajax9

L'exemple ci-contre utilise deux fois la même source, mais avec un style différent, ce qui crée une alternance visuelle entre chaque information.

Remarque: comme expliqué ici, une même information ne sera pas affichée deux fois.

Code de cet exemple
<valves maximum="4">
    <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1">
        <affichage style="class1"/>
    </source-xml>
    <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1">
        <affichage style="blanc"/>
    </source-xml>
</valves>

Ce qui donne:


Remarque: il existe une autre manière de procéder, encore plus simple, pour réaliser la même chose avec une seule source.

loading...ajax10

L'exemple ci-contre utilise le style "class6" pour les articles à la une, et le style "class1" pour les autres articles.

Code de cet exemple
<valves >
    <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" catégories="unes">
        <affichage style="class6"/>
    </source-xml>
    <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml">
        <affichage style="class1"/>
    </source-xml>
</valves>

Ce qui donne:


Remarque: si vous désirez mettre en avant la première information, il existe une autre manière de procéder, encore plus simple.

loading...ajax11

Styles différents pour la première ou dernière information, pours les informations paires/impaires, etc.

Il est possible d'utiliser plusieurs éléments <affichage> différents, qui vont être utilisés sur bases de différentes conditions, données par un attribut condition.

Au mimimum, vous devez utiliser un élément <affichage> sans attribut condition. Cet élément va définir le style et le contenu de toutes les informations qui ne répondent pas aux conditions qui suivent.

Vous pouvez ajouter (ce n'est pas obligatoire) d'autres éléments <affichage> avec un attribut condition égal à:

  • condition="évidence": à utiliser pour les informations à mettre en évidence;

  • condition="premier": à utiliser pour la première information;

  • condition="dernier": à utiliser pour la dernière information;

  • condition="pair": à utiliser pour les informations en position paire (une sur deux);

  • condition="impair": à utiliser pour les informations en position impaire (une sur deux);

Pour chaque information, on utilisera le premier élément <affichage> qui existe (en respectant l'ordre de la liste ci-dessus) si la condition associée est valable pour cette information-là.

Ainsi, si l'information qui est la première de la liste en position impaire doit être en évidence, c'est <affichage condition="évidence"> qui sera utilisé, si cet élément existe.

S'il n'existe pas, c'est <affichage condition="premier"> qui sera utilisé, si cet élément existe.

S'il n'existe pas, c'est <affichage condition="impair"> qui sera utilisé, si cet élément existe.

S'il n'existe pas, c'est <affichage> sans condition qui sera utilisé.


L'exemple ci-contre utilise le style "class6" pour les articles à la une, et le style "class1" pour les autres articles.

Code de cet exemple
<valves >
    <affichage style="class1"/>
    <affichage style="class6" condition="premier"/>
    <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/>
</valves>

Ce qui donne:

loading...ajax12

L'exemple ci-contre utilise le style "class6" pour les articles à la une, et le style "class1" pour les autres articles.

Code de cet exemple
<valves >
    <affichage style="class1" condition="pair"/>
    <affichage style="class6" condition="impair"/>
    <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/>
</valves>

Ce qui donne:

loading...ajax13
ULB - entreprise écodynamique