JSF: conheça os principais componentes

Veja neste artigo como funcionam alguns dos componentes mais utilizados em projetos Java Server Faces.

Uma das grandes praticidades de se utilizar o JavaServer Faces é que ele já provê diversos componentes predefinidos, que aumentam a produtividade e evitam que precisemos dedicar muito tempo à criação de elementos comumente empregados em aplicações web.

Neste artigo serão demonstrados alguns dos componentes mais utilizados e essenciais em projetos que fazem uso de tal tecnologia.

Saiba mais sobre como utilizar o JSF em seus projetos

Namespace dos componentes

Antes de explorarmos os componentes do JSF, é importante entender que para cada grupo de componentes há um namespace padrão, que deve ser referenciado na tag emcode <html> da página em que serão utilizados. Esses namespaces são necessários para que o JSF possa renderizar corretamente os componentes, validando sua sintaxe e garantindo seu funcionamento. Abaixo temos um exemplo disso:


<html
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

Nesse código estamos definindo dois alias (apelidos) para referenciar os namespaces. O primeiro alias é o “h”, e fará referência a todos os componentes presentes no namespace de final “/jsf/html”. O segundo alias é o “f”, e fará referência ao namespace de final “/jsf/core”. A partir disso, esses apelidos serão utilizados como prefixo na adição dos componentes JSF, como em h:commandButton.

h:commandButton

Diferentemente de um botão HTML simples, o botão do JSF traz alguns atributos muito úteis, conforme expõe o código da Listagem 1.

Listagem 1. Exemplo de uso do commandButton 

<h:commandButton value="Meu Botão"
                 action="#{devmediaMB.teste}"
                 actionListener="#{devmediaMB.testeVoid}"
                 styleClass="estiloBotao"
                 disabled="true"  />

Nessa listagem declaramos os atributos mais importantes que podem ser utilizados em um botão. Primeiramente, temos o value, que representa o texto que será mostrado no botão. Esse valor pode ser estático ou vir de uma classe Java, um ManagedBean. Em seguida, temos os atributos action e actionListener, que referenciam ações/métodos no lado do servidor (no ManagedBean). O primeiro pode redirecionar o fluxo para uma outra página. Para isso, basta que o retorno do método seja uma string contendo o nome da página destino. Já o segundo realiza alguma ação, mas sem nenhum retorno (void).

Outro atributo comumente encontrado em praticamente todos os componentes JSF é o styleClass, que faz referência a uma classe presente em um arquivo CSS. Por fim, o atributo disabled permite ou não ao usuário clicar no botão. No caso da Listagem 1, o usuário não conseguirá clicar no botão, pois ele está desabilitado.

É válido ressaltar que todos os atributos podem possuir valores dinâmicos, que são carregados através da Expression Language. Assim, você pode, por exemplo, condicionar a habilitação do botão de acordo com uma lógica presente em um método do seu ManagedBean, como no código abaixo:


        disabled="#{devmediaMB.podeVerBotao}"

h:inputText

Esse componente tem por função mostrar valores ao usuário e permitir a edição deles através de um campo de texto. Na Listagem 2 temos um exemplo de uso no qual adicionamos um campo para entrada de um nome em algum formulário.

Listagem 2. Exemplo de uso do inputText 

<h:inputText
	value="#{devmediaMB.nomeCompleto}"
	maxlength="150"
	required="true"
	requiredMessage="O Nome é obrigatório" />

Nesse código, o atributo value representa o conteúdo do campo e geralmente está associado a uma propriedade de alguma classe Java. Assim, quando o usuário resolver inserir algum valor nesse input, a propriedade na classe Java também será atualizada. Já o maxLength representa a quantidade máxima de caracteres que podem ser inseridos nesse campo (nesse caso, 150).

Os atributos required e requiredMessage, por sua vez, funcionam em conjunto. O primeiro especifica se o campo é ou não obrigatório, e o segundo indica qual mensagem será exibida caso ele não seja preenchido. A mensagem, nesse caso, é apresentada em um componente próprio do JSF, que será apresentado a seguir.

h:messages

Esse componente mostra as mensagens do contexto JSF, que podem vir, por exemplo, do atributo requiredMessage, mencionado no tópico anterior. Vejamos um exemplo de uso na Listagem 3.

Listagem 3. Exemplo de uso do messages 

<h:messages
	errorClass="danger"
	infoClass="info"
	warnClass="warn">
</h:messages>

Os atributos errorClass, infoClass e warnClass, representam as classes CSS que devem ser utilizadas quando determinado tipo de mensagem for exibido no navegador (erro, informação e alerta, respectivamente). Esse componente captura todas as mensagens e as renderiza no HTML final da página. Sem ele as mensagens seriam exibidas apenas no console do servidor.

f:ajax

Esse componente faz com que uma requisição, que antes realizava o carregamento de toda a página, torne-se assíncrono, passando a utilizar Ajax e carregar apenas o trecho do documento que realmente precisa ser atualizado. Na Listagem 4 temos um exemplo de uso.

Listagem 4. Exemplo de uso do ajax 

<h:commandButton value="Meu Botão"
                 action="#{devmediaMB.teste}"
                 actionListener="#{devmediaMB.testeVoid}"
                 styleClass="estiloBotao"
                 disabled="true">
	<f:ajax execute="@this" render="@form"/>
</h:commandButton>

Nesse exemplo utilizamos o botão da Listagem 1 e dentro dele colocamos o componente f:ajax. Através do atributo execute, dizemos ao Ajax qual componente deve ser processado. Nesse caso, usamos o @this, pois apenas o botão deverá ser processado. Já o atributo render especifica qual ou quais componentes deverão ser atualizados quando a requisição Ajax finalizar. Nesse caso, usamos o @form. Assim, todo o formulário será atualizado. Uma dica: Em ambos os atributos você poderia especificar o ID do componente a ser processado e/ou atualizado ao final da requisição.

Um exemplo muito comum do uso de Ajax pode ser visto na consulta de CEP. O usuário digita o CEP e clica em buscar. Em seguida, internamente todo o endereço é carregado em um bean e ao final da requisição Ajax o formulário é atualizado com o endereço esperado.

Curso relacionado: JSF (JavaServer Faces)

Artigos relacionados