Usando o componente de calendário

Conteúdo

Este tutorial funciona com as tecnologias e os recursos seguintes

Componentes do JavaServer Faces/ Plataforma Java EE	1.2 com Java EE 5* 1.1 com J2EE 1.4
Banco de dados Viagem	Não é necessário

* Para tirar vantagem dos recursos Java EE 5 do NetBeans IDE 6.0, use um servidor da aplicação que seja totalmente compatível com a especificação Java EE 5, tal como o Sun Java System Application Server 9 (projeto GlassFish).

Este tutorial foi adaptado ao uso com o servidor da aplicação Sun Java PE 9.0 versão de atualização 1. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para saber quais são os problemas conhecidos e as soluções alternativas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.

Escolhendo uma data de calendário

1. Crie um novo projeto da aplicação Visual Web JSF, nomeie-o como CalendarExample e habilite a estrutura Visual Web JavaServer Faces.

   Você desenha a página como mostrado na figura abaixo.

   Figura: Desenho da página no formato de Calendário

2. Arraste para a página um componente Calendário da seção Básico da Paleta.

3. Na janela Propriedades, defina os seguintes valores:

   Propriedade	Valor
   id	startCalendar
   dateFormatPatternHelp	MM/dd/yyyy
   rótulo	Data de início:
   required	para True.

4. Coloque um componente Mensagem à direita do componente Calendário. Pressione as teclas Ctrl-Shift e arraste uma linha do componente Mensagem para o componente Calendário.

   Esta ação permite que o componente Mensagem exiba mensagens de erro para o Calendário.
5. Coloque um componente Texto estático abaixo do componente Calendário. Defina a propriedade id como validationMsgStaticText.
6. Coloque um componente de botão abaixo do componente Texto estático, digite Validar, e pressione Enter. Na janela Propriedades, altere a propriedade id para save.

7. Clique duas vezes no botão Validar e adicione o seguinte código ao método de ação validateButton.

   Exemplo de código 1: Código para validar data do Calendário

   public String validateButton_action() { validationMsgStaticText.setText( (String)DateFormat.getDateInstance( DateFormat.MEDIUM).format(startCalendar.getSelectedDate()) + " é uma data válida".); return null; }

   
   Este código obtém a data que o usuário inseriu no Calendário. Se a data estiver entre as datas mínima e máxima definidas para o Calendário, o Texto estático exibirá a data e indicará que é válida.
8. Clique com o botão direito do mouse, escolha Corrigir importações no menu pop-up para resolver o erro de HashMap não localizado.

9. Implante e execute a aplicaçãoe, em seguida, abra o calendário pop-up.

   O calendário exibe o mês e o ano atuais. Por padrão, a primeira data válida que pode ser selecionada é 100 anos antes da data atual e a última data válida é 100 anos depois da data atual.

10. Escolha uma data no calendário pop-up e, em seguida, clique no botão Validar.

    Se a data selecionada estiver dentro das datas mínimas e máximas, o Texto estático exibirá uma mensagem válida, como mostrado na Figura 2. Se escolher uma data fora deste intervalo, você verá uma mensagem de erro de validação.

    Figura 2: Data válida do calendário

Definindo as datas mínimas e máximas do calendário

1. No editor de Java, efetue rolagem até o método preprocess. Adicione o seguinte código (mostrado em negrito) para limpar a mensagem existente no componente Texto estático.

   Exemplo de código 2: Limpar mensagem de data válida antiga

   public void preprocess() { // Clear out old valid date message before start // new validations validationMsgStaticText.setText(""); }

2. Localize o método prerender. Adicione o seguinte código para preencher o campo de texto Calendário com a data de hoje.

   Exemplo de código 3: Definir data de início padrão

   public void prerender() { // Set default start date, if not // already entered java.util.Calendar date = GregorianCalendar.getInstance(); if (startCalendar.getSelectedDate() == null) { startCalendar.setSelectedDate(date.getTime()); } }

   
   O código exibe um erro porque não consegue localizar a variável GregorianCalendar. Mais tarde nesta seção você adicionará uma declaração de importação para esta classe.

3. Adicione os seguintes dois métodos acima do método de ação validateButton.

   Exemplo de código 4: Definir datas mínima e máxima do Calendário

   private Date minCalDate; public Date getMinCalDate() { java.util.Calendar date = java.util.Calendar.getInstance (FacesContext.getCurrentInstance().getViewRoot().getLocale()); // Have to zero out the time because // the date comparison is time sensitive date.set(java.util.Calendar.HOUR_OF_DAY, 0); date.set(java.util.Calendar.MINUTE, 0); date.set(java.util.Calendar.SECOND, 0); date.set(java.util.Calendar.MILLISECOND, 0); return date.getTime(); } private Date maxCalDate; public Date getMaxCalDate() { java.util.Calendar date = GregorianCalendar.getInstance(); date.set(java.util.Calendar.HOUR_OF_DAY, 0); //here is where you adjust your time period date.add(java.util.Calendar.YEAR, 1); SimpleDateFormat formatter = new SimpleDateFormat("EEE, MMM d, yyyy 'at' hh:mm:ss a zzz"); error(formatter.format(date.getTime())); maxCalDate = date.getTime(); return maxCalDate; }

   
   O método getMinCalDate define a data mínima do Calendário como hoje. No método getMaxCalDate, a linha date.add(java.util.Calendar.YEAR, 1); define a data máxima em um ano a partir de hoje. Para mais exemplos de definição de datas mínimas e máximas, inclusive como definir o calendário para exibir anos passados, consulte a seção deste tutorial intitulada Dicas para usar o componente de calendário.
4. Clique com o botão direito do mouse no editor de Java e escolha Corrigir importações no menu pop-up. Certifique-se de que java.util.Date apareça no campo Data e clique em OK.
5. Volte para a janela Visual Designer, clique com o botão direito do mouse no componente Calendário e escolha Vinculações de propriedade no menu pop-up.

6. Na caixa de diálogo Vinculações de propriedade, vincule a propriedade minDate do Calendário à minCalDate da Página 1, conforme mostrado na figura a seguir. Clique em Aplicar.

   Figura 3: Vinculação para propriedade mindate

7. Vincule a propriedade maxDate do Calendário à maxCalDate da Página 1 e clique em Aplicar. Clique em Fechar para sair da caixa de diálogo.
8. Execute a aplicação. O valor selecionado renderiza a data de hoje. Abra o pop-up do Calendário e observe que a data de hoje está realçada. Observe também que o Calendário agora vai de janeiro do ano atual até dezembro do ano seguinte.

9. Escolha qualquer data no calendário e, em seguida, clique no botão Validar.

   Se a data estiver dentro de um ano da data de hoje, a aplicação exibirá uma mensagem de validade. Se você escolher uma data anterior ou posterior a este intervalo, a aplicação exibirá uma mensagem de erro.

Validando um intervalo do calendário

1. Coloque um componente Calendário na página logo abaixo de Começo do calendário. Ajuste os outros componentes, conforme necessário. Segue-se a página que você desenha nesta seção.

   Figura 4: Página que inclui um calendário de término

2. Na janela Propriedades para o novo calendário, defina os seguintes valores:

   Propriedade	Valor
   id	endCalendar
   dateFormatPatternHelp	MM/dd/yyyy
   rótulo	Data final:
   required	para True.

3. Coloque um componente Mensagem à direita do componente Calendário. Pressione as teclas Ctrl-Shift e arraste uma linha do componente Mensagem para o componente Calendário.
4. Clique com o botão direito do mouse no componente Fim do calendário e escolha Vinculações de propriedade no menu pop-up.
5. Vincule a propriedade minDate do Calendário de término à minCalDate da Página 1. Clique em Aplicar.
6. Vincule a propriedade maxDate do Calendário de término à maxCalDate da Página 1. Clique em Aplicar e, em seguida, feche a caixa de diálogo Vinculações de propriedade.
7. No Visual Designer, clique com o botão direito do mouse no componente Fim do calendário e escolha Editar manipulador de eventos > Validar.

8. Adicione o seguinte código ao método endCalendar_validate(). Este código garante que a data final seja pelo menos uma semana após a data inicial.

   Amostra de código 5: Código para validar data de início

   public void endCalendar_validate(FacesContext context, UIComponent component, Object value) { java.util.Calendar endDate = GregorianCalendar.getInstance(); endDate.setTime((Date)value); java.util.Calendar startDate = GregorianCalendar.getInstance(); startDate.setTime(startCalendar.getSelectedDate()); if (startCalendar.getSelectedDate() != null) { if (startDate.after(endDate)) { throw new ValidatorException(new FacesMessage ("Data final deve ser após data inicial.")); } else { startDate.add(java.util.Calendar.DATE, 7); if (startDate.after(endDate)) { throw new ValidatorException(new FacesMessage ("Data final deve ser pelo menos uma semana depois da data inicial.")); } } } }

9. Clique com o botão direito do mouse no Editor Java e escolha Corrigir importações para corrigir os erros FacesMessage e ValidatorExeception.

10. Modifique o método de ação validateButton para incluir validação para a data do Fim do calendário:

    Amostra de código 6: Código para validar data de término

    public String validateButton_action() { SimpleDateFormat formatter = new SimpleDateFormat("EEE, MMM d, yyyy"); validationMsgStaticText.setText( formatter.format(startCalendar.getSelectedDate()) + " - " + formatter.format(endCalendar.getSelectedDate()) + " é um intervalo de data válido".); return null; }

11. Execute a aplicação. Escolha uma data inicial e uma data final e, em seguida, clique no botão Validar.

    Se as datas estiverem entre as datas mínimas e máximas (hoje e um ano a partir de hoje), e se a data de término for mais de uma semana depois da data de início, a aplicação exibe uma mensagem válida conforme mostrado na Figura 2. Do contrário, a aplicação exibe uma mensagem de erro conforme mostrado na figura abaixo.

    Figura 5: Intervalo do calendário - Resultados inválidos

Alterando o estilo do calendário

1. Salve a imagem table_title_solid.gif no diretório diretório_de_projetos\CalendarExample\web\resources.

2. Na janela Projetos, clique com o botão direito do mouse em CalendarExample > Páginas da Web > nó de recursos > nó stylesheet.css. Adicione o código à Amostra de código 7 ou 8, dependendo da versão dos componentes do JavaServer Faces que estiver usando.

   Exemplo de código 7: Código de folha de estilo para o Calendário do JavaServerFaces 1.1

   .CalPopDiv .DatSelDiv{ background-image:url(table_title_solid.gif); } .CalPopDiv .DatDayHdrTxt { color: red }

   
   

   Exemplo de código 8: Código de folha de estilo para o Calendário do JavaServer Faces 1.2

   .CalPopDiv_sun4 .DatSelDiv_sun4 { background-image:url(table_title_solid.gif); } .CalPopDiv_sun4 .DatDayHdrTxt_sun4 { color: red }

   
   

   A primeira classe de estilo define uma nova imagem de plano de fundo para o título pop-up do Calendário. A segunda classe de estilo define a cor do texto do cabeçalho de dia como vermelho.

   Uma lista completa de estilo CSS para o componente Calendário está disponível na ajuda on-line do NetBeans. Escolha Ajuda > Conteúdo da Ajuda no menu principal e procure o tópico Classes CSS do componente Calendário.

3. Implante e execute a aplicação e, em seguida, abra o calendário pop-up.

Dicas para usar o componente de calendário

• A Amostra de código 4 inclui o seguinte código no método getMaxCalDate para definir o valor máximo como um ano a partir do valor mínimo:

  date.add(java.util.Calendar.YEAR, 1);

  Para ajustar o período de tempo para alguns dias, como uma semana, use código semelhante ao seguinte:

  date.add(java.util.Calendar.DATE, 7);

• A Amostra de código 4 também inclui o código no método getMinCalDate para definir a data mínima como hoje. Para exibir anos passados no calendário, use código semelhante ao seguinte: Este código exibe os últimos dez anos de calendário:

  date.add(java.util.Calendar.YEAR, -10);
  

• Para alterar o formato de data do Calendário, clique no botão de reticências na propriedade dateFormatPattern e selecione um formato de data predefinido. Se o Editor de propriedades não incluir o formato desejado, você pode criar o seu próprio formato. Os valores que você insere são limitados a algumas combinações de aaaa para o ano, MM para mês e dd para o dia. Os caracteres separadores típicos são a barra (/), o ponto (.) e o traço (-).

Resumo

Neste tutorial, você adicionou um componente Calendário a uma página Visual Web JSF e depois definiu as datas mínimas e máximas. Você também adicionou um componente Validador e adicionou código para validar se a data definida pelo usuário no Calendário de término é pelo menos uma semana depois da data definida no Calendário de início. Você também alterou o estilo do calendário.

Veja também

• Introdução ao desenvolvimento de aplicações JSF Visual Web
• Desenvolvendo uma aplicação Web
• Convertendo e validando dados em aplicações JSF Visual Web