[richfaces] tabPanel dynamique

Version imprimable

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:

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:

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:

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

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

20/04/2009, 08h34
Sniper37

salut,
tu peux définir l'action pour chaque tab, et tu définis la navigation dans le faces-config..
20/04/2009, 10h13
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
20/04/2009, 10h30
Sniper37

yes !!

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

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 ?

21/04/2009, 09h02
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:

<a4j:include/>

la classe:

Code:

org.ajax4jsf.component.html.Include

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:

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

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:

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 ?

30/04/2009, 17h06
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,
03/02/2010, 14h09
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.
03/02/2010, 14h59
PomCompot

Ce n’est tout simplement pas possible

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 :

Citation:

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.

Une solution possible

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:

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:

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:

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.