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: