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.
<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.
<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.
<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.
<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)
