SHOEISHA iD

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

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

ComponentZine(ComponentOne)

ウィザードで入力を行うASP.NET アプリケーションの作成

「Wizard for ASP.NET Wijmo」のC1Wizardコントロールを使ったアプリケーションの作成

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

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

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

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

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

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

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

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

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

 ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Wizard」コントロールです。

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

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

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

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

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

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

C1Wizardコントロールの概要

 「Wizard for ASP.NET Wijmo」のC1Wizardコントロールは、Webページにウィザード機能を実装するコントロールで、一連のフォームを作成して、画面の面積を節約したり、入力タスクを簡素化したりすることができます。

 C1Wizardコントロールは一種のコンテナコントロールで、設定した子要素(ステップ)内にいろいろなコントロールを配置してコンテンツを作成します。

 子要素はいくつも組み込むことができ、ステップを移動するナビゲーションボタンが用意されています。

 C1Wizardコントロールは、次のいくつかの機能を備えています。

リッチコンテンツ

 単にドラッグ&ドロップ操作を行うだけで、画像、テキスト、コントロールをC1Wizardコントロール内のページに追加します。コンテンツのカスタマイズは、標準パネルコントロールのデザインと同様に簡単にできます。

外部コンテンツ

 プロジェクト内の別のWebページのコンテンツまたはプロジェクト外のWebサイトのコンテンツを、C1Wizardコントロール内に表示します。

オートプレイ

 オートプレイ機能を使用してページ間を自動的に移動します。ページの遷移間の遅延の設定を含む、オートプレイをカスタマイズします。

アニメーション

 直線的なイージングまたはしなやかなイージングなど、ページ間の遷移に対する組み込み遷移効果から選択します。オプションで、独自のカスタム効果を作成し、持続時間を変更します。

オンデマンドでのコンテンツのロード

 クライアント側で現在選択されたページのみ表示するようにC1Wizardを設定し、最初のページのサイズとロード時間を削減します。

テーマ

 スマートタグをクリックするだけで、6種類のプレミアムテーマ(Arctic、Midnight、Aristo、Rocket、Cobalt、およびSterling)のいずれかを選択して外観を変更します。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成することもできます。

6種類のテーマ(ヘルプより抜粋)
6種類のテーマ(ヘルプより抜粋)
CSSのサポート

 CSS(Cascading Style Sheet)のスタイルを使用して、カスタムスキンを定義します。

デザイナによるページの編集

 C1Wizardコントロールそのもののプロパティ設定はプロパティウィンドウで行いますが、ステップの追加やデザインは専用のデザイナを使用して行います。

次のページ
Webページのデザイン

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

  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6985 2013/02/15 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング