MÓDULO Programação para Web 2

Transcrição

1 MÓDULO Programação para Web 2 USANDO O JSF Continuação

2 Interdependência e Injeção Instâncias de Managed Beans podem conversar entre si para dividir o processamento das requisições dos usuários de acordo a especialidade de cada uma delas. Para que duas instâncias conversem, uma deve possuir a referência da outra. Como a criação e eliminação das instâncias dos Managed Beans são responsabilidade do JSF, ele é o mais indicado para administrar as referências entre as instâncias do Managed Beans. 2

3 Interdependência e Injeção O que o desenvolvedor deve fazer é indicar ao JSF quais instâncias devem ser conectadas através de referências class PrimeiroManagedBean private SegundoManagedBean segundomanagedbean; } 3

4 Conversão Quando um usuário preenche um formulário, os valores escolhidos são enviados para uma aplicação. De acordo com o HTTP esses dados não possuem tipagem. São tratados como texto puro. Assim, quando uma aplicação recebe valores preenchidos em formulários HTML, precisa realizar a conversão dos dados que deseja tratar de forma específica. Eventualmente, os dados que chegam para as aplicações não podem ser convertidos pois não estão no formato esperado. Por exemplo, se o texto preenchido em um campo numérico possui caracteres não numéricos a conversão falhará. Ou então, nem sempre o formato das informações que estão em uma aplicação web Java corresponde ao formato que desejamos que seja apresentado para os usuários. Novamente, os dados devem ser convertidos antes de enviados para os navegadores. 4

5 Conversão Padrão Implícita Para os tipos fundamentais da linguagem Java, o JSF define conversores padrões e os aplica de maneira implícita, ou seja, não precisamos fazer nada para o processo de conversão acontecer. Os tipos fundamentais do Java são: BigDecimal, BigInteger, Boolean, Byte, Character, Conversão e Validação, Double, Float, Integer, Long, Short 5

6 Conversão Padrão Explícita Os conversores padrões aplicados implicitamente nos tipos fundamentais do Java não são suficientes. Por exemplo, para trabalhar com valores monetários precisamos de outros conversores. Por isso, o JSF define dois outros conversores padrões para serem aplicados de maneira explícita. 6

7 Conversão Padrão Explícita f:convertnumber: permite que conversões mais sofisticadas sejam feitas em valores numéricos. Estipulando duas casas decimais no mínimo: <h:outputtext value="#{managedbean.valor}" > <f:convertnumber minfractiondigits="2" /> </h:outputtext> Definindo a formatação através de expressão regular: <h:outputtext value="#{managedbean.valor}" > <f:convertnumber pattern="#0.000" /> </h:outputtext> 7

8 Conversão Padrão Explícita Apresentando os dados em porcentagem: <h:outputtext value="#{managedbean.valor}" > <f:convertnumber type="percent" /> </h:outputtext> Utilizando o símbolo do Real para valores monetários: <h:outputtext value="#{managedbean.valor}" > <f:convertnumber currencysymbol="r$" type="currency" /> </h:outputtext> 8

9 Conversão Padrão Explícita f:convertdatetime: permite que conversões de datas sejam realizadas. Esse conversor pode ser aplicado em dados do tipo java.util.date. <h:outputtext value="#{managedbean.data}" > <f:convertdatetime pattern="dd/mm/yyyy" /> </h:outputtext> 9

10 Fazendo seu conversor ( Classe Converter ) public class CpfConverter implements Converter { public Object getasobject(facescontext context, UIComponent component, String value) throws ConverterException { /* * Irá converter CPF formatado para um sem pontos e traço. * Ex.: torna-se */ String cpf = value; if (value!= null &&!value.equals("")) cpf = value.replaceall("\\.", "").replaceall("\\-", ""); return cpf; } } public String getasstring(facescontext context, UIComponent component, Object value) throws ConverterException { /* * Irá converter CPF não formatado para um com pontos e traço. * Ex.: torna-se */ String cpf= value; if (cpf!= null && cpf.length() == 11) cpf = cpf.substring(0, 3) + "." + cpf.substring(3, 6) + "." + cpf.substring(6, 9) + "-" + cpf.substring(9, 11); return cpf; } 10

11 Fazendo seu conversor ( Classe Converter ) Declarando no faces-config <converter> <converter-id>converter.cpfconverter</converter-id> <converter-class>br.com.converter.cpfconverter</converter-class> </converter> Para fazer a chamada do converter de CPF em um campo texto <h:outputtext value="cpf: " /> <h:outputtext value="#{cliente.cpf}"> <f:converter converterid="converter.cpfconverter" /> </h:outputtext> 11

12 Mensagens de Erro Eventualmente, as informações preenchidas pelos usuários em formulários não são adequadas impedindo a conversão dos dados. Nesses casos, geralmente, desejamos apresentar para os usuários mensagens relacionadas aos erros no preenchimento das informações. 12

13 Mensagens de Erro h:message: Para adicionar nas telas erros relacionados a um determinado campo, devemos utilizar a componente h:message. Primeiro, temos que definir um id para o campo desejado. Depois, associar o h:message a esse id. <h:inputtext value="#{meumanagedbean.numero}" id="campo-numero"/> <h:message for="campo-numero"/> 13

14 Mensagens de Erro h:messages: A tag h:message permite que os erros dos diversos campos de um formulário sejam colocados um a um na tela. Inclusive, podemos colocar as mensagens de erro de campo em lugares diferentes na página que será apresentada ao usuário. Em alguns casos queremos colocar todos os erros de todos os campos de um formulário juntos na tela. Para isso, devemos aplicar a tag h:messages. <h:messages/> 14

15 Alterando as Mensagens de Erro O texto de cada mensagem de erro de conversão ou validação está definido na especificação do JSF 2 que pode ser obtida através da url: Essas mensagens estão definidas em inglês. Para personalizar essas mensagens, devemos seguir dois passos: 1. Criar um arquivo de mensagens. 2. Registrar o arquivo de mensagens. 15

16 Criando um Arquivo de Mensagens Um arquivo de mensagens é um conjunto de chaves e valores. Cada chave se refere a um tipo de erro e está associada a um valor que é o texto que será apresentado nas telas através das tags h:message ou h:messages. O maior problema para definir um arquivo de mensagens no JSF é saber quais são as chaves que podemos utilizar. Veja um exemplo de arquivo de mensagens: Os arquivos de mensagens devem possuir o sufixo properties. javax.faces.converter.booleanconverter.boolean={1}: {0} must be true or false. 16

17 Registrando um Arquivo de Mensagens Suponha que tenha sido criado um arquivo de mensagem chamado Messages.properties num pacote chamado resources. Para registrá-lo, basta acrescentar uma configuração no arquivo faces-config.xml. <application> <message-bundle>resources.messages</message-bundle> </application> 17

18 Exemplo de Arquivo de Mensagens javax.faces.converter.numberconverter.number=o valor {0} não é adequado. javax.faces.converter.numberconverter.number_detail={0} não é número ou é inadequado. javax.faces.converter.integerconverter.integer=o valor {0} não é adequado. javax.faces.converter.integerconverter.integer_detail={0} não é um número inteiro. javax.faces.converter.datetimeconverter.date=a data {0} não está correta. javax.faces.converter.datetimeconverter.date_detail= {0} não parece uma data. 18

19 Exercício Crie um projeto ConversaoValidador Acrescente um managed bean FuncionarioBean com os atributos salario (double), codigo (int) e aniversario (Date) nas pasta src/managedbeans Crie a página cadastro.xhtml mostrado a frente Crie o arquivo Messages.properties mostrado mais a frente na pasta src/resources Configure o faces-config.xml colocando no facesconfig o comando abaixo: <application> <message-bundle>resources.messages</message-bundle> </application> 19

20 Cadastro.xhtml <h:body> <h1>cadastro de Funcionário</h1> <h:form> <h:panelgrid columns="3"> <h:outputlabel value="salário: R$ " for="campo-salario"/> <h:inputtext id="campo-salario" value="#{funcionariobean.salario}"> <!-- Sistema numérico do Brasil --> <f:convertnumber locale="pt_br"/> </h:inputtext> <h:message for="campo-salario"/> <h:outputlabel value="código: " for="campo-codigo"/> <h:inputtext id="campo-codigo" value="#{funcionariobean.codigo}"/> <h:message for="campo-codigo"/> <h:outputlabel value="data: (dd/mm/yyyy)" for="campo-aniversario"/> <h:inputtext id="campo-aniversario" value="#{funcionariobean.aniversario}"> <f:convertdatetime pattern="dd/mm/yyyy"/> </h:inputtext> <h:message for="campo-aniversario"/> <h:commandbutton value="cadastrar"/> </h:panelgrid> <h:messages/> </h:form> </h:body> 20

21 Messages.properties javax.faces.converter.numberconverter.number=o valor {0} não é adequado. javax.faces.converter.numberconverter.number_detail={0} não é número ou é inadequado. javax.faces.converter.integerconverter.integer=o valor {0} não é adequado. javax.faces.converter.integerconverter.integer_detail={0} não é um número inteiro. javax.faces.converter.datetimeconverter.date=a data {0} não está correta. javax.faces.converter.datetimeconverter.date_detail= {0} não parece uma data. 21

22 Validator Pode ser utadoma classe java que implementa javax.faces.validator.validator ou pode-se utilizar tags do próprio JSF. Valida valores fornecidos pelo usuário nos formulários, assegurando que o campo foi preenchido com o valor esperado. Exemplo: validar o CEP que o usuário forneceu, se foi digitado apenas números. 22

23 Validação e Conversão No ciclo do JSF, caso o input tenha o immediate setado como false, a validação e a conversão acontecem em fases diferentes 23

24 Validação e Conversão Se o atributo immediate estiver como true, a validação e a conversão acontecem na fase Apply Request Values (Aplicar Valores de Requisição) 24

25 Validação Padrão Muitas vezes, apenas a conversão de dados não é suficiente para verificar se uma informação preenchida em um formulário por um usuário está correta. Exemplo: campo para digitar uma idade. O valor digitado será tratado como texto até chegar na aplicação e lá poderá ser convertido para INT. Essa conversão não verifica se o número obtido é negativo. Porém, nesse caso, não seria correto obter números negativos pois a idade de uma pessoa é sempre positiva. Assim, depois da conversão dos dados, mais uma etapa deve ser realizada para validar as informações. 25

26 Validação Padrão: Campo Obrigatório (Required) A validação mais comum de todas é verificar se um determinado campo não deixou de ser preenchido. Podemos aplicar essa validação utilizando o atributo required dos inputs. 26

27 Validação Padrão f:validatelongrange verifica se um valor numérico inteiro pertence a um determinado intervalo de números. f:validatedoublerange verifica se um valor numérico real pertence a um determinado intervalo de números. 27

28 Validação Padrão f:validatelength verifica se uma string possui uma quantidade mínima ou máxima de letras. f:validateregex verifica se um texto respeita uma determinada expressão regular. 28

29 Bean Validation Uma nova abordagem para definir as validações: Declarar as regras de validação nas classes de modelo ao invés de inserí-las nas telas. Vantagem: podem ser utilizadas em diversas partes da aplicação. Definido pela especificação JSR Para definir as validações com Bean Validation, basta adicionar anotações nas classes de modelo. 29

30 Bean o valor não pode ser define um valor define um valor define um valor mínimo e aplica uma expressão regular na validação. 30

31 Bean Validation Mensagens de erro podem ser acrescentadas por meio de anotações 31

32 Fazendo seu Validador ( Classe Validator) public class CpfValidator implements Validator public void validate(facescontext arg0, UIComponent arg1, Object valortela) throws ValidatorException { if (!validacpf(string.valueof(valortela))) { FacesMessage message = new FacesMessage(); message.setseverity(facesmessage.severity_error); message.setsummary(resourcebundle.getbundle( FacesContext.getCurrentInstance(). getapplication().getmessagebundle()). getstring("erro.validacao.cpf")); throw new ValidatorException(message); } } 32

33 Fazendo seu Validador ( Classe Validator) /** * Valida CPF do usuário. Não aceita CPF's padrões como * cpf String valor com 11 dígitos */ private static boolean validacpf(string cpf) { if (cpf == null cpf.length()!= 11 iscpfpadrao(cpf)) return false; try { Long.parseLong(cpf); } catch (NumberFormatException e) { // CPF não possui somente números return false; } return calcdigverif(cpf.substring(0, 9)).equals(cpf.substring(9, 11)); } 33

34 Fazendo seu Validador ( Classe Validator) private static String calcdigverif(string num) { Integer primdig, segdig; int soma = 0, peso = 10; for (int i = 0; i < num.length(); i++) soma += Integer.parseInt(num.substring(i, i + 1)) * peso--; if (soma % 11 == 0 soma % 11 == 1) primdig = new Integer(0); else primdig = new Integer(11 - (soma % 11)); soma = 0; peso = 11; for (int i = 0; i < num.length(); i++) soma += Integer.parseInt(num.substring(i, i + 1)) * peso--; soma += primdig.intvalue() * 2; if (soma % 11 == 0 soma % 11 == 1) segdig = new Integer(0); else segdig = new Integer(11 - (soma % 11)); } } return primdig.tostring() + segdig.tostring(); 34

35 Fazendo seu Validador ( Classe Validator) Declarando o validator de CPF no faces-config validator> <validator-id>converter.cpfvalidator</validator-id> <validator-class>br.com.validator.cpfvalidator</validator-class> </validator> Invocando o validator em um campo do formulário <h:inputtext value="#{cliente.cpf}" required="true" maxlength="11"> <f:validator validatorid="validator.cpfvalidator" /> </h:inputtext> Colocar no bundle a mensagem de erro de validação erro.validacao.cpf=cpf inválido. 35

36 Fazendo seu Validador ( Classe Validator) 36

37 Exercício No projeto ConversaoValidacao, crie uma tela para cadastrar produtos de uma loja virtual cadastraproduto.xhtml. 37

38 Exercício Crie a classe de modelo para definir os produtos. Adicione essa classe dentro de um pacote chamado model. Implemente o Managed Bean que dará suporte à tela de cadastro de produtos ProdutoBean dentro do pacote managedbeans 38

39 Exercício Retire a validação realizada com a tag f:validatedoublerange. Acrescente uma validação com as anotações da especificação de Bean Validation na classe PRODUTO. 39

40 Eventos A interatividade de uma aplicação está diretamente relacionada a sua capacidade de percepção e reação. O nível mais alto de interatividade aconteceria se uma aplicação pudesse perceber e reagir aos pensamentos dos usuários. O JSF oferece um mecanismo bem sofisticado para aumentar a interatividade com os usuários: baseado na ideia de eventos. Há duas categorias fundamentais de eventos: eventos de aplicação e eventos de ciclo de vida. 40

41 Eventos Eventos de aplicação (Application Events) ações dos usuários pertinentes às aplicações. Por exemplo, um usuário pressiona um botão ou altera o valor de preenchido em um campo de um formulário. Dois tipos: ActionEvent e ValueChangeEvent. Eventos de ciclo de vida (Lifecycle Events) transições entre as diversas etapas do processamento de uma requisição ou transições entre os estados dos componentes do JSF ou da própria aplicação. 41

42 Eventos de Aplicação: ActionEvent gerados por botões ou links quando esses são pressionados pelos usuários. Tratamento definido por métodos dentro dos Managed Beans. Dois tipos Action Method: utilizado para efetuar uma navegação (mudar de tela) após o tratamento do evento ou Action Listener Method: demais casos 42

43 Action Method Deve devolver uma String que será utilizada como outcome para processar uma navegação. No h:commandbutton definimos qual é o Action Method que queremos associar ao botão através do atributo action. 43

44 Action Listener Method precisa ser void e aceita um ActionEvent como argumento. Um ActionEvent contem informações sobre o evento disparado. No h:commandbutton definimos qual é o Action Listener Method que queremos associar ao botão através do atributo actionlistener. 44

45 Eventos de Aplicação: ValueChangeEvent Gerados quando os usuários modificam o valor preenchido em um campo de um formulário. O tratamento desse tipo de evento pode ser realizado por métodos de um Managed Bean. Esses métodos são chamados de Value Change Listeners. Value Change Listener precisa ser void e aceita um ValueChangeEvent como argumento. ValueChangeEvent contem informações sobre o evento disparado. 45

46 Eventos de Aplicação: ValueChangeEvent No h:inputtext definimos qual é o Value Change Listener queremos associar ao campo através do atributo valuechangelistener. 46

47 Eventos de Ciclo de Vida (Lifecycle Events) Utilizados para executar procedimentos antes ou depois de uma determinada etapa do processamento de uma requisição ou a cada mudança de estado de um componente do JSF e da própria aplicação. Phase Events correspondem às transições entre as etapas do processamento das requisições tratado por um Phase Listener. Como o próprio JSF dispara automaticamente os Phase Events, devemos apenas criar um Phase Listener e registrá-lo. Para criar um Phase Listener, devemos escrever uma classe que implemente a interface PhaseListener. 47

48 Eventos de Ciclo de Vida (Lifecycle Events) O método getphaseid() associa o listener a determinadas fases do processamento de uma requisição. Os métodos beforephase() e afterphase() são executados respectivamente antes e depois das fases associadas ao listener. Para registrar o nosso Phase Listener devemos acrescentar algumas configurações no facesconfig.xml. 48

49 Exercícios Montemos um formulário de Cidades e Estados. No pacote model adicione a classe que representa os estados: 49

50 Exercícios No pacote managedbeans adicione um Managed Bean para manipular os estados. 50

51 Exercícios Faça a tela de busca de estados e cidade busca-localidade.xhtml 51

52 AJAX Para melhorar a interatividade entre as aplicações e os usuários, podemos aplicar o conceito do AJAX (Asynchronous Javascript And XML). Obtemos duas capacidades muito uteis: 1. fazer requisições sem recarregar as páginas completamente, apenas a parte delas que nos interessa; 2. realizar requisições sem pausar a navegação dos usuários. JSF2 oferece suporte nativo a AJAX. 52

53 Fazendo requisições AJAX As requisições AJAX são realizadas quando determinados eventos definidos pela linguagem Javascript ocorrem. Esses eventos estão fortemente relacionados aos componentes visuais colocados nas telas. Basta indicar para o JSF quais componentes e eventos devem disparar requisições para o servidor utilizando a tag f:ajax. tag f:ajax assume o evento padrão do componente associado a ela. O componente h:inputtext utiliza por padrão o evento onchange. 53

54 Fazendo requisições AJAX Pode-se explicitar o evento que deve disparar as requisições AJAX deixando o código mais claro através do atributo event. Cuidado pois nem todos os eventos são aceitos por todos os componentes. 54

55 Fazendo requisições AJAX Vários componentes para os quais desejamos oferecer o suporte do AJAX, podem ser agrupados por meio da tag f:ajax. Se não for escolhido explicitamente o evento que vai disparar as requisições, o JSF assumirá o padrão de cada componente. O padrão dos componentes h:inputtext e h:inputsecret é onchange. O padrão do componente h:commandbutton é onclick. 55

56 Fazendo requisições AJAX Pode-se explicitar o evento que deve disparar as requisições AJAX para um determinado grupo de componentes. 56

57 Recarregando alguns pedaços das telas Após realizar uma requisição AJAX, é possível pedir para o JSF redesenhar alguns pedaços da tela sendo mostrada para o usuário. Por exemplo, suponha uma listagem paginada de produtos, quando o usuário clica no botão que requisita através de AJAX a próxima página e a resposta chega, podemos mandar o JSF redesenhar a listagem e apenas a listagem com os dados que acabaram de chegar. A tag f:ajax através do atributo render permite escolher os ids dos componentes que devem ser recarregados após uma requisição AJAX. 57

58 Recarregando alguns pedaços das telas É possível redesenhar vários componentes, passando uma listagem de ids no valor do atributo render. 58

59 Processando alguns pedaços das telas Quando uma requisição AJAX é feita, é possível determinar quais componentes da tela devem ser avaliados pelo JSF. Por exemplo, quando enviamos um formulário, provavelmente, só é necessário avaliar os componentes que estão no próprio formulário. Podemos definir quais componentes devem ser avaliados pelo JSF através do atributo execute passando uma lista de ids. Quando selecionamos um componente para ser avaliados os componentes dentro dele também serão. 59

60 Palavras especiais Como é possível passar uma lista de componentes para os atributos render e execute, o JSF criou palavras chaves associadas a grupos especiais de componente. Assim, é possível trabalhar sem a necessidade de definir ids em alguns : refere-se a todos os componentes da : refere-se a nenhum : refere-se ao componente que disparou a requisição : refere-se aos componentes do formulário que contém o componente que disparou a requisição AJAX. 60

61 Palavras especiais Podemos alterar o código do formulário do exemplo anterior para utilizar a palavra no lugar do id do formulário. 61

62 Exercício Crie um projeto Ajax. Vamos montar um formulário de cadastro de automóveis. No pacote model e adicione a classe para representar os automóveis. 62

63 Exercício Crie no pacote managedbeans um Managed Bean para manipular os automóveis. 63

64 Exercícios Faça a tela de listagem e cadastro de automóveis listacadastro-automovel.xhtml. 64