Problème avec <p:TabView>

**mabrouk1987** · 02/10/2012, 22h44

Mon problème c'est que j'ai plusieurs tab mais et sous chaque tab j’insère une page xhtml

TestTab.xhtml

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<?xml version='1.0' encoding='iso-8859-1' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <ui:insert id="titre">
            <title>
                Default Title
            </title>
        </ui:insert>
    </h:head>
    <h:outputStylesheet library="css" name="jsfcrud.css"  />  
    <h:body>
        <ui:insert name="body"/>
        <p:tabView id="tabView" dynamic="true">  
            <p:tab id="tab1" title="Gestion des machines">  
                <p:tabView id="ge">
                    <p:tab id="tab11" title="Liste des équipements" >                           
                        <ui:insert name="tab11"/>
                    </p:tab>
                    <p:tab id="tab12" title="Suivi des équipements"></p:tab>
                </p:tabView>
            </p:tab>
 
            <p:tab id="tab2" title="Activités de maintenance"> 
                <p:tabView id="maintenance">
                    <p:tab id="tab21" title="Corrective">
                        <p:tabView id="corective">
                            <p:tab id="encours" title="En cours"><ui:insert name="cencours"/></p:tab>
                            <p:tab id="archive" title="Archivés"><ui:insert name="carchive"/></p:tab>
                        </p:tabView>
                    </p:tab>
                    <p:tab id="tab22" title="Préventive">
                        <p:tabView id="preventive">
                            <p:tab id="encours" title="En cours"><ui:insert name="pencours"/></p:tab>
                            <p:tab id="archive" title="Archivés"><ui:insert name="parchive"/></p:tab>
                        </p:tabView>
                    </p:tab>
                </p:tabView>
            </p:tab>
 
            <p:tab id="tab3" title="Activités sous traité">  
            </p:tab>
 
            <p:tab id="tab4" title="Equipe de maintenance">  
            </p:tab>
 
            <p:tab id="tab5" title="Logistique">  
            </p:tab>
 
            <p:tab id="tab6" title="Suivi budgétaire">  
            </p:tab>
 
        </p:tabView>
    </h:body>
</html>

page List_machine.xhtml
qui va t-être afficher sous l'onglet Liste des équipements

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
 
<?xml version='1.0' encoding='iso-8859-1' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <ui:insert id="titre">
            <title>
                Default Title
            </title>
        </ui:insert>
    </h:head>
    <h:outputStylesheet library="css" name="jsfcrud.css"  />  
    <h:body>
        <ui:insert name="body"/>
        <p:tabView id="tabView" dynamic="true">  
            <p:tab id="tab1" title="Gestion des machines">  
                <p:tabView id="ge">
                    <p:tab id="tab11" title="Liste des équipements" >                           
                        <ui:insert name="tab11"/>
                    </p:tab>
                    <p:tab id="tab12" title="Suivi des équipements"></p:tab>
                </p:tabView>
            </p:tab>
 
            <p:tab id="tab2" title="Activités de maintenance"> 
                <p:tabView id="maintenance">
                    <p:tab id="tab21" title="Corrective">
                        <p:tabView id="corective">
                            <p:tab id="encours" title="En cours"><ui:insert name="cencours"/></p:tab>
                            <p:tab id="archive" title="Archivés"><ui:insert name="carchive"/></p:tab>
                        </p:tabView>
                    </p:tab>
                    <p:tab id="tab22" title="Préventive">
                        <p:tabView id="preventive">
                            <p:tab id="encours" title="En cours"><ui:insert name="pencours"/></p:tab>
                            <p:tab id="archive" title="Archivés"><ui:insert name="parchive"/></p:tab>
                        </p:tabView>
                    </p:tab>
                </p:tabView>
            </p:tab>
 
            <p:tab id="tab3" title="Activités sous traité">  
            </p:tab>
 
            <p:tab id="tab4" title="Equipe de maintenance">  
            </p:tab>
 
            <p:tab id="tab5" title="Logistique">  
            </p:tab>
 
            <p:tab id="tab6" title="Suivi budgétaire">  
            </p:tab>
 
        </p:tabView>
    </h:body>
</html>

page List_maintenanceprev qui va être afficher sous l'onglet Activités de maintenance/en cours

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<?xml version='1.0' encoding='iso-8859-1' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui" >
    <h:head>
        <title>Liste TACHE DE MAINTENANCE PREVENTIVE</title>
    </h:head>
 
    <h:outputStylesheet library="css" name="jsfcrud.css"  />  
 
   <ui:composition template="/pages_new/TestTabView.xhtml">
 
 
        <ui:insert name="pencours" >
 
 
 
    <h:form id="form">
        <p:dataTable id="table" var="item" value="#{maintenancepreventiveController.items}"
                     paginator="true" rows="10"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                     rowsPerPageTemplate="5,10,15"
                     style="padding:50px 50px;font-size: 80%">
 
 
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_numerodmp}"/>
                </f:facet>
                <h:outputText value="#{item.numerodmp}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_titre}"/>
                </f:facet>
                <h:outputText value="#{item.titre}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_etatmp}"/>
                </f:facet>
                <h:outputText value="#{item.etatmp}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_datedebut}"/>
                </f:facet>
                <h:outputText value="#{item.datedebut}">
                    <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
                </h:outputText>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_heuredebut}"/>
                </f:facet>
                <h:outputText value="#{item.heuredebut}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_datefin}"/>
                </f:facet>
                <h:outputText value="#{item.datefin}">
                    <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
                </h:outputText>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_duree}"/>
                </f:facet>
                <h:outputText value="#{item.duree}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_periodiciter}"/>
                </f:facet>
                <h:outputText value="#{item.periodiciter}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_chaque}"/>
                </f:facet>
                <h:outputText value="#{item.chaque}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_jour}"/>
                </f:facet>
                <h:outputText value="#{item.jour}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="#{bundle.ListMaintenancepreventiveTitle_codemachine}"/>
                </f:facet>
                <h:outputText value="#{item.codemachine}"/>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Opération"/>
                </f:facet>
                <p:commandButton value="Supprimer" action="#{maintenancepreventiveController.destroy}" update=":form"/>
            </p:column>
        </p:dataTable>
    </h:form>
    <h:form id="add">
        <p:commandButton ajax="false" icon="ui-icon-plusthick" value="Ajouter Maintenance Préventive" action="#{maintenancepreventiveController.prepareCreate}"/>
    </h:form>
 
        </ui:insert>
   </ui:composition>
</html>

si j'exécute la page List_machine.xhtml sauf cette page sera affiché sous l'onglet gestion des machines, quand je clic sur l'onglet Activités de maintenance n'y'as rien.

**Mishulyna** · 06/10/2012, 19h30

Bonjour,

Je ne pense pas que l'on peut "imbriquer" les TabView comme tu l'as fait:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
        
<p:tabView id="tabView" dynamic="true">  
            <p:tab id="tab1" title="Gestion des machines">  
                <p:tabView id="ge">
                    <p:tab id="tab11" title="Liste des équipements" >                           
                        <ui:insert name="tab11"/>
                    </p:tab>
                    <p:tab id="tab12" title="Suivi des équipements"></p:tab>
                </p:tabView>
            </p:tab>
...

</p:tabView>

En attendant une meilleure réponse: essaie un peu avec tes tabs 11, 12 et 21, 22 en dehors des "ge" et "maintenance". Et change de thème si par hasard tu as choisi "Aristo" car ça bogue le TabView (j'ai eu la blague - Display problem with tabs of tabView).

Problème avec <p:TabView>

JSF Java

Vue hybride

Discussions similaires

Partager

Partager