Layout basico de uma pagina JSF

24 de agosto de 2012 7 respostas

manolo 24 de agosto de 2012

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!

7 Respostas

Hebert_Coelho 24 de ago. de 2012

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.

CristianPalmaSola10 24 de ago. de 2012

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

manolo 24 de ago. de 2012

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…

manolo 24 de ago. de 2012

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.

manolo 24 de ago. de 2012

Para ser mais claro:

Meu template.xhtml

xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">

<h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="resources/css/cssTemplate.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/loginLayout.css" rel="stylesheet" type="text/css" />
        <link rel="icon" href="https://lab.accurate.com.br/request/s/300/1/_/images/icons/favicon.png" type="image/gif"/>
        <title>Controle de Apontamento de Horas no JIRA</title>
    </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>

</html>

Minha pagina de login.xhtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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">

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

</html>

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

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;
}

manolo 24 de ago. de 2012

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

manolo 27 de ago. de 2012

Ninguém pode me dar uma força?

Criado 24 de agosto de 2012

Ultima resposta 27 de ago. de 2012

Respostas 7

Participantes 3

7 Respostas

Topicos relacionados