SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

カレンダーで日付を簡単に入力するWebページを作る

WebCalendar for .NETのC1WebCalendarコントロールをWebページに実装する

  • X ポスト
  • このエントリーをはてなブックマークに追加

Webページの入力インターフェイスの作成は、HTMLのフォーム部品しか使えないとなるとデザインに苦労します。今回は、WebCalendar for .NETのC1WebCalendarコントロールを使って簡単に日付を入力することができるWebページを作成してみました。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Webページの入力インターフェースの作成は、HTMLのフォーム部品しか使えないとなるとデザインに苦労します。例えば、日付の入力などはテキストボックスに直接入力してもらうよりも、カレンダーを表示して視覚的に入力できると、ユーザーフレンドリーなインターフェースが作れていいですよね。

 WebCalendar for .NETのC1WebCalendarコントロールは、Windowsフォームにあるカレンダーコントロールのような機能を、Webページに組み込むことができるコントロールです。

 今回は、これを使って簡単に日付を入力できるWebページを作成してみました。

カレンダーで選んだ日時をラベルで表示する
カレンダーで選んだ日時をラベルで表示する
ASP.NETのスクリプトと組み合わせて、ボタンを押すとカレンダーがポップアップする機能を組み込む
ASP.NETのスクリプトと組み合わせて、ボタンを押すとカレンダーがポップアップする機能を組み込む

対象読者

 Visual Basic 2005またはVisual C# 2005を使ってプログラムを作ったことのある人。

必要な環境

 Visual Basic 2005またはVisual C# 2005、Visual Studio 2005でプログラムが作れる環境。

 なお、本プログラムはWindows Vista上で動作するVisual Studioを使用して作成し動作確認を行っています。

プログラム実行時の注意事項

 WebCalendar for .NET を使って作成したアプリケーションを配布する場合、WebCalendar for .NET のアセンブリファイルを添付する必要があります。これは、Common Language Runtime の DLL をアプリケーションと一緒に配布するのと同じです。アプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。

  • C1.Web.Calendar.2.dll…C1WebCalendar コントロール(.NET Framework 2.0 用)

 これらのファイルを、プログラムを実行するWebサイトのBinフォルダに格納します。 .NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0がインストールされていることが必須条件です。

コンポーネントのインストール

 はじめてWebCalendar for .NETを使用する方は、プロジェクトにComponentOne Studio 2007 WebForms Editionをインストールする必要があります。

 インストーラは、グレープシティのWebページからダウンロードできますので、ここからダウンロードしてインストールしてください。製品ページ左側の[ダウンロード]-[トライアル版]をクリックし、ダウンロード方法([FTP]または[HTTP])を選択すれば入手できます。ファイルはLZH形式で圧縮されています。

 有償のコンポーネントですが、プロダクトキーを入力せずにインストールすることで、トライアル版として使用できます。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 WebCalendar for .NETをインストールしたら、ツールボックスに専用のタブを作成し、WebCalendar for .NETコンポーネントを追加します。追加するコンポーネントは、「.NET Frameworkコンポーネント」の「名前空間」が「C1.Web.Calendar」で始まる名前空間のコンポーネント「C1WebCalendar」です。

「名前空間」が「C1.Web.Calendar」で始まる名前空間のコンポーネント「C1WebCalendar」を選択する
 「名前空間」が「C1.Web.Calendar」で始まる名前空間のコンポーネント「C1WebCalendar」を選択する

基本的なカレンダー操作

 C1WebCalendarコントロールを組み込み、選択された日時を取得したり、カレンダーのデザインを変更する処理を持ったWebページを作ります。

日付をクリックするとLabelで表示される処理の作成

 カレンダーで選択された日時を取得して、ラベルに表示するWebページを作成します。

1

 Webフォームに、VS標準のWebコントロール「Label」とC1WebCalendarコントロールを配置します。ツールボックスからWebフォームにこれらのコントロールをドラッグ&ドロップするだけです。

「Label」とC1WebCalendarコントロールを配置する
「Label」とC1WebCalendarコントロールを配置する
2

  C1WebCalendarコントロールをクリックし、タスクトレイから「オートフォーマット」を選びます。ここでは、あらかじめ用意されたデザインから、C1WebCalendarコントロールを装飾することができます。

 ここでは、「Office 2003(Blue)」を選んでみました。

 
3

 再びC1WebCalendarコントロールをクリックし、プロパティウィンドウで「AutoPostBackOnSelect」プロパティをTrueにします。このプロパティをTrueにすると、日付を選択したときにその値をサーバに自動的にポストバックするようになります。

4

 ユーザーが日付をクリックすると、C1WebCalendarコントロールのSelectedDateプロパティに、その値が格納されるので、WebフォームのPage_Loadイベントハンドラに、その値をLabelのTextプロパティに代入する式を作成します。なお、SelectedDateプロパティの値はDate型なので、ToStringメソッドで文字列に変換します。

 Webフォームをダブルクリックすると、プロジェクトに「xxx.aspx.vb(xxx.aspx.cs)」というファイルが追加され、そこに「Page_Load」イベントハンドラが作成されます。これらのイベント処理はここに記述します。

Visual Basic
Imports System.Drawing

Partial Class mypage1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, _
                       ByVal e As System.EventArgs) Handles Me.Load
        Me.Label1.Text = Me.C1WebCalendar1.SelectedDate.ToString
C#
using System.Drawing;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = C1WebCalendar1.SelectedDate.ToString();

 これで、C1WebCalendarコントロールの日付をクリックすると、その日時がLabelで表示されます。

日付をクリックすると、その日時がLabelで表示される
日付をクリックすると、その日時がLabelで表示される
5

 もう1つLabelを配置し、今度はC1WebCalendarコントロールで選択された日時を年・月・日に分けて取り出し、文字列と連結してLabelに表示します。

 C1WebCalendarコントロールのSelectedDateプロパティの値から、さらに「Year」「Month」「Day」プロパティを参照すると、この選択された日時の年月日の個々の値を取得できます。

Visual Basic
With Me.C1WebCalendar1.SelectedDate
    Me.Label2.Text = .Year & "年" & .Month & "月" & .Day & "日"
End With
C#
Label2.Text = C1WebCalendar1.SelectedDate.Year + "年" +
              C1WebCalendar1.SelectedDate.Month + "月" +
              C1WebCalendar1.SelectedDate.Day + "日";
日時を年・月・日に分けて取り出し表示する
日時を年・月・日に分けて取り出し表示する

カレンダーで選択した日付の色を変える処理

 今度は、ボタンを押すとカレンダーで選択した日付の色を、デフォルトから好きな色に変える処理を作成します。

 選択された日付の色は、SelectedDayStyleプロパティでCalendarItemStyleオブジェクトにアクセスし、このクラスのBackColor、ForeColorプロパティを使って変えることができます。

 WebフォームにVS標準のButtonコントロールを配置し、Clickイベントハンドラにこの処理を作成します。

Visual Basic
Protected Sub Button1_Click(ByVal sender As Object, _
              ByVal e As System.EventArgs) Handles Button1.Click
    With C1WebCalendar1
        .SelectedDayStyle.BackColor = Color.DeepPink
        .SelectedDayStyle.ForeColor = Color.White
    End With
End Sub
C#
protected void Button1_Click(object sender, EventArgs e)
{
    C1WebCalendar1.SelectedDayStyle.BackColor = Color.DeepPink;
    C1WebCalendar1.SelectedDayStyle.ForeColor = Color.White;
}

 このように、VS標準のコントロールを使う場合は、C1WebCalendarコントロールの「AutoPostBackOnSelect」プロパティをTrueにし、それぞれのイベントハンドラで処理を組み立てます。

選択した日付の色をデフォルトからピンクの白抜き文字に変える
選択した日付の色をデフォルトからピンクの白抜き文字に変える

 ↓

 

ポップアップカレンダーの作成

 今度は、普段はカレンダーは表示されず、ボタンを押すとカレンダーがポップアップする機能を持ったWebページを作成します。

Webフォームとクライアント側で実行するメソッドの作成

 C1WebCalendarコントロールのポップアップ機能を使う場合は、HTMLフォーム用のコントロールを使用して処理を行います。

1

 新しいWebフォームをプロジェクトに追加し、ツールボックスの「HTML」タブをクリックして、HTMLフォーム用の「Input(Text)」「Input(Button)」を配置します。その下に、C1WebCalendarコントロールを配置し、タスクトレイの「オートフォーマット」で「Professional」を選びます。

 なお、今度はAutoPostBackOnSelectプロパティをTrueにしないでください。Trueにしてしまうと、C1WebCalendarコントロールで選択した値がサーバにポストされてしまい、WebページのHTMLコントロールが受け取れなくなってしまいます。

HTMLフォームの「Input(Text)」「Input(Button)」とC1WebCalendarコントロールを配置する
HTMLフォームの「Input(Text)」「Input(Button)」とC1WebCalendarコントロールを配置する
2

 aspxファイルの「ソース」タブをクリックし、HTMLのソースコードを表示します。そして、Buttonの<input>タグにonclick="Popup()"を追加します。

<input id="Button1" type="button" value="入力..." onclick="Popup()" />
<br />
3

 その下に<script>タグを作成し、Popupというクライアント側で実行するメソッドを作成します。Popupは、Buttonがクリックされた時に呼び出されて実行するメソッドで、2つの処理を行います。

 1つは、C1WebCalendarコントロールのPopupSettingクラスのDockプロパティを使って、Buttonの下にポップアップさせます。PopupSettingクラスは、カレンダーをポップアップする際の設定を保存するクラスです。

 もう1つは、C1WebCalendarクライアントクラスのPopupBesideメソッドを実行し、HTMLコントロールの隣にカレンダーをポップアップさせます。引数は1つで、HTMLコントロールのidを設定します。ここでは、Buttonの隣に表示するので、Buttonのid「Button1」を指定しています。

C#
function Popup()
{
    C1WebCalendar1_Client.PopupSetting.Dock = c1_dock_bottomleft;
    C1WebCalendar1_Client.PopupBeside(
                                document.getElementById("Button1"));
}
4

 もう1つクライアント側で実行するメソッドCalendar_Selectを作成します。

 このメソッドは、カレンダーで選択された値を返すメソッドです。このメソッドで、選択された日時をテキストボックスに設定する式を実行します。

C#
function Calendar_Select(calendar)
{
    if (calendar)
        document.all("Text1").value = calendar.SelectedDate;
}
5

 作成したCalendar_Selectメソッドを、C1WebCalendarコントロールに結合します。コードウィンドウの「デザイン」タブをクリックし、フォームデザイナに戻ります。C1WebCalendarコントロールをクリックし、プロパティウィンドウの「PopupMode」プロパティをTrueにします。また、「ClientOnSelChange」プロパティに、メソッド名Calendar_Selectを設定します。

 これで、カレンダーがクリックされると、このメソッドが呼び出されて選択された日付がテキストボックスに転送されます。

「ClientOnSelChange」プロパティにメソッド名「Calendar_Select」を設定
「ClientOnSelChange」プロパティにメソッド名「Calendar_Select」を設定

まとめ

 C1WebCalendarコントロールをはじめ、Webページ作成に優れたコンポーネントはまだまだあります。

 スタンドアローンのWindowsアプリケーションに比べ、Webアプリケーションの作成は環境が今一歩であったり、制約が多かったりしていますが、こういう時こそコンポーネントを使うと開発効率や製品の性能がアップします。

 今後も、これはいい!と思ったWebコンポーネントを使っていきたいと思います。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2037 2008/08/20 14:05

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング