Nous allons définir deux types de messages : succès (vert) et avertissement (orange).
Création des messages
La création de messages est très simple, il suffit dans une action de contrôleur de stocker dans flash le contenu et le type de notre message :
flash[:succes] = "L'article a bien été créé"
De même pour créer un message d’avertissement :
flash[:avertissement] = "Tous les champs obligatoires ne sont pas remplis"
Nous aurons accès à flash[:succes] dans la vue lors de la requête suivante.
Affichage des messages
Nous ajoutons à notre gabarit un bloc affichant les messages présents dans flash :
# app/views/layouts/application.html.erb <% flash.each do |key, msg| %>
<%= content_tag(:div, content_tag(:p, msg), :class => "message #{key}") %>
<% end %>
Ce bloc va générer pour notre précédent message de succès le code HTML suivant :
<div class="message">
<div class="succes">
<p>L'article a bien été créé</p>
</div>
</div>
Et pour le message d’avertissement :
<div class="message">
<div class="avertissement">
<p>L'article a bien été créé</p>
</div>
</div>
Il ne nous reste plus qu’à styler ce bloc pour différencier les types de messages :
# public/stylesheets/<fichier css> .message {
margin-bottom: 10px;
}
.message div {
padding: 10px 10px 15px 50px;
}
.message .succes {
border: 1px solid #2b8a0d;
background: url(/images/succes.gif) 10px 5px no-repeat;
color: #2b8a0d;
}
.message .avertissement {
border: 1px solid #dd4f00;
background: url(/images/avertissement.gif) 10px 5px no-repeat;
color: #dd4f00;
}
.message p {
font-weight: bold;
}
Résultat
Messages :
Icônes :
