Integrando JSF e CSS

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

Por que eu devo ler este artigo: 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.

Figura 1. 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:

Tabela 01. TagLib’s usadas nesse artigo
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.

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:

Listagem 1. Exemplo de Rule-Set 

        seletor {

                propriedade:  valor;
        
        }

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.

Tabela 02.
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;}

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.

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

Listagem 1. Conteúdo do arquivo estilos.css 

                *{

                    /*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
                
                }

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.

Listagem 2. 

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

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.

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

Referências

Artigos relacionados