Discussion :

[christo976]

Bonjour,

Je suis débutant dans le développement web et je m'intéresse à JSF et richfaces.

J'aimerai faire un rich:panel comme ci-dessous....

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
<rich:tabPanel>
 
       <rich:tab label="tab 1">
		<ui:include src="panelInsideTab.xhtml">
			<param name="param1" value="hello"/>
		</ui:include>
	</rich:tab>
 
	<rich:tab label="tab 2">
		<ui:include src="panelInsideTab.xhtml">
			<param name="param2" value="goodbye"/>
		</ui:include>
	</rich:tab>
 
</rich:tabPanel>

...néanmoins les onglets doivent être ajoutés dynamiquement d'après les données contenues dans un backing-bean.
J'ai essayé de boucler à l'aide du tag <ui:repeat>, malheureusement j'obtiens l'erreur suivante : "tab panel has no enabled or rendered tabs!"
Apparemment il n'apprécie pas trop que le tag <ui:repeat> se mette entre le tabPanel et les tabs.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<rich:tabPanel>
       <ui:repeat value="#{tabBean.list}" var="tab">
	       <rich:tab label="#{tab.name}">
		       <ui:include src="panelInsideTab.xhtml">
			       <param name="param1" value="#{tab.message}"/>
			</ui:include>
		</rich:tab>		
	</ui:repeat>
</rich:tabPanel>

J'ai ensuite essayé de déléguer la construction du tabPanel dans une classe Java...

Code :

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

1
2
 
<rich:tabPanel binding="#{tabBean.tabPanel}"/>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
public HtmlTabPanel getTabPanel() {
 
	tabPanel = new HtmlTabPanel();
 
	HtmlTab tab = null;
	for (Person p : getList()) {
		tab = new HtmlTab();
		tab.setLabel(p.getName());			
 
		tabPanel.getChildren().add(tab);
	}		
	return tabPanel;		
}

Dans ce cas, les onglets se construisent correctement. Par contre, je ne sais pas comment inclure une page dans ces onglets....

Est-ce que quelqu'un aurait une piste ?...ou une meilleure approche ?

Merci d'avance pour votre aide.

Christo

[Sniper37]

salut,
tu peux définir l'action pour chaque tab, et tu définis la navigation dans le faces-config..

[christo976]

Salut,

Je te remercie pour ta réponse.....qui soulève d'autres questions :

1) Je vois effectivement comment définir la navigation entre les écrans dans le faces-config.xml. Par contre, comment faire ça pour des onglets ?

2) Où dois-je définir l'action ? Est-ce à l'aide de la méthode setAction() de la classe HtmlTab ?

Merci beaucoup !!!!!!

Chris

[Sniper37]

yes !!

[christo976]

Si tu pouvais m'en dire un peu plus, ce serait sympa :-)

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
public HtmlTabPanel getTabPanel() {
		
	tabPanel = new HtmlTabPanel();
		
	HtmlTab tab = null;
	for (Person p : getList()) {
		tab = new HtmlTab();
		tab.setLabel(p.getName());			
			
		tabPanel.getChildren().add(tab);

                tab.getChildren().add(................);
	}		
	return tabPanel;		
}

Comment inclure une autre page xhtml dans l'onglet ?

[Sniper37]

Je parlais de la navigation, lorsque tu clique sur action, tu peux naviguer sur une autre page..c'est le même principe que action dans un commandButton.
pour ajouter une page xhtml, essaye d'utiliser

Code :

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

<a4j:include/>

la classe:

Code :

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

org.ajax4jsf.component.html.Include

[christo976]

Bien, on s'approche :-)

Malheureusement j'ai encore un souci.... rien ne s'affiche dans l'onglet lorsque j'utilise le code ci dessous

Code :

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

<rich:tabPanel binding="#{tabBean.tabPanel}"/>

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
 
public HtmlTabPanel getTabPanel() {
 
	FacesContext context = FacesContext.getCurrentInstance();
	Application application = context.getApplication();
 
	tabPanel = (HtmlTabPanel)application.createComponent(HtmlTabPanel.COMPONENT_TYPE);
 
	HtmlTab tab = (HtmlTab)application.createComponent(HtmlTab.COMPONENT_TYPE);
	tab.setLabel("Tab 1");
 
	Include include = (Include)application.createComponent(Include.COMPONENT_TYPE);
	include.setViewId("panelInsideTab.xhtml");
 
        tab.getChildren().add(include);
	tabPanel.getChildren().add(tab);
 
	return tabPanel;
}

alors que le code ci-dessous fonctionne parfaitement :

Code :

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

1
2
3
4
5
6
 
<rich:tabPanel>
	<rich:tab label="test">
		<a4j:include viewId="panelInsideTab.xhtml"/>
	</rich:tab>
</rich:tabPanel>

J'ai trouvé plusieurs personnes qui ont signalé le même problème sur d'autres forums...mais aucune solution.

Quelqu'un aurait-il une idée ?

[nemeur]

Bonjour,
Par contre moi j'ai éssaié de faire un tabPanel dynamque de la même façon que vous avez procéder mais j'ai eu l'erreur suivante :

erreur :
tab panel has no enabled or rendered tabs!

avez vous une idée ?
Merci,

[PomCompot]

@christo976

As-tu trouvé la solution à ton problème. Je suis dans le même cas que toi et ne parviens pas à utiliser le Include côté Bean.

[PomCompot]

Bon, et bien j’ai trouvé la solution moi-même. Enfin, la solution, c’est beaucoup dire, plutôt l’explication du dysfonctionnement. Sur la page de la documentation de a4j:include, je cite :

6.6.3. Creating the Component Dynamically Using Java

This component cannot be created dynamically.

Je cherche un contournement, peut être en suivant cette voie.

[PomCompot]

Pour ceux que ça intéresse, voilà une solution possible pour contourner le problème.

Dans le xhtml, on utilise c:foreach (xmlns:c="http://java.sun.com/jstl/core") :

Code :

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

1
2
3
4
5
6
7
8
9
<a:outputPanel id="tabPanel">
    <rich:tabPanel selectedTab="#{applicationController.selectedTab}">
        <c:forEach items="#{applicationController.openedTabs}" var="currentTab">
            <rich:tab id="#{currentTab.id}" name="#{currentTab.name}" label="#{currentTab.label}">
                <a:include viewId="#{currentTab.viewId}" />
            </rich:tab>
        </c:forEach>
     </rich:tabPanel>
</a:outputPanel>

Ensuite, dans le backing bean, on a une liste d’onglets ouverts et on peut en ajouter via une méthode :

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
private void openUniqueTab(String tabName, String tabLabel, String tabContentId, String tabContentViewId, boolean setSelected) {
    if (tabName == null) {
        return;
    }
    PopulatedTab newTab = searchTab(tabName);
 
    if (newTab == null) {
        newTab = new PopulatedTab();
        newTab.setId(tabName);
        newTab.setName(tabName);
        newTab.setLabel(tabLabel);
        newTab.setViewId(tabContentViewId);
 
        openedTabs.add(newTab);    
        selectedTab = tabName;
    } else {
        if (selectedTab == null || !selectedTab.equals(tabName)) {
            selectedTab = tabName;
        }
    }
}

Et la classe PopulatedTab :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
import org.richfaces.component.html.HtmlTab;
 
public class PopulatedTab extends HtmlTab {
    private String viewId;
 
    public String getViewId() {
        return viewId;
    }
 
    public void setViewId(String viewId) {
        this.viewId = viewId;
    }
}

Voilà, c’est un contournement pas forcément génial mais qui fonctionne.