>> Mais documentação do Visual Web Pack

Usando o componente de calendário

Conteúdo -  Escolhendo uma data de calendário -  Definindo as datas mínimas e máximas do calendário -  Validando um intervalo do calendário -  Alterando o estilo do calendário -  Dicas para usar o componente de calendário -  Outra opção para trabalhar com calendários

Este tutorial funciona com as tecnologias e os recursos seguintes

Componentes 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
Biblioteca de componentes Blueprints Ajax	Não é necessário

* Na data da publicação deste tutorial, somente o servidor de aplicativos Sun Java System oferecia suporte ao Java EE 5.

Este tutorial foi adaptado para ser usado com o Servidor de aplicativos Sun Java System PE 9.0, versão atualizada 1, e o Tomcat 5.5.17. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para obter informações sobre problemas conhecidos e soluções sugeridas. 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 de aplicativo da Web visual e nomeie-o CalendarExample.

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

   Figura 1: Design da página do formato do calendário

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

   O formato padrão para dia, mês e ano (por exemplo, mm/dd/aaaa na figura acima) é o formato padrão para sua localidade.

3. Na janela Propriedades, defina os seguintes valores:

   Propriedade	Valor
   id	startCalendar
   label	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, defina o id do componente como validateButton.

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

   Amostra 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()) + " is a valid date."); 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 o aplicativo e, em seguida, abra o calendário pop-up.

   O calendário exibe o mês e o ano atuais. Por padrão, a data válida mais antiga que você pode selecionar é 100 anos antes da data atual, e a data válida mais recente é 100 anos após a 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 de 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.

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

   public void preprocess() { // Limpar mensagem de data antiga válida antes de começar // novas validações 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.

   Amostra de código 3: Definir data inicial padrão

   public void prerender() { // Definir data inicial padrão, se já // não inserida 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.

   Amostra de código 4: Definir as datas mínimas e máximas do calendário

   private Date minCalDate; public Date getMinCalDate() { java.util.Calendar date = java.util.Calendar.getInstance (FacesContext.getCurrentInstance().getViewRoot().getLocale()); // Deve-se zerar a hora porque // a comparação de datas faz distinção das horas 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); //aqui você ajusta seu período de tempo 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 como 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. Assegure-se de que java.util.Date apareça no campo Nome totalmente qualificado 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 a minCalDate de Page1, como mostrado na figura abaixo. Clique em Aplicar.

   Figura 3: Vinculando a propriedade mindate

7. Vincule a propriedade maxDate do Calendário a maxCalDate de Page1 e clique em Aplicar. Clique em Fechar para sair da caixa de diálogo.
8. Execute o aplicativo. Abra o pop-up do Calendário e observe que a data de hoje está realçada. Observe ainda 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, o aplicativo exibirá uma mensagem de validade. Se você escolher uma data anterior ou posterior a este intervalo, o aplicativo 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 fim do calendário

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

   Propriedade	Valor
   id	endCalendar
   label	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 Fim do calendário a minCalDate de Page1. Clique em Aplicar.
6. Vincule a propriedade maxDate do Fim do calendário a maxCalDate de Page1. 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 inicial

   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 ("A data final deve ser posterior à data inicial.")); } else { startDate.add(java.util.Calendar.DATE, 7); if (startDate.after(endDate)) { throw new ValidatorException(new FacesMessage ("A data final deve ser pelo menos uma semana após a data inicial.")); } } } }

9. Se você estiver usando componentes do JavaServer Faces 1.2, clique com o botão direito no editor de Java e escolha Corrigir importações para corrigir os erros de 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 final

    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 o aplicativo. Escolha uma data inicial e uma data final e, em seguida, clique no botão Validar.

    Se as datas estiverem entre as datas mínima e máxima (hoje e um ano a partir de hoje), e se a data final estiver mais de uma semana após a data inicial, o aplicativo exibirá uma mensagem de validez, como mostrado na Figura 5. Do contrário, o aplicativo exibirá uma mensagem de erro.

    Figura 5: Resultados do intervalo do calendário

Alterando o estilo do calendário

1. Salve a imagem table_title_solid.gif no diretório projects_directory\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.

   Amostra de código 7: Código de folha de estilos para o calendário do JavaServerFaces 1.1

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

   
   

   Amostra de código 8: Código de folha de estilos para o calendário do JavaServerFaces 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 o aplicativo 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 da 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 (-).

Outra opção para trabalhar com calendários

Este tutorial oferece um bom exemplo de uso para trabalhar com o componente interno Calendário. Se você encontrar problemas no uso do componente interno Calendário, uma outra opção a ser experimentada é o componente Calendário pop-up, na Biblioteca de componentes BluePrints Ajax. O componente Calendário pop-up foi concebido para corrigir as limitações no Calendário interno. No entanto, o componente Calendário pop-up é um protótipo e é possível que não se ajuste com perfeição aos outros componentes que integram o IDE.

Para obter instruções sobre o acesso ao componente Calendário pop-up, consulte Fazendo download e importando Ajax e outros componentes.

Consulte também:

• Examinando componentes