Motivação

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.

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.

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


Listagem 1. Exemplo de uso do commandButton

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.

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

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.

<h:messages
	errorClass="danger"
	infoClass="info"
	warnClass="warn">
</h:messages>
Listagem 3. Exemplo de uso do 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.

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

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.