Discussion :

[Lordsephiroth]

Bonjour à tous,

Après quelques temps sur RichFaces, je suis passé dernièrement sur IceFaces pour un nouveau projet, avec son lot de nouveautés et de prises de tête. Nous utilisons la version 1.8.1 des librairies icefaces, icefaces-comps et icefaces-facelets.

Le code de ma page utilise une balise <ui:include> pour utiliser un fichier /WEB-INF/includes/navigation.xhtml chargé de générer les menus et de gérer les tabs :

Code :

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

1
2
3
4
5
6
7
 	<div id="mainMenu" class="mainMenu">
		<ice:menuBar id="mainMenuLeftBar" styleClass="mainMenuLeftBar" orientation="horizontal">
			<ice:menuItem value="Accueil" id="mainMenuLeftAccueil" actionListener="#{DynamicTabsBean.addTab}">
				<f:attribute name="label" value="Accueil" />
				<f:attribute name="target" value="testPage1.xhtml" />
			</ice:menuItem>
			... autres éléments de menu ...

Le mainMenu contient un menuBar aligné à gauche et un à droite, tous deux en float. Aucune importance pour mes présents problèmes.

Chaque lien de menu est censé ouvrir un tab par la fonction addTab du DynamicTabsBean. Le code du bean est :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
public class DynamicTabsBean implements Serializable{
  private static final long serialVersionUID = 8307715360865770347L;
  private List<Tab> tabs = new ArrayList<Tab>();
 
  public DynamicTabsBean(){
    // tab ouvert par défaut
    tabs.add(new Tab("Default", "testPage.xhtml"));
    this.currentTabTarget = "testPage.xhtml";
  }
 
  public void addTab(ActionEvent event){
    String label = (String)event.getComponent().getAttributes().get("label");
    String target = (String)event.getComponent().getAttributes().get("target");
 
    Tab tab = new Tab(label, target);
    tabs.add(tab);
  }
 
  // getters et setters du managed bean
 
  public class Tab{
    private String label;
    private String target;
 
    Tab(){
    }
 
    Tab(String label, String target){
      this.label = label;
      this.target = target;
    }
 
    // getters and setters pour la classe Tab
 
    public void closeTab(ActionEvent event){
      tabs.remove(this);
    }
  }
}

Enfin, le code qui affiche les tabs (toujours dans navigation.xhtml, juste à la suite du premier code ci-dessus) est :

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
	<div id="tabMenu" class="tabMenu">
		<ice:panelTabSet id="tabMenuPanelTabSet" styleClass="tabMenuPanelTabSet" var="tab" value="#{DynamicTabsBean.tabs}">
			<ice:panelTab styleClass="tabMenuPanelTab">
				<f:facet name="label">
					<ice:panelGroup>
						<ice:outputText value="#{tab.label}" />
						<ice:commandButton value="close" actionListener="#{tab.closeTab}" />
					</ice:panelGroup>
				</f:facet>
				<ice:panelGroup>
					<ice:outputText value="#{tab.target}" />
				</ice:panelGroup> 
			</ice:panelTab>
		</ice:panelTabSet>
	</div>
</ice:form>

Ce code est déployé correctement sur le serveur. Lorsque j'affiche la page, un tab est correctement ouvert. Le texte qui s'affiche comme contenu de page est correctement "testPage.xhtml", la valeur par défaut initialisée.

Par contre, le texte du tab s'appelle "Tab 0". J'ai l'impression que <f:facet name="label"> est totalement ignoré.

Lorsque j'appuie sur mon bouton de menu, un tab est correctement ajouté. Le texte "testPage1.html" est également correctement affiché comme contenu. Le tab se nomme quant à lui "Tab 1". A nouveau, <f:facet> semble totalement ignoré.

Je me suis basé sur cette adresse comme exemple d'utilisation de <f:facet> (voir dans "Layout panels" -> "Dynamic Tabset").

Mon second problème est ensuite d'afficher comme contenu du tab la page correspondant au champ "target" de chaque tab. J'ai donc changé

Code :

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

1
2
3
				<ice:panelGroup>
					<ice:outputText value="#{tab.target}" />
				</ice:panelGroup>

par

Code :

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

<ui:include src="pages/#{tab.target}" />

Le déploiement s'effectue correctement, mais une erreur est envoyée immédiatement dès que je tente d'afficher ma page :

Code :

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

java.io.FileNotFoundException: Facelet Not Found: jndi:/localhost/GOC_webgui-0.1-SNAPSHOT/WEB-INF/includes/pages/

Si je comprends bien le message d'erreur, src="pages/#{tab.target}" a généré "pages/" plutôt que "pages/testPage.xhtml". Pourtant quand j'ai simplement affiché en texte brut #{tab.target}, le texte "testPage.xhtml s'était correctement affiché.

Dernier point : j'ai un mal fou à trouver de la documentation indiquant les bonnes pratiques concernant les tabs avec ce framework. Je pense déjà que la gestion des bean managés va être complexe lorsque plusieurs tabs seront ouverts avec un binding sur le même bean. Auriez-vous des trucs et astuces pour réaliser des tabs avec IceFaces ? Je n'ai pas vu un seul exemple d'utilisation qui dépasse l'affichage d'un simple champ texte dans chaque tab en cherchant sur Google. L'exemple le plus complet que j'ai trouvé est celui que j'ai mis en lien... ce qui est quand même très limité...

Merci d'avance si vous avez des indications quant à ces trois points.

Meilleures salutations

[Lordsephiroth]

J'ai déjà trouvé une partie de mes réponses.

Il se trouve que le support des facets a été apporté par IceFaces 1.8.2. Donc ma tentative pour changer le nom du tab par <f:facet> ne pouvait pas aboutir en 1.8.1.

Concernant la documentation, il semble que le panelTabSet est un objet posant de nombreux problèmes, notamment parce qu'il doit être dans un formulaire. Un tab ne peux donc pas contenir de formulaire, à moins de gérer le fait que le formulaire à l'intérieur du tab soit soumis lorsque l'on switch de tab (HTML ne permettant pas les formulaires imbriqués, la totalité est toujours soumise). La gestion de ce cas a rendu l'utilisation de composant très marginale, la documentation n'est donc pas très fournie.

Il semble que la gestion des tabs ait été améliorée avec la version 2 de IceFaces, en permettant la sousmission partielle du formulaire englobant le tab et le contenu du tab à l'aide d'une mécanique nommée "singleSubmit".

Je ne comprends toujours pas la raison de mon second problème. Il risque cependant de tomber puisque le panelTabSet n'est pas utilisable pour du contenu complexe dans la version actuellement utilisée chez nous. Nous allons donc refaire manuellement un système de tab.

Vala, j'espère que ma réponse à ma propre question aidera quelqu'un passant par là