Лабораторная работа 4. Мастер-страницы и шаблоны web форм. Темы.

Используя функционал тем становится возможным контролировать внешний вид контролов сайта используя всего лишь несколько файлов – файлы шаблонов с расширением ".skin" и файлы с таблицами каскадных стилей (обычно имеют расширение ".css").

Темы позволяют облегчить ряд задач связанных с созданием и последующим сопровождением веб-сайтов:

• создавать сайты имеющие единообразные стиль оформления и вид контролов на всех страницах;

• с легкостью изменять и внешний вид сайта и вид отдельных контролов при помощи изменения всего нескольких файлов с шаблонами;

• изменять внешний вид сайта под конкретного пользователя, предоставив ему возможность выбора одной из заранее подготовленных тем.

Создание тем

Все создаваемые темы должны располагаться в специальной папке с зарезервированным названием App_Themes в корневой директории сайта. При использовании в качестве редактора Visual Studio эта папка будет создана автоматически, если добавить к проекту папку типа Theme (необходимо кликнуть правой кнопкой на веб-проекте, в контекстном меню выбрать пункт Add ASP.NET Folder и затем выбрать тип папки – Theme). Созданная папка и будет представлять собой тему. Каждая папка в директории App_Themes считается отдельной темой. Вложение тем друг в друга не допускается. Каждая тема обычно состоит из одного или нескольких файлов скинов с расширением ".skin", а также других, необходимых для задания внешнего вида сайта файлов, таких как файлы каскадных таблиц стилей, картинок, xsl-преобразований и так далее, которые также могут быть упорядочены в подпапках корневой директории темы. Файлы скинов и таблиц стилей обычно расположены в корне темы, а картинки - в поддиректории images. Вы можете добавить столько файлов скинов контролов, сколько это необходимо. Обычно на один тип контрола создают один файл с шаблонами, но в общем случае, один ".skin"-файл может содержать множество разнородных элементов управления. Однако если в одном файле будут храниться атрибуты только одного и файл будет назван именем этого типа, то это позволит значительно упростить поиск нужного шаблона. Например, тема может включать в себя следующие файлы: Calendar.skin, Label.skin, Button.skin, TreeView.skin, GridView.skin и т.д. Каждый из этих файлов включает все скины, относящиеся к данному типу контрола. Скин контрола – это шаблон элемента управления с настройками свойств, определяющих внешний вид контрола, которые впоследствии будут использованы для визуального представления данного контрола.

Шаблон контрола выглядит как обычное задание серверного элемента управления в ASCX или ASPX файле за тем лишь исключением, что в нем не указывается параметр ID. Задание атрибута runat="server" обязательно! После сохранения этого файла в папке темы и задании данной темы в качестве текущей, все контролы указанного типа на всех страницах сайта будут выводиться так как это задано в файле скина.

Следующий пример демонстрирует применение скина к контролу типа Label:

<asp:Label runat="server" ForeColor="Green" />

Мы можем поместить эту строку в новый файл Label.skin нашей темы и тогда все контролы типа Label на нашем сайте будут иметь одинаковый цвет текста.

Все скины делятся на два типа – скины по умолчанию и именованные скины. Скины не содержащие атрибута SkinID являются скинами по умолчанию и применяются ко всем контролам данного типа. Для каждого типа контрола может быть определен только один скин по умолчанию. Скин с установленным атрибутомSkinID называется именованным скином. Свойства именованного скина применяются только к контролам, имеющим такое же значение атрибута SkinID, что и у скина. При отсутствии в текущей теме подходящего для контрола именованного скина, применяются настройки из скина по умолчанию.

>В следующем примере для элемента управления ярлык определяется два скина – один это скин по умолчанию с цветом текста Green и второй скин для ярлыков с сообщениями об ошибках и прочих специфических нужд с цветом текста Red.

<asp:Label runat="server" ForeColor="Green" />

<asp:Label runat="server" ForeColor="Red" SkinID="Error" />

При отображении приведенной ниже страницы в браузере пользователя, первый ярлык будет отрисован используя общий скин по умолчанию с зеленым текстом, а второй будет отображаться с красным цветом текста.

<body>

<form id="form1" runat="server">

<div>

<asp:Label runat="server" ID="label1"

Text="Hello World" />

<br />

<asp:Label runat="server" ID="label2"

Text="GoodBye World" SkinID="Error" />

</div>

</form>

</body>

С помощью скинов могут быть изменены практически все свойства контрола, имеющие отношение к его внешнему виду. Все атрибуты, разрешенные для установки в скинах должны быть помечены атрибутом System.Web.UI.ThemeableAttribute="true". Однако есть ряд свойств, задание которых в скине недопустимо. Например, такие свойства как ID и EnableViewState помечены как запрещенные к установке в файлах скинов. Также не допускаются к установке через скины такие атрибуты, как CommandName класса Button, AllowPaging, DataSource класса GridView и т.д. Делается это посредством установки атрибута ThemeableAttribute="false". Атрибут ThemeableAttribute может быть применен и к классу для обозначения поддержки данным контролом настройки своих параметров через скины. В качестве примера контрола не поддерживающего темы можно привести контрол Repeater, который наследует классу Control, помеченному атрибутом Themeable="false". Любой же контрол, наследующий классу WebControl, напротив, имеет этот атрибут установленный в "true" по умолчанию.