Plugin de la semaine: Rails Widgets (1)

Le plugin Widgets rassemble plusieurs helpers qui permettent d’ajouter facilement des éléments d’interface graphique à vos pages. Aujourd’hui, 7 éléments sont disponibles :

• Les onglets (Tabnav)
• Les liens de navigation (Navigation)
• Le gestionnaire de visibilité (Show/Hide)
• La présentation en table (Tableizer)
• Les icônes info (Tooltips)
• La mise en page en colonne (ColumnLayout)
• Les menus contextuels (Nubbins)

Pourquoi ce projet est-il tellement prometteur?

Aujourd’hui, les technologies web permettent de concevoir des contrôles graphiques (widgets) de manière tout à fait différente grâce au couple HTML-Javascript. (voir le billet à propos de Songza chez Fred Cavazza). Le projet Widget permet non seulement de “webiser” (j’entends par là transformer en html/javascript) les contrôles graphiques “traditionnels” (TabNav, Tooltip) mais aussi d’en créer des nouveaux (Nubbins, Navigation) propres au web, le tout de manière très DRY.

Ce projet est maintenu par Paolo Dona, de la société italienne Seesaw.

Trêve de discussions, passons à la pratique.

Installation du plugin

Comme d’habitude :

ruby script/plugin install svn://svn.seesaw.it/widgets/trunk

ou

piston import svn://svn.seesaw.it/widgets/trunk vendor/plugins/widgets

si vous utilisez piston.

Installer TabNav:

Le widget TabNav permet de créer en quelques secondes de magnifiques onglets pour votre site. Pour commencer, il faut générer le partial qui représentera les onglets:

ruby script/generate tabnav nom_de_la_bar_donglets

Cette commande crée le partial _nom_de_la_bar_donglets_tabnav.rhtml dans app/views/widgets. Il ne reste plus qu’à ajouter les onglets dans vos vues:

<% tabnav :nom_de_la_bar_donglets do %>
 # Placez le contenu ici
<% end %>

On ajoutera généralement ce code dans application.html.erb ou plus généralement dans un layout. Le contenu sera alors simplement <%= yield %>.

A ce stade, vous pouvez lancer votre application et voir apparaitre les onglets dont les noms correspondent à ceux de vos différents contrôleurs.

Personnaliser ses onglets

Les noms que vous donnerez à vos contrôleurs ne sont pas ceux que vous souhaitez donner à vos onglets? Pas de problèmes. Il suffit d’éditer le partial _nom_de_la_bar_donglets_tabnav.rhtml qui doit ressembler à ceci:

<%  
render_tabnav :nom_de_la_bar_donglets_tabnav, 
              :generate_css => false, 
              :html => {:class=> 'myCssClass', :id=>'myCssId'} do  

  add_tab do |t|
    t.named 'Accueil'
    t.titled 'Home Page'
    t.links_to :controller=>'static', :action=>'index'
    t.highlights_on :controller=>'users', :action=>'new'
    t.highlights_on :controller=>'account'
  end 
end
%>

Les arguments de render_tabnav sont évidents :

• Le premier est le nom de la bar d’onglets.
• :generate_css détermine si les feuilles de style doivent être “inline” ou non (par défaut).
• :html est un hash de toutes les options HTML à passer à la barre d’onglets.

Les différentes méthodes de l’onglet vont permettre de définir son comportement. La méthode named définit le nom qui apparaitra sur l’onglet. La méthode titled définit la valeur de l’option HTML alt. La méthode links_to est un lien vers la méthode correspondante dans ActionView et définit la cible de l’onglet.

Enfin, la méthode highlights_on permet de définir quand un onglet sera affiché comme “actif”. Dans l’exemple, l’onglet sera “activé” lorsque le contrôleur est static et l’action index, lorsque le contrôleur est users et l’action new ou encore lorsque le contrôleur est account.

La barre d’onglets sans cadre

Par défaut, Tabnav affiche un cadre autour du contenu de l’onglet. Si vous désirez que vos onglets n’encadrent pas leur contenu, il suffit de modifier la manière dont vous insérez les onglets:

<% tabnav :nom_de_la_bar_donglets %>

au lieu de

<% tabnav :nom_de_la_bar_donglets do %>
 # Placez le contenu ici
<% end %>

Conclusion

Voilà, j’espère que ces petites astuces vous auront fait gagner pas mal de temps de développement. La semaine prochaine, je vous ferai découvrir d’autres widgets. Avez-vous des idées d’autres widgets que vous utilisez tous les jours?