アニメーションでスクロールする画像リストの実装

NetAdvantage for .NET 2008 Volume 1 日本語版の新機能

WebDialogWindowコントロールの実装

　WebDialogWindowコントロールは、Webページにダイアログを表示するコンポーネントです。

　通常のアラートダイアログや メッセージボックスとは違い、HTMLを表示できるほか、他のコンポーネントを組み込めるコンテナコントロールにもなっています。

　では、実際に使ってみましょう。

WebDialogWindowコントロールのデザイン

　ツールボックスからWebDialogWindowコントロールのアイコンをWebページにドラッグ＆ドロップします。

　テキストエリアにメッセージを入力して文字列を選択し、右クリックしてショートカットメニューを表示し、「スタイル」を選んでこの文字列のフォントサイズや文字色を定義します。

　また、ダイアログ内にASP.NET標準のImageコントロールを組み込んで、「ImageUrl」プロパティに「warning.ico」を設定します。

　文字列の下に、「NetAdvantage 8.1 Web」タブにある「WebImageButton」を配置し、Textプロパティに「OK」と入力します。

WebDialogWindowコントロールのコンテンツの作成

　WebDialogWindowコントロールそのもののデザインはタスクトレイを使用し、次の項目を設定できます。

WebDialogWindowコントロールで設定可能なデザイン項目

項目	内容
移動可能	ダイアログ表示時に、ユーザーがマウスのドラッグで、Webページ上をダイアログが移動できるようになります。
モーダル	ダイアログの表示を、モーダルとモードレスのどちらかにするのかを選べるようになっています。モーダルにすると、ダイアログを閉じない限りWebページの操作ができなくなります。
WindowState	ダイアログの表示状態を設定します。「Normal」はデザインしたサイズで表示されます。「Minimized」は最小化、「Maximized」は最大化、「Hidden」は非表示になります。
InitialLocation	ダイアログの表示位置の初期値を設定します。「Centered」はWebページの中心に、「Manual」はコントロールの Left およびTopプロパティで指定した位置に表示されます。
「閉じる」「縮小」「最大化」ボタン	チェックするとそれぞれのボタンがダイアログに表示されます。各ボタンの機能は既にコントロールに組み込まれているので、コードを組む必要はありません。

　これら以外の項目は、プロパティウィンドウで設定します。特にコンテンツペインの設定は、プロパティウィンドウにある「ContentsPain」プロパティを展開して設定します。

WebDialogWindowコントロールの表示処理

　WebDialogWindowコントロールを表示させる処理を作成します。

　Webページ上のWebDialogWindowコントロールは、WindowStateプロパティを「Hidden」にして非表示にしておきます。デザイン時にWindowStateプロパティを「Hidden」にすると、下図のような状態になります。

デザイン時にWindowStateプロパティを「Hidden」にした状態

　WebDialogWindowコントロールのすぐ上に、もう1つWebImageButtonコントロールを配置し、このClickイベントハンドラでWebDialogWindowコントロールを表示させます。

　これは、WindowStateプロパティを「Normal」にするだけです。

　また、WebDialogWindowコントロールに配置した［OK］ボタンのClickイベントハンドラでは、WindowStateプロパティを「Hidden」にします。

VB.NET

Protected Sub WebImageButton1_Click(ByVal sender As Object, ByVal e As Infragistics.WebUI.WebDataInput.ButtonEventArgs) Handles WebImageButton1.Click
    Me.WebDialogWindow1.WindowState = _
           Infragistics.Web.UI.LayoutControls.DialogWindowState.Hidden
End Sub

Protected Sub WebImageButton2_Click(ByVal sender As Object, ByVal e As Infragistics.WebUI.WebDataInput.ButtonEventArgs) Handles WebImageButton2.Click
    Me.WebDialogWindow1.WindowState = _
           Infragistics.Web.UI.LayoutControls.DialogWindowState.Normal
End Sub

C#

protected void WebImageButton1_Click(object sender, Infragistics.WebUI.WebDataInput.ButtonEventArgs e)
{
    WebDialogWindow1.WindowState = Infragistics.Web.UI.LayoutControls.DialogWindowState.Hidden;
}
protected void WebImageButton2_Click(object sender, Infragistics.WebUI.WebDataInput.ButtonEventArgs e)
{
    WebDialogWindow1.WindowState = Infragistics.Web.UI.LayoutControls.DialogWindowState.Normal;
}

まとめ

　NetAdvantage for .NET 2008 Volume 1 日本語版の新機能を使ったWebページを作成してみました。WebImageViewerとWebDialogWindowコントロールは、これまでのWebページにはない新しい機能をWebページに提供してくれます。

　WebImageViewerコントロールは、画像を多用するページでは特に威力を発揮してくれるのではないでしょうか。

　WebDialogWindowコントロールは、ダイアログにHTMLコンテンツを表示でき、他のコントロールを組み込んだり、ユーザーがダイアログをドラッグして移動したりできるため、ツールパレットやコンテンツの目次を表示するなどの使い方もできます。

　アイデア次第でさまざまな使い方のできる、とても便利なコントロールです。

　これらのコントロールを使って、ぜひ魅力あふれる楽しいWebページを作ってみてはいかがでしょうか。

画像提供：アルペンガーデン やまくさ

　記事内で使用している花の写真はすべて、「アルペンガーデン やまくさ」が所有しています。許可なく該当写真の無断使用・転載を行うことを一切禁止します。