Série da semana: Angular, API RESTful e Banco de Dados

Veja mais
O projeto está inativo

Formulário de cadastro com JSF e Bootstrap

Aprenda neste exemplo como criar interfaces ricas com Bootstrap e JSF. Saiba como o Pass-through elements pode te ajudar a ter mais controle sobre o HTML gerado pelos componentes nativos. Veja também como aplicar máscaras e validação front-end através da jQuery e plugins conhecidos como jQuery Validade e jQuery Mask Edit.

53

Introdução

Um pouco sobre o Pass-through elements

Criar interfaces ricas é uma necessidade para a maioria das aplicações web. Com JavaServer Faces, quando a interface possui funcionalidades não suportadas pelos elementos da HTML, torna-se necessário escrever componentes customizados. A partir de um único componente podemos produzir código complexo, que atenda às necessidades do negócio do ponto de vista da usabilidade. Entretanto, escrever um componente não é uma tarefa simples e requer conhecimentos específicos.

Com a evolução da linguagem HTML, bem como a introdução de novos elementos, vem diminuindo cada vez mais a necessidade de escrever componentes customizados. Além disso a JavaServer Faces oferece suporte completo ao HTML5, não apenas através de componentes que mimetizam as funcionalidades dos elementos nativos, mas permitindo estruturar páginas completas com marcação HTML5. Uma das peças fundamentais nesse suporte é o Pass-through elements, sobre o qual falaremos ao longo desse exemplo.

Pass-through elements nos permite utilizar tags HTML, mas tratá-las como componentes JavaServer Faces. Para isso escrevemos a tag e utilizamos pelo menos um dos atributos no namespace http://xmlns.jcp.org/jsf a fim de associá-la a uma instância de UIComponente no back-end da aplicação:

<input type="text"
 jsf:id="nome"
 jsf:binding="#"
 class="form-control"
 placeholder="Meu Nome"
 jsf:value="#{cadastroBean.cadastro.nome}"
 required="required"/>

Perceba que no exemplo acima o namespace jsf precede os atributos value, binding e id, fazendo com que o elemento input faça parte do Facelet. Essa abordagem nos dá total controle sobre o HTML gerado pela aplicação, tornando-a compatível com qualquer framework front-end que exija uma estrutura HTML pré-determinada, como é o caso do Bootstrap.

Aparência do projeto

No slide a seguir podemos ver qual o resultado de uma página construída utilizando Bootstrap e JSF, através do Pass-through elements.

Tela de cadastro Erros de validação front-end Erros de validação back-end Dados preenchidos corretamente aguardando envio Tela de confirmação, após o cadastro ser realizado com sucesso Tela de erro, caso alguma exceção seja lançada durante o cadastro

Principais características

A partir do slide a seguir você será apresentado aos recursos discutidos nos vídeos. Com ele você tem panorama completo com as principais características e funcionalidades exploradas nesse exemplo.

Estilo dos componentes Máscaras para facilitar a digitação Placeholder para demonstrar o que digitar Validação dos campos no front-end Segunda validação, agora no back-end Responsividade dada pelo Bootstrap

Sugestão de conteúdo prévio

Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.