Gilliard Cordeiro

Na última sexta-feira, dia 30/01/2009, realizamos a primeira reunião de 2009 do JUGMS. Foi bem legal, contamos com mais de 100 pessoas. Nosso bate papo teve, além de conversarmos sobre os planos do JUGMS, dois assuntos bem interessantes. O Saulo falou um pouco sobre Análise e Projeto OO em Java, e eu sobre as novidades do JavaEE 6, parando um tempinho a mais na parte de JSF 2.0.

O tempo foi curto, e não deu pra explorar muito o exemplo, mas logo abaixo estou disponibilizando a apresentação (design show de bola ) e o projeto de exemplo usando JSF 2. O exemplo foi feito usando Java 6 e tomcat 6.

Alguns pontos que eu procurei mostrar no exemplo foram:

API AJAX do JSF 2.0

No código do exemplo podemos ver trechos de código como este:

...
<h:commandButton value="Salvar" action="#{estadoBean.salvar}"
onclick="return facesAjaxRequest(this, event, {inputs: 'formEstado', render: 'formEstado:listaEstados'})"/>
...

onde eu criei essa função js chamada facesAjaxRequest que encapsula a simples chamada ajax do jsf 2 que seria assim:

jsf.ajax.request(element, event, options);

Essa funçao recebe o elemento que está disparando a ação (normalmente this), o evento e um mapa de parâmetros. Nesse mapa existem duas entradas: execute e render. No render, especificamos, separados pos espaços em branco, os clientIds dos componentes que serão renderizados novamente, e no execute passamos os valores a serem enviados ao server nessa requisição ajax.

No exemplo usei a função facesAjaxRequest para montar dinamicamente a lista que vai no parâmetro execute, por isso este parâmetro não aparece no primeiro exemplo mostrado. Com essa função, podemos ainda passar o id de qualquer elemento html pelo atributo inputs do mapa que todos os inputs e selects que estiverem abaixo desse elemento será enviado para o server. Na tela de cadastro de cidades fiz uma espécie de ajaxRegion usando essa forma bem simples.

Isso tudo porque o JSF 2 não tem algo tão fácil de usar como os componentes da biblioteca ajax4jsf. A idéia dessa biblioteca de ajax de jsf 2 não é deixar tudo mastigadinho, e sim prover uma infraestrutura básica uso padronizado de js nos componentes, eliminando ou diminuindo assim as incompatibilidades entre as bibliotecas de componentes disponíveis.

Update: Na época do Early Draft Review 2 só tínhamos a api js, mas logo depois saiu a tag estilo ajax4jsf e fiz um outro post sobre isso.

Para quem chegou a usar as funções js do Facelets 1.2, que nem chegou a ser continuado, e que eu mostrei num artigo que escrevi pra MundoJava há muito tempo, o funcionamento é quase o mesmo, só mudando praticamente o nome das funções js e a forma como os dados eram enviados ao server.

Facelets 2

Como já foi dito por aí, agora o JSF já vem por default com o Facelets 2 habilitado, não sendo necessário colocar nenhuma configuração para utilizálo. Inclusive no exemplo disponível para download, nem existe o arquivo faces-config.xml, pois fiz tudo por anotações e o Facelets já vem pronto pra uso. Mas é claro que ele continua sendo utilizado para as regras de navegação.

Criação de componentes com Facelets 2

Com facelets 2, a criação de componentes será algo mais “formal” do que fazemos com facelets hoje em dia. Isso graças a presença de uma definição do componente como esse:

...
<composite:interface name="beanSimples">
    <composite:attribute name="bean" required="true">
        <composite:attribute name="descricao" type="String" required="true"/>
    </composite:attribute>
</composite:interface>
 
<composite:implementation>
    Descrição: <h:inputText id="descricao" value="#{compositeComponent.attrs.bean.descricao}"/>
</composite:implementation>
 
...

O componete possui a interface e a implementação. Na interface podemos colocar os parâmetros que serão recebidos, como no exemplo onde eu preciso passar um objeto que eu chamei de “bean” e esse bean tem que ter um atributo do tipo String chamado descrição.

É possível ainda passar atributos que representam ações, o que não é possível hoje em dia. Além disso não é necessário nenhum arquivo para configurar o nosso componente customizado, tudo é feito através de convenção. Basta colocar o componente em uma pasta dentro do resources do jsf que ele já fica publicado e acessível por uma uri default. Mas se quisermos colocar uma uri específica é só indicar através de um arquivo de configuração.

SelectItems

Finalmente podemos usar o componente f:selectItems sem ter que criar uma lista ou array de SelectItem. Agora podemos usar diretamente nossos objetos do modelo como podemos fazer usando outros componentes de selectItems como o do Seam.

<h:selectOneMenu value="#{cidadeBean.cidade.estado}">
    <f:selectItems value="#{estadoBean.estados}" var="estado" itemLabel="#{estado.descricao}" itemValue="#{estado}"/>
</h:selectOneMenu>

Finalizando

O exemplo disponível é bem simples, mas procurei mostrar nele o uso de coisas simples, como as mencionadas acima, e também proporcionar para quem ainda não teve a disposição de começar a testar que já tenha um ponto de partida. Olhando o código fonte podemos ver funcionando também as novas tags para escrever css e js, e explorar a parte de localização de recursos, que é inclusive o que torna a criação de componentes tão simples.

Espero que esse post e os materiais relacionados sejam de utilidade, e caso você encontre algum erro no material disponível me avise comentando aqui