[PrimeFaces] Mise en page de l'application
Bonjour,
J'essaie de mettre en page mon application web, mais il y a certains points que je ne peux pas expliquer.
En image :
La page d'accueil : http://www.cjoint.com/?0DhpnqUfhJj
Une page de saisie : http://www.cjoint.com/?0DhpoGQOlkP
L'accueil sous firefox : http://www.cjoint.com/?0DhppjuTMon
1. J'aimerais que la taille en largeur, soit toujours comme celle de la page de saisie (que les zones de couleur aillent jusqu'au bout du layout et ne s'arrête pas à la taille du contenu de la page), comme c'est le cas pour l'accueil
2. j'aimerais que le menu soit toujours aligné en haut et non pas aligné au milieu du contenu de la zone centrale
3. Pourquoi, sous Firefox, je ne vois pas l'entête avec le message "PrimeFaces en français" ?
4. Pour le menu "Administration, j'aimerais avoir comme icône, une image placée dans le répertoire "\WebContent\resources\images\icones" de mon application. Mais à la place j'ai le chapeau
5. Quand je consulte le code source d'une page, j'ai plusieurs balise <body> </html> et autre, je ne pense pas que ce soit normal, mais comment faire vu que j'ai un layout et des pages insérées à l'intérieur
Voici le code:
Le layout des pages:
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
47
48
| <?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view locale="#{changeLocale.locale}">
<h:head>
<title>JSF</title>
<h:outputStylesheet library="css" name="styles.css"/>
</h:head>
<h:body style="background-image: url('${request.contextPath}/resources/images/standard.jpg');">
<h:form id="formulaire">
<p:growl id="messages" life="2000" />
<p:layout style="min-width:1000px;min-height:1000px;">
<p:layoutUnit position="center">
<table>
<tr>
<td colspan="2" bgcolor="#ccccff">
<ui:include src="entete.xhtml"/>
</td>
</tr>
<tr>
<td style="width: 100px;">
<ui:include src="menu.xhtml"/>
</td>
<td>
<p:outputPanel id="contenu">
<ui:insert name="contenu" >
<ui:include src="welcome.xhtml"/>
</ui:insert>
</p:outputPanel>
</td>
</tr>
<tr bgcolor="#ffcc66">
<td colspan="2">
<ui:include src="basdepage.xhtml"/>
</td>
</tr>
</table>
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</f:view>
</html> |
Le menu:
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
| <?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<p:megaMenu orientation="vertical" style="margin-top:20px">
<p:menuitem value="#{msg['Accueil']}" url="/secured/modele/welcome.xhtml" icon="ui-icon-home" />
<p:submenu label="#{msg['Administration']}" icon="ui-menuitem-icon.admin">
<p:column>
<p:submenu label="#{msg['Gestion']}">
<p:menuitem value="#{msg['Utilisateurs']}" outcome="/secured/modele/index.xhtml" update="messages" />
<p:menuitem value="#{msg['Employes']}" outcome="/secured/modele/index.xhtml" update="messages" />
<p:menuitem value="#{msg['Dossiers']}" outcome="/secured/modele/index.xhtml" update="messages" />
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="#{msg['Gestion']}" icon="ui-icon-check">
<p:column>
<p:submenu label="#{msg['Gestion']}">
<p:menuitem value="#{msg['Saisie']}" outcome="/secured/modele/index.xhtml" update="messages" />
</p:submenu>
</p:column>
</p:submenu>
<p:menuitem value="#{msg['Deconnexion']}" actionListener="#{menuView.logout}" icon="ui-icon-close" update="messages"/>
</p:megaMenu>
</body>
</html> |
L'entête:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<h2><h:outputText value="#{msg['layout.hautdepage']}"/></h2>
<div align="center">
<p:commandLink value="#{msg['Francais']}" actionListener="#{changeLocale.setFrenchLocale}" update=":formulaire"/>
<p:spacer width="40px"/>
<p:commandLink value="#{msg['Anglais']}" actionListener="#{changeLocale.setEnglishLocale}" update=":formulaire"/>
</div>
</body>
</html> |
La page d'accueil:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="layout.xhtml">
<ui:define name="contenu">
<h:graphicImage value="/resources/images/terre.jpg" />
</ui:define>
</ui:composition>
</html> |
La page de saisie :
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
| <?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="layout.xhtml">
<ui:define name="contenu">
<h2><h:outputText value="#{msg['app.titre2']}"/></h2>
<p:dataTable value="#{form.personnes}" var="personne" emptyMessage="#{msg['form.noData']}">
<f:facet name="header">
#{msg['form.listePersonnes']}
</f:facet>
<p:column>
<f:facet name="header">
#{msg['personnes.headers.id']}
</f:facet>
#{personne.id}
</p:column>
<p:column>
<f:facet name="header">
#{msg['personnes.headers.nom']}
</f:facet>
#{personne.nom}
</p:column>
<p:column>
<f:facet name="header">
#{msg['personnes.headers.prenom']}
</f:facet>
#{personne.prénom}
</p:column>
<p:column>
<f:facet name="header">
#{msg['form.action']}
</f:facet>
<p:commandLink value="Retirer" action="#{form.retirerPersonne}" update=":formulaire:contenu">
<f:setPropertyActionListener target="#{form.personneId}" value="#{personne.id}"/>
</p:commandLink>
</p:column>
</p:dataTable>
</ui:define>
</ui:composition>
</html> |
Qqun peut-il m'aider à mettre cela en place ?
Merci d'avance pour votre aide
