GWT-DatePickerウィジェット

前書き

*DatePicker* ウィジェットは、標準のGWT日付ピッカーを表します。

クラス宣言

以下は com.google.gwt.user.datepicker.client.DatePicker クラスの宣言です-

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

CSSスタイルルール

次のデフォルトのCSSスタイルルールは、すべてのDatePickerウィジェットに適用されます。要件に応じて上書きできます。

.gwt-DatePicker { }

.datePickerMonthSelector {  }

.datePickerMonth {  }

.datePickerPreviousButton {  }

.datePickerNextButton {  }

.datePickerDays {  }

.datePickerWeekdayLabel {  }

.datePickerWeekendLabel {  }

.datePickerDay {  }

.datePickerDayIsToday {  }

.datePickerDayIsWeekend { }

.datePickerDayIsFiller {  }

.datePickerDayIsValue {  }

.datePickerDayIsDisabled { }

.datePickerDayIsHighlighted {  }

.datePickerDayIsValueAndHighlighted { }

クラスコンストラクター

Sr.No.

Constructor & Description

1

DatePicker()

新しい日付ピッカーを作成します。

2

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

新しい日付ピッカーを作成します。

クラスメソッド

Sr.No.	Function name & Description
1	HandlerRegistration addHighlightHandler(HighlightHandler<java.util.Date> handler) HighlightEventハンドラーを追加します。
2	Handler Registration add Show Range Handler (ShowRangeHandler<java.util.Date> handler) ShowRangeEventハンドラーを追加します。
3	Handler Registration addShow Range Handler AndFire (Show Range Handler<java.util.Date> handler) 範囲表示ハンドラーを追加し、現在のビューでハンドラーをすぐにアクティブにします。
4	void addStyleToDates(java.lang.String styleName, java.util.Date date) 指定された日付にスタイル名を追加します。
5	void addStyleToDates(java.lang.String styleName, java.util.Date date, java.util.Date… moreDates) 指定された日付にスタイル名を追加します。
6	void add Style To Dates(java.lang.String style Name, java.lang.Iterable<java.util.Date> dates) 指定された日付にスタイル名を追加します。
7	void addTransientStyleToDates(java.lang.String styleName, java.util.Date date) 指定されたスタイル名を指定された日付に追加します。これは表示されている必要があります。
8	void addTransientStyleToDates(java.lang.String styleName, java.util.Date date, java.util.Date… moreDates) 指定されたスタイル名を指定された日付に追加します。これは表示されている必要があります。
9	void add Transient Style ToDates(java.lang.String styleName, java.lang.Iterable<java.util.Date> dates) 指定されたスタイル名を指定された日付に追加します。これは表示されている必要があります。
10	Handler Registration addValue Change Handler(ValueChangeHandler<java.util.Date> handler) ValueChangeEventハンドラーを追加します。
11	java.util.Date getCurrentMonth() 日付ピッカーが表示されている現在の月を取得します。
12	java.util.Date getFirstDate() 最初に表示された日付を返します。
13	java.util.Date getHighlightedDate() ハイライトされた日付（マウスがホバーしている日付）を取得します（存在する場合）。
14	java.util.Date getLastDate() 最後に表示された日付を返します。
15	protected CalendarModel getModel() この日付ピッカーに関連付けられたCalendarModelを取得します。
16	protected MonthSelector getMonthSelector() この日付ピッカーに関連付けられたMonthSelectorを取得します。
17	java.lang.String getStyleOfDate(java.util.Date date) 日付に関連付けられたスタイルを取得します（addTransientStyleToDates（java.lang.String、java.util.Date）で設定されたスタイルは含まれません）。
18	java.util.Date getValue() 選択した日付を返します。何も選択されていない場合はnullを返します。
19	protected CalendarView getView() この日付ピッカーに関連付けられたCalendarViewを取得します。
20	boolean isDateEnabled(java.util.Date date) 表示される日付は有効になっていますか？
21	boolean isDateVisible(java.util.Date date) 日付は現在、日付ピッカーに表示されていますか？
22	void onLoad() このメソッドは、ウィジェットがブラウザのドキュメントに添付された直後に呼び出されます。
23	protected void refreshAll() この日付ピッカーのすべてのコンポーネントを更新します。
24	void removeStyleFromDates(java.lang.String styleName, java.util.Date date) 一時的なものであっても、指定された日付からstyleNameを削除します。
25	void removeStyleFromDates(java.lang.String styleName, java.util.Date date, java.util.Date… moreDates) 一時的なものであっても、指定された日付からstyleNameを削除します。
26	void remove Style From Dates(java.lang.String styleName, java.lang.Iterable<java.util.Date> dates) 一時的なものであっても、指定された日付からstyleNameを削除します。
27	void setCurrentMonth(java.util.Date month) 指定された月を表示するように日付ピッカーを設定します。getFirstDate（）およびgetLastDate（）を使用して、日付ピッカーが表示するために選択した正確な日付範囲にアクセスします。
28	void setStyleName(java.lang.String styleName) 日付選択スタイルの名前を設定します。
29	void setTransientEnabledOnDates(boolean enabled, java.util.Date date) 表示される日付を有効または無効に設定します。
30	void setTransientEnabledOnDates(boolean enabled, java.util.Date date, java.util.Date… moreDates) 表示される日付を有効または無効に設定します。
31	void set Transient Enabled On Dates(boolean enabled, java.lang.Iterable<java.util.Date> dates) 表示される日付のグループを有効または無効に設定します。
32	protected void setup() 日付ピッカーを設定します。
33	void setValue(java.util.Date newValue) DatePickerの値を設定します。
34	void setValue(java.util.Date newValue, boolean fireEvents) DatePickerの値を設定します。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Composite
java.lang.Object

DatePickerウィジェットの例

この例では、GWTでのDatePickerウィジェットの使用法を示す簡単な手順を紹介します。次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-

Step	Description
1	Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.client.HelloWorld'/>

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

</module>

以下は、変更されたスタイルシートファイル 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 {
}

以下は、変更されたHTMLホストファイル war/HelloWorldl の内容です。

<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>

Treeウィジェットの使用方法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。

package com.finddevguides.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);
   }
}

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT DatePickerウィジェット

Gwt-datepicker-widget