JSF look and feel authentication form

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:

<h:commandButton

, ou encore qu'une

Code:

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

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:

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:

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:

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>

Merci bcp pour ta réponse OButterlin ça ma permis de réaliser à quel point je peux être con parfois :D.
En fait il me manquait les balises

Code:

<h:head></h:head><h:body></h:body>

et il en résultait le comportement précité.

On a souvent tendance à remettre en cause plein de choses établies et ne pas voir le détail qui tue :mouarf: