Rails Helpers : Cycle : des Tableaux et des Zèbres

On est souvent confronté à travailler avec des tableaux à multicolonnes assez large, où on n'arrive plus à suivre la ligne.

Les tableaux à couleurs alternées facilitent beaucoup la lecture, ce n'est pas un gadget pour épater l'oeil, mais une restriction pour éviter l'erreur de lecture.

Tout se trouve au niveau des feuilles de style CSS; On nomme deux styles respectivement avec deux couleurs alternées.

.COULEUR0 {
background-color: #eee;
}
.COULEUR1 {
background-color: #aaa;
}

Par la suite dans la vue on utilise une fonction mathématique alternative très simple qui ressemble à :  a = 1 - a en initialisant a soit à 1 ou bien à 0
et dans le template : 

<ul>
<% a = 0 %>
<% 5.times %>
<li class="COULEUR<%= a %>">Colonne1<span>Colonne2</span></li>
<% a = 1 - a %>
<% end %>
</ul>

C'est une solution rapide à intégrer. On est toujours obligé d'avoir un chiffre dans le nom de la classe, une ligne d'initalisation et une autre de calcul , dans ce cas on est limité à deux couleurs alternées.

on peut utiliser une fonction modulo pour faire apparaitre plus de 2 couleurs ou bien même un séparateur de plus à la Nème ligne.

Rails nous économise encore du code avec un Helpers nommé Cycle:

on définie dans notre exemple 3 Classes CSS de couleurs de fond différentes: { .rouge ; .vert ; .bleu }

<ul>
<% 5.times %>
<li class="<%= cycle ("rouge", "vert", "bleu") %>" >Colonne1<span>Colonne2</span></li>
<% end %>
</ul>

Après, libre à votre imagination si vous voulez une couleur de séparation chaque 5 lines :

<li class="<%= cycle ("rouge", "vert", "rouge", "vert", "bleu") %>">....</li>

On se pose la question suivante : avec la première solution, pour initaliser les couleurs quand on crée ou qu'on passe à un tableau suivant on a juste à faire a=0.
 Comment ça se passe avec Cycle ?, c'est simple:

...
<li class="<%= cycle ("rouge", "vert", "rouge", "vert", "bleu", :name => "couleurs") %>">...</li>
<% end%> #fin de la boucle</p>
<% reset_cycle("couleurs") %> #remise à zéro du Cycle
...

Il est plus facile de changer les couleurs alternées des tableaux, la syntaxe du code est bien claire.

La fonction Cycle peut être utilisée pour insérer du code HTML et pas uniquement des nom de classe dans le Tags.

J'essayerais dans un futur post de mettre un exemple avec CYCLE traitant du code HTML pour faire un Grid avec des balises de listing

Ajouter un Commentaire