JSF 2.0: Ajax nativo

Nessa postagem iremos fazer alguns exemplos de utilização da tag <f:ajax /> que é opção nativa para utlizar o ajax na versão 2.0 do JSF.

Bom, vou postando os códigos fonte de cada exemplo e explicando o que cada um faz, ao final posto o bean que utilizei para os testes.
Obs: todos os códigos dos componentes devem estar dentro de um h:form...

Primeiro componente:

Inicialmente eu vou criar um componente, onde eu tenho uma caixinha de texto, e dois botões, um para somar e outro para subtrair um determinado valor da caixinha de texto, assim:

Código:

<h:inputText id="txtNumero" value="#{testeBean.numero}" />
<h:commandButton value="+" actionListener="#{testeBean.somar}">
 <f:ajax render="txtNumero" execute="@this" />
</h:commandButton>
<h:commandButton value="-" actionListener="#{testeBean.subtrair}">
 <f:ajax render="txtNumero" execute="@this" />
</h:commandButton>

Veja que a tag ajax está entre os commandButtons, e usa a propriedade render para renderizar apenas a caixinha de texto, e o execute para executar apenas a ação do commandButton a qual pertence.

Segundo componente:

Este é um dos componentes mais úteis, que é um combo de estados, e quando seleciona o estado, carrega as cidades do estado selecionado.

Código:

<h:selectOneMenu valueChangeListener="#{testeBean.carregarCidades}">
 <f:selectItem itemLabel="Mato Grosso" itemValue="1" />
 <f:selectItem itemLabel="Paraná" itemValue="2" />
 <f:ajax event="change" render="cidades" />
</h:selectOneMenu>

<h:selectOneMenu id="cidades">
 <f:selectItems value="#{testeBean.cidades}" />
</h:selectOneMenu>

Neste código, eu coloquei os estados manualmente (nada impede de ter uma lista de selectItems), a tag f:ajax, utiliza do evento change, e renderiza o combo de cidades, o método valueChangeListener, serve para carregar as cidades conforme o estado selecionado, o codigo do bean pode ser feito completamente diferente, eu fiz dessa forma apenas para mostrar como funciona o evento change do f:ajax.

Terceiro componente:

Este componente é composto de uma caixinha de texto que atualiza um outputText, cada vez que uma letra é digitada.

Código:

<h:inputText value="#{testeBean.palavra}" >
 <f:ajax event="keyup" render="texto"/>
</h:inputText>
<h:outputText id="texto" value=" A palavra é: #{testeBean.palavra}" />

Aqui está mostrando a utilização do evento keyup da tag f:ajax, a cada letra digitada o f:ajax irá renderizar o outputText com o id texto.

Quarto e último componente:

Este é um dos mais simples, apenas mostra como funciona a tag f:ajax em um commandButton, ao clicar no commandButton, é chamado um método que trás a data e hora atual.

Código:

<h:commandButton value="Pegar data e hora" actionListener="#{testeBean.pegarDataHora}" >
 <f:ajax render="dataHora"/>
</h:commandButton>
<h:outputText value="A data e hora é: " />
<h:outputText value="#{testeBean.dataHora}" id="dataHora">
 <f:convertDateTime pattern="dd/MM/yyyy hh:MM:ss" />
</h:outputText>

Em um commandButton, o padrão do evento da tag f:ajax é o click, veja que por isso não especifiquei o event, apenas mando atualizar o meu outputText dataHora.

Agora segue o código do bean, como disse anteriormente, pode ser feito de outra forma, principalmente a parte de carregar as cidades, dessa forma ficou meio estranha, mas é que eu não quis usar o banco de dados nesse exemplo.

TesteBean.java

@Named
@SessionScoped
public class TesteBean implements Serializable {

    private int numero = 0;
    private List<String> cidades;
    private String palavra;
    private Date dataHora;

    public void somar() {
        numero = numero + 1;
    }

    public void subtrair() {
        numero = numero - 1;
    }

    public void carregarCidades(ValueChangeEvent evento) {
        String codigoEstado = evento.getNewValue().toString();
        cidades = new ArrayList<String>();

        if (codigoEstado.equals("1")) {
            cidades.add("Primavera do Leste");
            cidades.add("Cuiabá");
            cidades.add("Santo Antonio do Leste");
        } else if (codigoEstado.equals("2")) {
            cidades.add("Curitiba");
            cidades.add("Palmas");
        }
    }
    
    //gerar getters e setters
}