Laboratório PROGRAMAÇÃO WEB II: Prática 03
Ferramentas utilizadas: NetBeans;
Na prática de hoje iremos trabalho um pouco com validações no JSF.
JSF VALIDATION
Na pratica anterior, realizamos desenvolvemos uma aplicação, onde foi construído uma interface de registro de usuário e a transferência de dados entre a página de registro e a página de confirmação. Agora iremos inserir em nosso formulário as validações de cada campo, como por exemplo validações para os campos de entrada do formulário JSF. Iremos fazer de maneira fácil utilizando os componentes de validações do JSF.
Passo 1: Adicionando a obrigatoriedade de campos
Uma das alterações que iremos realizar em nosso formulário index.xhml, inicialmente é tornar os campos de entrada obrigatórios.
Para isso no projeto acesse o arquivo index.xhtml e vamos adicionar os seguinte código em cada campo. Observe que foi adicionar o seguinte código
Se um usuário tentar enviar um formulário com um ou mais campos obrigatórios ausentes, um erro a mensagem é gerada automaticamente.
A mensagem de erro é gerada pela tag <h:message> correspondente ao campo inválido. A string First Name corresponde ao Label (rotulo) do atributo do campo. Se tivéssemos omitido o atributo de etiqueta, o valor do atributo de identificação do campo teria sido mostrado em vez disso. Como podemos ver, o atributo requerido torna muito fácil implementar a funcionalidade de campo obrigatória em nosso aplicativo
Claro, uma idade negativa não faria muito sentido. No entanto, nossa aplicação valida que a entrada do usuário é um inteiro válido essencialmente sem esforço da nossa parte.
O campo de entrada de endereço de e-mail da nossa página está vinculado a uma propriedade do tipo string em nosso namedbean. Não há nenhuma validação interna para certificar-se de que o usuário insira um endereço de e-mail válido. Em casos como este, precisamos escrever nosso próprio validador personalizado do JSF. Validadores JSF personalizados devem implementar a interface javax.faces.validator.Validator. Essa interface contém um único método chamado validate(), e esse método usa três parâmetros, uma instância de javax.faces.context.
FacesContext, uma instância de javax.faces.component.UIComponent que contém o componente JSF que está validando e uma instância de java.lang.Object contendo o valor inserido pelo usuário para o componente. O exemplo a seguir ilustra um típico validador personalizado:
Passo 2: Criando uma classe java (Backing Bean) para validar o e-mail
Agora iremos criar nosso validador de e-mail personalizado.
Preencha os dados do validador conforme a tela abaixo, e clique em Finalizar.
Altere o código da classe conforme a figura abaixo.
corresponde à expressão, validação for bem-sucedida; caso contrário, a falha de validação e uma instância de ValidatorException é lançada.
O construtor de ValidatorException utiliza uma instância de javax.faces. aplication. FacesMessage como um parâmetro. Este objeto é usado para exibir a mensagem de erro na página quando a validação falhar. A mensagem a ser exibida é passada como uma sequência de caracteres para o construtor de FacesMessage. No nosso exemplo, se o atributo de rótulo do componente não é nulo nem vazio, usamos como parte da mensagem de erro; caso contrário, usamos o valor de atributo de id do componente. Este comportamento segue o padrão estabelecido pelo padrão validadores JSF.
Nosso validador deve ser anotado com a anotação de @FacesValidator. O valor do seu atributo de valor é o ID que será usado para referenciar nosso validador em nossas páginas JSF.
Assim que implementarmos o nosso validador de execução, estamos prontos para usá-lo em nossas páginas.
Passo 3: Adicionar uma chamada do nosso validador no campo de
entrada de e-mail
Nosso caso em particular, precisamos modificar o campo de e-mail para usar nosso validador personalizado usando o seguinte código:
Tudo o que precisamos fazer é aninhar uma tag <f:validator>dentro do campo de entrada que desejamos que seja validado usando nosso validador personalizado. O valor do atributo validatorId <f:validator>deve corresponder ao valor do atributo informado na anotação em nosso validador @FacesValidator.</f:validator> </f:validator>
Quando inserir um endereço de e-mail inválido para o campo de entrada de endereço de e-mail e enviar o formulário, a lógica do nosso validador personalizado será executada e a sequência de caracteres será passada como um parâmetro para FacesMessage em nosso método validator(). O texto do erro será mostrado pelo tag <h:message>para o domínio.</h:message>
Laboratório PROGRAMAÇÃO WEB II: Prática 03- parte 2
Agora iremos aprender como o JSF permite criarmos Templates de páginas
para facilitar a criação de outras páginas em nosso sistema. Para isso
agora iremos conhecer o Facelets.
Templates Facelets
precisamos alterar o modelo e a alteração será refletida em todos os clientes modelo
Adicionando Templates Facelets
Podemos adicionar um modelo de Facelets ao nosso projeto, simplesmente, acessando o menu ArquivoNovo e selecionar em categoria JavaServerFaces e em Tipo de arquivos selecione Modelos Facelets e clique próximo.
Podemos então selecionar um dos vários modelos predefinidos para usar como base para o nosso modelo ou simplesmente usá-lo "fora da caixa".
O NetBeans nos oferece a opção de usar tabelas HTML ou CSS para layout. Para a maioria aplicações web modernas, o CSS é a abordagem preferida. Para o nosso exemplo, vamos escolha um layout contendo uma área de cabeçalho, uma única coluna esquerda e uma área principal.
Depois de clicar em Finalizar, o NetBeans gera automaticamente o nosso modelo, ao longo de com os arquivos CSS necessários.
Como podemos ver, o modelo não parece muito diferente de um arquivo regular de facelets. Podemos ver que o modelo usa o seguinte namespace:
xmlns: ui = "http: //xmlns.jcp.org/jsf/facelets". Este namespace nos permite usar a tag <ui: insert>. O conteúdo desta etiqueta será substituído pelo conteúdo em uma tag correspondente <ui: define> em clientes modelo.
Corrigindo o acesso ao CSS do Template
No processo acesse o arquivo Template.xhtml e altere o caminho do
Usando o Template
Para usar nosso modelo, simplesmente precisamos criar um cliente de
modelo de Facelets. Isso pode ser realizado acessando o menu Arquivo
Novo arquivo, selecione a categoria
JavaServerFaces e selecione em
tipo de arquivo de Cliente de Modelo de Facelets.
Após clicar em Próximo, precisamos inserir um nome de arquivo (ou aceite
o padrão) e selecione o modelo que usaremos para o nosso cliente de
modelo. Para isso clique em procurar e selecione o arquivo do Template.
Em Seções a gerar deixa apenas a check box contente marca e clique em
Ao usar o modelo de Facelets, se um cliente de modelo não substituir uma seção definida no modelo, a marcação do modelo é mostrada na página renderizada. Isso nos permite definir, por exemplo, um cabeçalho de página que deve ser o mesmo em todo todas as páginas em nosso aplicativo em um lugar (o modelo), em vez de redefini-lo cada página.
No nosso exemplo, as seções superior e esquerda devem ser iguais em toda a aplicação. Portanto, desmarcamos essas caixas para que essas seções não sejam geradas em nossa cliente modelo.
Como podemos ver, o cliente de modelo também usa o namespace xmlns:ui="http://xmlns.jcp.org/jsf/facelets"; em um cliente de modelo, a tag <ui:composition>deve ser a tag do pai de qualquer outra tag pertencentes a este espaço para nome. Qualquer marcação fora essa marca não será processada, e a marcação do modelo será processada em vez disso.
A tag <ui: define> é usada para inserir a tag em um <ui: insert> correspondente do o modelo. O valor do atributo de nome em <ui: define> deve corresponder ao correspondente <ui: inserir> do modelo.
Podemos ver que o NetBeans gerou um modelo que nos permite criar um
página elegante com muito pouco esforço de nossa parte. Claro, devemos substituir o marcação nas tags <ui: define> para atender às nossas necessidades.
Para isso dentro da tag <ui:define></ui:define> crie uma tag <p></p>.Dentro da tag <p></p>, insira um texto genérico, esse texto pode ser obtido no site lorem ipsum. Acesse https://br.lipsum.com/, e utilize texto dessa página para deixar a tag <p></p parecida com código abaixo.
Após implantar a nossa aplicação, veremos modelagem em ação, apontando o navegador para o URL do nosso modelo cliente.
Since our template client does not override the top and left sections, the markup from the template will be rendered in the browser.
