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

Você já pensou em ser palestrante em algum evento ?

Você já deve ter participado de algum evento e pensado como deve ser legal ser palestrante... E para falar a verdade, é muito bom mesmo. Eu adoro, o Vinicius adora e conheço muitas pessoas que curtem cada minuto da participação no evento como palestrante. Com certeza é uma responsabilidade a mais. Você sente medo, adrenalina, tem que se preparar. Literalmente coloca a cara a tapa para qualquer pessoa te avaliar em todos os sentidos. Qual o seu tom de voz?  Seus slides são legais? Você manja mesmo ?  Seu português está ok?  E as palavras em inglês ?  Teve algum deslize técnico? E MUITO mais.  Mas é claro que a exposição tem dois lados... e os resultados podem ser ótimos. Normalmente conhecemos mais pessoas como palestrantes e podem surgir boas oportunidades de negócio. É sempre positivo ter uma nova referência positiva quando as pessoas buscam nosso nome no Google, podemos fazer a diferença para quem está assistindo a palestra e muito mais.  No The Developer's

TDC INNOVATION lança University Pass

Modalidade de ingresso tem como objetivo ajudar na capacitação dos universitários Uma pesquisa realizada em 2020 pela Associação Brasileira das Empresas de Tecnologia da Informação e Comunicação (Brasscom) diz que até o ano de 2024 o Brasil precisará de cerca de 420 mil profissionais na área de Tecnologia da Informação. Porém, por ano, a mesma pesquisa diz que o país forma apenas 46 mil profissionais capacitados no nicho. Pensando nisso, para ajudar na formação e capacitação desses jovens profissionais, o TDC INNOVATION, segunda edição do ano do The Developer's Conference, lança o University Pass, modalidade de ingresso que possibilita aceso digital gratuito a todas as palestras do evento, ou com 50% de desconto para quem preferir ir pessoalmente. Com o tema central “Desafios para a criação do futuro Digital”, o TDC INNOVATION ocorrerá entre 1 e 3 de junho, de forma híbrida: presencialmente no Centro de Convenções CentroSul, em Florianópolis, e com transmissão simultaneamente pela

Inscrever sua equipe em eventos de TI vale a pena? Entenda aqui

Os eventos de TI são importantes para o aprendizado contínuo, especialmente em uma área tão dinâmica, como a de tecnologia. A necessidade de estar sempre por dentro das tendências pode esbarrar em algumas objeções, como investir em especializações pouco práticas ou opções pulverizadas de mercado. Por isso, participar de conferências e assistir palestras de especialistas é uma excelente oportunidade para sua equipe se desenvolver. O melhor de participar de eventos de TI é expandir os conhecimentos e habilidades independentemente da experiência específica, seja um desenvolvedor web ou full stack, por exemplo, as conferências de tecnologia podem ajudar o profissional a se aperfeiçoar. Isso ocorre devido ao contato com outros especialistas e colegas da mesma área. Além disso, é possível descobrir novas soluções e fazer networking . Neste artigo, você conhecerá as vantagens da sua equipe participar em eventos de TI. Aproveite a leitura! Vantagens de participar de eventos de TI Se o seu ob

Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados

Nesse post, diferente dos últimos que foram mais enfáticos nas experiências com tecnologias, vou focar um pouco mais nos profissionais que estão começando, ou pretendem ingressar na área de desenvolvimento de software, falando sobre conceitos fundamentais relacionados a programação em geral . Mercado de trabalho para programação Conforme já sabemos, o mercado de desenvolvimento de software, especialmente no Brasil, continua em franca expansão, sendo que cada vez mais as empresas buscam desenvolver seus próprios sistemas usando as mais diferentes e novas tecnologias. Algumas matérias interessantes: As seis profissões mais valorizadas em 2010 no IDG Now! Muitas vagas e sensação de reaquecimento da economia Por isso, a área de desenvolvimento de software tem despertado interesse em muitos profissionais de outras áreas que desejam mudar de profissão, já que as oportunidades de trabalho tendem a ser maiores. Esse é um perfil presente em muitos dos clientes da Globalcode que acabou m

Segurança da informação no alvo: o que esperar do futuro?

A segurança da informação não se trata apenas de proteger os dados contra acesso não autorizado. Na prática, refere-se aos recursos que impedem: uso; registro; inspeção; divulgação; interrupção; modificação; destruição de dados. O uso de dados pode abranger desde um perfil nas redes sociais a detalhes financeiros, biometrias ou novos projetos. Por isso, a preocupação com a proteção dos dados é crescente, tanto para empresas quanto clientes. Para muitas pessoas, a coleta de dados é considerada invasão de privacidade, criando desconfiança do titular dos dados, pois o uso dos dados pode ser facilmente corrompido, utilizado para fins não declarados. Apesar de o uso dos dados terem impulsionado os avanços tecnológicos na última década, as organizações lidam com o desafio de distinguir dados de informações pessoais de modo a proteger a privacidade e as preferências dos clientes. Neste artigo, abordaremos o impacto da segurança da informação e o que esperar do futuro. Confira casos conhecido

TDC ONLINE: SUA PLATAFORMA DE PALESTRAS GRAVADAS DO TDC DISPONÍVEL

Além do conteúdo ao vivo transmitido online nas edições do TDC, agora você pode ter acesso à centenas de palestras gravadas, através da nossa nova plataforma de vídeos - o TDC Online, que reúne todas as Trilhas premium, Stadium e Salas dos Patrocinadores das edições anteriores de 2022, TDC Innovation e TDC Connections.  Para acessar, basta clicar na edição em que você participou ( TDC Innovation ou TDC Connections ); Fazer o mesmo login (com e-mail e senha) cadastrados na hora de adquirir ou resgatar o seu ingresso no TDC; E clicar na Trilha de sua opção, e de acordo com a modalidade do seu ingresso. Logo em seguida, você será direcionado para a seguinte página com a lista de todas as palestras por Trilha: Pronto! Agora você tem acesso à centenas de palestras gravadas da sua área de interesse, para assistir como e quando quiser! Caso tenha esquecido a senha, clique na opção "Esqueci a senha" , insira o e-mail que você realizou para o cadastro no evento, e aparecerá a op