Integrando JSF e CSS – Aplicando estilos ao dataTable
Nesse artigo, aprenderemos como aplicar folhas de estilos a um dataTable.
Integrando JSF e CSS – Aplicando estilos ao 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.
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.
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)
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo