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.

Introdu��o

Ir para o c�digo

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.

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.