GWT - Widget DatePicker

introduzione

Il DatePicker widget rappresenta un selettore di date GWT standard.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.datepicker.client.DatePicker classe -

public class DatePicker
   extends Composite
      implements HasHighlightHandlers<java.util.Date>,
	     HasShowRangeHandlers<java.util.Date>, HasValue<java.util.Date>

Regole di stile CSS

Le seguenti regole di stile CSS predefinite verranno applicate a tutto il widget DatePicker. Puoi sovrascriverlo secondo le tue esigenze.

.gwt-DatePicker { }

.datePickerMonthSelector {  }

.datePickerMonth {  }

.datePickerPreviousButton {  }

.datePickerNextButton {  }

.datePickerDays {  }

.datePickerWeekdayLabel {  }

.datePickerWeekendLabel {  }

.datePickerDay {  }

.datePickerDayIsToday {  }

.datePickerDayIsWeekend { }

.datePickerDayIsFiller {  }

.datePickerDayIsValue {  }

.datePickerDayIsDisabled { }

.datePickerDayIsHighlighted {  }

.datePickerDayIsValueAndHighlighted { }

Costruttori di classi

Sr.No. Costruttore e descrizione
1

DatePicker()

Crea un nuovo selettore di date.
2

protected DatePicker(MonthSelector monthSelector, CalendarView view, CalendarModel model)

Crea un nuovo selettore di date.

Metodi di classe

Sr.No. Nome e descrizione della funzione
1

HandlerRegistration addHighlightHandler(HighlightHandler<java.util.Date> handler)

Aggiunge un gestore HighlightEvent.
2

Handler Registration add Show Range Handler (ShowRangeHandler<java.util.Date> handler)

Aggiunge un gestore ShowRangeEvent.
3

Handler Registration addShow Range Handler AndFire (Show Range Handler<java.util.Date> handler)

Aggiunge un gestore dell'intervallo di visualizzazione e attiva immediatamente il gestore nella vista corrente.
4

void addStyleToDates(java.lang.String styleName, java.util.Date date)

Aggiungi un nome di stile alle date specificate.
5

void addStyleToDates(java.lang.String styleName, java.util.Date date, java.util.Date... moreDates)

Aggiungi un nome di stile alle date specificate.
6

void add Style To Dates(java.lang.String style Name, java.lang.Iterable<java.util.Date> dates)

Aggiungi un nome di stile alle date specificate.
7

void addTransientStyleToDates(java.lang.String styleName, java.util.Date date)

Aggiunge il nome dello stile specificato alle date specificate, che devono essere visibili.
8

void addTransientStyleToDates(java.lang.String styleName, java.util.Date date, java.util.Date... moreDates)

Aggiunge il nome dello stile specificato alle date specificate, che devono essere visibili.
9

void add Transient Style ToDates(java.lang.String styleName, java.lang.Iterable<java.util.Date> dates)

Aggiunge il nome dello stile specificato alle date specificate, che devono essere visibili.
10

Handler Registration addValue Change Handler(ValueChangeHandler<java.util.Date> handler)

Aggiunge un gestore ValueChangeEvent.
11

java.util.Date getCurrentMonth()

Ottiene il mese corrente visualizzato dal selettore di date.
12

java.util.Date getFirstDate()

Restituisce la prima data visualizzata.
13

java.util.Date getHighlightedDate()

Ottiene la data evidenziata (quella su cui passa il mouse), se presente.
14

java.util.Date getLastDate()

Restituisce l'ultima data visualizzata.
15

protected CalendarModel getModel()

Ottiene l'oggetto CalendarModel associato a questo selettore di date.
16

protected MonthSelector getMonthSelector()

Ottiene l'oggetto MonthSelector associato a questo selettore di date.
17

java.lang.String getStyleOfDate(java.util.Date date)

Ottiene lo stile associato a una data (non include gli stili impostati tramite addTransientStyleToDates (java.lang.String, java.util.Date)).
18

java.util.Date getValue()

Restituisce la data selezionata o null se nessuna è selezionata.
19

protected CalendarView getView()

Ottiene l'oggetto CalendarView associato a questo selettore di date.
20

boolean isDateEnabled(java.util.Date date)

La data visibile è abilitata?
21

boolean isDateVisible(java.util.Date date)

La data è attualmente mostrata nel selettore di data?
22

void onLoad()

Questo metodo viene chiamato immediatamente dopo che un widget viene allegato al documento del browser.
23

protected void refreshAll()

Aggiorna tutti i componenti di questo selettore di date.
24

void removeStyleFromDates(java.lang.String styleName, java.util.Date date)

Rimuove styleName dalle date specificate (anche se è temporaneo).
25

void removeStyleFromDates(java.lang.String styleName, java.util.Date date, java.util.Date... moreDates)

Rimuove styleName dalle date specificate (anche se è temporaneo).
26

void remove Style From Dates(java.lang.String styleName, java.lang.Iterable<java.util.Date> dates)

Rimuove styleName dalle date specificate (anche se è temporaneo).
27

void setCurrentMonth(java.util.Date month)

Imposta il selettore di date per mostrare il mese dato, usa getFirstDate () e getLastDate () per accedere all'intervallo di date esatto che il selettore di date ha scelto di visualizzare.
28

void setStyleName(java.lang.String styleName)

Imposta il nome dello stile del selettore di date.
29

void setTransientEnabledOnDates(boolean enabled, java.util.Date date)

Imposta una data visibile da abilitare o disabilitare.
30

void setTransientEnabledOnDates(boolean enabled, java.util.Date date, java.util.Date... moreDates)

Imposta una data visibile da abilitare o disabilitare.
31

void set Transient Enabled On Dates(boolean enabled, java.lang.Iterable<java.util.Date> dates)

Imposta un gruppo di date visibili da abilitare o disabilitare.
32

protected void setup()

Imposta il selettore di data.
33

void setValue(java.util.Date newValue)

Imposta il valore di DatePicker.
34

void setValue(java.util.Date newValue, boolean fireEvents)

Imposta il valore di DatePicker.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • com.google.gwt.user.client.ui.Composite

  • java.lang.Object

Esempio di widget DatePicker

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget DatePicker in GWT. Segui i passaggi seguenti per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo Descrizione
1 Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2 Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Di seguito è riportato il contenuto del file del foglio di stile modificato war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-DatePicker {
   border: 1px solid #ccc;
   border-top:1px solid #999;
   cursor: default;
}

.gwt-DatePicker td,
.datePickerMonthSelector td:focus {
   outline: none;
}

.datePickerMonthSelector td:focus {
   outline: none;
}

.datePickerDays {
   width: 100%;
   background: white;
}

.datePickerDay,
.datePickerWeekdayLabel,
.datePickerWeekendLabel {
   font-size: 85%;
   text-align: center;
   padding: 4px;
   outline: none;
   font-weight:bold;
   color:#333;
   border-right: 1px solid #EDEDED;
   border-bottom: 1px solid #EDEDED;
}

.datePickerWeekdayLabel,
.datePickerWeekendLabel {
   background: #fff;
   padding: 0px 4px 2px;
   cursor: default;
   color:#666;
   font-size:70%;
   font-weight:normal;
}

.datePickerDay {
   padding: 4px 7px;
   cursor: hand;
   cursor: pointer;
}

.datePickerDayIsWeekend {
   background: #f7f7f7;
}

.datePickerDayIsFiller {
   color: #999;
   font-weight:normal;
}

.datePickerDayIsValue {
   background: #d7dfe8;
}

.datePickerDayIsDisabled {
   color: #AAAAAA;
   font-style: italic;
}

.datePickerDayIsHighlighted {
   background: #F0E68C;
}

.datePickerDayIsValueAndHighlighted {
   background: #d7dfe8;
}

.datePickerDayIsToday {
   padding: 3px;
   color: #00f;
   background: url(images/hborder.png) repeat-x 0px -2607px;
}

.datePickerMonthSelector {
   width: 100%;
   padding: 1px 0 5px 0;
   background: #fff;
}

.datePickerPreviousButton,
.datePickerNextButton {
   font-size: 120%;
   line-height: 1em;
   color: #3a6aad;
   cursor: hand;
   cursor: pointer;
   font-weight: bold;
   padding: 0px 4px;
   outline: none;
}

td.datePickerMonth {
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   font-size: 100%;
   font-weight: bold;
   color: #333;
}

.gwt-DateBox {
   padding: 5px 4px;
   border: 1px solid #ccc;
   border-top: 1px solid #999;
   font-size: 100%;
}

.gwt-DateBox input {
   width: 8em;
}

.dateBoxFormatError {
   background: #ffcccc;
}

.dateBoxPopup {
}

Di seguito è riportato il contenuto del file host HTML modificato war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>DatePicker Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'uso del widget Albero.

package com.tutorialspoint.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.datepicker.client.DateBox;
import com.google.gwt.user.datepicker.client.DatePicker;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      // Create a basic date picker
      DatePicker datePicker = new DatePicker();
      final Label text = new Label();

      // Set the value in the text box when the user selects a date
      datePicker.addValueChangeHandler(new ValueChangeHandler<Date>() {
         @Override
         public void onValueChange(ValueChangeEvent<Date> event) {
            Date date = event.getValue();
            String dateString = 
            DateTimeFormat.getFormat("MM/dd/yyyy").format(date);
            text.setText(dateString);				
         }
      });
      
      // Set the default value
      datePicker.setValue(new Date(), true);

      // Create a DateBox
      DateTimeFormat dateFormat = DateTimeFormat.getFormat("MM/dd/yyyy");
      DateBox dateBox = new DateBox();
      dateBox.setFormat(new DateBox.DefaultFormat(dateFormat));

      Label selectLabel = new Label("Permanent DatePicker:");
      Label selectLabel2 = new Label("DateBox with popup DatePicker:");
      
      // Add widgets to the root panel.
      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(selectLabel);
      vPanel.add(text);
      vPanel.add(datePicker);
      vPanel.add(selectLabel2);
      vPanel.add(dateBox);

      RootPanel.get("gwtContainer").add(vPanel);
   } 
}

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato: