[débutant] creation Onglets

**Cronycs** · 06/06/2007, 16h04

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

**azerr** · 06/06/2007, 16h11

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 :

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

page="/main.do"

il faut que tu appelle une url du type

Code :

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

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

**AnneB** · 06/06/2007, 16h18

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

**iftolotfi** · 06/06/2007, 17h33

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

**iftolotfi** · 06/06/2007, 17h56

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

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

merci

**azerr** · 06/06/2007, 18h02

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

Angelo

**iftolotfi** · 06/06/2007, 18h12

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

**azerr** · 06/06/2007, 18h27

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 :

Declarer la taglib jsptabcontrol dans la JSP:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
<%@ taglib uri="/WEB-INF/jsptabcontrol.tld" prefix="jsptabcontrol" %>
```
Inclure le CSS qui permet de rendre l'onglet (ul/li)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
<link href="<c:url value='/css/default-jsptabcontrol.css'/>" rel="stylesheet" type="text/css"/>
```
Inclure le Javascript qui gere l'affichage des onglets
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
<script type="text/javascript" src="<c:url value='/js/jsptabcontrol.js'/>"></script>
```

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 :

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

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

**iftolotfi** · 06/06/2007, 18h47

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

**azerr** · 06/06/2007, 19h00

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

**iftolotfi** · 06/06/2007, 20h24

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é

**azerr** · 06/06/2007, 20h31

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

**iftolotfi** · 06/06/2007, 20h46

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

**azerr** · 06/06/2007, 21h17

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

**iftolotfi** · 07/06/2007, 12h01

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

**iftolotfi** · 07/06/2007, 13h07

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

**azerr** · 07/06/2007, 13h35

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 :

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

Pour cela il faut que tu remplaces :

Code :

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

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

par

Code :

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

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