IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Html vs Rhtml

Dans le framework 'Ruby On Rails', des conventions de nommages ont été mises en place pour faciliter la vie du développeur.
Les balises Html n'échappent pas à la règle, ce tutoriel est là pour passer en revue les balises Rails, qui produisent du code Html Valide.

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Pour faciliter l'écriture des formulaires dans les vues et permettre une interaction facile avec les modèles, Rails a prévu un ensemble de méthodes qui s'utilisent directement dans les vues. Il est bien entendu que nous pouvons utiliser sans problème les codes Html correspondants. Rails offre cependant quelques facilités non négligeables, notamment concernant les dates.

II. Balise Input

Nous allons passer en revue la plupart des balises 'Input'. Par défaut un tag Rails 'Input', mettra en évidence un attribut size=« 30 », comme j'ai généré un code source à partir d'une vue rhtml, d'office le code html, reprendra cet attribut.

II-A. Text

Voici une version possible de la balise Html

 
Sélectionnez
<input id="p_nom" name="p[nom]" size="30" type="text" />

Équivalent en Rails

 
Sélectionnez
<%= text_field :p , :nom %>

Nous pouvons bien entendu ajouter des options Html

 
Sélectionnez
<%= text_field :p , :nom , :class=>'grise', :size=>'20' %>

ce qui donne en version html

 
Sélectionnez
<input class="grise" id="p_nom" name="p[nom]" size="20" type="text" />

II-B. Password

Voici une version possible de la balise Html

 
Sélectionnez
<input id="p_nom" name="p[nom]" size="30" type="password" />

Équivalent en Rails

 
Sélectionnez
<%= password_field :p , :nom %>

Nous pouvons bien entendu ajouter des options Html

 
Sélectionnez
<%= password_field :p , :nom , :class=>'grise', :size=>'20' %>

II-C. Hidden

Voici une version possible de la balise Html

 
Sélectionnez
<input id="p_nom" name="p[nom]" type="hidden" />

Équivalent en Rails

 
Sélectionnez
<%= hidden_field :p , :nom %>

II-D. File

Voici une version possible de la balise Html

 
Sélectionnez
<input id="p_nom" name="p[nom]" size="30" type="file" />

Équivalent en Rails

 
Sélectionnez
<%= file_field :p , :nom %>

Il est à noter, que le tag file_field, doit être encadré de balise Form avec enctype=« multipart/form-data » method=« post »
Vous pouvez mettre : multipart=>true, la méthode « post », n'est pas nécessaire puisqu'elle est définie par défaut.

 
Sélectionnez
<%= form_tag({:action => 'upload'}, {:multipart => true}) %>
    <%= file_field_tag :mon_fichier%>
  <%= end_form_tag %>

II-E. Radio

Voici une version possible de la balise Html

 
Sélectionnez
<input id="p_nom_valeur" name="p[nom]" type="radio" value="valeur" />

Équivalent en Rails

 
Sélectionnez
<%= radio_button :p , :nom,'valeur' %>

Ici, nous pouvons remarquer que nous ajoutons un troisième élément qui est la valeur du bouton radio

II-F. Checkbox

Voici une version possible de la balise Html

 
Sélectionnez
<input id="p_nom" name="p[nom]" type="checkbox" value="1" />

Équivalent en Rails

 
Sélectionnez
<%= check_box :p , :nom,:valeur_on=>1, :valeur_off=>0 %>

Le cas du checkbox est un peu particulier.
Il ne fonctionne qu'avec la méthode 'POST' dans le <Form>
:valeur_on=>1 sera la valeur si le bouton est coché ;
:valeur_off=>1 sera la valeur si le bouton n'est pas coché.

II-G. Image

Voici une version possible de la balise Html

 
Sélectionnez
<img alt="Image" src="/images/vers/mon/image/image.jpg" />

Équivalent en Rails

 
Sélectionnez
<%= image_tag 'vers/mon/image/image.jpg'%>

III. Les boutons

Il existe plusieurs types de boutons, qui permettent beaucoup plus de souplesse que les boutons types en html.

III-A. Button_to

Ce bouton permet de faire une redirection vers une action

 
Sélectionnez
<%= button_to 'suivant' :controller=>admin, :action=>'index', :id=>'valeur_id' %>

Ce code Rails génère directement un code html englobant des balises <Form>, avec comme action
le lien donnant sur le contrôleur/action/id voulu.
Attention, ce bouton ne fonctionne pas pour la validation des formulaires
.
Code généré en Html :

 
Sélectionnez
<form method="post" action="/admin/index/valeur_id" class="button-to"><div><input type="submit" value="suivant" /></div></form>

III-B. Submit_tag

Ce bouton sert pour la validation de données et doit donc se trouver entre les balises <Form>.

 
Sélectionnez
<%= submit_tag 'titreBouton'%>

Code généré en Html :

 
Sélectionnez
<input name="commit" type="submit" value="titreBouton" />

III-C. Image_submit_tag

Voici un bouton de validation sous forme d'image

 
Sélectionnez
<%= image_submit_tag 'rails.png'%>

Code généré en Html :

 
Sélectionnez
<input src="/images/rails.png?1175454202" type="image" />

Si vous voulez changer l'image d'un image_submit_tag lors d'un clic de la souris ?

 
Sélectionnez
<%= image_submit_tag "edit.gif", :onmousedown=>"this.src='/images/edit_down.gif'", :onmouseup=>"this.src='/images/edit.gif'", :onmouseout=>"this.src='/images/edit.gif'" %>

Attention, à part pour le premier paramètre, il faudra préciser le chemin complet de l'image !

IV. Les liens

Les liens sont partie intégrante des pages Web, on va voir ici toute la puissance de Ruby on rails.

IV-A. Link_to

Link_to permet d'effectuer un lien vers une autre page

 
Sélectionnez
<%= link_to 'vers ma page','/vers/ma/page'%>

Ce qui donne en Html :

 
Sélectionnez
<a href="/vers/ma/page">vers ma page</a>

Mais nous pourrions diriger vers une action plutôt qu'une page

 
Sélectionnez
<%= link_to 'Vers Action', :controller=>'admin', :action=>'index', :id=>'4'  %>

Ce qui donne en html

 
Sélectionnez
<a href="/admin/index/4">Vers Action</a>

Nous pourrions pousser le raisonnement encore plus loin

 
Sélectionnez
<%= link_to 'Supprimer',    {:controller=>'admin', 
                            :action=>'delete', 
                            :id=>'4'},
                            {:class=>'gris',
                            :confirm=>'êtes vous sûr ?'}
  %>

Ce code nous permet de faire fonctionner l'action 'delete', dans le contrôleur 'Admin', avec un message d'alerte.
Ce qui en Html donnera :

 
Sélectionnez
<a href="/admin/delete/4" class="gris" onclick="return confirm('êtes vous sûr ?');">Supprimer</a>

IV-B. link_to_if

Link_to_if affichera le lien à la seule condition que la @variable soit vraie

 
Sélectionnez
<%= link_to_if  @variable , 'vers ma page','vers/ma/page' %>

IV-C. Link_to_unless

Dans ce cas le lien sera affiché, à la condition que @variable soit faux

 
Sélectionnez
<%= link_to_unless @variable , 'vers ma page','/vers/ma/page'%>

IV-D. option Link_to

Dans les deux derniers cas, nous pouvons bien sûr étoffer les liens

 
Sélectionnez
<%= link_to_if @variable, 'Supprimer',    {:controller=>'admin', 
                            :action=>'delete', 
                            :id=>'4'},
                            {:class=>'gris',
                            :confirm=>'êtes vous sûr ?'}
  %>

IV-E. Mail_to

Mail_to permet de créer un lien direct vers le client mail avec une certaine information déjà établie

 
Sélectionnez
<%= mail_to "moi@domaine.dvp", "Contact par mail",
 :subject=>"formulaire rails",
 :cc=>"unAutre@email.com",
 :body=>"un message...",
 :encoding=>"javascript"%>

Ce qui en Html donne :

 
Sélectionnez
<a encoding="javascript" href="mailto:moi@domaine.dvp?cc=unAutre%40email.com&amp;body=un%20message...&amp;subject=formulaire%20rails">Contact par mail</a>

V. Date

Rails permet une génération rapide de formulaires de date

V-A. Date_select

Date_select est une génération de trois select an/mois/jours qui se fait automatiquement par l'appel de la balise suivante. Code Rails :

 
Sélectionnez
<%= date_select :p , :nom %>

Remarquer l'attribut name, c'est cet élément qui nous permettra de récupérer les informations pour une date. Ce qui donne en html :

 
Sélectionnez
<select id="p_nom_1i" name="p[nom(1i)]">
<option value="2002">2002</option>

<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007" selected="selected">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>

<option value="2012">2012</option>
</select>
<select id="p_nom_2i" name="p[nom(2i)]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4" selected="selected">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>

<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="p_nom_3i" name="p[nom(3i)]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected="selected">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>

<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>

<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>

<option value="31">31</option>
</select>

V-A-1. Option Date_Select

Avoir un champ avec les années voulues

 
Sélectionnez
<%= date_select :p , :nom, :start_year=>1900 %>

Aura pour conséquence le select suivant

 
Sélectionnez
<select id="p_nom_1i" name="p[nom(1i)]">
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
<option value="1904">1904</option>
<option value="1905">1905</option>
<option value="1906">1906</option>
<option value="1907">1907</option>

...
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>

<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>

<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>

<option value="2007" selected="selected">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>

Le code suivant permet :
- de commencer les années en 2005 ;
- d'utiliser des chiffres pour les mois ;
- d'enlever les jours du formulaire ;
- et de mettre en premier les années puis les mois.

 
Sélectionnez
<%= date_select "p", "nom",     :start_year=>2005,
                                :use_month_numbers=>true,
                                :discard_day=>true,
                                :order=>[:year, :month]%>

Ce qui générera

 
Sélectionnez
<input class="12" id="p_nom" name="p[nom]" size="20" type="text" />
<input type="hidden" id="p_nom_3i" name="p[nom(3i)]" value="10" />
<select id="p_nom_1i" name="p[nom(1i)]">
<option value="2005">2005</option>

<option value="2006">2006</option>
<option value="2007" selected="selected">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
<select id="p_nom_2i" name="p[nom(2i)]">
<option value="1">1</option>

<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected="selected">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>

<option value="11">11</option>
<option value="12">12</option>
</select>
V-A-1-a. les options date_select

Les options suivantes sont utilisables dans la balise date_select

 
Sélectionnez
:start_year=>1920         #indique de commencer à 1920
:end_year=>2008        #indique de terminer à 2008

:discard_month=>true        #supprime l'affichage des mois et des jours
:discard_day=>true        #supprime l'affichage des jours seulement

:order=>[:day,:month,:year]    #affiche dans l'ordre jours/mois/années

V-A-2. Les mois en français

Une des possibilités offertes par Rails, pour mettre les mois en français est la suivante,
dans le fichier /configuration/environment.rb ajouter ceci :

 
Sélectionnez
Date::MONTHNAMES=[nil,"janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"]

Ce qui va donner les mois en français, attention pour que cette modification soit prise en compte, il faut relancer le serveur.
Nous pouvons faire de même pour les autres langues, l'espéranto par exemple

 
Sélectionnez
Date::MONTHNAMES=[nil,"januaro","februaro","marto","aprilo","majo","junio","julio","augûsto","septembro","oktobro","novembro","decembro"]

V-B. Datetime_select

Ce code rails ajoute les heures aux formulaires dates

 
Sélectionnez
<%= datetime_select :p , :nom %>

En html cela rajoute :

 
Sélectionnez
<select id="p_nom_4i" name="p[nom(4i)]">
<option value="00">00</option>
<option value="01">01</option>

<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>

<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14" selected="selected">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>

<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
 : <select id="p_nom_5i" name="p[nom(5i)]">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>

<option value="03" selected="selected">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>

<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>

<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>

<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>

<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>

<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>

<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>

V-B-1. options datetime

Les options suivantes sont possibles dans datetime

 
Sélectionnez
:discard_hour=>true    #supprime l'affichage des heures et des minutes
:discard_minute=>true    #supprime l'affichage des minutes seulement

:minute_step=>15    #les minutes sont affichées par pas de 15 (00,15,30,45)

VI. Form

La balise form s'ouvre et se ferme comme ceci

 
Sélectionnez
<%= form_tag :controller=>'admin', :action=>'reponse'%>
<%= end_form_tag %>

En html:

 
Sélectionnez
<form action="/admin/reponse" method="post">
</form>

VII. Select

VII-A. Select simple

Dans un select il faut passer un tableau en argument pour générer les balises options

 
Sélectionnez
<%= select :p , :nom,[1,2,3] %>

Ce qui en Html donnera :

 
Sélectionnez
<select id="p_nom" name="p[nom]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select>

Si on veut ne pas afficher la première valeur, on peut mettre un champ blanc

 
Sélectionnez
<%= select :p , :nom,[1,2,3],:include_blank => true %>

VII-B. Table de Hachage

On peut mettre comme paramètre une table de hachage qui permettra de faire un select clé,valeur

 
Sélectionnez
<% tableau_assoc = {
  "Gérard"=>"Beau",
  "Maitre"=>"Pylos",
  1=>2
}%>

<%= select :p , :nom,tableau_assoc%>

Remarquez qu'une table de hachage se différencie dans ses accolades {}, et les tableaux [].
Cela nous donnera le code html suivant :

 
Sélectionnez
<select id="p_nom" name="p[nom]">
<option value="Beau">Gérard</option>
<option value="2">1</option>
<option value="Pylos">Maitre</option></select>

VIII. Conclusion

En conclusion, nous pourrions dire que cela ne va pas forcément faciliter la vie du développeur, tout au plus l'aider dans certaines tâches, à lui de pouvoir choisir sa méthode de travail favorite. Néanmoins, il est agréable de penser que nous ne devrons pas générer ou coder toutes les lignes nécessaires par exemple pour gérer une balise de date, de plus nous pourrons plus facilement récupérer l'information de nos balises.
Si je prends par exemple les deux balises suivantes :
<%= text_field :p , :nom %> ;
<%= text_field :p , :prenom %>.
Il me suffira dans mon contrôleur de récupérer les informations comme ceci
params :p[« nom »]
params :p[« prenom »]
et inversement.

IX. Remerciements

je tiens à remercier Pierre-Baptiste Naigeon(Titoumimi), pour ses précieux conseils.
Ainsi qu'à Emmanuelle ma correctrice orthographique personnelle, et à Julp pour la relecture fastidieuse de ce document.
La plupart des codes ci-dessus sont tirés des livres Pratique de Ruby on rails de E.Sarrion et de Ruby on rails : Vite et efficace,
de Bruce A. Tate et Curt Hibbs.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Ernaelsten Gérard. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.