[débutant] creation Onglets

Version imprimable

04/06/2007, 14h08
iftolotfi

[débutant] creation Onglets

salut,
je veux utiliser les onglets dans mon application j ai cherché des exemples mes j ai pas trouvé grand chose, est ce que quelqu un à un lien qui explique de manière claire l utilisation des onglets dans Struts.
Merci
04/06/2007, 14h19
Cronycs

Est-ce que tu pourrais être plus explicite ? Dans quoi voudrais tu créer des Onglets ? Pour faire un menu ?
04/06/2007, 14h28
iftolotfi

oui pour faire un menu dans une page donnée, j utilise jdk 1.4 et struts 1.2
04/06/2007, 14h32
Cronycs

En sachant que Struts est une technologie Web donc figé, je pense que les "onglets" sont plus un effet de style qu'autre chose. Ca se passerait donc plutôt du coté du css que de struts. Mais peut-être que je me trompe :oops:
04/06/2007, 14h49
azur_34

J'ai une application struts avec des onglets et en effet j'utilise les css
04/06/2007, 16h40
iftolotfi

y as t il un tuto ou un exemple ou je peux m en inspirer
05/06/2007, 09h10
azerr

Bonjour
si tu es interesse tu as le projet JSPTabControl
http://jsptabcontrol.sourceforge.net/ qui est une taglib qui te perrmet de gerer des onglets dans une JSP.

Angelo
05/06/2007, 09h16
OButterlin

Tu as également Struts-Layout, très complet
(champs date, onglet, liste paginée etc...)

http://struts.application-servers.com/

A+
05/06/2007, 16h45
AnneB

Dans l'appli que je suis en train de réaliser, il y a des onglets. Pour mettre ca en place, je me suis largement inspirée de ce site :
http://demo.raibledesigns.com/struts-menu/

Pour faire des trucs comme ca il faut que tu télécharge le struts-menu.tld....
J'ai aussi fait des onglets "dynamiques", c'est à dire que mes onglets varient en fonction de l'utilisateur et pour ca j'ai du utiliser la struts-menu-el.tld (à télécharger aussi)

Bon courage :)

Anne

merci pour vos reponses

j ai essayé de faire ça
http://demo.raibledesigns.com/struts...abs.jsp?People

la page s affiche bien avec les onglets mes lorsque je klick sur le lien les onglets disparessent et la page s affiche toute seule!!!

voila mon fichier meu-configue.xml
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <?xml version="1.0" encoding="UTF-8"?> <MenuConfig> <Displayers> <Displayer name="TabbedMenu" type="net.sf.navigator.displayer.TabbedMenuDisplayer"/> </Displayers> <Menus> <Menu name="Test1" title="Menu1" description="Todos Menu" page="/main.do"/> <Menu name="Test2" title="Menu2" description="Todos Menu" page="creationProfils.do/> </Menus> </MenuConfig>

06/06/2007, 00h29
Mister Nono

On peut faire de très beaux onglets en XHTML et CSS et éventuellement Javascript. ;)
06/06/2007, 02h24
azerr

Suite a la remarque de Mister Nono
JSPTabControl permet de generer le code HTML des onglets avec des ul/li => http://jsptabcontrol.sourceforge.net...per-guide.html.

Le parametrage des onglets (images, border,...) se fait uniquement avec des CSS. JSPTabcontrol te permet de :

1. gerer le rendu de tes onglets avec des CSS.
2. gerer la localisation des onglets (avec Struts ou non)
3. selectionner un onglet depuis le serveur (action Struts par exemple)
4. gerer des etats sur tes onglets comme erreur, lecture seule, invisible,... cote serveur ou client (javascript)
5. selectionner un onglet cote serveur
6. garde l'onglet selectionne apres un post.

Angelo
06/06/2007, 08h09
AlexisG

Je vais peut être faire une reponse a l'ouest mais il y a le tag <TabbedPanel /> qui fonctionne bien avec le theme 'ajax'.
06/06/2007, 09h35
Mister Nono

Citation:

Envoyé par azerr

Suite a la remarque de Mister Nono
JSPTabControl permet de generer le code HTML des onglets avec des ul/li => http://jsptabcontrol.sourceforge.net...per-guide.html.

...

Cela peut-être intéressant effectivement.

Mais c'est encore l'ajoût et l'apprentissage d'une bibliothèque pour faire quelque chose qui est quand même simple à réaliser, et quand on réalise un projet on prend en compte le coût horaire et le rapport (complexité / résultat).

Merci pour l'information. ;)
06/06/2007, 09h49
AnneB
Citation:

Envoyé par iftolotfi

la page s affiche bien avec les onglets mes lorsque je klick sur le lien les onglets disparessent et la page s affiche toute seule!!!

tu as mis ca dans les jsp sur lesquelles sont redirigées tes actions?
Code:

1 2 3 4 5 6 7 8 <div> <menu:useMenuDisplayer name="TabbedMenu"> <ul class="menuList"> <menu:displayMenu name="Test1"/> <menu:displayMenu name="Test2"/> </ul> </menu:useMenuDisplayer> </div>
06/06/2007, 10h34
azerr

Bonjour

Citation:

Mais c'est encore l'ajoût et l'apprentissage d'une bibliothèque pour faire quelque chose qui est quand même simple à réaliser, et quand on réalise un projet on prend en compte le coût horaire et le rapport (complexité / résultat).

JSPtabcontrol n'est pas très compliqué à mettre en place. De plus tu as une distribution jsptabcontrol-usecases-1.0-b2 qui te répertorie tous les cas d'utilisation de JSPTabControl.

Angelo

ce que je veux lors d un click sur un ongler afficher l page en dessou sans que mes onglet disparessent .
voila ma page jsp :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<%@ taglib uri="http://struts-menu.sf.net/tag" prefix="menu" %>
 
 
 
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Tabbed Menu (with Velocity) Example</title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <link rel="stylesheet" type="text/css" media="screen" href="styles/global.css" />  
    <link rel="stylesheet" type="text/css" media="screen" href="styles/tabs.css" />
 
    <script type="text/javascript" src="styles/tabs.js"></script>
</head>
<body>
 
<div>
<menu:useMenuDisplayer name="TabbedMenu" 
    bundle="org.apache.struts.action.MESSAGE">
    <ul class="menuList">
    <menu:displayMenu name="Test1"/>
    <menu:displayMenu name="Test2"/>
    </ul>
</menu:useMenuDisplayer>
</div>
 
<div id="content" style="width: 60%">
    <h2>CSS Tabs with Submenus</h2>
    <p>
        This example uses a Velocity template to render its HTML. Otherwise,
        it's the same as the <a href="tabbedMenu.jsp?Home">Tabbed Menu Example</a>.
        However, this one is much better (in my opinion) because you have full
        control over the HTML (via Velocity templates) and display logic. 
    </p>
</div>
 
 
</body>
</html>

et mon fichier menu-config.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="UTF-8"?>
<MenuConfig>
    <Displayers>
        <Displayer 	name="TabbedMenu"
  					type="net.sf.navigator.displayer.TabbedMenuDisplayer"/>
    </Displayers>
    <Menus>
		<Menu 	name="Test1" 
				title="Menu1" 
				description="Todos Menu" 
				page="/main.do"/>
				<Menu 	name="Test2" 
				title="Menu2" 
				description="Todos Menu" 
				page="/welcom.do"/>
     </Menus>
 
 
</MenuConfig>

est ce que config="/templates/tabs.html" est obligatoir pour que les lien s affiche dans la même page, enl ajoutant dans

Code:

1
2
<menu:useMenuDisplayer name="TabbedMenu" config="/templates/tabs.html"
    bundle="org.apache.struts.action.MESSAGE">

mes onglets disparessent et j ai à la place des NULL

06/06/2007, 14h30
iftolotfi

mnt c bon j ai les liens qui marchent,

le but de l utilsation des onglets pour moi c la saisie dans un formulaire trés long, donc je veux en clickant sur le premier onglet afficher une partie et puis qlicker sur l autre pour continuer la saisie, la soumission du form peut se faire apartir des deux, je dois avoir une seul action et un seul formBean, est ce que qlq un voix comment le faire
06/06/2007, 14h52
chaminette

C'est un peu tordu ce que tu veux faire .... non?
si tu envois vers la meme actionform ça doit se faire , ce que je ne comprends c'est comment tu veux garder les champs chargés à chaque page en mémoire?
06/06/2007, 14h58
AnneB

Si je comprend bien, tu veux faire un formulaire sur plusieurs onglets que l'utilisateur doit remplir. L'user peut valider la saisie de tous les champs par l'intermédiaire d'un bouton submit "Validation".

Je ne vois qu'une manière de garder les champs saisis : il faut un bouton de soumission "intermédiaire", un bouton "save" par exemple, a la soumission tu passes par ta classe action, tu sauvegarde les champs saisis correspondants aux champs de ton onglet, et tu met ton ActionForm en session. Ainsi tu pourras le récupérer sans soucis apres....

Mais comme dit Chaminette c'est un peu tordu :roll:
06/06/2007, 15h04
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 :)
06/06/2007, 15h11
azerr

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
06/06/2007, 15h18
AnneB

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
06/06/2007, 16h33
iftolotfi

merci pour vos réponses avec tous ces pistes je vais réflaichir un peut et par la suites vous faire savoir mon choix:?
06/06/2007, 16h56
iftolotfi

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
06/06/2007, 17h02
azerr

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

Angelo
06/06/2007, 17h12
iftolotfi

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 :
Declarer la taglib jsptabcontrol dans la JSP:

Code:

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

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

Inclure le Javascript qui gere l'affichage des onglets

Code:

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

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

06/06/2007, 17h47
iftolotfi

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:
06/06/2007, 18h00
azerr

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
06/06/2007, 19h24
iftolotfi

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:
06/06/2007, 19h31
azerr

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
06/06/2007, 19h46
iftolotfi

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:
06/06/2007, 20h17
azerr

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
07/06/2007, 11h01
iftolotfi

ok, merci pour lien justement je cherchais un doc sur ça :D
07/06/2007, 12h07
iftolotfi

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 :

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:

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

07/06/2007, 13h21
iftolotfi

là j ai finis mon style css et ça marche bien, JspTabControl ma vraiment sauvé:P
merci bcp pour ton aide :king:
07/06/2007, 13h41
azerr

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

Angelo