拡張パネルでコンテンツをドロップダウン表示するASP.NETアプリケーションの作成

C1Expanderコントロールを使ったWebアプリケーションの作成

2013/05/24 14:00

ダウンロードサンプルコード（C#） (1.9 MB)
ダウンロードサンプルコード（VB） (1.9 MB)

　「ComponentOne Studio for ASP.NET Wijmo 2012J」のC1Expanderコントロールを使って、よく使う複数のサイトを1ページ内に表示するWebアプリケーションを作成してみます。

はじめに

　著者は、Webやアプリケーションを開発する際に、言語リファレンスやTipsが掲載されているサイトをいくつも開いて作業を行います。今時のブラウザはタブページになっていて、1つのブラウザでいくつものページを開くことができますが、1ページに複数のサイトを表示できると便利です。

　「ComponentOne Studio for ASP.NET Wijmo 2012J」のC1Expanderコントロールは、拡張・縮小するパネルを持った拡張パネルコントロールです。パネル内にはいろいろなコンテンツを組み込むことができ、ヘッダーをクリックするだけでパネルを開閉できます。

　そこで、今回はこのC1Expanderコントロールを使用して、よく使う複数のサイトを1ページ内に表示するWebアプリケーションを作成してみました。

ヘッダーをクリックするだけで設定したURLのWebページを表示できる

WebページはWebブラウザの閲覧と同じようにコンテンツを操作できる

対象読者

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

必要な環境

　Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。

　対応ブラウザについては、グレープシティ社Webサイトの「クロスブラウザ対応」ページでご確認ください。

　なお、本プログラムは次の環境で開発・動作確認を行っています。

OS：Windows 7
開発Tool：Visual Studio 2010、.NET Framework 4
ブラウザ：Microsoft Internet Explorer 9

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

[1] Visual StudioでサンプルWebサイトを開く

　Visual Studioをお持ちであれば、「ComponentOne Studio for ASP.NET Wijmo 2012J」トライアル版をインストールし、ソースコード圧縮ファイル「Expander_ASP_vb_src.zip」または「Expander_ASP_cs_src.zip」を解凍して作成されるプロジェクトファイルを、Visual Studioで開き実行させてください。

[2] Visual Studioを使わずにサンプルWebサイトを開く

　Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「Expander_ASP_vb_src.zip」または「Expander_ASP_cs_src.zip」を解凍して作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。

　以下は、Microsoft IISサーバにインストールする場合の手順です。

プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します（例：\Inetpub\wwwroot直下へ配置）。
サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
クライアントのWebブラウザで、Default.aspxファイルを開きます（例：http://localhost/mysplit_vb/Default.aspx）。

注意事項

　UAC（ユーザーアカウント制御）がサポートされているWindows Vista以降のOSで製品のサンプルをコンパイルしようとするとエラーが発生する場合があります。

　これは、UACにより製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。

　また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。

　 <identity impersonate="false" />

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

　本サンプルアプリケーションでは、「Expander for ASP.NET Wijmo」のC1Expanderコントロールを使用します。

　このコントロールを使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールする必要があります。

　トライアル版は、グレープシティのWebページからダウンロードできます。

　ダウンロードしたい製品にチェックを付け［申込フォーム］ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。

　トライアル申込フォームが表示されますので、必要情報を登録すると添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

　制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

　「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールしたら、プロジェクトにコントロールを追加します。

　ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。

　追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Expander」コントロールです。

アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Expander」コントロールを選択する

アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Expanderコントロール」コントロールを選択する

　これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル	内容
C1.Web.Wijmo.Controls.4	本体アセンブリ

　また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル	内容
C1.C1Report.4.dll	本体アセンブリ
C1.Web.Wijmo.Controls.4.dll	本体アセンブリ

　なお、.NET Framework 4が必要です。

C1Expanderコントロールの概要

　「Expander for ASP.NET Wijmo」は、さまざまなアニメーション効果を使用して、拡張パネルに埋め込まれたコンテンツや外部コンテンツを表示・非表示にするパネルです。

C1Expanderコントロールの特徴

　C1Expanderは、以下のような機能を持っています。

拡張方向

　C1Expanderはコントロール、ExpandDirectionプロパティを使用してコントロールの拡張方向を、上、右、下、左のいずれかに拡張することができます。

外部コンテンツ

　ContentUrlプロパティを使用して、C1Expanderコントロールに外部コンテンツを表示できます。プロジェクト内の別のWebページのコンテンツや、他のプロジェクトのWebサイトのコンテンツを表示できます。

　また、表示したWebページは、ブラウザで表示しているのと同様に、ハイパージャンプなどの操作を行うことも可能です。

アニメーション効果

　C1Expanderコントロールは、組み込みのアニメーション効果を設定でき、効果はコントロールが拡張または縮小状態に動作する際に適用されます。アニメーション効果は、アニメーションが遷移する方法やアニメーション効果の継続時間などを変更することができます。

※アニメーション動作の詳細は前回の記事「カラフルなツールチップを持つASP.NETアプリケーションの作成」を参照してください。

ページロード時の拡張

　Expandedプロパティを使用することによって、C1Expanderコントロールをページロード時に最初から拡張表示にするかどうかを選択できます。デフォルトでは、ExpandedプロパティはTrueに設定され、コントロールは最初から拡張して表示されます。

テーマ

　スマートタグを単にクリックして、8種類のプレミアムテーマ（Arctic、Midnight、Aristo、Rocket、Cobalt、Sterlingなど）のいずれかを選択して外観を変更します。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成します。

CSSのサポート

　CSS（Cascading Style Sheet）のスタイルを使用して、カスタムスキンを定義します。また、CSSを使用することでExpanderの外観をカスタマイズすることができます。

C1Expanderコントロールの構成要素

　C1Expanderコントロールは、ヘッダー要素とコンテンツ要素に分けられます。

ヘッダー要素

　C1Expanderコントロールのヘッダー領域はコントロールの上部に表示され、当初は空白で表示します。

　ヘッダー領域には、ヘッダーテンプレートを使用して内容（テキスト、HTMLコンテンツ、画像、他のコントロールなど）を追加できます。単純なドラッグ＆ドロップ操作で、デザイン時にコントロールのヘッダー領域に、テキストや画像、コントロールを追加できます。

　ヘッダーには、拡張と縮小の方向を示す拡張／縮小インジケータが表示されます。

ヘッダー領域（ヘルプより抜粋）

コンテンツ要素

　C1Expanderコントロールのコンテンツ領域は、カスタムHTMLコンテンツからはリッチテキスト、ContentUrlプロパティからはURLリンク、コンテンツテンプレートからは任意のコントロールを追加できます。単純なドラッグ＆ドロップ操作で、デザイン時にコントロールのコンテンツ領域への追加と移動ができます。

　コンテンツを追加するには、コントロールのコンテンツ領域をクリックし、そこに通常どおりテキストを入力したり、画像やコントロールを追加したりするだけです。

コンテンツ領域（ヘルプより抜粋）

C1Expanderコントロールの動作

　C1Expanderコントロールは、デフォルトでは拡張して表示されます。これを、閉じた状態に変更する場合は、Expandedプロパティを「False」にします。

　Expandedプロパティは、［C1Expanderタスク］メニュー、プロパティウィンドウ、ソースビュー、およびコードで設定できます。Expandedプロパティを［C1Expanderタスク］メニューで設定するには、［拡張］ボックスをONまたはOFFにします。

　また、ExpandDirectionプロパティを使用して拡張の方向を指定することができます。デフォルトでは「Bottom」になっており、ヘッダーをクリックすると下方向に拡張してコンテンツを表示します。

　ExpandDirectionプロパティに使用できる値は4つで、以下のExpandDirection列挙体のメンバを設定します。

メンバ名	説明
Top	上（top）
Right	右（right）
Bottom	下（bottom）
Left	左（left）

拡張の方向（ヘルプより抜粋）

Webページのデザイン

　では、さっそくアプリケーションを作成していきましょう。作成するアプリケーションは、3つのC1Expanderコントロールを使用して、3つのサイトをページ内に表示します。各C1Expanderコントロールは、デザイン時にContentUrlプロパティを設定しサイトを表示しますが、TextBoxコントロールとButtonコントロールを使って、好きなサイトを表示できるようにします。

ページのレイアウト

　ページには、ASP.NETのTextBox、ButtonコントロールとC1Expanderコントロールを配置します。

　C1ExpanderコントロールはExpandedプロパティを「False」にし、ページ表示時は縮小状態で表示するようにします。

　また、ThemeRolerを使用してデザインを装飾します。

ページレイアウト

C1Expanderコントロールの作成

　最初に、C1Expanderコントロールを作成します。

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

　② 「ContentUrl」プロパティに「http://download.grapecity.com/help/componentone/aspwij_expander/」と入力します。これで、C1Expanderコントロールはこの外部コンテンツ（Webサイト）を表示します。

　③ ここで試しにプロジェクトを実行してみます。グレープシティ社のWebサイトにある「Expander for ASP.NET Wijmoヘルプ」が表示されます。

　C1Expanderコントロールはデフォルトのままなので、コンテンツ領域が拡張して表示されています。

　また、コンテンツ領域も少し狭いですね。

デフォルトで実行したページはコンテンツ領域が拡張表示で少し狭い

　④ 実行を中止し、Visual Studioに戻ります。C1Expanderコントロールをクリックし、プロパティウィンドウにある「Expanded」プロパティを「False」にします。

　これで、アプリケーション実行時はC1Expanderコントロールはコンテンツ領域が閉じた状態になります。

　⑤ また、コンテンツ領域が狭かったのでもう少し広げます。ページエディタを「ソース」に切り替え、次のCSS文を<asp:Content>要素の下に記述します。

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css" media="all">
        .ui-expander-content 
        {
            height: 400px;
        }
    </style>

　⑥ ヘッダー領域にWebサイトのタイトルを設定します。<wijmo:C1Expander>要素の中に、<Header>要素を追加し、タイトル文字列を入力します。

<Header>Expander for ASP.NET Wijmo ユーザーガイド<br /> </Header>

　これで、ヘッダー領域にタイトルが表示されます。

コンテンツ領域が広がり、ヘッダーにタイトルが付いた。

ここまでのHTML文

<%@ Page Title="ホーム ページ" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register assembly="C1.Web.Wijmo.Controls.4" namespace="C1.Web.Wijmo.Controls.C1Expander" tagprefix="wijmo" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <style type="text/css" media="all">
        .ui-expander-content 
        {
            height: 400px;
        }
    </style>

    <h2>
        &nbsp;</h2>
    <p>
    </p>
    <wijmo:C1Expander ID="C1Expander1" runat="server" 
        ContentUrl="http://download.grapecity.com/help/componentone/aspwij_expander/" 
        Expanded="False">
        <Header>Expander for ASP.NET Wijmo ユーザーガイド<br /> </Header>
    </wijmo:C1Expander>
</asp:Content>

　⑦ 同じように、C1Expanderコントロールをあと2つ作成します。

<wijmo:C1Expander ID="C1Expander2" runat="server" Expanded="False" 
    ContentUrl="http://msdn.microsoft.com/ja-jp/library">
    <Header>MSDN ライブラリ<br /> </Header>
</wijmo:C1Expander>
<br />
<br />

<wijmo:C1Expander ID="C1Expander3" runat="server" Expanded="False" 
    ContentUrl="http://www.grapecity.com/tools/products/componentoneasp2012">
    <Header>「ComponentOne Studio for ASP.NET Wijmo 2012J」 製品情報<br /> </Header>
</wijmo:C1Expander>
<br />
<br />

3つのC1Expanderコントロールを作成する

ThemeRollerでデザインを変更する

　続いて、「ThemeRoller」を使ってデザインを変更します。「ThemeRoller」については前回の記事「カラフルなツールチップを持つASP.NETアプリケーションの作成」で使い方を詳しく説明していますので、こちらを参照してください。

　① 今回は、「Gallery」から「Start」を選びました。「Download」Buttonをクリックしてダウンロードし、解凍します。

「ThemeRoller」の「Gallery」から「Start」をダウンロード

　② プロジェクトに「MyTheme」というフォルダを作成し、解凍したファイルをすべてこの中に移動します。

　③ C1ExpanderコントロールのThemeプロパティの値欄に、CSSファイルのファイル名をパス名を付けて記述します。

/MyTheme/css/start/jquery-ui-1.10.3.custom.css

　④ アプリケーションを実行し、デザインを確認します。

ここまでの出来栄えを確認する

URL入力エリアを追加する

　これだけでも十分使えるアプリケーションになっていますが、せっかくなのでアプリケーション実行時に他のWebサイトに移動できる機能を追加します。

　① 各C1Expanderコントロールの上に、「URL：」という文字列とTextBox、Buttonコントロールを追加します。Buttonコントロールは、「Text」プロパティに「⇒」という文字を入力しておきます。

各C1Expanderコントロールの上に、「URL：」という文字列とTextBox、Buttonコントロールを追加

　② 3つのButtonコントロールは、Clickイベントハンドラを作成し、TextBoxコントロールの入力内容をC1Expanderコントロールの「ContentUrl」プロパティに代入する式を作成します。

　また、ExpandedプロパティをTrueにして、移動したWebサイトを表示するようにします。

URLを入力してサイトを移動できるようにした

Visual Basic

Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        C1Expander1.ContentUrl = TextBox1.Text
        C1Expander1.Expanded = True
    End Sub

    Protected Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        C1Expander2.ContentUrl = TextBox2.Text
        C1Expander2.Expanded = True
    End Sub

    Protected Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
        C1Expander3.ContentUrl = TextBox3.Text
        C1Expander3.Expanded = True
    End Sub
End Class

namespace Expander_ASP_cs
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Button1_Click(object sender, EventArgs e)
        {
            C1Expander1.ContentUrl = TextBox1.Text;
            C1Expander1.Expanded = true;
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            C1Expander2.ContentUrl = TextBox2.Text;
            C1Expander2.Expanded = true;
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            C1Expander3.ContentUrl = TextBox3.Text;
            C1Expander3.Expanded = true;
        }
    }
}