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.

66

Arquitetura da aplicação

Para demonstrar como utilizar o Pass-through elements criamos um projeto de cadastro. A partir de uma página HTML, o usuário enviará diversas informações, que serão inseridos em um banco de dados. Nesta seção discutimos as tecnologias envolvidas nesse processo.

Assegurar a corretude dos dados a serem persistidos é preocupação fundamental em aplicações que lidam com bancos de dados. Portanto, recomendamos a validação tanto no front-end quanto no back-end. Uma das vantagens dessa dupla verificação é a possibilidade de alertar erros de preenchimento na própria página, antes do envio do formulário, permitindo a correção dos dados com maior facilidade. Além disso, validar no front-end ajudará a poupar recursos no servidor, pois o envio do formulário ocorrerá uma única vez. Para isso contamos com o jQuery Validation Plugin. E no back-end utilizaremos Bean Validation/Hibernate Validator.

Confira todas as tecnologias utilizadas no front-end deste exemplo na Figura 1.

Figura 1 - Tecnologias front-end utilizadas
Figura 1. Tecnologias front-end utilizadas

A fim de persistir os dados recebidos usaremos o Hibernate JPA e o MySQL Connector/J como Driver JDBC para o banco de dados MySQL Community Edition. Veja na Figura 2 as tecnologias usadas no back-end deste exemplo:

Tecnologias back-end utilizadas
Figura 2. Tecnologias back-end utilizadas

A construção da interface será feita com Bootstrap e JSF, com pequenos ajustes realizados em CSS customizado, assim como scripts que controlam a validação e envio do formulário de cadastro.

No core da aplicação optamos pela seguinte modelagem:

Tratamento de erros Acesso a dados Managed Bean Modelagem das entidades Camada de serviço
  • br.com.devmedia.java.cadastro.exception:Neste pacote temos a classe CadastroException, nossa exceção customizada. Ainda nesse pacote estão presentes as classes CadastroExceptionHandler e CadastroExceptionHandlerFactory, que juntas implementaram o mecanismo global de captura de exceções da JSF.
  • br.com.devmedia.java.cadastro.model:Este pacote contém o managed bean CadastroBean, responsável pela comunicação entre o front-end e o back-end da aplicação.
  • br.com.devmedia.java.cadastro.model.dao:CadastroDao, JpaResourceBean
  • br.com.devmedia.java.cadastro.model.entities:Aqui temos a entidade Cadastro, além das enums Estado, EstadoCivil e Sexo. São essas as classes que modelam os dados que serão capturados no formulário.
  • br.com.devmedia.java.cadastro.service:Entre o Managed Bean e o código de persistência, temos a classe CadastroService. Essa camada adicional de serviço abstrai as ações de persistência do Managed Bean, impedindo que alterações afetem seu funcionamento.

Sugestão de conteúdo

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 mínimo 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.
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira