JSF look and feel authentication form

**jadey** · 18/06/2014, 11h07

Hello les gens,
Je constate (je m'y prend mal sûrement) qu'il m'est impossible d'intégrer des composants jsf sur mon formulaire d'authentification, je veux dire par là que leur rendu visuel n'est pas le même.
Le navigateur, à titre d'exemple, me sert un bouton tout ce qu'il y'a de plus normal en lieu et place de ce que devrait afficher l'utilisation d'un

Code :

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

 <h:commandButton

, ou encore qu'une

Code :

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

<p:dialog

affiche son contenu tout bêtement sur la page.
Je me doute bien que cela doit avoir quelque chose avec le mécanisme d’authentification au vu du fait que le même code copié/collé sur une autre vue marche tout à fait correctement, mais je n'arrive pas comprendre le pourquoi du comment dans un premier temps pour essayer d'y remédier ensuite.
Merci pour toutes vos contributions.

**OButterlin** · 18/06/2014, 11h49

Je n'ai pas de problème avec Primefaces, les styles sont bien pris en compte, j'ai fait comme ceci :
La page de login

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<ui:composition 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" template="/template/template.xhtml">
 
    <ui:define name="content">
        <center>
            <ui:include src="/login-form.xhtml"/>
        </center>
    </ui:define>
 
</ui:composition>

L'include

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
 
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:util="http://java.sun.com/jsf/composite/component"
    xmlns:p="http://primefaces.org/ui">
 
    <p:panel style="width:700px;background:#f9f9f9;padding:0;margin:0">
        <form name="logInForm" action='j_security_check' method='post'>
            <table>
                <col span="1" width="290px"/>
                <col span="1" width="510px"/>
                <tr>
                    <td>
                        <img src="/gerico/resources/images/login.jpg"/>
                    </td>
                    <td>
                        #{msg.login_text}
                        <br/><br/>
                        <table style="font-size:10pt;color:#000000;margin-left:20px">
                            <tr>
                            <td class="label">
                                #{msg.login_user}
                            </td>
                            <td>
                                <p:inputText id="j_username"/>
                            </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    #{msg.login_password}
                                </td>
                                <td>
                                    <p:password id="j_password"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td style="text-align:left;">
                                    <p:button value="#{msg.login_submit}" href="javascript:document.logInForm.submit()"/>
                                    <p:commandButton />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <script>$(document).ready(function(){document.getElementById("j_username").focus()});</script>
        </form>
    </p:panel>
 
</html>

Le 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
46
47
48
49
50
51
 
<?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:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
 
<!-- Head -->
 
<h:head>
    <f:loadBundle var="msg" basename="ApplicationResources" />
    <h:outputStylesheet library="css" name="default.css"/>
    <h:outputScript library="javascript" name="locales.js"/>
    <h:outputScript library="javascript" name="core.js"/>
    <h:outputScript library="javascript" name="inputControls.js"/>
    <script>
    var WEB_ROOT = "#{standardOperationsManager.contextRoot}";
    </script>    
</h:head>
 
<!-- Body -->
 
<h:body>
 
<f:view locale="#{standardOperationsManager.locale}">
 
<p:layout fullPage="true">
 
<!-- TOP -->
 
    <p:layoutUnit id="top" position="north" resizable="false" style="margin:0; padding:0">
        <ui:insert name="top">
        </ui:insert>       
    </p:layoutUnit>
 
 
<!-- CONTENT -->
 
    <p:layoutUnit position="center" id="content" style="padding-left:10px;padding-right:10px;overflow:auto;">
              <ui:insert name="content"/>
    </p:layoutUnit>
 
</p:layout>
 
</f:view>
 
</h:body>
</html>