Html vs Rhtml

Par Ernaelsten Gérard (MaitrePylos)

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

Version PDF (Miroir) Version hors-ligne (Miroir)

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
VI. Remerciements

I. Introduction

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

I. Balise Input

Nous allons passer en revue la plupart des balise 'Input'.

I-A. Text

Voici une version possible de la balise Html


<input id="p_nom" name="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="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="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="nom" size="30" type="file" />

Equivalent en Rails


<%= file_field :p , :nom %>

I-E. Radio

Voici une version possible de la balise Html


<input id="p_nom_valeur" name="nom" type="radio" value="valeur" />

Equivalent en Rails


<%= radio_button :p , :nom,'valeur' %>

Ici, nous pouvons remarquer, que nous ajoutons un troisième éléments 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 type en html.

II-A. Button_to

Ce button permet de faire un 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ôlleur/action/id voulu.
Attention, ce bouton ne foncttione pas pour la validation des formulaires
.
Code générer 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érer 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érer en Html:


<input src="/images/rails.png?1175454202" type="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'éfectuer 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'un 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 raisonement 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ôlleur '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 conditon, 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 certaine information déja é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&amp;body=un%20message...&amp;subject=formulaire%20rails">Contact par mail</a>

IV. Date

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

IV-A. Date_select

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


<%= date_select :p , :nom %>

Remarquer l'attribut name, c'est cet élément qui nous permettras 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 champs 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 premiers 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


:start_year=>1920 		#indique de commencer à 1920
:stop_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

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

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


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 pris en compte, il faut relancer le serveur.
Nous pouvons faire de même pour les autres langues, espéranto par exemple


Date::MONTHNAMES=[nil,"januaro","februaro","marto","aprilo","majo","junio","julio","augusto","septembro","oktobro","novembro","decembro"]

IV-B. Datetime_select

Ce code rails ajoute les heures aux formulaires dates


<%= datetime_select :p , :nom %>

En html cela rajoute:


<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>

IV-B-1. options datetime

Les options suivantes sont possible dans datetime


: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és par pas de 15 (00,15,30,45)

V. Form

La balise form s'ouvre et se ferme comme ceci


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

En html:


<form action="/admin/reponse" method="post">
</form>

VI. Select

Dans un select il faut passer un tableau en argument pour générer les balise option

VI-A. Select simple


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

Ce qui en Html donneras :


<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 valeurs on peut mettre un champ blanc



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

VI-B. Table de Hachage

On peut mettre comme parametre un table de hachage qui permettras de faire un select clé ,valeur



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

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

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



Gérard
1
Maitre

VI. Remerciements

je tiens à remercier Pierre-Baptiste Naigeon(Titoumimi), pour ses précieux conseils avisé.
La plupart des codes ci_dessus sont tirées 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.

Version PDF (Miroir) Version hors-ligne (Miroir)

Copyright © . 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.