Pular para o conteúdo principal

JSF 2 - Composite Components, você não precisa mais ser um ninja

Estamos em uma nova era da computação, os dados não estão mais localizados em um banco dentro de sua empresa, vivemos a explosão de redes sociais, informações são geradas a todo instante, e se torna essencial que sua aplicação conheça os serviços disponíveis na web e consumam suas APIs geralmente disponíveis por serviços REST.

Legal, mas como ficam meus aplicativos Java EE neste novo cenário? Para quem vem acompanhando a evolução da plataforma, é notório que todo esforço vem sendo utilizado para aumentar a produtividade e a integração com novos serviços.
Basicamente duas especificações surgem com muita força para atender este cenário, a JSR - 314 (JSF-2) e JSR - 311 (JAX-RS), neste post exploraremos a JSR-314 (JSF2) e sua nova forma de criar Composite Components.

Uma das grandes queixas dos desenvolvedores JSF era a complexidade em criar composite components, era necessário um vasto conhecimento sobre o ciclo de vida de uma aplicação JSF.
Agora, você não precisa ser mais um “ninja” em JSF para ter seus components reutilizáveis. Sua distribuição também ficou bastante simples, basta apenas o seu componente estar localizado no web root da sua aplicação ou empacotado em um JAR.

Bem, vamos a um pouco de código.

* Para este exemplo estou utilizando NetBeans 6.8.1 com Glassfish V3


A ideia básica deste post é criar um componente de vídeo para ser utilizado em várias partes do nosso sistema.

Crie um novo projeto Arquivo -> Novo Projeto, escolha Java Web -> Aplicação Web, e pressione próximo.

Vamos chamar nosso projeto de Globalcoders - homenagem ao blog - pressione próximo novamente. Na próxima tela, escolha como servidor Glassfish V3 - ou outro de sua preferência - a versão do Java EE, selecione Java EE 6, pressione próximo.

Na próxima tela, o NetBeans irá perguntar quais os Frameworks que você deseja utilizar, selecione JavaServer Faces 2, clique em finalizar.
Agora no web root de nossa aplicação constitua um diretório de resources, aqui será a residência de nosso componente.

A especificação do JSF2, define que:

A ocorrência da String “http://java.sun.com/jsf/composite/” em uma declaração de namespace XML Facelet, tudo que estiver após a última “/” é considerado como sendo uma biblioteca de recurso.

Ou seja, crie uma pasta chamada videocomp, e dentro desta pasta criaremos um arquivo chamado video.xhtml.

Quando desejar utilizar este componente, deve colocar na declaração de namespace a seguinte String: “http://java.sun.com/jsf/composite/videocomp”.

A estrutura de nosso projeto ficará assim:

Pronto, agora que já temos a estrutura, codificaremos o nosso componente.

Utilizaremos os recursos do HTML5, a tag <video>, e chamadas assíncronas com novo componente de ajax do JSF2.

Veja o código abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<cc:interface>
<cc:attribute name="nomeBotao" />
<cc:attribute name="caminhoVideo" required="true" />
<cc:attribute name="alterarVideo" method-signature="void action()" />
</cc:interface>

<cc:implementation>
<h:form>
<h:panelGrid id="video">
<video controls="controls">
<source src="#{cc.attrs.caminhoVideo}" />
</video>
</h:panelGrid>

<h:commandButton value="#{cc.attrs.nomeBotao}" action="#{cc.attrs.alterarVideo}">
<f:ajax execute="@this" render="video" />
</h:commandButton>

</h:form>
</cc:implementation>
</html>
Como você pode ver, o código é bem simples. A primeira tag define quais as características do componente.

A segunda tag definimos como será a sua implementação.

Nela veja a tag <video> presente na nova especificação do HTML5, como ela podemos colocar vídeos em nossas páginas de forma muito fácil, outro novo elemento é a tag do JSF2, semelhantes as tags Ajax4jsf e Trinidad, minimizando a utilização de outros frameworks de terceiros.

Ela é responsável por disponibilizar a chamada ajax no CommandButton. A utilização desta tag é extremamente simples, basicamente temos dois atributos: o “execute”, responsável por enviar nossa requisição, e o “render”, onde informamos o que será renderizado novamente.

Pronto, temos nosso componente de vídeo simples.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:video="http://java.sun.com/jsf/composite/videocomp">
<h:head>
<title>Globalcoders</title>
</h:head>
<h:body>

<video:video nomeBotao="Alterar Clipe"
caminhoVideo="#{videoControle.caminhoVideo}"
alterarVideo="#{videoControle.alterarVideo}"/>

</h:body>
</html>


Agora basta chamar o componente na index.xhtml ou qualquer outra página que desejar dentro de seu sistema.

Observe que na declaração do namespace, colocamos o nome do nosso diretório videocomp.

Outro ponto importante quando vamos utilizar o componente, informamos os parâmetros necessários para seu funcionamento, por exemplo, a action do botão.

O download do código fonte pode ser feito aqui

Até a próxima.

Raphael Adrien
http://twitter.com/raphaeladrien

Comentários

Bastante interessante, Raphael, até pra quem é mais leigo em JSF2.

Eu que não entendo tanto acho que consegui entender a idéia.

Mas nos browsers de hoje já da para conferir o resultado tranquilo?
Raphael disse…
Sim, basta seu browser dar suporte a tag video.
Vc pode verificar o suporte do seu browser neste site http://html5test.com/
Olá olá a todos!

JSF sempre me chamou a atenção.
Falta só estudar mais, mas logo chego lá ( será meu próximo ponto a ser estudado no mundo java hehe ).

Então, não tenho nada revolucionário a comentar, pela pouca experiência com JSF, masss como nosso amigo Marcelo Ricardo, pela forma que o Rapha mostrou, até pareceu ser uma coisa fácil hehehe.

Quais livros de JSF são indicados para estudo? ( pode ser em ingles... amazon ta ai pra dar um help =] )

Parabéns a todos pelo Blog, continuem postando sempre!!

Abração!
Raphael disse…
Lucas, existe bastante material de qualidade disponível na internet.
Dá uma olhada na lista de JSF Group (http://migre.me/41Lhu), e alguns blogs como do @rponte (http//rponte.com.br/).
Ainda temos tb os minicursos da iniciativa #open4education, especialmente este http://migre.me/41Luo que acontece com certa freqüência via webcast.
Mas já que você pediu um livro, veja este JavaServer Faces 2.0 - The Complete Reference (http://migre.me/41KJm) - @edburns e Chris Schalk
Vitor disse…
Este comentário foi removido pelo autor.
Vitor disse…
salve galera...
show de bola o post...

tenho um problema com o composite components que ainda não consegui resolver,
Raphael, pode me passar o email pra entrar em contato contigo??

tentei colocar o código aí no comentario mas não rolou por causa das tags...
Raphael disse…
Vitor, acabei de enviar um e-mail para vc. Manda lá sua dúvida.

[]`s
Glesio disse…
Rafael, estou tendo problemas com composite ao tentar ler um objeto managedbean e listener dentro do composite component.
Rodrigo Bento disse…
A idéia do JSF 2.0 + Facelets e composite components especificamente é muito bonita. Infelizmente há um número gritante de bugs que torna a utilização desse recurso praticamente impraticável. Por isso se você pegou a idéia mas não consegue fazer alguma coisa simples funcionar, tente dar uma olhada na lista de bugs. Já 'perdi' muito tempo com isso.
Welyab Paula disse…
olá.
se eu acessar a url /resources/videocomp/video.xhtml e colocar para o navegador mostrar o codigo fonte da página, ele vai mostrar o código puro da página. tem como evitar isto ???
Pontin disse…
Olá Raphael...

Como você disse "Agora no web root de nossa aplicação constitua um diretório de resources, aqui será a residência de nosso componente.".

Só funciona dessa maneira o componente.
Mas gostaria de saber se tem como criar o componente em uma pasta fora do resources, e indicar ela como uma taglib?

Conhece alguma forma? Desde já agraeço.
Bruno disse…
Sim Pontin, use a tag ui:fragment do facelets, assim nao sera necessario estar dentro da pasta resources. porém é necesario criar o arquivo facelet-taglib.xml para referenciar sua nova tag.
Eduardo disse…
Raphael, muito obrigado pelo post, mas existe a possibilidade de nos repassar o código-fonte desse projeto, eu não estou conseguindo colocar pra rodar esse componente.
Obrigado.
Ben Nelson disse…
JSF FOR LIFE

Postagens mais visitadas deste blog

10 reasons why we love JSF

1. One-slide technology: it's so simple that I can explain basic JSF with one slide. 2. Easy to extend: components, listeners, render kit, Events, Controller, etc. 3. Real-world adoption: JBoss, Exadel, Oracle, IBM, ... 4. Architecture model: you can choose between more than 100 different architecture. 5. Open-mind community: using JSF you are going to meet very interesting people. 6. We are using JSF the last 5 years and we found very good market for JSF in Brazil 7. Progress: look to JSf 1.1 to JSF 1.2, JSF 1.2 to JSF 2.0. People are working really hard! 8. Many professionals now available 9. It's a standard. It's JCP. Before complain, report and help! 10. Ed Burns, spec leader, is an old Globalcode community friend! EXTRA: My wife is specialist in JSF. She's my F1 for JSF :) Nice job JSF community! -Vinicius Senger

O que é Lógica de programação?

Este é o segundo de uma série de posts voltados aos leitores do blog que estão dando início à carreira de desenvolvimento de software. O assunto de hoje é a lógica de programação. Para ler antes: Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados A lógica de programação é um pré-requisito para quem quer se tornar um desenvolvedor de software, independente da linguagem de programação que se pretende utilizar. Mas o que é de fato a Lógica de Programação e como saber se eu tenho esse pré-requisito? A lógica de programação nada mais é do que a organização coerente das instruções do programa para que seu objetivo seja alcançado. Para criar essa organização, instruções simples do programa, como mudar o valor de uma variável ou desenhar uma imagem na tela do computador, são interconectadas a estruturas lógicas que guiam o fluxo da execução do programa. Isso é muito próximo ao que usamos em nosso cotidiano para realizar atividad...

Alguma certificação Java nos seus planos em 2010 ?

A discussão sobre certificações é super polêmica, alguns acham muito importante, outros acham totalmente insignificante. Eu particularmente acho que é uma meta de aprendizado, que nos força a aprender bem detalhadamente uma tecnologia. É claro que é "burlável" quero dizer, todo mundo conhece alguém que é certificado e "não sabe nada". Mas, evidentemente quando você se prepara, estuda, vai aprender muitas coisas novas e solidificar ainda mais seu conhecimento. Eu sempre fui muito "orientada" por deadlines... estas metas nos obrigam a encaixar algumas horas de estudo nesta vida tão corrida. E o inicio do ano é muito bom para estas iniciativas, porque estamos um pouco mais descansados, com aquele espírito de inicio de ano. Imagine chegar em março e já ter cumprido uma das metas de final de ano, e estar com a certificação "tirada" ? Não acho que precisa ser um caçador de certificações, e tentar tirar todas as certificações possíveis, mas acho ...

Facelets ainda mais divertido! Parte II

De volta ao Facelets , na primeira parte mantive o foco na utilização de templates e técnicas de reutilização visando maior agilidade para desenvolver telas com JSF , mas o Facelets vai bem além disso! Nesse post vou comentar e mostrar um pouco sobre a criação de componentes UI (User Interface) usando xht ml - na minha opinião esse é o grande diferencial da tecnologia. Com esse recurso é possível customizar / padronizar componentes usando xhtml + tags JSF + JavaScript + Css, sem código Java. A ideia é bem próxima ao Tag File em uma rápida comparação com JSP (JavaServer Pages), mas no caso do Facelets feito de uma forma ainda mais simples e com aderência a (infra)estrutura do JSF. Vou descrever o mesmo cenário da primeira parte, um sistema composto por vários cadastros ( C reate R ead U pdate D elete). Pensando especificamente em cada formulário, usando como exemplo um rascunho ou protótipo para o cadastro de Fornecedores, podemos assumir o seguinte formato: campos para preenchi...

JavaOne Brasil, dicas para submissão de palestras

Não quero parecer pretensiosa dando dicas para submissão de palestras para o JavaOne Brasil, mas sim repassar os tantos conselhos e sugestões recebidas pelos vetaranos do JavaOne: Bruno Souza e Leonardo Galvão que revisaram dezenas de submissões para o JavaOne e ajudaram a aprovar tantas palestras, e também misturar um pouco da minha experiência na seleção de palestras nos eventos realizados pela Globalcode e SouJava . 10 anos de JavaOne: http://www.globalcode.com.br/noticias/Globalcode10AnosNoJavaOne Os palestrantes ganham a entrada! A submissão pode ser feita em português! O passo mais importante para ser aprovado como palestrante no JavaOne é sem dúvida nenhuma submeter pelo menos uma palestra. Então, independente de qualquer coisa, participe, arrisque, divulgue.  Mas, se quiser aumentar as suas chances...   1) Leve a sério: peça para amigos fazerem uma leitura crítica do texto, e claro uma boa revisão ortográfica. 2) Submissão de várias palestras ou variações do ...

Seja palestrante no TDC!

Os interessados em palestrar na maior plataforma de Inovação Aberta para desenvolvimento do ecossistema de teologia, tem até 25 de setembro para se inscrever A última edição do ano do TDC (The Developer's Conference), maior conferência para profissionais de tecnologia do Brasil, já tem data confirmada. O TDC Future, que acontece nos dias 6 a 8 de dezembro, em formato híbrido, ocorrerá presencialmente na UniRitter de Porto Alegre, e com transmissão simultânea pela plataforma Hopin. O evento traz como tema central: “O papel da tecnologia na construção do amanhã”, e reúne gestores, especialistas e profissionais da área para debater sobre o futuro da tecnologia, o impacto na vida das pessoas e seu papel na transformação da sociedade. A seleção de palestras nacionais e internacionais, ainda está com o Call4Papers aberto até 25 de setembro, os interessados em participar poderão submeter uma proposta por meio do site do evento . O tema deve estar vinculado a uma trilha específica, que é...