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.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
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.
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:
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:
- 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.