SHOEISHA iD

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

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

Infragistics NetAdvantageチュートリアル(PR)

Infragistics Application Styling Framework - 3
ASP.NETへのさらなる進化

Infragistics NetAdvantageチュートリアル その11 - NetAdvantage AppStylist for ASP.NET

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

スタイルのための4つの手順

 他のWebデザインツールに慣れ親しんでいる場合は、NetAdvantage AppStylist for ASP.NETに操作に必要な学習時間を大幅に減少することができます。起動時にユーザーに表示される[はじめに]画面は、NetAdvantage AppStylist for Windows Formsと同じく、4つの手順を示しています。

図1 - NetAdvantage AppStylist for Windows Formsと同様の[はじめに]画面
図1 - NetAdvantage AppStylist for Windows Formsと同様の[はじめに]画面

 今までと同じように、最初の手順はスタイルライブラリを作成する、あるいは既存のライブラリを開くことになります。

 プロジェクト内にデザイン担当部門を配置する余裕がない場合は、あらかじめ用意されているプロがデザインした多数のスタイルセットを活用することができます。

 デザイン担当部門を配置できる場合は、さらにカスタマイズを行うことも可能です。今回は「Infragistics Style Library.wsl」ファイルを開き、画面左側に配置されているスタイルエクスプローラの[現在のスタイルセット]ドロップダウンから[Office 2007 Blue]スタイルセットを選択し、カスタマイズを行います。

図2 - スタイルエクスプローラによって、現在のデザイン下にあるアクティブなスタイルセットやコントロールタイプを絞り込むことができる。
図2 - スタイルエクスプローラによって、現在のデザイン下にあるアクティブなスタイルセットやコントロールタイプを絞り込むことができる。

 プレビューキャンバスでは、コントロールに対するスタイル変更を行うと速やかに反映されます。[キャンバス オプション]ボタンではNetAdvantage for ASP.NETコントロールで使用可能な機能のon/offを制御できます。これらの機能は実際に、プレビュー画面で確認することができます。アプリケーション開発者に依存することなく各機能に対するスタイリングが可能になります。

図3 - キャンバスオプションによって各機能の外観をプレビュー画面で確認できる。
図3 - キャンバスオプションによって各機能の外観をプレビュー画面で確認できる。

 プレビューキャンバスでスタイル可能なUI上にマウスをホバーさせると、ロールを識別するキーボードショートカットがタスクパネルに表示されます。また、プレビューキャンバスは組み込みのMicrosoft Internet Explorerブラウザウィンドウであるため、エンドユーザーが実際に目にするものを忠実に再現します。

図4 - キーボードショートカット
図4 - キーボードショートカット

 ただし、現在のWeb標準に各ブラウザが準拠するレベルが異なっているため、クロスブラウザ用のスタイルを作成する際には注意が必要です。想定する結果を得るには、ブラウザを「標準モード」に設定するDOCTYPEの使用が強く推奨されます。アプリケーション開発者は、ページの先頭にDOCTYPEを宣言する必要があります。

 Webアプリケーションが「標準モード」でデザインされるかどうかにかかわらず、AppStylist for ASP.NETでは、[ツール]-[オプション]ダイアログでデザインするDOCTYPEを設定できます。

図5 - プロパティリボンでは[デザイナ]タブと、CSSを直接操作することを可能にする[テキストエディタ]タブが提供されている。
図5 - プロパティリボンでは[デザイナ]タブと、CSSを直接操作することを可能にする[テキストエディタ]タブが提供されている。

 実際のデザイン例としてUltraWebGridコントロールにおいてUIを選択すると、AppStylist for ASP.NETは、スタイル設定が可能なプロパティリボンを画面の下部に表示します。また、CSSに対する深い知識を有する場合やCSS定義についての学習を支援するために、現在の設定が記述されているCSSエディタを開く[テキストエディタ]タブも用意されています。プレビューを参照しながら、デザイナは各スタイルロールの外観を非常にきめ細かく制御できます。

次のページ
スタイルをWebサイトへ適用

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

  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

インフラジスティックス・ジャパン株式会社 池原 大然(イケハラ ダイゼン)

国内ベンチャー企業にて.NETエンジニアとして開発に従事、2007年インフラジスティックス・ジャパンに入社。現在デベロッパー エバンジェリストとして、.NETやWPF/Silverlight製品や技術の啓蒙活動を行う。Microsoft MVP for Client App Dev 2010/04 ...

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング