Темы и шкурки
В интерфейсе почтовой службы Rambler дизайн страниц меняется в зависимости от времени года. Пользователь может сам выбрать себе вариант дизайна. Подобной функциональности в ASP .NET можно добиться с помощи тем.
Темы похожи на CSS тем, что тоже позволяют определять внешний вид страниц. Но темы могут сделать гораздо больше них. Таблицы стилей определяются для тегов HTML, а скины, которые входят в тему, — для элементов управления. Скины применяются на стороне сервера, поэтому могут использоваться для установки специфичных свойств серверных контролов. Например, для элемента управления Calendar таким свойством является DayNameFormat. CSS никак не позволяет оперировать такими свойствами.
Темы можно применять к страницам, к сайту или отдельным элементам управления.
Файлы тем находятся в папке с зарезервированным названием App_Themes. Эту папку можно создать, если в контекстном меню проекта выбрать "Add ASP .NET Folder". В папке App_Themes можно создавать темы, например, для разных времен года. У каждой темы будет свой каталог, в котором будут находиться относящиеся к ней файлы. На многих сайтах пользователь может выбрать тему. Вложение тем друг в друга не допускается.
Каждая тема обычно состоит из одного или нескольких файлов скинов с расширением ".skin", а также других, необходимых для задания внешнего вида сайта файлов, таких как файлы каскадных таблиц стилей, картинок, XSL-преобразований и так далее, которые также могут быть упорядочены в поддиректориях корневой директории темы.
Файлы скинов и таблиц стилей обычно расположены в корне темы, а картинки — в поддиректории Images.
Темы можно применить к странице с помощью атрибута Theme директивы Page. Тему можно поменять программно. Поэтому можно дать возможность пользователю выбрать тему. Тему можно установить до или во время события PreInit:
protected void Page_PreInit(object sender, EventArgs e) { Page.Theme = "Black"; }
Тему можно применить ко всем страницам приложения, если в файле web.config вставить эту директиву:
<configuration> <system.web> <pages theme=" Black " /> </system.web> </configuration>
Если тема установлена в странице, она имеет преимущество перед глобальной темой. Темы страницы переопределяют свойства элементов управления. Если нужно, чтобы темы не применялись к элементу, нужно установить его свойство EnableTheming в False.
Если нужно отменить применение темы к группе элементов, можно поместить их в Panel и установить его свойство EnableTheming в False.
Свойство EnableTheming можно менять и на уровне страницы:
<%@ Page Language="C#" AutoEventWireup="true" EnableTheming="False"%>
Атрибут StylesheetTheme работает так же, как и Theme. Но если тема установлена с помощью этого атрибута, то свойства управления элемента имеют преимущество перед темой страницы.
В файлах тем с расширением .skin хранятся варианты внешнего вида элементов управления. Перевод термина skin на русский язык не устоялся. Можно называть его "шкурка" или "оболочка".
Скин — это шаблон элемента управления с определением набора визуальных свойств, которые будут использоваться для генерации элементов управления данной темы. Скины могут работать вместе с картинками и таблицами стилей. Один ".skin"-файл может хранить множество разных элементов управления. Например, в проекте "Starter Kit" определены две темы — Black и White. В файле Default.skin обеих тем хранятся скины элементов ImageButton, Image, GridView.
Можно создать столько файлов шкурок, сколько необходимо. Для удобства и ясности можно создать файлы скинов для каждого элемента, например, Label.skin, GridView.skin.
Создайте в папке App_Themes тему Summer. Добавьте в тему скин Calendar.skin.
Описание стиля элемента управления похоже на описание на странице, с тем отличием, что атрибут ControlId не указывается. Однако необходимо указать атрибут runat="server":
<asp:Calendar runat="server" BackColor="Honeydew" BorderColor="Teal" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="DarkSlateGray" Height="200px" Width="220px"> <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" /> <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" /> <WeekendDayStyle BackColor="#C0FFC0" /> <OtherMonthDayStyle ForeColor="#999999" /> <TodayDayStyle BackColor="#99CCCC" ForeColor="White" /> <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" /> <DayHeaderStyle BackColor="#80FF80" ForeColor="#336666" Height="1px" /> <TitleStyle BackColor="Green" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="White" Height="25px" /> </asp:Calendar>
Теперь на всех страницах, где установлена тема Summer, календарь будет выглядеть так:
Рис. 13.4.
Теперь на всех страницах, где установлена тема Summer, календарь будет выглядеть так:
Рис. 13.4.
У описания шкурки может быть описан атрибут SkinId. Скин с установленным атрибутом SkinID называется именованным скином. Этот атрибут при описании каждого типа элемента управления должен быть уникальным. Скин применяется к тем элементам, у которых значение свойства SkinId совпадает со SkinId описания:
<asp:Label Runat="server" SkinId="June" ForeColor="#Teal" Font-Names="Verdana" Font-Size="X-Small" />
При этом, если у элемента не определен SkinId, применяется скин, в котором SkinId тоже отсутствует (скин по умолчанию). Этот скин для каждого класса может быть описан только один раз.
Определим еще один именованный скин календаря:
<asp:Calendar runat="server" SkinId="June" BackColor="#C0FFC0" BorderColor="Teal" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="DarkSlateGray" Height="200px" Width="220px"> <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" /> <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" /> <WeekendDayStyle BackColor="#C0FFC0" /> <OtherMonthDayStyle ForeColor="#999999" /> <TodayDayStyle BackColor="#99CCCC" ForeColor="White" /> <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" /> <DayHeaderStyle BackColor="#C0FFC0" ForeColor="#FF8000" Height="1px" /> <TitleStyle BackColor="Green" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="White" Height="25px" /> </asp:Calendar>
При отображении приведенной ниже страницы в браузере пользователя, первый
календарь будет отображаться с использованием именованного скина June, а второй — используя общий скин по умолчанию:
<form id="form1" runat="server"> <div> <table> <tr> <td style="width: 100px"> <asp:Calendar ID="Calendar1" runat="server" VisibleDate="2006-06-01" SkinID="June"></asp:Calendar> </td> <td style="width: 100px"> <asp:Calendar ID="Calendar2" runat="server" VisibleDate="2006-07-01"></asp:Calendar> </td> </tr> </table> </div> </form>
Некоторые свойства элементов управления не могут быть изменены в файлах скинов. Например, такие свойства, как ID и EnableViewState, помечены как запрещенные к установке в файлах скинов. Также не допускаются к установке через скины такие атрибуты, как CommandName класса Button, AllowPaging, DataSource класса GridView и т.д. Словом, если свойство влияет не на внешний вид, а на поведение элемента управления, или строго индивидуально, — скорее всего его нельзя будет изменить. Это определяется разработчиком элемента управления с помощью атрибута ThemeableAttribute. Этим атрибутом можно пользоваться и создавая собственные элементы управления. Атрибут ThemeableAttribute может быть применен и к классу для обозначения поддержки данным контролом настройки своих параметров через скины.
Например, класс Control определен с атрибутом Themeable Attribute=False, и все классы — непосредственные наследники Control не допускают настройки свойств через файлы .skin. Это классы Literal, Repeater, MultiView, Xml и другие. Хотя класс WebControl наследует Control, он помечен атрибутом Themeable=True, и это распространяется и на его наследников, каковым являются большинство элементов управления.
Содержание страниц не ограничивается только выводом элементов управления. Например, текст может выводиться вне элемента Label. Файлы каскадных таблиц стилей тоже могут находиться в папке темы. При этом стили будут применяться ко всем страницам с данной темой:
body { font-size: x-small; font-family: Verdana; color: #004000; background-color: #F0FFF0; }
Установка стиля в файле css относится ко всему тексту страницы, в том числе к элементам Repeater и Literal. При этом если в каком-нибудь элементе явно установить шрифт, эти установки переопределят установки из css.
В папки с темами можно включать картинки. Их используют в файлах скинов. В приложении Starter Kit картинки задают внешний вид кнопок:
<asp:ImageButton Runat="server" ImageUrl="Images/button- import.gif" SkinID="import" /> <asp:imagebutton runat="server" Imageurl="Images/button-login.gif" skinid="login" />
