Integrando JSF e CSS

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (6)  (0)

Neste pequeno artigo, iremos estudar alguns detalhes básicos da formatação da camada de visualização do JSF (Java Server Faces), pois iremos entender como aplicar folhas de estilos CSS (Cascading Style Sheets) em códigos com os renderizadores html do JSF...

 

Felizmente, nós da comunidade Java, nos últimos anos temos sido presenteados com excelentes soluções para implementação do padrão MVC (Model View Cotroller), dentre essas soluções, podemos citar os framework’s: JSF, Struts, WebWork e Spring MVC cada um, com suas peculiaridades, fornecem com maestria, recursos que atendem às camadas específicas do próprio MVC.

 

Neste pequeno artigo, iremos estudar alguns detalhes básicos da formatação da camada de visualização do JSF (Java Server Faces), pois iremos entender como aplicar folhas de estilos CSS (Cascading Style Sheets) em códigos com os renderizadores html do JSF, é importante que você veja nessa dobradinha, uma verdadeira oportunidade para maximizar a produtividade em seu projeto web, pois, como é mostrado na figura 01, através das folhas de estilos, ganhamos uma melhor organização e reusabilidade das definições visuais do projeto.   

 

mpijsfcssfig01.JPG

Figura 01. Exemplo de reusabilidade de um arquivo CSS.

 

Um pouco de JSF

Se você está lendo esse artigo, é porque talvez já tenha alguma familiaridade inicial com o JSF, portanto, verá que estamos usando, algumas taglib’s dos pacotes html e core, como mostrado na tabela 01:

 

Pacote

Tag

Função

Core

<f:view>  </f:view>

Container para todas as  tags core e tags de ações customizadas do JSF.

HTML

<h:form>  </h:form>

Renderiza um elemento do tipo formulário, equivalente a própria tag <form> do HTML.

<h:outputText/>

Usado para renderizar uma saída de texto simples em HTML, equivalente a tag <label> do HTML.

<h:inputText/>

Renderiza um elemento INPUT do tipo TEXT

<h:commandButton/>

Renderiza um elemento INPUT do tipo BUTTON que executará uma ação quando receber o click do usuário.

Tabela 01.  TagLib’s usadas nesse artigo.

 

Um pouco de CSS

Para que você melhor entenda nosso exemplo, vamos fazer um breve passeio sobre o funcionamento do CSS, primeiro, lembre-se que essa tecnologia é uma linguagem de estilos, usada para descrever a apresentação de um documento padrão  web, escrito em uma linguagem de marcação como HTML, XHTML, ou XML, fazendo com que tais documentos web ganhem formatos visuais mais elegantes, reusáveis e  sistêmicos.

 

O principal mecanismo de funcionamento do CSS, são as Rules-Sets, que definem os possíveis estilos  de um conteúdo.

 

Uma Rule-Set,  é  composta um seletor  e um bloco de declaração entre um par de  chaves {....},  ambos representados  conforme a sintaxe da listagem 01:

 

seletor {

        propriedade:  valor;

}

Listagem 01 – Exemplo de Rule-Set

 

Tipos de seletores CSS

Conforme mostra a Tabela 02, existem várias formas de especificar esses seletores, cada um, tem sua importância e aplicação, não é obrigatório o uso de todos esses seletores, portanto, atente para quando será mais indicado o uso de cada tipo de seletor.

 

Tipo de Seletor

Descrição

Sintaxe

Elemento

Especifica o nome de um elemento HTML que receberá o estilo e questão.

elemento {

    Bloco de declaração;

}

Elementos Múltiplos

Define o nome de vários elementos HTML que receberão as informações de estilo.

elemento1,elemento2 {

   Bloco de declaração;

}

Universal

Através de um asterisco, determina que  todos os elementos de um documento receberão as definições.

* {

   Bloco de declaração;

}

Elementos adjacentes

Seleciona um elemento somente quando estiver imediatamente após o outro.

elemento1+elemento2{

   Bloco de declaração;

}

Elementos-filho

Elementos contidos em outros elementos

elemento1>elemento2{

   Bloco de declaração;

}

Classes

Será definido no atributo CLASS de um elemento HTML. Para isso ocorrer, basta criar um CLASS nas definições de estilo, e depois associar essa classe a um elemento.

.nome da classe {

     Bloco de declaração;

}

ID

Deve ser semelhante ao atributo ID de um elemento HTML,  para isso, basta em um elemento HTML, colocar seu ID como mesmo nome do elemento CSS. 

#ID do elemento {

     Bloco de declaração;

}

Tabela 2.

 

Aplicação Exemplo

Agora, criaremos um projeto WEB, onde conterá uma página JSF, e um arquivo CSS devidamente distribuídos conforme mostra a figura 02.

 

mpijsfcssfig02.JPG 

Figura 02 – Estrutura de Projeto e o local do arquivo CSS.

 

Como você pode observar, dentro do diretório css, há um arquivo chamado estilos.css, nele, conforme mostra a listagem 02, temos as definições de folhas de estilos que iremos usar em nosso código JSF.

 

*{

    /*Define  que todos os elementos da página, ficarão em negrito e com a fonte arial */

    font-weight: bold;

    font-family: arial;

    /*Define a tamanho da fonte para todos os elementos */

    font-size: 10px;

}

 

 

.edit {

    /*Define a borda do elemento, com um efeito de baixo-relevo menor que o padrão */

    border: 1px inset;

    /*Especifica a cor cinza, como pano de fundo do elemento */

    background-color: #D3D3D3;

    /*Especifica como preta a  cor da fonte do elemento */

    color: #000000;

}

 

 

.botoes {

    /*Especifica a cor chocolate, como pano de fundo do elemento */

    background-color: #D2691E;

    /*Especifica como preta a cor da fonte do elemento */

    color: #FFFFFF;

    /*Define a borda do elemento, com um efeito de alto-relevo menor que o padrão */

    border: 1px outset;

}

 

.rotulos {

    /*Especifica preta a cor da fonte do elemento */

    color: #000000;

}

 

 

legend{

    /*Define a tamanho da fonte para a legenda do FieldSet */

    font-size: 12px

}

Listagem 01 -  Conteúdo do arquivo estilos.css

 

Como você observou, na listagem 01, temos  vários seletores do tipo classe,  que serão referenciados no atributo styleClass, das tags JSF, dessa forma, estaremos vinculando as definições de estilos, aos elementos pertencentes à página web do projeto,  portanto conforme você viu acima na figura 02, precisamos em nosso exemplo de um arquivo chamado exemploFormulario.jsp, que contém o pequeno exemplo de código JSF trabalhando com CSS.

 

<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

 

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Formulário JSF com CSS</title>

        <!--Chamada ao arquivo CSS -->

        <link rel="StyleSheet" type="text/css" href="css/estilos.css" media="screen" >

    </head>

    <body>

        <f:view>

            <h:form>

                <fieldset>

                    <legend>Dados</legend>

                    <!--Tag JSF, com o atributo styleClass referenciado o seletor CSS específico  -->                   

                    <h:outputText value="Nome:" styleClass="rotulos"/><br>

                    <h:inputText id="edtNome" value="" styleClass="edit" size="60" /><br>

                    <h:outputText value="RG:" styleClass="rotulos"/><br>

                    <h:inputText id="edtRG" value="" styleClass="edit" size="20" /><br>

                    <h:outputText value="CPF:" styleClass="rotulos"/><br>

                    <h:inputText id="edtCPF" value="" styleClass="edit" size="30" /><br>

                    <h:outputText value="E-mail:" styleClass="rotulos"/><br>

                    <h:inputText id="edtEmail" value="" styleClass="edit" size="50" /><br><br>

                    <hr>

                    <h:commandButton value="Gravar" type="submit" styleClass="botoes"/>

                    <h:commandButton value="Limpar" type="reset" styleClass="botoes"/>

                </fieldset>

                <br>

            </h:form>

        </f:view>

    </body>

</html>

Listagem 02.

 

Perfeito, se tudo foi feito corretamente, e principalmente, seus arquivos web.xml e faces-config.xml estejam bem configurados, rode seu projeto pelo seu container (estou usando o TomCat 5.5.17)  e você terá uma página semelhante ao mostrado na figura 03, devidamente formatada visualmente pelo arquivo estilos.css.

 

mpijsfcssfig03.JPG

Figura 03.  Tela gerada pelo formulário JSF com CSS.

 

Conclusões

Neste pequeno artigo, estudamos o uso da tecnologia CSS  em projetos com o framework JSF, portanto, focamos o básico dessa integração,  claro, que suas possibilidades de aplicação  são muito maiores, portanto, em nosso próximo artigo sobre esse assunto, será abordado  o uso de folhas de estilos, em tags dataTables do JSF.

 

Até a Próxima.

 

Referências

SACRAMENTO, Wendell Miranda,  Artigo JavaServer Faces a primeira vista

http://www.devmedia.com.br/articles/viewcomp.asp?comp=4394&hl=JSF

 

Excelente site sobre CSS e WebStandards

http://www.maujor.com/

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?