[débutant] creation Onglets

Ben sinon c'est très facilement faisable avec du javascript, par exemple sur le onclick de l'image qui correspond a ton onglet tu met un code pour rendre invisible la partie du formulaire que tu viens de remplir et rendre visibile la partie suivante du formulaire.
Donc concrètement dans ta page tu aurais deja tout ton formulaire sauf que la deuxieme partie serais dans une <div> avec en style visible:none.

C'est une piste a exploiter :)

Pour eviter de mettre en session ton ActionForm, il faut que tu postes ton formulaire a chaque fois que tu cliques sur un onglet.

Il faut que tu te cree une fonction javascript qui poste ton formulaire au lieu d'appeler une url du type

Code:

---

page="/main.do"

---

il faut que tu appelle une url du type

Code:

---

page="javascript:post('tab1');"

---

la fonction javascript post doit poster le formulaire. tab1 est ton dispatch (indique a l'action que l'onglet tab1 est clique)
Apres avec cette solution tu vas te cogner la problématique de garder l'onglet selectionne apres le post.

Une autre solution (si ton formulaire n'est pas trop gros) est de tout charger dans ta page (les combos utilises dans tous les onglets) et de gerer tes onglet au niveau client.

Apres la derniere solution est d'utiliser AJAX pour le chargement de tes onglets.

Je me repete mais toutes ces problematiques, je les ai eu, et c pour ca que j'ai cree JSPTabControl (en supporte pas AJAX). Si tu as besoin d'aide pour l'integrer je peux t'aider si tu veux.

Bon courage

Angelo

Citation:

---

Envoyé par Cronycs

Ben sinon c'est très facilement faisable avec du javascript, par exemple sur le onclick de l'image qui correspond a ton onglet tu met un code pour rendre invisible la partie du formulaire que tu viens de remplir et rendre visibile la partie suivante du formulaire.
Donc concrètement dans ta page tu aurais deja tout ton formulaire sauf que la deuxieme partie serais dans une <div> avec en style visible:none.

C'est une piste a exploiter :)

---

Tout à fait d'accord, j'y avais pas pensé, mais c'est sûr que c'est beaucoup moins lourd que ma solution de mettre en session l'ActionForm. Et ca permet d'avoir un seul bouton pour le submit du formulaire :D

merci pour vos réponses avec tous ces pistes je vais réflaichir un peut et par la suites vous faire savoir mon choix:?

Citation:

---

Je me repete mais toutes ces problematiques, je les ai eu, et c pour ca que j'ai cree JSPTabControl (en supporte pas AJAX). Si tu as besoin d'aide pour l'integrer je peux t'aider si tu veux.

---

je suis allé sur le site j ai vu un peux ce que peux faire JSPTabControl, j ai télécharger les sources, mnt l explication en anglais n est pas trop claire pour moi :oops:

si t as un exemple avec struts qui repond a mon prb ça va trop m aider :lol:

merci

Tu as telecharger la distribution jsptabcontrol-usecases-1.0-b2 ?
Parce que dans cettt distribution tu as un war +src des exemples.

Angelo

je viens de la telecharger, je vais essayé de la faire marché toute de suite, si t as des indications ils seront les bien venu, merci :aie:

Je et donne les explication pour la JSP utilise dans http://localhost:8080/jsptabcontrol-...?dispatch=load

La JSP utilise est personne.jsp. Voixi brievement son explication pour le premier onglet :

1. Declarer la taglib jsptabcontrol dans la JSP:
   
   Code:

   ---

   <%@ taglib uri="/WEB-INF/jsptabcontrol.tld" prefix="jsptabcontrol" %>

   ---

2. Inclure le CSS qui permet de rendre l'onglet (ul/li)
   
   Code:

   ---

   <link href="<c:url value='/css/default-jsptabcontrol.css'/>" rel="stylesheet" type="text/css"/>

   ---

3. Inclure le Javascript qui gere l'affichage des onglets
   
   Code:

   ---

   <script type="text/javascript" src="<c:url value='/js/jsptabcontrol.js'/>"></script>

   ---

4. A l'intérieur de ton formulaire Struts html:form (tu n'est pas oblige d'utiliser un formulaire, mais pour ton cas c ce que tu veus faire), tu definis tes onglets :
   
   
   Code:

   ---

   1 2 3 4 5 6 7 8 9 10 11

   <jsptabcontrol:tabControl name="PERSONNE_TABCONTROL" width="800px" height="100px" > <jsptabcontrol:tabPage name="IDENTITY_TABPAGE" titleKey="personneForm.tabcontrol.indentity.title" width="100px" > // Contenu de l'onglet 1 avec tes champs Struts </jsptabcontrol:tabPage>   <jsptabcontrol:tabPage name="ADRESS_TABPAGE" titleKey="personneForm.tabcontrol.adress.title" > // Contenu de l'onglet 2 avec tes champs Struts </jsptabcontrol:tabPage> </jsptabcontrol:tabControl>

   ---

Tout ca est decrit sur le site de JSPTabControl. Tu ne comprends rien a ce que j'ai redige? Dis moi ce que tu ne comprends pas et j'essaierai de le reformuler.

La c'est le cas le plus basique, ca te donnera un point depart, mais tu gerer le positionnement de tes onglets cote serveur, gerer des etats,...

Angelo

j ai testé l application et ça marche bien, ça ma fais plaisir, ton exemple est trés bien, je vais essayé de l integrer dans mon application, si j ai un problème je reposterai,
merci bcp:salut:

Ok c'est cool que l'exemple te plaise. N'hesites pas a poster tes questions sur JSPTabControl. Et pourrais tu me dire s'il te plait ce qui ne vas pas dans la documentation de JSPTabControl afin que je l'améliore? Merci.

Angelo

je retire ce que j ai dis avant de faire le poste javais visité http://jsptabcontrol.sourceforge.net...per-guide.html

mes aprés j ai regardé le user guide et c bien expliqué :king:

Ok je suis content que la documentation, te suffise (meme si mon anglais est une catastrophe). Tu as reussi a integrer JSPTabControl dans ton application?

Angelo

oui, j l ai bien integré, mnt il faut changé un petit peux les couleurs pour qu ils correspondent au maquettes que j ai, merci pour ton aide, quand je commencerai le develeppement des formulaire avec onglet je ferai signe bien sur s'il y a des prb, mais ça vas être pour la semaine prochaine :salut:

Ok j'attends tes retours. J'ai utilise JSPTabControl dans mon autre projet Open source gestcv qui est une application de gestion de cv base sur Struts1.x, Hibernate Spring et AJAX.

JSPTabControl a ete aussi utilise dans certains projets que j'ai pu realiser dans ma boite. JSPTabControl couvre la plupart des problematiques de gestion d'onglets.

Je pense que la seule fonctionnalite qui manque aujourd'hui est de pouvoir gerer les onglets en AJAX. Mais la en ce moment je n'ai pas le temps de l'implementer.

En ce qui concerne la personnalisation des onglets (couleurs, images,...) tout se fait en CSS. Et les elements HTML ul/li genere par JSPTabControl sont tres puissants (avant de faire JSPTabControl, je pensais que les ul/li etaient juste utilise pour afficher des listes).

Je me suis inspire de pas mal de documentation concernant la generation d'onglets en pure CSS. Le site http://xhtml.net/xhtmlcss/csstabs est un des sites sur lequel je me suis inspire. Il pourra peut etre t'aider a personnaliser les onglets comme tu le souhaite.

Angelo

ok, merci pour lien justement je cherchais un doc sur ça :D

j ai modiffié le fichier css, il me réste un seul truc que je veux faire et j y arrive pas:

quand je choisis un oglet je veux que la couleur du texte (ex :identy)= #040404 et dans les autres onglets la couleur = #ffffff

je dois les mettre ou!!

Bonjour,
si tu regardes le code genere HTML http://jsptabcontrol.sourceforge.net...per-guide.html le libelle de l'onglet est situe a l'intérieur d'un a qui est a l'interieur d'un li.
Il faut que tu definisses une regles CSS pour chacun d'eux :

1. Onglet non activé => le a est dans un onglet non actif (li)
2. Onglet activé => le a est dans un onglet actif (li.active).

Pour cela il faut que tu remplaces :

Code:

---

1 2 3 4 5

/* A with no text-decoration */ ul.tabControlHeader a { color: #666; text-decoration: none; }

---

par

Code:

---

1 2 3 4 5 6 7 8 9 10

/* A with no text-decoration */ ul.tabControlHeader li a { color:#ffffff; text-decoration: none; }   ul.tabControlHeader li.active a { color:#040404; text-decoration: none; }

---

Je te conseille de regarder le HTML generé pour faire tes CSS.

Angelo

là j ai finis mon style css et ça marche bien, JspTabControl ma vraiment sauvé:P
merci bcp pour ton aide :king:

c cool, je suis content d'avoir pu t'aider.

Angelo