Discussion :

[Azeerty]

Bonjour

Voila je débute sur Ror et j'ai tenté de réaliser ma première appli, une todo liste, tout c'est bien passé mais maintenant j'aurais aimé ajouter une gestion de note ( un champ texte et une date de création ).

J'ai créé une nouvelle table et généré les fichiers sans problème mais maintenant j'aimerai afficher mes 2 pages list.rhtml sur la même page, dans 2 onglets différents.

J'ai trouvé sur ce forum comment réaliser les onglets en js le problème étant maintenant de les remplir avec les fichiers list.rhtml.

Avec chacune des applis séparés aucun problème yield faisait tout mais la j'ai un problème je ne sais comment remplir mes onglets avec les fichiers list.rhtml

J'ai trouvé une solution mais celle ci ne me convient pas:
-Dans mon fichier layouts/todo.rhtml je definit le premier onglet tel quel:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  <TABLE>
      <TR>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs" ONCLICK="TabClick(0);"><NOBR>Todo</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs"><NOBR><%= link_to 'Note','http://localhost:3000/note' %></NOBR></TD>
        <TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">   
      </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">     
         <DIV id="Content" name="Content"><%= yield %></DIV>
         <DIV id="Content" name="Content"></DIV>
      </TD>
      </TR>
  </TABLE>

-Et dans layout/note.rhtml je refais un gros copier/coller du code mais cette fois-ci en changeant la place du yield et du lien:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  <TABLE>
      <TR>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs"><NOBR><%= link_to 'Todo','http://localhost:3000/todo' %></NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs" ONCLICK="TabClick(1);"><NOBR>Note</NOBR></TD>
        <TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">   
      </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">     
         <DIV id="Content" name="Content"></DIV>
         <DIV id="Content" name="Content"><%= yield %></DIV>
      </TD>
      </TR>
  </TABLE>

Il n'y aurait pas moyen d'éviter cela ?

P.S: désolé pour la longueur du message mais s'il manque des infos n'hesitez pas à demander.

[Ertai]

Un layout est ce qui va encadrer ton contenu.
Dans ton cas, le plus simple est de créer un layout unique que tu vas appliquer a tes 2 vues.

Pour ceci, il suffit d'ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

layout "ton_layout"

dans tes controllers (notes_controller et todos_controller)

Sinon 2 petites choses rapides : "Copier/Coller" est quelque chose qui ne correspond pas à la philosophie DRY de Rails. Donc de manière générale, si tu viens un moment a un autre a faire un copier/coller, dis-toi qu'une autre solution existe

La 2ème, le paramètre id dans une page HTML doit etre unique...

[Azeerty]

Tout d'abord merci de ton aide !!

Je savais que le copier/coller n'etait pas une bonne chose mais je ne savais pas comment faire autrement

Le layout marche très bien j'ai seulement un problème concernant l'identification de la méthode:

En fait j'aimerai que la methode list de note apparaisse dans le 1er onglet et que la list de todo apparaisse dans la seconde mais je ne sais pas comment identifier la page/méthode sur laquelle je suis afin de faire un test et afficher uniquement le bon ?

Pour l'id c'est un copier/coller malencontreux

[Ertai]

Différentes méthodes sont possibles pour ton système d'onglet.
Une d'elle consiste a définir un id d'onglet dans le controlleur. En fonction de cet Id, tu sais quel est l'onglet actif.

Mais apparemment, ici tu utilise un petit javascript pour changer d'onglet. C'est donc ce javascript qui via 2 "replace_html" va te modifier le lien et le contenu non?

[Azeerty]

En fait je vois pas bien comment utiliser le replace_html

Car ce qui va afficher mes 2 listes ca sera yield et en fait je ne sais pas comment faire pour que dans le cas du 1er onglet (todo.list) j'ai un code de cette forme la:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
         <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs" ONCLICK="TabClick(0);"><NOBR>Todo</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs"><NOBR><%= link_to 'Note','http://localhost:3000/note' %></NOBR></TD>
 
....
 
         <DIV id="Content" name="Content"><%= yield %></DIV>
         <DIV id="Content" name="Content"></DIV>

Et dans le cas du 2ème onglet (note.list) j'ai quelque chose de cette forme la:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
         <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs" "><NOBR><%= link_to 'Note','http://localhost:3000/todo' %></NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs"ONCLICK="TabClick(1);><NOBR>Note</NOBR></TD>
 
....
 
         <DIV id="Content" name="Content"></DIV>
         <DIV id="Content" name="Content"><%= yield %></DIV>

Je pensais donc faire un simple:

<% if action=='note' %>
then mon code pour la partie 'note'
else mon code pour la partie 'todo'

Malheureusement je ne sais pas comment savoir que l'action appelée est note


Merci pour ton aide

[Azeerty]

Bon je n'ai pas eu le temps de beaucoup bosser la dessus et donc ca n'avance pas

Sinon je pensais à autre chose, factoiser le maximum de code et afficher le reste grâce à un render.

J'avoue que je suis un peu perdu avec cette histoire d'onglets

Merci pour votre aide

[Côme]

Bonjour,

J'ai trouvé et utilise une façon de faire intéressante pour les onglet sur le Net :

Dans les layouts des différents contrôleurs, je met simplement la partie variable d'un layout plus global (ici application.rhtml) :

controleur1.rhtml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<% content_for :menu do %>
  <ul id="tabnav">
    <li class=active><%= link_to "Menu1", :controller => 'controleur1' %></li>
    <li><%= link_to "Menu2", :controller => 'controleur2' %></li>
    <li><%= link_to "Menu3", :controller => 'controleur3' %></li>
  </ul>
<% end %>
 
<%= render :file => 'layouts/application'%>

controleur2.rhtml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<% content_for :menu do %>
  <ul id="tabnav">
    <li><%= link_to "Menu1", :controller => 'controleur1' %></li>
    <li class=active><%= link_to "Menu2", :controller => 'controleur2' %></li>
    <li><%= link_to "Menu3", :controller => 'controleur3' %></li>
  </ul>
<% end %>
 
<%= render :file => 'layouts/application'%>

controleur3.rhtml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<% content_for :menu do %>
  <ul id="tabnav">
    <li><%= link_to "Menu1", :controller => 'controleur1' %></li>
    <li><%= link_to "Menu2", :controller => 'controleur2' %></li>
    <li class=active><%= link_to "Menu3", :controller => 'controleur3' %></li>
  </ul>
<% end %>
 
<%= render :file => 'layouts/application'%>

Et dans le layout plus global, je met :

application.rhtml (extrait du div des onglets) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
...
<div id="menu">
  <%= (menu=yield :menu) ? menu : render(:partial => 'shared/menu') %>
</div>
...

Le "yield :menu" est ainsi remplacé par la valeur spécifiée par le "content_for" des layout spécifiques dans le layout global. Ca permet de respecter le DRY (Don't Repeat Yourself).

Le "shared/menu" ci dessus pointe simplement vers une représentation des onglets par défaut, par exemple où aucun onglet n'est actif.

Côme

[Azeerty]

Ca marche nickel

Merci beaucoup, ce fut dur mais j'ai réussi grâce à toi