Artigos Java Crie sistemas web com JSF e HTML5

JSF e HTML5, a quem se destina?

Esse artigo é útil para estudantes e profissionais que tenham interesse em utilizar o JavaServer Faces em conjunto com o HTML5. Para isso, inicialmente será apresentado o funcionamento básico do JSF, e depois analisaremos como realizar a integração entre essas tecnologias a partir de um exemplo simples, para que não percamos o foco no tema em estudo.

Basicamente, ao adotar duas novas tags do JSF conseguimos reunir o melhor de dois mundos, possibilitando a criação de interfaces limpas e responsivas, dois dos principais pré-requisitos a toda solução web.

Relacionado: Primeiros passos na JSF com Ajax

A sétima versão do JavaServer Faces (JSF) foi lançada em junho de 2014, junto com a plataforma Java EE 7. Nesta versão, uma das principais novidades é a possibilidade de utilizar recursos do HTML5, tecnologia que busca adicionar maior descrição semântica aos documentos HTML, facilitando assim a interpretação do conteúdo pelos navegadores.

Essa inovação traz como grande destaque o uso de um padrão que permite a adaptação do conteúdo para dispositivos móveis, como smartphones e tablets, otimizar técnicas de SEO, visando melhorar o posicionamento em buscadores, e também o aprimoramento da acessibilidade a pessoas com deficiência, visto que aplicações em HTML5 possibilitam a navegação via atalhos de teclado.

Lançado em outubro de 2014, o HTML5 é a última versão da linguagem de marcação que utilizamos para a construção de páginas web. Dentre as novas funcionalidades, foram incluídas algumas mais simples, como os novos tipos de campos para entrada de dados, e outras mais complexas, como a possibilidade de criação de imagens 2D com a nova tag Canvas.

Dito isso, neste artigo, primeiramente vamos introduzir e revisar os conceitos básicos do JSF, a fim de facilitar o entendimento do restante do artigo. Posteriormente, vamos apresentar as novidades do JSF, focando principalmente no Pass Through Elements, que é uma funcionalidade que permite desenvolver as view do JSF em XHTML puro. Além disso, para exemplificar o uso do HTML5 com JSF, será implementada uma aplicação exemplo, na qual um usuário poderá cadastrar e revisar lembretes, que estarão acessíveis tanto pelo computador quanto pelo smartphone.

Conceitos básicos

O entendimento dos conceitos básicos do JSF é fundamental para a sequência do artigo, pois as novas funcionalidades dependem de algumas definições originadas nas versões anteriores.

Os principais conceitos do JSF que serão importantes para a compreensão deste artigo são:

  • Renderização: Processo que transforma código Java do servidor em páginas HTML, para que seja possível a leitura das páginas pelo navegador;

  • Facelets: Linguagem declarativa usada pelo JSF para criação de páginas HTML;
  • Faces-Servlet: Controlador padrão, que comanda o ciclo de vida do framework JSF;
  • Navegação: Está relacionado às regras que determinam como serão efetuadas as transições entre as páginas da aplicação Web;
  • ManagedBeans: Classes Java com anotações do framework JSF usadas nos componentes das páginas web de uma aplicação;
  • View: Qualquer página JSF declarada com tags do framework e tags HTML.

Além disso, na nova versão do JSF foram adicionados dois recursos que permitem que trabalhemos de forma integrada com o HTML5. São eles:

  • PassThrough Attributes: Nova tag do JSF que permite a utilização de atributos do HTML5 em componentes JSF;
  • PassThrough Elements: com esse conceito é possível adicionar a uma tag HTML atributos do JSF. Por exemplo, podemos criar uma tag button da seguinte forma: <button jsf:id="salvar">. Isso permite desenvolver páginas JSF também com a linguagem HTML, e não apenas com tags JSF.

Nas primeiras versões do JSF, o principal arquivo de configuração era o faces-config.xml. Esse arquivo ainda está presente, porém, as últimas versões do framework, incluindo a 2.2, facilitam o desenvolvimento através de annotations, seguindo uma tendência adotada também por outros frameworks, como Hibernate e Spring.

A Figura 1 apresenta a arquitetura básica de uma aplicação JSF. Nesta arquitetura o principal componente é o FacesServlet, que irá comandar a navegação entre as páginas e suas interações com os ManagedBeans.

Lembre-se que o FacesServlet pode encaminhar a requisição diretamente para um XHTML ou pode enviar a requisição para um ManagedBean, dependendo do mapeamento que foi feito no faces-config.xml.

Arquitetura do JSF ...
Quer ler esse conteúdo completo? Tenha acesso completo