ToolTip for ASP.NET Web Forms

2015.05.20 更 新 グレープシティ 株 式 会 社

目 次 製 品 の 概 要 2 ComponentOne Studio for ASP.NET Web Forms のヘルプ 2 主 な 特 長 3 クイックスタート 4 手 順 1:アプリケーションの 作 成 4 手 順 2:C1ToolTip の 作 成 とコントロールへの 割 り 当 て 4 手 順 3:コントロールのカスタマイズ 4 手 順 4:アプリケーションの 実 行 4-5 デザイン 時 サポート 6 スマートタグ 6 C1ToolTip の 外 観 7 テーマ 7-8 CSS セレクタ 8 クライアント 側 の 機 能 9 クライアント 側 イベント 9 タスク 別 ヘルプ 10 カスタムテーマの 追 加 10-11 1 Copyright GrapeCity inc. All rights reserved.

製 品 の 概 要 ToolTip for ASP.NET Web Forms ToolTip for ASP.NET Web Forms は コンテキスト 依 存 のツールチップによる 優 れたユーザー 操 作 性 をエンドユーザーに 提 供 します HTML コンテンツを Web アプリケーションにロードして 表 示 します また ツールチップの 外 観 も 完 全 に 制 御 でき ます ComponentOne Studio for ASP.NET Web Forms のヘルプ ComponentOne Studio for ASP.NET Web Forms の 各 コントロールで 共 通 したトピック アセンブリの 追 加 テーマの 適 用 ク ライアント 側 情 報 などについては ComponentOne Studio for ASP.NET Web Formsユーザーガイド を 参 照 してください 2 Copyright GrapeCity inc. All rights reserved.

主 な 特 長 ComponentOne Tooltip for ASP.NET Web Forms は 以 下 の 独 特 な 主 要 機 能 を 備 えています HTML 書 式 のコンテンツ ネストした<div> 要 素 複 数 のフォントとテキスト 色 書 式 付 きテキスト 段 落 配 置 書 式 付 きのネストしたテーブル ネ ストした 箇 条 書 き/ 番 号 付 きリスト 画 像 プレーンテキスト および CSS(Cascading Style Sheet)から 書 式 設 定 したコ ンテキストを 持 つツールチップを 作 成 します ロードオンデマンド C1ToolTip.OnAjaxUpdate を 使 用 して ページサイズを 小 型 で 扱 いやすいものにします これによって クライア ント 側 でエンドユーザがツールチップ 要 素 にホバーしたときにサーバーへの AJAX 呼 び 出 しが 発 生 します イベントハ ンドラがその 要 素 の ID を 受 け 取 るため C1ToolTip のリッチデータを 動 的 にロードすることが 可 能 です 自 動 的 なツールチップ ページ 上 のすべての 項 目 に C1ToolTip を 自 動 的 に 追 加 することによって 無 駄 のない 一 貫 した 外 観 のページが 得 ら れます テーマ スマートタグをクリックするだけで 6 種 類 のプレミアムテーマ(Arctic Midnight Aristo Rocket Cobalt および Sterling)のいずれかを 選 択 して 外 観 を 変 更 します オプションとしてjQuery UI からThemeRoller を 使 用 してカスタマイ ズしたテーマを 作 成 します CSS サポート CSS(Cascading Style Sheet)のスタイルを 使 用 して カスタムスキンを 定 義 します 3 Copyright GrapeCity inc. All rights reserved.

クイックスタート C1ToolTip クイックスタートでは ASP.NET コントロールである ToolTip の 基 本 的 な 使 用 方 法 を 説 明 します このクイックス タートでは 1つの C1ToolTip コントロールを 含 む ASP.NET アプリケーションを 作 成 します 手 順 1:アプリケーションの 作 成 このトピックでは ASP.NET Web サイトを 作 成 し C1ToolTip コントロールを Default.aspx ページに 追 加 します 1. まず Visual Studio 2010 で ASP.NET Web アプリケーションを 作 成 します 2. コントロールをツールボックス.に 追 加 します 3. デザイン タブを 選 択 します 4. デザインビューで Visual Studio ツールボックスに 移 動 し C1ToolTop コントロールをダブルクリックし て C1ToolTop をページのメインコンテンツに 追 加 します 5. HTML の Input Button コントロールもフォームに 追 加 します これは ToolTip を 追 加 するコントロールです Visual Studio のプロパティウィンドウ([ 表 示 ] [プロパティウィンドウ]を 選 択 )で Button コントロールの Id が Button1 で あることに 注 意 してください この ID は ToolTip をそのコントロールに 割 り 当 てる 際 に 使 用 します 手 順 2:C1ToolTip の 作 成 とコントロールへの 割 り 当 て この 手 順 では 単 純 な ToolTip を 作 成 して Button コントロールに 割 り 当 てます 1. C1ToolTip を 選 択 し C1ToolTip のプロパティに 移 動 して TargetSelector を #Button1 に 設 定 します 2. C1ToolTip のプロパティペインで Content を 拡 張 して Text プロパティの 横 に これは C1ToolTip のテキストです と 入 力 します これで C1ToolTip を 作 成 してコントロールに 追 加 しました 次 は C1ToolTip の 表 示 方 法 を 設 定 できます 手 順 3:コントロールのカスタマイズ この 手 順 では C1ToolTip の 表 示 タイミングと 表 示 時 に 使 用 する アニメーションを 指 定 します 1. C1ToolTip のスマートタグ ( ) をクリックして [C1ToolTip タスク]メニューを 開 きます 2. Theme プロパティの 横 のドロップダウン 矢 印 をクリックして リストから Midnight を 選 択 します 3. C1ToolTip のプロパティウィンドウで CloseBehavior プロパティを Sticky に 設 定 します 4. C1ToolTip のプロパティウィンドウで Triggers プロパティを Click に 設 定 します これで C1ToolTip コントロールのカスタマイズが 完 了 しました 次 は アプリケーションを 実 行 します 手 順 4:アプリケーションの 実 行 クイックスタートの 前 の 手 順 では C1ToolTip コントロールを Button コントロールに 割 り 当 てた 単 純 なアプリケーションを 作 成 して C1ToolTip の 外 観 と 動 作 をカスタマイズしました この 手 順 では アプリケーションを 実 行 して C1ToolTip コントロール で 可 能 な 実 行 時 のインタラクティブ 操 作 のいくつかを 確 認 します 以 下 の 手 順 を 実 行 します 1. Visual Studio で [デバッグ] デバッグ] [デバッグ 開 始 ]を 選 択 するか [ F5]を 押 して アプリケーションを 実 行 します 2. ボタンをクリックして C1ToolTip を 表 示 させます C1ToolTip が 表 示 領 域 にフェードインする 方 法 に 注 意 してください 3. [x]を 選 択 して C1ToolTipを 閉 じます 4 Copyright GrapeCity inc. All rights reserved.

CloseBehavior プロパティを Sticky に 設 定 して C1ToolTip を 閉 じる 方 法 を 変 更 したことに 注 意 してください おめでとうございます!C1ToolTip クイックスタートが 無 事 完 了 しました 5 Copyright GrapeCity inc. All rights reserved.

デザイン 時 サポート C1ToolTip は カスタマイズされたコンテキストメニュー スマートタグ および 充 実 したデザイン 時 サポートを 提 供 するデザイ ナを 備 えており オブジェクトモデルの 操 作 が 簡 素 化 されています 以 下 の 各 セクションでは C1ToolTip のデザイン 時 環 境 を 使 用 してC1ToolTip コントロールを 設 定 する 方 法 を 説 明 します スマートタグ Visual Studio では C1ToolTip コントロールにスマートタグが 用 意 されています スマートタグは C1ToolTip で 最 もよく 使 用 されるプロパティを 提 供 するショートカットタスクメニューです [C1ToolTip タスク]メニューにアクセスするには C1ToolTip コントロールの 右 上 端 にあるスマートタグ ( す これによって [C1ToolTip タスク]メニューが 開 きます ) をクリックしま [C1ToolTip タスク]メニューは 次 のように 動 作 します テーマ [テーマ]ドロップダウンボックスでは Theme プロパティを 設 定 し C1ToolTip コントロールの 外 観 を 定 義 済 みのテー マの1つに 変 更 できます デフォルトでは これは Aristo テーマに 設 定 されます 使 用 可 能 な 視 覚 スタイルについての 詳 細 は テーマ を 参 照 してください 新 しいテーマの 作 成 [ 新 しいテーマの 作 成 ]オプションをクリックすると ThemeRoller for Visual Studio が 開 きます したがって 開 発 環 境 内 でテーマをカスタマイズすることができます アプリケーションで ThemeRoller for Visual Studio を 使 用 する 方 法 については ThemeRoller for Visual Studio を 参 照 してください CDN の 使 用 [CDN の 使 用 ]チェックボックスを ON にすると CDN からクライアントリソースがロードされます これはデフォルトで OFF です CDN パス CDN の URL パスを 表 示 します Bootstrap の 使 用 [Bootstrap の 使 用 ]オプションを 選 択 すると コントロールに Bootstrap テーマを 適 用 することができます アプリケー ションで Bootstrap テーマを 使 用 する 方 法 については Bootstrap for ASP.NET Web Forms クイックスタート を 参 照 してください バージョン 情 報 [バージョン 情 報 ] 項 目 をクリックすると 製 品 のバージョン 情 報 を 確 認 できるダイアログボックスが 表 示 されます 6 Copyright GrapeCity inc. All rights reserved.

C1ToolTip の 外 観 ツールチップの 外 観 は 組 み 込 みテーマか CSS スタイルによって 制 御 されます ツールチップのテーマは ツールチップヘッ ダーやツールチップコールアウトなど すべてのツールチップ 要 素 の 外 観 に 影 響 を 及 ぼします C1ToolTip は ユーザーがカスタマイズしやすいように 設 計 されています デフォルトの 外 観 を 数 限 りなくさまざまに 変 更 でき ます CSS スタイルを 適 用 して C1ToolTipの 要 素 を 変 更 できます C1ToolTip には CSSClass プロパティの 横 にあるドロップダ ウン 矢 印 をクリックすると 表 示 されるいくつかの 組 み 込 み CSS セレクタが 用 意 されています テーマ C1ToolTip は Arctic Aristo Cobalt Midnight Rocket および Sterling の6 種 類 の 組 み 込 みテーマをコントロールに 提 供 しており Theme プロパティを 設 定 してコントロールに 簡 単 に 適 用 できます ArcticFox スタイル 次 の 画 面 は ArcticFox スタイルを 表 示 しています これは C1ToolTip コントロールのデフォルトの 書 式 です Aristoスタイル 次 の 画 面 は Aristo スタイルを 表 示 しています Cobaltスタイル 次 の 画 面 は Cobalt スタイルを 表 示 しています Midnightスタイル 次 の 画 面 は Midnight スタイルを 表 示 しています Rocketスタイル 次 の 画 面 は Rocket スタイルを 表 示 しています 7 Copyright GrapeCity inc. All rights reserved.

Sterling スタイル 次 の 画 面 は Sterling スタイルを 表 示 しています CSS セレクタ CSS を 使 用 して C1ToolTip の 任 意 の 要 素 をスタイル 設 定 し その 外 観 を 真 に 独 特 のものにすることができます カスタマイズ 処 理 を 簡 素 化 するために ComponentOne Studio for ASP.NET Web Forms には 6 種 類 の 組 み 込 みテーマごとに CSS セレクタ が 組 み 込 まれています 背 景 テキスト フォント 枠 線 輪 郭 マージン 埋 め 込 み リスト 表 などの 一 般 的 な CSS プロパティを 該 当 する CSS セレクタに 適 用 できます 一 般 的 な 個 別 CSS セレクタやグループ CSS セレクタのリストについては プロジェクトの C1ToolTip コントロールを 選 択 し て C1ToolTip Visual Studio プロパティウィンドウで CssClass プロパティの 横 のドロップダウンリストを 表 示 します 以 下 の 表 では 一 般 に 使 用 される 個 別 CSS セレクタとグループ CSS セレクタを 詳 しく 説 明 します 複 数 の 個 別 CSS セレクタを 組 み 合 わせてグループ 化 すると CSS セレクタをより 具 体 的 かつ 強 力 なものにできます グループ CSS セレクタは C1ToolTip の 複 数 の 要 素 のスタイルを 定 義 します CSS セレクタ.wijmo-wijtooltip.wijmo-wijtooltip-arrow-bc.wijmo-wijtooltip-arrow-bl.wijmo-wijtooltip-arrow-lb.wijmo-wijtooltip-arrow-lc.wijmo-wijtooltip-arrow-rb.wijmo-wijtooltip-arrow-rc.wijmo-wijtooltip-arrow-rt.wijmo-wijtooltip-arrow-tl.wijmo-wijtooltip-arrow-tc.wijmo-wijtooltip-close.wijmo-wijtooltip-container.wijmo-wijtooltip-pointer.wijmo-wijtooltip-pointer-inner このスタイルを C1ToolTip のタイトルに 適 用 します 説 明 このスタイルを C1ToolTip コントロールに 適 用 します このスタイルを C1ToolTip の BottomCorner の 矢 印 に 適 用 します このスタイルを C1ToolTip の BottomLeft の 矢 印 に 適 用 します このスタイルを C1ToolTip の LowerBottom の 矢 印 に 適 用 します このスタイルを C1ToolTip の LowerCorner の 矢 印 に 適 用 します このスタイルを C1ToolTip の RightBottom の 矢 印 に 適 用 します このスタイルを C1ToolTip の RightCorner の 矢 印 に 適 用 します このスタイルを C1ToolTip の RightTop の 矢 印 に 適 用 します このスタイルを C1ToolTip の TopLeft の 矢 印 に 適 用 します このスタイルを C1ToolTip の TopCorner の 矢 印 に 適 用 します このスタイルを 閉 じた C1ToolTip に 適 用 します このスタイルを C1ToolTip のコンテナに 適 用 します このスタイルを C1ToolTip のポインタに 適 用 します このスタイルを C1ToolTip の 内 側 のポインタに 適 用 します このスタイルを C1ToolTip のタイトルに 適 用 します 8 Copyright GrapeCity inc. All rights reserved.

クライアント 側 の 機 能 C1ToolTip のクライアント 側 には 非 常 に 充 実 したクライアント 側 オブジェクトモデルがあります そのメンバは ほとんどが サーバー 側 コントロールのメンバと 同 じです C1ToolTip コントロールが 表 示 されると クライアント 側 の ToolTip のインスタンスが 自 動 的 に 生 成 されます これは サー バーにポストバックしなくても C1ToolTip コントロールのプロパティやメソッドにアクセスできるということです C1ToolTip のクライアント 側 コードを 使 用 すれば 時 間 をかけて Web サーバーに 情 報 を 送 信 しなくても Web ページに 多 くの 機 能 を 実 装 できます そのため C1ToolTip のクライアント 側 オブジェクトモデルを 使 用 することで Web サイトの 効 率 を 高 め ることができます クライアント 側 イベント C1ToolTip には ツールチップの 非 表 示 / 表 示 などのアクションが 発 生 したときに C1ToolTip コントロールを 操 作 するため の 複 数 のクライアント 側 イベントが 含 まれています クライアント 側 イベントの 表 にリストされたサーバー 側 プロパティを 使 用 して 特 定 のクライアント 側 イベントに 反 応 する JavaScript 関 数 の 名 前 を 指 定 できます たとえば Hidden という JavaScript 関 数 をツールチップを 非 表 示 したときに 反 応 す るように 割 り 当 てるには OnClientHidden プロパティを Hidden に 設 定 します 下 の 表 に クライアントスクリプトで 使 用 できるイベントを 示 します これらのプロパティはサーバー 側 で 定 義 されますが 実 際 のイベントや 各 JavaScript 関 数 で 宣 言 する 名 前 はクライアント 側 で 定 義 されます クライアント 側 イベント 表 イベントのサーバー 側 プロパ ティ 名 イベント 名 説 明 OnClientHidden Hidden ツールチップを 非 表 示 にした 後 に 発 生 し ます OnClientHiding Hiding ツールチップを 非 表 示 にする 前 に 発 生 し ます OnClientShowing Showing ツールチップを 表 示 する 前 に 発 生 します OnClientShown ツールチップを 表 示 した 後 に 発 生 し ます ツールチップを 表 示 した 後 に 発 生 します 9 Copyright GrapeCity inc. All rights reserved.

タスク 別 ヘルプ タスク 別 ヘルプは Visual Studio のプログラミングに 精 通 しているユーザーを 対 象 としています ヘルプに 記 述 された 手 順 に 従 うことによって ToolTip for ASP.NET Web Forms のさまざまな 機 能 をデモンストレーションするプロジェクトを 作 成 し て ToolTip for ASP.NET Web Forms の 用 途 を 理 解 することができます カスタムテーマの 追 加 ToolTip for ASP.NET Web Forms は 6つの 組 み 込 みテーマを 提 供 していますが 異 なるテーマを 使 用 したい 場 合 CDN URL を 使 用 して 既 存 のテーマを 選 択 するか jquery ThemeRoller Web アプリケーションを 使 用 して 独 自 のテーマを 作 成 でき ます CDN URL の 使 用 1. C1ToolTip のスマートタグをクリックして タスクメニューを 開 きます 2. [CDN の 使 用 ]を 選 択 します 3. Theme プロパティで CDN URL を 入 力 して テーマを 指 定 します CDN URL は http://blog.jqueryui.com/2011/06/jquery-ui-1-8-14/ にあります この 例 では Sunny テーマ http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/sunny/jquery-ui.css)を 使 用 します このテーマ 設 定 は Web.config ファイルの<appSettings> に 格 納 されています ソリューションエクスプローラで Web.config ファイルをダブルクリックします <appsettings> タグに WijmoTheme キーと 値 が 含 まれていることに 注 意 してください 追 加 した CDN URL がここに 指 定 されています 4. HTML の Input Button コントロールをフォームに 追 加 します これは ToolTip を 追 加 するコントロールです 5. C1ToolTip を 選 択 し C1ToolTip のプロパティに 移 動 して TargetSelector を #Button1 に 設 定 します 6. C1ToolTip のプロパティペインで Content を 拡 張 して Text プロパティの 横 に これは C1ToolTip のテキストです と 入 力 します 7. プロジェクトを 実 行 して テーマが C1ToolTip にに 適 用 されることに 注 意 してください jquery ThemeRoller の 使 用 1. http://jqueryui.com/themeroller/に 進 みます 2. Roll Your Own タブで 設 定 値 を 変 更 してカスタムテーマを 作 成 します フォント 色 背 景 枠 線 などをカスタマイズ できます あるいは Gallery タブをクリックして 既 存 のテーマを 選 択 します 3. Download ボタンをクリックし 次 に Build Your Download ページで Download をもう 一 度 クリックします 4. テーマの.zip ファイルを Visual Studio プロジェクトフォルダ 内 のフォルダに 保 存 して 解 凍 します. この 例 で は Themes フォルダを 作 成 しました 5. ソリューションエクスプローラで プロジェクト 名 を 選 択 して 更 新 ボタンをクリックし Themes フォルダをプロジェクト に 表 示 させます 6. C1ToolTip のスマートタグをクリックして タスクメニューを 開 きます 7. [CDN の 使 用 ]を 選 択 します 8. C1ToolTip コントロールを 右 クリックし プロパティウィンドウで Theme プロパティに 移 動 して カスタムテーマの.css のパス (Themes/css/custom-theme/jquery-ui-1.8.16.custom.cssなど)を 入 力 します このテーマ 設 定 は Web.config ファイルの <appsettings> に 格 納 されています ソリューションエクスプローラで Web.config ファイルをダブルクリックします <appsettings> タグに WijmoTheme キーと 値 が 含 まれていること に 注 意 してください 追 加 したカスタムテーマがここに 指 定 されています 9. プロジェクトを 実 行 して テーマが C1ToolTipに 適 用 されることに 注 意 してください 10 Copyright GrapeCity inc. All rights reserved.

11 Copyright GrapeCity inc. All rights reserved.