Integrando JSF e CSS – Aplicando estilos ao dataTable

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
 (3)  (0)

Nesse artigo, aprenderemos como aplicar folhas de estilos a um dataTable.

 

Continuando o nosso artigo anterior sobre integração de JSF(Java Server Faces),  e CSS(Cascading Style Sheets) em formulários, nesse artigo, iremos aprender, como aplicar folhas de estilos a um dataTable.

 

Só lembrando que dataTable é uma importante tag do pacote html do JSF, sua finalidade é facilitar as iterações em coleções de objetos gerando dessa forma um objeto <table> em HTML com valores vindos dessa coleção.

 

Tomando novamente por base que você já tenha alguma vivência com JSF,  crie um projeto  de aplicação web com suporte a essa tecnologia, nele, teremos uma aplicação que aplica o esquema de uso de CSS conforme mostra a figura 01, note que  teremos um arquivo CSS, que contém quatro elementos chamados: “tabela”, “cabecalho”, “primeiro” e “ultimo”, cada um deles, tem um objetivo de estilo específico, pois observe que o elemento “tabela”, será aplicado na borda da  mesma, o “cabecalho”,  é aplicado nos títulos de cada coluna, já os elementos “primeiro” e “ultimo” trabalham em conjunto de maneira alternada para gerar um efeito de colunas zebradas, onde primeiro teremos uma coluna com fundo verde mais claro e a segunda coluna com o fundo verde mais escuro, não importando o número de colunas que tabela possua.

 

mpjscsfig01.JPG 

Figura 01 – Esquema de integração CSS e dataTable

 

Elementos CSS

Como você observou na figura 01,  teremos um arquivo CSS que será chamado de tabelas.css, e deverá ser inserido em um diretório específico em seu projeto, veja na listagem 01, os elementos que participam desse arquivo CSS, observe que no geral, as definições de estilos, são relacionadas às bordas, cor de fundo,  alinhamento e fontes.

 

/* Definição de estilos para toda a tabela*/

.tabela {

     border: 1px solid green;

}

 

/* Definição de estilos para linha de cabeçalho da tabela*/

.cabecalho {

   text-align: center;

   font: 11px Arial, sans-serif;

   font-weight: bold;

   color: Snow;

   background:  #008B45;

}

 

/* Definição de estilos para coluna */

.primeiro {

   text-align: center;

   font: 11px Arial, sans-serif;

   background: #A2CD5A;

}

 

/* Definição de estilos para coluna */

.ultimo {

   font: 11px Arial, sans-serif;

   text-align: center;

   background: #BCEE68;

}

Listagem 01 - Arquivo CSS.

 

Código JSF para gerar dataTable

Agora, veja na listagem 02, em que nossa página JSP(Java Server Pages) teremos o código comentado JSF(Java Server Faces), contendo a tag dataTable que fará a iteração sobre a lista vinda de uma classe Managed Bean  e construirá uma tabela contendo os campos e os elementos da lista, aplicando os estilos definidos no arquivo tabelas.css.

 

<!--Chamada aos pacotes core e html do JSF -->

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

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

 

<html>

    <head>

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

        <!--Chamada ao arquivo tabelas.css que contém as espeficicação de estilos -->

        <link rel="stylesheet" type="text/css"  href="css/tabelas.css"/>  

        <title>JSP Page</title>

    </head>

    <body>

        <f:view>

            <h1><h:outputText value="Integrando JSF com CSS" /></h1>

            <h:form>

                <!--

                criação de uma tabela HTML através da tag JSF dataTable, note a chamada

                aos elementos CSS através do atributo styleClass (Para o dataTable 

                inteiro),o atributo headerClass (para a linha de cabeçalho) e

                columnClasses(para as colunas da tabela)

                -->       

                <h:dataTable var="objetoCliente" value="#{cli.lista}"      

 styleClass="tabela"   headerClass="cabecalho"  

 columnClasses="ultimo,primeiro" >

 

                    <h:column>

                        <f:facet name="header">

                            <h:outputText value="Nome"/>

                        </f:facet>

                        <h:outputText value="#{objetoCliente.nome}"/>

                    </h:column>

                    <h:column>

                        <f:facet name="header">

                            <h:outputText value="Email"/>

                        </f:facet>

                        <h:outputText value="#{objetoCliente.email}"/>

                    </h:column>

                    <h:column>

                        <f:facet name="header">

                            <h:outputText value="RG"/>

                        </f:facet>

                        <h:outputText value="#{objetoCliente.rg}"/>

                    </h:column>

                    <h:column>

                        <f:facet name="header">

                            <h:outputText value="CPF"/>

                        </f:facet>

                        <h:outputText value="#{objetoCliente.cpf}"/>

                    </h:column>

 

                </h:dataTable>

            </h:form>

        </f:view>

    </body>

</html>

Listagem 02 - Código JSF com a tag dataTable.

 

Com esse código pronto, basta executarmos nossa aplicação e teremos uma página semelhante ao mostrado na figura 01, lembrando que nesse artigo, foi usado o NetBeans 5.5, portanto a aplicação foi executada pelo próprio TomCat 5.5.17 embutido na própria IDE do NetBeans, mas esse trabalho, pode ser feito em qualquer IDE, usando o não o TomCat embutido.

 

mpjscsfig02.JPG 

Figura 02  dataTable gerado ao rodar a aplicação.

 

Só lembrando que para obter esse resultado foi usado uma classe chamada ClienteBean que contém os atributos mostrados na tabela e seus respectivos métodos getters e setters, bem como um Managed Bean chamado ClienteManagedBean, que contém o atributo lista do tipo ArrayList e um método  chamado getList() que retorna a lista devidamente populada pelos elementos desejados.

 

Conclusões

Bem, como você viu, aplicar estilos CSS em paginas JSF é bem simples, entenda, que o objetivo principal desse artigo foi mostrar exatamente a dinâmica dessa integração, claro que dependendo da necessidade você poderá usar muito mais formas de aplicação dessas suas fantásticas tecnologias. Espero que você tenha gostado, e principalmente tenha elucidado algumas dúvidas suas a respeito desse assunto. Até a próxima.

 

Referências

MEDEIROS, Manoel Pimentel - Artigo Integrando JSF e CSS(DevMedia- 2007)

Link: http://www.devmedia.com.br/articles/viewcomp.asp?comp=4577

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