Day02-3

目的

• アプリケーションに対して共通のデザインを提供する。

Theme & Skin

定義

Skin

• ASP.NETアプリケーションに対して動的に適用できるデザイン定義ファイル(skinファイル)

Theme

• スキンやスタイルシートのセットのこと。
  • ※ Theme has Skin.

適用の仕方

1. テーマフォルダを用意する。例: App_Theme
2. スキンファイルを用意する。例: Spring.skin
   • サーバコントロールとほぼ同様の書式で記述することが可能
   • しかし、IDプロパティおよび、デザインに関係しないプロパティは使用できないので注意
3. スタイルシートを定義する。例: styleSheet.css
   • .skinファイルも指定することができるが、汎用性があるため.cssで定義する。
4. テーマにページを適用する。
   • web.configの<page>要素に、theme/styleSheetTheme属性を指定する。
   • theme: <pages theme="Sprint" />(一律のテーマ)
     • styleSheet: <pages styleSheetTheme="Spring" />(個々のコントロールの指定)

• skinファイルの例

  ・・・中略・・・

SkinID属性でスキン定義を切り替える

• より複雑なデザインを定義したい場合は、SkinID属性を利用する。

例: テキストボックスの色を分ける

• SkinID.skin

  <asp:TextBox SkinID=”White” runat=”server”_ BackColor=”#FFFFFF”></asp:TextBox>

• SkinIDプロパティを持たないスキン定義をデフォルトスキンという

  • 今回の例では、<asp:TextBox runat="server" BackColor="#FFC0C0">がデフォルトスキンとなる。

テーマを指定するその他方法

@Pageディレクティヴで指定する方法(ページ単位で指定する。)

• Sample.aspxに下記の記述を追加

• <%@ Page Language="VB" Theme="Spring" %> または <%@ Page Language="VB" StyleSheetTheme="Spring" %>

プログラムから動的に指定する

• イベントハンドラから動的に設定することが可能

    Protected Sub Page_PreInit(Byval sender As Object, Byval e As System.EventArgs)
      Page.Theme = "Spring"
    End Sub
  

まとめ

• テーマ&スキン機能を利用することで、サイト共通のデザインをアプリケーション共通で管理できる。
• テーマに関するファイル(スキンファイルやCSSファイル、画像ファイルなど)は、アプリケーションルート配下の
  App_Themes/テーマ名フォルダに配置する。
• スキンファイルはスキン定義を記述するファイル。
  • サーバコントロールによく似た構文で記述できるが、スタイル関係のプロパティ以外は指定できない。
• テーマを適用するには、下記、三つの方法が存在する。
  1. web.configから行う方法
  2. @Pageディレクティヴから行う方法
  3. Page.Themeプロパティで指定する方法
• 同種のサーバコントロールに対して、異なるスキン定義を適用したい場合にはSkinIDプロパティでスキンを識別する必要がある。

TOPへ