SuperPanel for ASP.NET Web Forms

Size: px

Start display at page:

Download "SuperPanel for ASP.NET Web Forms"

あかりあみおか
5 years ago
Views:

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

2 目次製品の概要 2 ComponentOne for ASP.NET Web Forms のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: アプリケーションの作成 4 手順 2: コントロールへのコンテンツの追加 4-6 手順 3: コードによる混合スクロールモードの作成 6-7 手順 4: コントロールへのアニメーション効果の追加 7 デザイン時のサポート 8 スマートタグ 8 外観 9 CSS セレクタ 9-10 テーマクライアント側の機能 11 クライアント側イベントタスク別ヘルプ 13 1 Copyright GrapeCity, Inc. All rights reserved.

3 製品の概要 SuperPanel for ASP.NET Web Forms はインタラクティブなコンテンツをアプリケーションに追加する最適な方法ですカスタムのスクロールサイズ変更角の丸みおよびドロップシャドウを Web アプリケーションのどんなパネルにも追加します ComponentOne for ASP.NET Web Forms のヘルプ ComponentOne for ASP.NET Web Forms の各コントロールで共通したトピックアセンブリの追加テーマの適用クライアント側情報などについては ASP.NET Web Forms ユーザーガイドを参照してください 2 Copyright GrapeCity, Inc. All rights reserved.

4 主な特長 SuperPanel for ASP.NET Web Forms は以下の独特な主要機能を備えています角の丸み Web アプリケーションで角の丸みをデザインした経験があればそれがどんなに難しいものかがわかります SuperPanel を使用すれば角の丸みは簡単に作成できボックスのサイズに制限がありません各角はパネルと共に流動的に動作して移動します角の丸みをパネルに追加する操作は1つのプロパティを設定するだけです! リサイズ可能 SuperPanel ではオプションとしてエンドユーザは好みに合わせてサイズ変更できます有効にするとユーザーは端や角をつかんでボックスを設定したいサイズまでドラッグできますこれは Web アプリケーションにカスタマイズ可能なレイアウトを追加する優れた機能です超小型や超大型画面の解像度の場合にも便利な機能です SuperPanel は流動的なレイアウトもサポートしコンテンツの大きさに合わせて拡大しますクライアント側スクロール API JavaScript API を使用してパネルの任意の位置にスクロールしますこの API を呼び出すには (X,Y) 座標現在の位置からの (X,Y) オフセットまたはターゲットの DOM 要素を指定しますこの API は大型のグラフィックス地図グラフさらには非常に長いコンテンツのナビゲートにも優れていますテンプレートコントロール asp:panel コントロールと同様に SuperPanel は任意の HTML マークアップや ASP.NET コントロールを組み込むことができますテンプレート内に配置された任意のコントロールもコードビハインドでアクセス可能ですコントロールは実行時にも Controls.Add() メソッドを使用して追加できます SuperPanel は多数の付加機能を備えた各 asp:panel と同様に簡単に使用できますカスタムスクロールバー SuperPanel はカスタムスクロールバーを備えており Windows 固有のスクロールバーの代わりをしますこれらのカスタムスクロールバーは通常の Windows スクロールバーと同様にスクロール位置が同期されます各スクロールバーの動作 ( それぞれ水平と垂直バー ) を指定できますオプションは Hidden Visible および Auto ですスクロールバーの配置も指定できます垂直スクロールバーを SuperPanel の左側または右側に水平スクロールバーは SuperPanel の上部または下部に配置しますテーマスマートタグをクリックするだけで 6 種類のプレミアムテーマ (Arctic Midnight Aristo Rocket Cobalt および Sterling) のいずれかを選択して外観を変更しますオプションとして jquery UI からThemeRoller を使用してカスタマイズしたテーマを作成します 3 Copyright GrapeCity, Inc. All rights reserved.

5 クイックスタート SuperPanel クイックスタートでは ASP.NET コントロールである SuperPanel の基本的な使用方法を説明しますこのクイックスタートでは ASP.NET アプリケーションを作成してコンテンツを SuperPanel に追加します手順 1: : アプリケーションの作成このトピックでは ASP.NET Web サイトを作成し C1SuperPanel コントロールを Default.aspx ページに追加します 1. まず ASP.NET Web アプリケーションを作成します 2. コントロールをツールボックスに追加します 3. デザインタブを選択します 4. Visual Studio ツールボックスに移動し C1SuperPanel アイコンをダブルクリックしてこのコントロールをページに追加しますデフォルトでは C1SuperPanel の幅はページに合わせて自動的に拡大されます C1SuperPanel タグがソースコードに追加されますソースビュー <cc1:c1superpanel ID="C1SuperPanel1" runat="server"> </cc1:c1superpanel> アプリケーションを実行して以下を確認します C1SuperPanel コントロールの右下角をクリックしマウスでコントロールを左上角までドラッグしてサイズを縮小します手順 2: : コントロールへのコンテンツの追加 C1SuperPanel コントロールへのコンテンツの追加はコントロールの本体をクリックしてテキストを入力したりコントロールを追加したりするだけでできます以下の各手順では手順 1: アプリケーションの作成トピックを完了したものと想定していますコンテンツを C1SuperPanel に追加するには次の各手順を実行します 1. ソースビューで <div> タグ内に次のマークアップを追加し elements クラスを作成して C1SuperPanel コントロール内に表示される各要素のスタイルを取得しますソースビュー <div class="elements"> <div style="padding: 25px;"> 2. <cc1:c1superpanel> タグ内に次のタグを追加しボタンとテキストを追加して Height と Width プロパティを設定しますソースビュー Width="300px" Height="300px" 3. ソースビューで <ContentTemplate></ContentTemplate> タグを <cc1:c1superpanel> </cc1:c1superpanel> タグ内部に追加して C1SuperPanel のコンテンツテンプレートを作成しますタグ内にコンテンツテンプレート内の各要素のスタイルを定義するクラスを作成しますソースコードは次のようになるはずですソースビュー <ContentTemplate> <ul class="elements" style="height: 1011px; width: 1820px;"> <li>0<a href="#" title="" class="back"> 前へ </a></li> <li>1<a href="#" title="" class="back"> 前へ </a></li> 4 Copyright GrapeCity, Inc. All rights reserved.

6 <li>2<a href="#" title="" class="back"> 前へ </a></li> <li>3<a href="#" title="" class="back"> 前へ </a></li> <li>4<a href="#" title="" class="back"> 前へ </a></li> <li>5<a href="#" title="" class="back"> 前へ </a></li> <li>6<a href="#" title="" class="back"> 前へ </a></li> <li>7<a href="#" title="" class="back"> 前へ </a></li> <li>8>/p>>a href="#" title="" class="back"> 前へ </a></li> <li>9<a href="#" title="" class="back"> 前へ </av</li> <li>10<a href="#" title="" class="back"> 前へ </a></li> <li>11<a href="#" title="" class="back"> 前へ </a></li> <li>12<a href="#" title="" class="back"> 前へ </a></li> <li>>13<a href="#" title="" class="back"> 前へ </a></li> <li>14<a href="#" title="" class="back"> 前へ </a></li> <li>15<a href="#" title="" class="back"> 前へ </a></li> <li>16</p<a href="#" title="" class="back"> 前へ </a></li> <li>17</p<a href="#" title="" class="back"> 前へ </a></li> <li>18</p<a href="#" title="" class="back"> 前へ </a></li> <li>19</p<a href="#" title="" class="back"> 前へ </a></li> <li>20</p<a href="#" title="" class="back"> 前へ </a></li> <li id="t1">21<a href="#" title="" class="back"> 前へ </a></li> <li>22<a href="#" title="" class="back"> 前へ </a></li> <li>23<a href="#" title="" class="back"> 前へ </a></li> <li>24<a href="#" title="" class="back"> 前へ </a></li> <li>25<a href="#" title="" class="back"> 前へ </a></li> <li>26<a href="#" title="" class="back"> 前へ </a></li> <li>27<a href="#" title="" class="back"> 前へ </a></li> <li>28<a href="#" title="" class="back"> 前へ </a></li> <li>29<a href="#" title="" class="back"> 前へ </a></li> </ul> </ContentTemplate> </cc1:c1superpanel> </div> </div> 4. 次のスタイルマークアップをドキュメントの上部の <head> タグと <head> タグの間に追加しますソースビュー <style type="text/css">.elements ul { padding: 0px; margin: 0px; }.elements ul li { background-color:#dddddd; border:1px solid black; font-weight:bolder; height:100px; padding:50px; position:relative; text-align:center; width:200px; }.elements li { 5 Copyright GrapeCity, Inc. All rights reserved.

7 float:left; list-style: none none outside; } </style> 5. デザインビューで C1SuperPanel のコンテンツテンプレート内の各要素がスタイル設定されていることに注意してくださいアプリケーションを実行して以下を確認しますこの手順ではコンテンツを C1SuperPanel コントロールに追加しました次の手順では C1SuperPanel のスクロール設定をカスタマイズします手順 3: : コードによる混合スクロールモードの作成 C1SuperPanel は ScrollBar Buttons ButtonsHover および Edge の 4 つのスクロールモードを提供します任意の 4 つのスクロールモードを組み合わせて混合モードを作成できます以下の各手順では C1SuperPanel の混合スクロールモードを作成します以下の各手順では手順 2: コントロールへのコンテンツの追加トピックを完了したものと想定しています 1. コードファイルのページの上部に C1.Web.UI.Controls.C1SuperPanel 名前空間ディレクティブを宣言します Visual Basic コードの書き方 Visual Basic Imports C1.Web.Wijmo.Controls.C1SuperPanel C# コードの書き方 C# using C1.Web.Wijmo.Controls.C1SuperPanel; 2. コードファイルで次のコードを Page_Load イベントに追加して C1SuperPanel のスクロールモードを設定しますこの場合スクロールバーモードとスクロールボタンモードを混合して使用します Visual Basic コードの書き方 Visual Basic Me.C1SuperPanel1.HScroller.ScrollMode = ScrollMode.ScrollBar Or ScrollMode.Buttons; Me.C1SuperPanel1.VScroller.ScrollMode = ScrollMode.ScrollBar Or ScrollMode.Buttons; C# コードの書き方 C# this.c1superpanel1.hscroller.scrollmode = ScrollMode.ScrollBar ScrollMode.Buttons; this.c1superpanel1.vscroller.scrollmode = ScrollMode.ScrollBar ScrollMode.Buttons; 3. [F5] を押してアプリケーションを実行します水平と垂直スクロールに表示される矢印ボタンとスクロールバーを確認しますまたスクロールボタンをクリックまたはホバーしたときやスクロールバーを使用したときに水平または垂直スクロールが実行されることに注意してください 6 Copyright GrapeCity, Inc. All rights reserved.

この手順ではコントロールの水平と垂直スクロール設定をカスタマイズしました次の手順ではアニメーション効果をコントロールに追加します手順 4: : コントロールへのアニメーション効果の追加 C1SuperPanel は C1SuperPanel 上で水平または垂直スクロールを実行する際の複数の組み込みスクロールアニメーション効果を備えていますこれらの効果を設定するには

8 この手順ではコントロールの水平と垂直スクロール設定をカスタマイズしました次の手順ではアニメーション効果をコントロールに追加します手順 4: : コントロールへのアニメーション効果の追加 C1SuperPanel は C1SuperPanel 上で水平または垂直スクロールを実行する際の複数の組み込みスクロールアニメーション効果を備えていますこれらの効果を設定するには AnimationOptions.AnimationEasing プロパティを使用します以下の各手順ではバウンドアニメーション効果を水平と垂直スクロールに追加しますまたスクロールアニメーションの持続時間を延長するには AnimationOptions.AnimationDuration プロパティの値を増加します以下の各手順では手順 3: コードによる混合スクロールモードの作成トピックを完了したものと想定しています以下の手順を実行します 1. Web ページで C1SuperPanel を選択してからプロパティウィンドウに移動します 2. PanelBehaviorSettings ノードを拡張してもう 1 つのプロパティリストを表示してから以下を実行します AnimationOptions.AnimationEasing プロパティを EaseinBounce に設定しますこのプロパティはスクロールのアニメーションの遷移効果を決定します AnimationOptions.AnimationDuration プロパティを 1500 に設定しますこれによってアニメーション効果の持続時間が延長されるためプロジェクトをビルドしたときに効果が目に見えるようになります 3. [F5] を押してアプリケーションを実行します C1SuperPanel コントロール内でスクロールしたときのバウンド効果に注意してくださいおめでとうございますこのクイックスタートは完了しました 7 Copyright GrapeCity, Inc. All rights reserved.

デザイン時のサポート C1SuperPanel は充実したデザイン時サポートを提供するカスタマイズされたコンテキストメニューやスマートタグを備えておりオブジェクトモデルの操作が簡素化されています以下の各セクションでは C1SuperPanel のデザイン時環境を使用して C1SuperPanel コントロールを設定する方法を説明しますスマートタグ Visual Studio では

9 デザイン時のサポート C1SuperPanel は充実したデザイン時サポートを提供するカスタマイズされたコンテキストメニューやスマートタグを備えておりオブジェクトモデルの操作が簡素化されています以下の各セクションでは C1SuperPanel のデザイン時環境を使用して C1SuperPanel コントロールを設定する方法を説明しますスマートタグ Visual Studio では C1SuperPanel コントロールはスマートタグを備えていますスマートタグは C1SuperPanel で最もよく使用されるプロパティを提供するショートカットタスクメニューを表します [C1SuperPanel タスク ] メニューにアクセスするには C1SuperPanel コントロールの右上端にあるスマートタグ () をクリックしますこれによって [C1SuperPanel タスク ] メニューが開きます [C1SuperPanel タスク ] メニューは次のように動作しますテーマ [ テーマ ] のドロップダウンボックスでは Theme プロパティを設定し C1SuperPanel コントロールの外観を5つの定義済みテーマの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 クイックスタートを参照してくださいバージョン情報 [ バージョン情報 ] 項目をクリックすると製品のバージョン情報を確認できるダイアログボックスが表示されます 8 Copyright GrapeCity, Inc. All rights reserved.

10 外観 Superpanel の外観は組み込みテーマまたは CSS スタイルによって制御されます Superpanel のテーマはツールチップヘッダーやツールチップコールアウトなどすべての SuperPanel 要素の外観に影響を及ぼします C1SuperPanel はユーザーがカスタマイズしやすいように設計されていますデフォルトの外観を数限りなくさまざまに変更できます CSS スタイルを適用して C1SuperPanel の要素を変更できます C1SuperPanel には CSSClass プロパティの横のドロップダウン矢印をクリックすると表示されるいくつかの組み込み CSS セレクタが用意されています CSS セレクタ CSS を使用して C1SuperPanel の任意の要素をスタイル設定しその外観を完全に独自にカスタマイズできます ComponentOne for ASP.NET Web Forms には 6 つの組み込みテーマごとに CSS セレクタが含まれています背景テキストフォント枠線輪郭マージン埋め込みリスト表などの一般的な CSS プロパティを該当する CSS セレクタに適用できます一般的な個別 CSS セレクタやグループ化した CSS セレクタのリストについてはプロジェクトの C1SuperPanel コントロールを選択して C1SuperPanel Visual Studio プロパティウィンドウで CssClass プロパティの横のドロップダウンリストを表示します以下の表では一般に使用される個別 CSS セレクタとグループ CSS セレクタを詳しく説明します複数の個別 CSS セレクタを組み合わせてグループ化すると CSS セレクタをより具体的かつ強力なものにできますグループ CSS セレクタは C1SuperPanel の複数の要素のスタイルを定義します CSS セレクタ.wijmo-wijsuperpanel.wijmo-wijsuperpanel-button.wijmo-wijsuperpanel-contentwrapper.wijmo-wijsuperpanel-handle.wijmo-wijsuperpanel-hbar-buttonleft.wijmo-wijsuperpanel-hbar-buttonleft-ui-statehover.wijmo-wijsuperpanel-hbar-buttonright.wijmo-wijsuperpanel-hbar-buttonright ui state-hover.wijmo-wijsuperpanel-hbarcontainer.wijmo-wijsuperpanel-helper.wijmo-wijsuperpanel-statecontainer.wijmo-wijsuperpanel-templateouterwrapper.wijmo-wijsuperpanel-vbar-buttonbottom.wijmo-wijsuperpanel-vbar-buttonbottom uistate-hover.wijmo-wijsuperpanel-vbar-buttontop 説明このスタイルを C1SuperPanel コントロールに適用しますこのスタイルを C1SuperPanel のボタン要素に適用しますこのスタイルを C1SuperPanel の contentwrapper に適用しますこのスタイルを C1SuperPanel のハンドル要素に適用しますこのスタイルを C1SuperPanel の水平バーの左ボタンに適用しますこのスタイルを C1SuperPanel のホバー状態の水平バーの左ボタンに適用しますこのスタイルを C1SuperPanel の水平バーの右ボタンに適用しますこのスタイルを C1SuperPanel のホバー状態の水平バーの右ボタンに適用しますこのスタイルを C1SuperPanel の水平バーコンテナに適用しますこのスタイルを C1SuperPanel のヘルパーに適用しますこのスタイルを C1SuperPanel の statecontainer に適用しますこのスタイルを C1SuperPanel の templateouterwrapper に適用しますこのスタイルを C1SuperPanel の垂直バーの下端ボタンに適用しますこのスタイルを C1SuperPanel のホバー状態の垂直バーの下端ボタンに適用しますこのスタイルを C1SuperPanel の垂直バーの上端ボタンに適用します 9 Copyright GrapeCity, Inc. All rights reserved.

11 .wijmo-wijsuperpanel-vbar-buttontop ui-statehover.wijmo-wijsuperpanel-vbarcontainer このスタイルを C1SuperPanel のホバー状態の垂直バーの上端ボタンに適用します C1SuperPanel の垂直バーのコンテナに適用しますテーマ C1SuperPanel は Arctic Aristo Cobalt Midnight Rocket および Sterling の 6 種類の組み込みテーマをコントロールに提供しておりこれらを Theme プロパティを設定してコントロールに簡単に適用できます Arctic スタイル次の画面は Arctic スタイルを表示しています Aristo スタイル次の画面は Aristo スタイルを表示していますこれは C1SuperPanel コントロールのデフォルト書式です Cobalt スタイル次の画面は Cobalt スタイルを表示しています Midnight スタイル次の画面は Midnight スタイルを表示しています Rocket スタイル次の画面は Rocket スタイルを表示しています 10 Copyright GrapeCity, Inc. All rights reserved.

Sterling スタイル次の画面は Sterling スタイルを表示していますクライアント側の機能 C1SuperPanel のクライアント側には非常に充実したクライアント側オブジェクトモデルがありますそのメンバはほとんどがサーバー側コントロールのメンバと同じです C1SuperPanel コントロールが表示されるとクライアント側のツールチップのインスタンスが自動的に生成されます

12 Sterling スタイル次の画面は Sterling スタイルを表示していますクライアント側の機能 C1SuperPanel のクライアント側には非常に充実したクライアント側オブジェクトモデルがありますそのメンバはほとんどがサーバー側コントロールのメンバと同じです C1SuperPanel コントロールが表示されるとクライアント側のツールチップのインスタンスが自動的に生成されますこれはサーバーにポストバックしなくても C1SuperPanel コントロールのプロパティやメソッドにアクセスできるということです C1SuperPanel のクライアント側コードを使用すれば時間をかけて Web サーバーに情報を送信しなくても Web ページに多くの機能を実装できますそのため C1SuperPanel のクライアント側オブジェクトモデルを使用することで Web サイトの効率を高めることができますクライアント側イベント C1SuperPanel にはツールチップのドラッグや非表示化などのアクションが発生したときに C1SuperPanel コントロールを操作するためのいくつかのクライアント側イベントが含まれていますクライアント側イベントの表にリストされたサーバー側プロパティを使用して特定のクライアント側イベントに反応する JavaScript 関数の名前を指定できますたとえば Scrolling という JavaScript 関数をパネル内のスクロール時に反応するように割り当てるには OnClientScrolling プロパティを Scrolling に設定します下の表にクライアントスクリプトで使用できるイベントを示しますこれらのプロパティはサーバー側で定義されますが実際のイベントや各 JavaScript 関数で宣言する名前はクライアント側で定義されますクライアント側イベント表イベントのサーバー側プロパティ名イベント名説明 OnClientDragStop DragStop スクロールバーのつまみボタンのドラッグが停止したときに呼び出される関数の名前 OnClientPainted Painted パネルが描画された後に呼び出される関数の名前 OnClientResized Resized resized イベントが発生したときに呼び出される関数の名前 OnClientScrolled Scrolled スクロールが発生した後に呼び出される関数の名前 OnClientScrolling Scrolling スクロールが発生する前に呼び出される関数の名 11 Copyright GrapeCity, Inc. All rights reserved.

14 タスク別ヘルプタスク別ヘルプは Visual Studio のプログラミングに精通しているユーザーを対象としていますヘルプに記述された手順に従うことによって SuperPanel for ASP.NET Web Forms のさまざまな機能をデモンストレーションするプロジェクトを作成して SuperPanel for ASP.NET Web Forms の用途を理解することができます 13 Copyright GrapeCity, Inc. All rights reserved.

ComboBox for ASP.NET Web Forms

ComboBox for ASP.NET Web Forms 2018.04.24 更新グレープシティ株式会社目次製品の概要 2 ComponentOne for ASP.NET Web Forms のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: アプリケーションの作成 4 手順 2: コントロールへの項目の追加 4 手順 3: 選択した項目のイベントハンドラの作成 4-5 手順 4: プロジェクトの実行 5 デザイン時のサポート 6 C1ComboBox