corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

>> Visual Web Pack のほかのドキュメント

カレンダコンポーネント

執筆: Gail Chappell、Chris Kutler
2007 年 5 月 [Revision number: V5.5.1-1]    

このチュートリアルでは、NetBeans Visual Web Pack 5.5 のカレンダコンポーネントの使用方法について説明します。カレンダ日付の最小値と最大値を設定する方法と、ユーザーが選択する日付がこの範囲内であるかどうかを確認する方法を示します。

目次

-  カレンダ日付の選択
-  カレンダ日付の最小値と最大値の設定
-  カレンダの日付範囲の検査
-  カレンダのスタイルの変更
-  カレンダコンポーネントの使用に関するヒント
-  カレンダを使用するための別のオプション
  このページの情報は NetBeans 5.5 および 5.5.1 の Visual Web Pack が対象です。

このチュートリアルで使用している画像ファイル
» table_title_solid.gif

このチュートリアルでは、次のテクノロジとリソースを使用します。

JavaServer Faces コンポーネント /
Java EE プラットフォーム		 動作可能Java EE 5* の場合、1.2
動作可能J2EE 1.4 の場合、1.1
Travel データベース 任意任意
BluePrints AJAX コンポーネントライブラリ 任意任意

* このチュートリアルの公開時点で Java EE 5 をサポートしていたのは Sun Java System Application Server だけです。

このチュートリアルは、Sun Java System Application Server PE 9.0 Update Release 1 と Tomcat 5.5.17 を使用することを想定しています。別のサーバーを使用している場合は、「リリースノート」と「FAQ」(または「日本語 FAQ」) で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。

カレンダ日付の選択

このチュートリアルでは、「基本」パレットにあるカレンダコンポーネントを使用します。最初に、プロジェクトにカレンダを追加します。次に、ユーザーが選択する日付が、カレンダ日付のデフォルトの最小値と最大値の範囲内であるかどうかを検査するコードを追加します。

  1. 新しい Visual Web アプリケーションプロジェクトを「CalendarExample」という名前で作成します。

    次の図に示すようなページをデザインします。

    図 1:カレンダ書式ページのデザイン 図 1:カレンダ書式ページのデザイン

  2. 「パレット」の「基本」セクションから「カレンダ」コンポーネントをページにドラッグします。

    年、月、日のデフォルトの表示書式 （前出の図では yyyy/mm/dd） は、使用しているロケールのデフォルト書式になります。

  3. 「プロパティー」ウィンドウで、次の値を設定します。

    プロパティー     値
    id startCalendar
    label 開始日付:
    required チェックマークのアイコン を選択して True に設定

  4. カレンダコンポーネントの右側に「メッセージ」コンポーネントを配置します。Ctrl-Shift キーを押しながら、メッセージコンポーネントからカレンダコンポーネントまで線をドラッグします。

    この操作により、メッセージコンポーネントにカレンダのエラーメッセージが表示されるようになります。
  5. カレンダコンポーネントの下に「静的テキスト」コンポーネントを配置します。「id」プロパティーを「validationMsgStaticText」に設定します。
  6. 静的テキストコンポーネントの下にボタンコンポーネントを配置し、「妥当性検査を行う」と入力して、Enter キーを押します。「プロパティー」ウィンドウで、「id」プロパティーを「validateButton」に設定します。

  7. 「妥当性検査を行う」ボタンをダブルクリックし、validateButton アクションメソッドに次のコードを追加します。

    コード例 1:カレンダの日付を検査するコード 
    public String validateButton_action() {
        validationMsgStaticText.setText(
                (String)DateFormat.getDateInstance(
                DateFormat.MEDIUM).format(startCalendar.getSelectedDate())
                + " は有効な日付です。");
        return null;
    }

    このコードは、ユーザーがカレンダに入力した日付を取得します。この日付が、カレンダに設定された日付の最小値と最大値の範囲内にある場合は、日付と、その日付が有効であることを示すメッセージが静的テキストに表示されます。
  8. 右クリックし、ポップアップメニューから「インポートを修正」を選択して、DateFormat が見つからないというエラーを解決します。

  9. アプリケーションを配備して実行し、ポップアップカレンダを開きます。

    ポップアップカレンダに現在の年と月が表示されます。デフォルトでは、選択できるもっとも早い日付は現在の日付の 100 年前で、もっとも遅い日付は現在の日付の 100 年後です。

  10. ポップアップカレンダから日付を選択し、「妥当性検査を行う」ボタンをクリックします。

    選択した日付が、日付のデフォルトの最小値と最大値の範囲内に収まっている場合、図 2 に示すように、日付が有効であることを示すメッセージが静的テキストに表示されます。 範囲外の日付を選択した場合は、検査エラーのメッセージが表示されます。

    図 2:カレンダの日付形式 図 2:有効なカレンダ日付

カレンダ日付の最小値と最大値の設定

デフォルトで、カレンダの日付範囲は 200 年です。しかし、多くの場合、アプリケーションの用途に合った日付範囲を定義する必要があります。この節では、最小値のプロパティーを今日、最大値のプロパティーを今日から 1 年後に設定して、カレンダの日付範囲を 1 年に限定します。

  1. Java エディタで、preprocess メソッドまでスクロールします。静的テキストコンポーネント内の既存のメッセージを消去する、次のコード (太字部分) を追加します。

    コード例 2:日付が有効であることを示す古いメッセージの消去 
    public void preprocess() {
         // 新しい妥当性検査を開始する前に、日付が有効であることを示す
        // 古いメッセージを消去
        validationMsgStaticText.setText("");
}

  2. prerender メソッドに移動します。カレンダのテキストフィールドに今日の日付を事前入力する次のコードを追加します。

    コード例 3:デフォルトの開始日付の設定 
    public void prerender() {
         // まだ入力していない場合は、
        // デフォルトの開始日付を設定
        java.util.Calendar date = GregorianCalendar.getInstance();
        if (startCalendar.getSelectedDate() == null) {
        startCalendar.setSelectedDate(date.getTime());
        }
}

    GregorianCalendar 変数が見つからないので、このコードにはエラーが表示されます。このクラスのインポート文は、この節のあとのほうで追加します。

  3. validateButton アクションメソッドの上に次の 2 つのメソッドを追加します。

    コード例 4:カレンダ日付の最小値と最大値の設定 
    private Date minCalDate;

    public Date getMinCalDate() {
        java.util.Calendar date = java.util.Calendar.getInstance
            (FacesContext.getCurrentInstance().getViewRoot().getLocale());
        // 日付の比較は時刻の影響を受けるため、
        // 時刻を 0 に設定する
        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);
        // ここで日付範囲を調整
        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;
    }

    getMinCalDate メソッドで、カレンダ日付の最小値を今日に設定します。また、getMaxCalDate メソッドの date.add(java.util.Calendar.YEAR, 1); の行で、カレンダ日付の最大値を今日から 1 年後に設定します。カレンダで過去の年を表示する方法を含め、カレンダ日付の最小値と最大値を設定する例については、このチュートリアルの「カレンダコンポーネントの使用に関するヒント」を参照してください。
  4. Java エディタ内で右クリックし、ポップアップメニューから「インポートを修正」を選択します。「完全修飾名」フィールドに java.util.Date が表示されていることを確認し、「了解」をクリックします。
  5. ビジュアルデザイナーに戻り、カレンダコンポーネントを右クリックして、ポップアップメニューから「プロパティーのバインド」を選択します。

  6. 次の図に示すように、「プロパティーのバインド」ダイアログで、カレンダの「minDate」プロパティーを Page 1 の minCalDate にバインドします。「適用」をクリックします。

    図 3:カレンダの日付形式 図 3:「minDate」プロパティーのバインド
  7. カレンダの「maxDate」プロパティーを Page 1 の maxCalDate にバインドし、「適用」をクリックします。「閉じる」をクリックしてダイアログを閉じます。
  8. アプリケーションを実行します。ポップアップカレンダを開くと、今日の日付が強調表示されます。また、カレンダの日付範囲が、今年の 1 月から来年の 12 月までに設定されています。

  9. カレンダで任意の日付を選択し、「妥当性検査を行う」ボタンをクリックします。

    選択した日付が今日の日付から 1 年以内にある場合は、有効な日付であることを示すメッセージが表示されます。この範囲より前またはあとの日付を選択した場合は、エラーメッセージが表示されます。

カレンダの日付範囲の検査

ここで、旅行のプログラムを開発すると仮定します。このプログラムでは、ユーザーが、旅行の開始日付と終了日付を選択します。日程は 1 週間以上である必要があります。この節では、アプリケーションに終了日付カレンダを追加します。次に、ユーザーが終了日付カレンダで設定した日付が、開始日付カレンダで設定した日付より 1 週間以上あとであることを検査するコードを追加します。

  1. ページ上の開始日付カレンダのすぐ下にカレンダコンポーネントを配置します。必要に応じて、ほかのコンポーネントを調整します。この節でデザインするページは次のようになります。

    図 4:終了日付カレンダを含むページ 図 4:終了日付カレンダを含むページ

  2. 新しいカレンダの「プロパティー」ウィンドウで、次の値を設定します。

    プロパティー     値
    id endCalendar
    label 終了日付:
    required チェックマークのアイコン を選択して True に設定
  3. カレンダコンポーネントの右側に「メッセージ」コンポーネントを配置します。Ctrl-Shift キーを押しながら、メッセージコンポーネントからカレンダコンポーネントまで線をドラッグします。
  4. 終了日付カレンダコンポーネントを右クリックし、ポップアップメニューから「プロパティーのバインド」を選択します。
  5. 終了日付カレンダの「minDate」プロパティーを Page 1 の minCalDate にバインドします。「適用」をクリックします。
  6. 終了日付カレンダの「maxDate」プロパティーを Page 1 の maxCalDate にバインドします。「適用」をクリックし、「閉じる」をクリックして「プロパティーのバインド」ダイアログを閉じます。
  7. ビジュアルデザイナーで、終了日付カレンダコンポーネントを右クリックし、「イベントハンドラを編集」>「validate」を選択します。

  8. endCalendar_validate() メソッドに次のコードを追加します。このコードにより、終了日付が開始日付の 1 週間以上あとであることが保証されます。

    コード例 5:開始日付を検査するコード 
    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
                    ("終了日付は開始日付よりあとの日付である必要があります。"));
            } else {
                startDate.add(java.util.Calendar.DATE, 7);
                if (startDate.after(endDate)) {
                    throw new ValidatorException(new FacesMessage
                        ("終了日付は開始日付より 1 週間以上あとの日付である必要があります。"));
                }

            }
        }
    }
  9. JavaServer Faces 1.2 コンポーネントを使用している場合は、Java エディタを右クリックし、「インポートを修正」を選択して、FacesMessage と ValidatorExeception のエラーを修正します。

  10. 終了日付カレンダの日付を検査するように validateButton アクションメソッドを変更します。

    コード例 6:終了日付を検査するコード 
    public String validateButton_action() {
            SimpleDateFormat formatter
                = new SimpleDateFormat("yyyy/MM/dd (EEE)");
        validationMsgStaticText.setText(
                formatter.format(startCalendar.getSelectedDate())
                +
                " - "
                +
                formatter.format(endCalendar.getSelectedDate())
                + " は有効な日付の範囲です。");
        return null;
    }

  11. アプリケーションを実行します。開始日付と終了日付を選択し、「妥当性検査を行う」ボタンをクリックします。

    選択した日付が、日付の最小値と最大値 (今日および今日から 1 年後) の範囲内にあり、終了日付が開始日付の 1 週間以上あとである場合、図 5 に示すように、日付が有効であることを示すメッセージが表示されます。それ以外の場合は、エラーメッセージが表示されます。

    図 4:検査ページに表示される結果 図 5:カレンダの日付範囲の検査結果

カレンダのスタイルの変更

カレンダコンポーネントの色とスタイルは変更できます。ここでは、カレンダコンポーネントの表タイトルの外観を変更します。
  1. table_title_solid.gif の画像を<プロジェクトディレクトリ>\CalendarExample\web\resources ディレクトリに保存します。

  2. 「プロジェクト」ウィンドウで、「CalendarExample」>「Web ページ」>「resources」ノード >「stylesheet.css」ノードをダブルクリックします。使用している JavaServer Faces コンポーネントのバージョンに応じて、コード例 7 または 8 のコードを追加します。

    コード例 7:JavaServer Faces 1.1 カレンダ用のスタイルシートコード 
    .CalPopDiv .DatSelDiv{
background-image:url(table_title_solid.gif);
}

.CalPopDiv .DatDayHdrTxt {
color:red
}

    コード例 8:JavaServer Faces 1.2 カレンダ用のスタイルシートコード 
    .CalPopDiv_sun4 .DatSelDiv_sun4 {
background-image:url(table_title_solid.gif);
}

.CalPopDiv_sun4 .DatDayHdrTxt_sun4 {
color:red
}

    最初のスタイルクラスは、ポップアップカレンダのタイトルに新しい背景画像を設定します。2 つ目のスタイルクラスは、日付ヘッダーテキストの色を赤に設定します。

    カレンダコンポーネントの CSS スタイルの全一覧は、NetBeans オンラインヘルプに記載されています。メインメニューから「ヘルプ」>「ヘルプの目次」を選択し、トピック「カレンダコンポーネントの CSS クラス」を検索してください。

  3. アプリケーションを配備して実行し、ポップアップカレンダを開きます。

カレンダコンポーネントの使用に関するヒント

  • コード例 4 の getMaxCalDate メソッドには、最大値を最小値から 1 年後に設定するための次のコードが含まれています。 
    date.add(java.util.Calendar.YEAR, 1);
    期間の日数を調整して、たとえば 1 週間にするには、次のようなコードを使用します。 
    date.add(java.util.Calendar.DATE, 7);
  • また、コード例 4 の getMinCalDate メソッドには、日付の最小値を今日に設定するコードが含まれています。カレンダに過去の年を表示するには、コードを次のようにします。このコードの場合、過去 10 年分のカレンダを表示できるようになります。 
    date.add(java.util.Calendar.YEAR, -10);
  • カレンダの日付書式を変更するには、「dateFormatPattern」プロパティーの省略符号ボタン (...) をクリックし、定義済みの日付書式を選択します。プロパティーエディタに希望する書式がない場合は、独自のものを作成できます。入力できる値は、年を示す yyyy、月を示す MM、および日を示す dd の組み合わせに限られます。代表的なセパレータ文字は、スラッシュ (/)、ピリオド (.)、およびハイフン (-) です。

カレンダを使用するための別のオプション

このチュートリアルでは、組み込みのカレンダコンポーネントを使用する具体的な例を示しました。組み込みのカレンダコンポーネントを使用していて問題が生じた場合は、BluePrints AJAX コンポーネントライブラリのポップアップカレンダコンポーネントを試してみてください。ポップアップカレンダコンポーネントは、組み込みのカレンダコンポーネントの制限を解消するために設計されています。ただし、ポップアップカレンダコンポーネントはプロトタイプであるため、IDE に組み込まれているその他のコンポーネントとシームレスに連携しない可能性があります。

ポップアップカレンダコンポーネントを利用する方法については、「AJAX およびその他のコンポーネントのダウンロードとインポート」を参照してください。


関連項目:

更新日: 2007 年 5 月 24 日

Bookmark this page

del.icio.us furl simpy slashdot technorati digg
Companion
Projects: 		MySQL Database Server   GlassFish Community: an Open Source Application Server   Open Solaris  Open JDK: an Open SourceJDK   Mobile & Embedded Community     Sponsored by 
Sponsored by Sun Microsystems