Layout basico de uma pagina JSF

Front-end
#1

Boa tarde a todos.

Estou desenvolvendo meu primeiro sistema web java EE com primefaces.

Como todo começo é difícil não foi diferente para mim. Minha principal duvida pode parecer boba e muito básica, mas não deixa de ser uma questão.

Abaixo está um mockup do layout que pretendo fazer:

Bom, o que estou querendo entender é como posso fazer um footer e um header de forma decente, ou seja, já criei meu template utilizando facelets e delimitando um tamanho para eles (CSS), mas como posso criá-los e utilizar componentes jsf ou primefaces em cima deles?

Não sei se fui claro, mas qualquer duvida posso ser mais objetivo.

Agradeço desde já a ajuda e atenção de todos.

Obrigado!

#2

Aqui tem um modelo de layout: Aplicação Web Completa Tomcat JSF Primefaces JPA Hibernate.

A diferença é que é top, left e center. Mas já pode servir de idéia para você.

Utiliza facelets.

#3

Amigo antes de fazer perguntas no forum pesquise no google, o primeiro link da pesquisa do google apontou para esse excelente tutorial que vai te explicar muito bem, e vai de mostrar como inserir uma pagina dentro de outra que é o que voce que

http://www.universidadejava.com.br/docs/jsf20-templatefacelets

pesquise naum espere que toda vez uma maluco qualquer num forum de te a resposta de mao beijada.

boa sorte

#4

Jakefrog,

ótimo blog, meus parabéns!

Estou usando facelets, na verdade a minha duvida mesmo e como posso criar um layout e um footer para por em minha pagina.

Devo criar imagens por editores, tais como gimp e inkspace e colocar como background das áreas delimitadas da minha pagina?

Obrigado pela ajuda…

#5

CristianPalmaSola10,

creio que você não deva ter entendido minha pergunta.

Eu já criei meu template, só quero saber como posso implementar um visual bacana no mesmo

Obrigado.

#6

Para ser mais claro:

Meu template.xhtml

<?xml version='1.0' encoding='UTF-8' ?>

[code] <h:head>




Controle de Apontamento de Horas no JIRA
</h:head>

<h:body>

    <div id="all">
        <div id="top">
            <ui:insert name="topo"></ui:insert>
        </div>

        <div id="content">
            <ui:insert name="conteudo"></ui:insert>
            <div id="clear"></div>
        </div>

        <div id="bottom">
            <ui:insert name="footer"></ui:insert>
        </div>
    </div>
</h:body>
[/code]

Minha pagina de login.xhtml

[code]

<ui:composition template="/Templates/template.xhtml">
    <ui:define name="conteudo">
        <h:form id="telaLogin">
            <p:panel header="Bem Vindo!">
                <p:messages id="messages" showDetail="true" autoUpdate="true"/>  
                <h:panelGrid columns="2" id="loginGrid">                     
                    <h:outputLabel for="it1" value="Login:*" />  
                    <p:inputText id="it1" label="Login" value="#{loginMB.login}" required="true"/>
                    <h:outputLabel for="pwd1" value="Senha:*" />  
                    <p:password id="pwd1" label="Senha" value="#{loginMB.senha}" required="true"/>  
                </h:panelGrid>  
                <p:commandButton id="botaoSalvar" actionListener="#{loginMB.doLogin()}" value="Entrar" style="font-size: 14px"/> 
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>
[/code]

Minha classe css que organiza a renderização no navegador:

[code]html, body {
height: 100%;
}

#all {
min-height: 100%;

}

  • html #all {
    height: 100%; /* hack para IE6 que trata height como min-height */
    }

/Empurra o rodapé para o bottom/
#all {
position: relative;

}

#bottom {
position: absolute;
bottom: 0;
height: 30px;

width: 100%;

}

#top{
height: 60px;
background-color: #036fab;
width: 100%;
}
/-------------------------------/
#content {
padding-bottom: 40px;
margin-top: 10px;
}[/code]

#7

Na verdade acho que gostaria de saber como aplicar um design ao meu header e footer.

#8

Ninguém pode me dar uma força?

#9