Mise en page formulaire du login

**doons** · 30/03/2015, 10h52

Bonjour,

Je me lance dans javaee / jsf et j'ai une question de mise en page.
Dans l'image transmise, j'ai 2 points obscurs :

1. Pourquoi y'a-t-il un espace entre mes composants et le bord du panelGrid, sur la droite ?
2. Comment est-ce que je peux centrer le bouton "Connexion" ?

Voici ma page :

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
<?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>Connexion</title>
		<h:outputStylesheet library="css" name="styles.css" />
	</h:head>
	<body>
		<h:form id="connexionForm">
			<p:growl id="growl" life="2000" />
			<p:panelGrid columns="1" style="margin-bottom:10px" layout="grid">
				<f:facet name="header">
					<h:outputText class="titreLogin" value="Connexion" />
				</f:facet>
 
				<h:outputText value="Nom d'utilisateur :" />
				<p:inputText id="login" value="#{loginForm.login}" />
 
				<h:outputText value="Mot de passe :" />
				<p:password id="password" value="#{loginForm.password}" />
 
				<p:panelGrid columns="2" style="margin-bottom:15px" styleClass="panelSansBordure">
					<p:selectBooleanCheckbox value="#{loginForm.isRemembered}" />
					<h:outputText value="Se souvenir de moi" />
				</p:panelGrid>
				<p:commandButton value="Connexion" id="doLogin" update="growl" actionListener="loginForm.anthenticate}" styleClass="ui-priority-primary" />
			</p:panelGrid>
 
			<p:commandLink id="forgetLogin" update="growl"
				actionListener="#{loginForm.forgetLoginData}">
				<h:outputText class="lien" value="Login ou mon mot de passe oublié" />
			</p:commandLink>
		</h:form>
	</body>
</f:view>
</html>

Et la feuille de style :

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
/* 
Document   : style
Created on : 30.03.2015
Author     : auth
Description:
Purpose of the stylesheet follows.
*/
 
/* Formulaires */
#formulaire {
   position:absolute;
   top:50%;
   left:50%;
   width:1400px;
   height:1000px;
   margin-left:-700px; /* -largeur/2 */
   margin-top:-500px; /* -hauteur/2 */
   background:red;
}
 
#connexionForm {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 350px;
	height: 200px;
	margin-left: -175px; /* -largeur/2 */
	margin-top: -100px; /* -hauteur/2 */
	/*background: red;*/
	font-color: #82b4ec;
}
 
/* Panel */
.panelSansBordure tr, .panelSansBordure td {
	border: none;
}
 
/* Tableau */
.columnCenter {
	text-align: center;
}
 
.titreLogin {
	font-size: 25px;
	font-weight: bold;
	text-align: right;
}
 
.lien {
	 font-size: 14px;
	 text-decoration: none;
}

Qqun a-t-il réponse à mes questions ?
Merci d'avance pour votre aide
Nom : Login.png
Affichages : 983
Taille : 17,6 Ko

**OButterlin** · 30/03/2015, 12h10

1) Ta classe de style précise que le formulaire fait 350px de large

2) As-tu essayé

Code :

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

1
2
3
4
 
<h:panelGroup style="text-align:center">
   <h:commandButton ... />
</h:panelGroup>

**doons** · 01/04/2015, 08h16

Merci pour ta réponse :-)

1. Ha oui

et en définissant l'attribut size, j'ai pu mettre la même taille à mes inputText

2. Oui mais ça ne marche pas non plus

**OButterlin** · 01/04/2015, 08h50

Alors, tu as le choix entre

Code :

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

1
2
3
4
 
<center>
    <p:commandLink .../>
</center>

et

Code :

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

1
2
3
4
 
<div style="text-align:center">
    <p:commandLink .../>
</div>

(j'ai testé les 2 ce coup-ci

)

**doons** · 01/04/2015, 10h10

Ca déplace bien le bouton mais il n'est pas centré par rapport à mon panel, ni même à l'écran.
Pourtant il est censé être centré sur l'écran, non ?
Nom : Login.png
Affichages : 919
Taille : 11,1 Ko

Nom : Login.png
Affichages : 919
Taille : 11,1 Ko

**OButterlin** · 01/04/2015, 10h35

Il est centré par rapport à son conteneur, donc ici, le <form>

**doons** · 02/04/2015, 08h02

Ok, mais y'a encore un petit truc que je ne comprends pas...
Pour résoudre le problème j'ai fais ceci :

- ajouter la balise DIV pour le formulaire complet
- ajouter des panelGrid autour des textes (nom d'utilisateur, mot de passe) pour qu'il ne soit pas centré (je ne comprend pas pourquoi ça marche comme ça !!, une idée ?)

Ce qui m'étonne, c'est que le formulaire ne change pas de place, que je mette le DIV à son niveau ou juste au niveau du bouton. Par contre le bouton change de place, pourquoi ?

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
<?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>Connexion</title>
		<h:outputStylesheet library="css" name="styles.css" />
	</h:head>
	<body>
		<h:form id="connexionForm">
			<p:growl id="growl" life="2000" />
			<div style="text-align: center">
				<p:panelGrid columns="1" style="margin-bottom:15px" layout="grid">
					<f:facet name="header">
						<h:outputText class="titreLogin" value="Connexion" />
					</f:facet>
					<p:panelGrid columns="2" styleClass="panelSansBordure">						
                                       <h:outputText value="Nom d'utilisateur :" />
					</p:panelGrid>					
                                       <p:inputText id="login" value="#{connexionForm.login}" size="25" />

					<p:panelGrid columns="2" styleClass="panelSansBordure">						
                                        <h:outputText value="Mot de passe :" />
					</p:panelGrid>					
                                        <p:password id="password" value="#{connexionForm.password}" size="25" />

					<p:panelGrid columns="2" style="margin-bottom:15px"
						styleClass="panelSansBordure">
						<p:selectBooleanCheckbox value="#{connexionForm.isRemembered}" />
						<h:outputText value="Se souvenir de moi" />
					</p:panelGrid>
					<p:commandButton value="Connexion" id="doLogin" update="growl"
						actionListener="connexionForm.anthenticate}"
						styleClass="ui-icon-login" />
				</p:panelGrid>
			</div>			<p:commandLink id="forgetLogin" update="growl"
				actionListener="#{connexionForm.forgetLoginData}">
				<h:outputText class="lien" value="Login ou mot de passe oublié" />
			</p:commandLink>
		</h:form>
	</body>
</f:view>
</html>

Nom : Login.png
Affichages : 850
Taille : 10,2 Ko

**OButterlin** · 02/04/2015, 11h45

Comme tu n'as pas défini de largeur pour ton formulaire, il prend la largeur de son contenu; le centrage n'a pas d'effet du coup.
Si tu veux centrer dans la page, tu peux mettre un attribut style="width:100%" au niveau de ton formulaire et ça devrait fonctionner.

**doons** · 02/04/2015, 14h42

Très bien

Merci beaucoup pour ton aide

Mise en page formulaire du login

JSF Java

Discussions similaires

Partager

Partager