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