Html vs Rhtml
Par
Ernaelsten Gérard (MaitrePylos)
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.
I. Introduction
I. Balise Input
I-A. Text
I-B. Password
I-C. Hidden
I-D. File
I-E. Radio
I-F. Checkbox
I-G. Image
II. Les boutons
II-A. Button_to
II-B. Submit_tag
II-C. Image_submit_tag
III. Les liens
III-A. Link_to
III-B. link_to_if
III-C. Link_to_unless
III-D. option Link_to
III-E. Mail_to
IV. Date
IV-A. Date_select
IV-A-1. Option Date_Select
IV-A-1-a. les options date_select
IV-A-2. Les mois en français
IV-B. Datetime_select
IV-B-1. options datetime
V. Form
VI. Select
VI-A. Select simple
VI-B. Table de Hachage
VII. Conclusion
VIII. Remerciements
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.
I. 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.
I-A. Text
Voici une version possible de la balise Html
<input id="p_nom" name="p[nom]" size="30" type="text" />
|
Equivalent en Rails
<%= text_field :p , :nom %>
|
Nous pouvons bien entendu ajouter des options Html
<%= text_field :p , :nom , :class=>'grise', :size=>'20' %>
|
ce qui donne en version html
<input class="grise" id="p_nom" name="p[nom]" size="20" type="text" />
|
I-B. Password
Voici une version possible de la balise Html
<input id="p_nom" name="p[nom]" size="30" type="password" />
|
Equivalent en Rails
<%= password_field :p , :nom %>
|
Nous pouvons bien entendu ajouter des options Html
<%= password_field :p , :nom , :class=>'grise', :size=>'20' %>
|
I-C. Hidden
Voici une version possible de la balise Html
<input id="p_nom" name="p[nom]" type="hidden" />
|
Equivalent en Rails
<%= hidden_field :p , :nom %>
|
I-D. File
Voici une version possible de la balise Html
<input id="p_nom" name="p[nom]" size="30" type="file" />
|
Equivalent en Rails
<%= 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écéssaire puisqu'elle est définie par défaut.
<%= form_tag({:action => 'upload'}, {:multipart => true}) %>
<%= file_field_tag :mon_fichier%>
<%= end_form_tag %>
|
I-E. Radio
Voici une version possible de la balise Html
<input id="p_nom_valeur" name="p[nom]" type="radio" value="valeur" />
|
Equivalent en Rails
<%= radio_button :p , :nom,'valeur' %>
|
Ici, nous pouvons remarquer, que nous ajoutons un troisième élément qui est la valeur du bouton radio
I-F. Checkbox
Voici une version possible de la balise Html
<input id="p_nom" name="p[nom]" type="checkbox" value="1" />
|
Equivalent en Rails
<%= 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é
I-G. Image
Voici une version possible de la balise Html
<img alt="Image" src="/images/vers/mon/image/image.jpg" />
|
Equivalent en Rails
<%= image_tag 'vers/mon/image/image.jpg'%>
|
II. Les boutons
Il existe plusieurs types de boutons, qui permettent beaucoup plus de souplesse que les boutons types en html.
II-A. Button_to
Ce bouton permet de faire une redirection vers une action
<%= 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:
<form method="post" action="/admin/index/valeur_id" class="button-to"><div><input type="submit" value="suivant" /></div></form>
|
II-B. Submit_tag
Ce bouton sert pour la validation de données et doit donc se trouver entre les balises <Form>.
<%= submit_tag 'titreBouton'%>
|
Code généré en Html:
<input name="commit" type="submit" value="titreBouton" />
|
II-C. Image_submit_tag
Voici un bouton de validation sous forme d'image
<%= image_submit_tag 'rails.png'%>
|
Code généré en Html:
<input src="/images/rails.png?1175454202" type="image" />
|
Si vous voulez changer l'image d'un image_submit_tag lors d'un click de la souris ?
<%= 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 !
III. Les liens
Les liens sont partie intégrante des pages Web, on va voir ici toute la puissance de Ruby on rails
III-A. Link_to
Link_to permet d'effectuer un lien vers une autre page
<%= link_to 'vers ma page','/vers/ma/page'%>
|
Ce qui donne en Html:
<a href="/vers/ma/page">vers ma page</a>
|
Mais nous pourrions diriger vers une action plutôt qu'une page
<%= link_to 'Vers Action', :controller=>'admin', :action=>'index', :id=>'4' %>
|
Ce qui donne en html
<a href="/admin/index/4">Vers Action</a>
|
Nous pourrions pousser le raisonnement encore plus loin
<%= 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 :
<a href="/admin/delete/4" class="gris" onclick="return confirm('êtes vous sûr ?');">Supprimer</a>
|
III-B. link_to_if
Link_to_if affichera le lien à la seule condition, que la @variable soit vraie
<%= link_to_if @variable , 'vers ma page','vers/ma/page' %>
|
III-C. Link_to_unless
Dans ce cas le lien sera affiché, à la condition que @variable soit faux
<%= link_to_unless @variable , 'vers ma page','/vers/ma/page'%>
|
III-D. option Link_to
Dans les deux derniers cas, nous pouvons bien sûr étoffer les liens
<%= link_to_if @variable, 'Supprimer', {:controller=>'admin',
:action=>'delete',
:id=>'4'},
{:class=>'gris',
:confirm=>'êtes vous sûr ?'}
%>
|
III-E. Mail_to
Mail_to permet de créer un lien direct vers le client mail avec une certaine information déjà établie
<%= 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 :
<a encoding="javascript" href="mailto:moi@domaine.dvp?cc=unAutre%40email.com&body=un%20message...&subject=formulaire%20rails">Contact par mail</a>
|
IV. Date
Rails permet une génération rapide de formulaires de date
IV-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 :
<%= 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:
<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>
|
IV-A-1. Option Date_Select
Avoir un champ avec les années voulues
<%= date_select :p , :nom, :start_year=>1900 %>
|
Aura pour conséquence le select suivant
<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
<%= date_select "p", "nom", :start_year=>2005,
:use_month_numbers=>true,
:discard_day=>true,
:order=>[:year, :month]%>
|
Ce qui générera
<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>
|
IV-A-1-a. les options date_select
Les options suivantes sont utilisables dans la balise date_select