[PrimeFaces] Mise en page de l'application

**doons** · 07/04/2015, 15h16

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 :

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
<?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 :

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
<?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 :

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
<?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 :

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

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 :

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
<?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

**monta_amri** · 07/04/2015, 19h06

essayer d'utiliser une template c'est la meilleur solution

**doons** · 08/04/2015, 07h32

c'est bien ce que j'utilise ..... c'est mon fichier layout.xhtml

**monta_amri** · 08/04/2015, 15h13

Envoyé par doons

c'est bien ce que j'utilise ..... c'est mon fichier layout.xhtml

donc essayer de donner un corps pour votre layout avec css

**doons** · 13/04/2015, 08h23

Bonjour,

Désolé de répondre si tard mais j'étais absent ces derniers jours.
Voici mon Template :

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
<?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 colspan="2" style="width: 100px"><ui:include src="menu.xhtml" /></td>
						</tr>
						<tr>
							<td>
								<p:outputPanel id="contenu">
									<ui:insert name="contenu">
										<ui:include src="../divers/accueil.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>

Comment je peux faire pour que le contenu ai toujours la même taille ?
Merci

**monta_amri** · 13/04/2015, 14h01

bonjour ,

je viens de vous créer une simple template avec css et tu dois inclure ça dans votre projet pour avoir une partie présentation bien organisé . et si tu ne sais pas comment intégré la template dans votre projet je peux vous guider et vous aide avec plaisir

contactez moi en privé quand tu lis mon commentaire

[PrimeFaces] Mise en page de l'application

JSF Java

Discussions similaires

Partager

Partager