Gilliard Cordeiro

Depois de muito tempo sem escrever estou eu aqui de novo falando de JSF 2.0

Neste post irei mostrar como está ficando o suporte a ajax do JSF 2. Já adianto que está ficando bem parecido com o Ajax4Jsf. Em outros posts eu já havia comentado sobre o suporte a ajax que a nova versão do jsf vai suportar. Mas agora vou falar do componente de tela para facilitar o uso, no outro post falei apenas da API JavaScript, que eu usei nesse exemplo.

O componente <f:ajax> parece o <a4j:support>. Essa nova tag pode ser usada tanto dentro de uma tag específica, tornando-a ajax, assim como fazemos com o <a4j:support> ou pode ser colocada em volta de vários componentes, tornando todos os componentes dentro dela ajax.

Por exemplo:

 
<h:panelGroup id="panelGroupX">
...
</h:panelGroup>
 
<h:outputText id="outputY" value="..."/>
 
<h:commandButton action="...">
    <f:ajax execute="@form" render="panelGroupX outputY"/>
</h:commandButton>

Nesse exemplo temos uma página como já estamos acostumados, até onde o novo componente aparece. Nesse caso a tag <f:ajax> está habilitando ajax no commandButton, e os dois principais atributos da tag são “execute” e “render”. O primeiro serve para informarmos o que será enviado ao servidor na nossa requisição ajax, e o segundo é como o “reRender” do ajax4jsf, e serve para informarmos o que será renderizado novamente. Ambos aceitam uma lista de ids, separados por espaço em branco, ou então os seguintes valores pré-definidos:

• @this – o próprio componente que dispara a requisição ajax
• @form – o formulário que envolve o componente @this
• @all – a view inteira
• @none – nenhum componente

Lembrando novamente que esses valores servem tanto para informar o que vai (execute) e o que volta (render) em uma requisição ajax.

Agora outro exemplo

 
<f:ajax event="onmouseover">
 
    <h:panelGroup id="panelGroupX">
    ...
    </h:panelGroup>
 
    <h:outputText id="outputY" value="..."/>
 
    <h:commandButton action="...">
        <f:ajax event="action" execute="@form" render="panelGroupX outputY"/>
    </h:commandButton>
 
</f:ajax>

Nesse caso a tag <f:ajax> envolve os demais componentes, fazendo com que tudo que está dentro dela passe a disparar eventos ajax. Cada tipo de componente possui um evento padrão que dispara a requisição ajax: um input dispara a requisição quando tem seu valor alterado e um botão ou link quando é clicado, por exemplo.

Porém nesse exemplo eu especifiquei que o evento padrão que executará o ajax para todos os componentes dentro da tag <f:ajax> é o “onmouseover”, mas como mostrado no commandButton eu posso sobrescrever os valores definidos na tag <f:ajax> de fora com uma tag dentro do próprio componente. Eu usei a propriedade “event“, mas poderia ter usado qualquer outra na tag ajax de fora, fornecendo assim um mesmo comportamente default para todos.

No último exemplo usei a propriedade “event“, que como visto no exemplo serve para dizer qual evento executará a requisição ajax. Essa propríedade suporta todos os eventos DOM e ainda “valueChange” para componentes de entrada de dados (ou mais especificamente um EditableValueHolder) e “action” para componentes de ação (um ActionSource).

A tag <f:ajax> suporta ainda os atributos:

• listener – serve para fazer binding com um método que a seguinte assinatura “public void (javax.faces.event.AjaxBehaviorEvent event) throws javax.faces.event.AbortProcessingException“. Com isso podemos executar um código java quando um evento qualquer é disparado.
• disabled – seria o equivalente ao rendered de um componente visual, se o valor definido aqui for true o suporta a ajax fica desabilitado.
• immediate – igual o immediate dos componentes jsf comuns.
• onevent – função js que será chamada quando o evento especificado for executado
• onerror – função js que será chamada quando um erro ocorrer na requisição

Esse post foi curto por falta de tempo, mas novos posts virão em breve (assim espero ). Já estou com um exemplo pronto de implementação de conversation usando o suporte a escopos customizados do JSF 2.0, mas isso vai ter que ficar para o próximo post

Gilliard Cordeiro JSF, JavaEE JavaEE, JavaServer Faces, JSF