Bienvenue Prénom - Déconnexion

Mot de passe oublié ?Accès membres : merci de vous identifier

BOURSE

RUBRIQUES

Journal du Net > Développeur  > Client Web > JavaScripts et CSS dans Rails
TUTORIEL/PRATIQUE
 

Intégrer les fichiers JavaScript et CSS avec Rails

Deux méthodes standards de l'infrastructure de développement Ruby on Rails permettent de spécifier un bloc en vue de l'afficher ensuite dans une page Web entre les balises HTML désirées.

Publié le 06/10/2008

En savoir plus

Un code HTML valide nécessite d'intégrer les fichiers javascripts et CSS uniquement entre les balises <header> de vos pages. Il arrive pourtant fréquemment que l'on ai besoin d'un fichier CSS ou JavaScript propre à une vue ou à un partial. Dans ce cas nous serions tenter de simplement intégrer les fichiers JavaScript et CSS dans ce fichier. Pourtant il existe des alternatives simples et efficaces afin de s'assurer que ces inclusions soient bien faites entre les balises <header> de votre page.

Vous pouvez par exemple utiliser les plugins Styler et Javascripters qui vous demande de renommer vos fichiers en fonction des nom d'actions ou de contrôleurs ou vous voulez qu'ils soient inclus. Celui-ci présente de gros inconvénients puisque si vous souhaitez inclure deux fichiers CSS spécifiques, vous êtes obligé de les concaténer dans un seul fichier ce qui n'est, vous en conviendrez, pas toujours très "DRY" (Don't Repeat Yourself - Ne vous répétez pas).

La solution : les méthodes content_for et yeld

Needy controllers est un autre plugin qui vous permet de spécifier les fichiers JavaScript et CSS à inclure directement dans vos contrôleurs. Il gère les propriétés :only et :except pour vous permettre de gérer finement les inclusions. Bien que ce plugin soit très souple, il ne me convient pas puisqu'il lie très fortement les vues (les fichiers CSS et JavaScript) aux contrôleurs. Il ne respecte donc pas les principes de séparation des couches du modèle MVC.

La solution que j'ai retenu repose sur des méthodes standards de Rails : content_for et yeld. La méthode content_for permet de spécifier un bloc qui sera stocké pour être ensuite affiché par la méthode yeld. Vous comprenez aisément que ces méthodes peuvent être mises en oeuvre pour intégrer vos fichiers JavaScript et CSS en respectant les principes DRY et MVC.

Pratiquement, insérons un appel à yeld entre les balises <head> de notre layout :

 <head>
 <%= stylesheet_link_tag 'demo' %>
 <%= yield "page_header" %>
</head>

Puis dans les vues où vous avez besoin d'utiliser des fichiers CSS ou JavaScript spécifiques, il ne vous plus qu'à utiliser le code suivant :

 <% content_for("page_header") do %>
 <%= stylesheet_link_tag 'monfichier.css?201205041600"bloc-savoirplus" align="right">
En savoir plus

Cette méthode est bien sure réutilisable dans beaucoup d'autres situations !

 

Ce contenu a été réalisé par le blog accolade.ch (Raphaël Emourgeon) sous licence Creative Commons.



Autour du même sujet
PDF dans Rails - DÉVELOPPEURS > Client Web
JDN Développeur Haut de page
A VOIR EGALEMENT

Sondage

Avez-vous commencé à développer des applications pour l'interface graphique Metro de Windows 8 ?

Tous les sondages