Использование тем при оформлении Web-приложения

Цель лекции: изучить возможности использования тем при создании Web-приложения, рассмотреть конкретные примеры их создания, научиться организовывать совместное использование тем и каскадных таблиц стилей в Web-приложении ASP.NET.

В одной из предыдущих лекций, посвященной мастер-страницам, рассматривались вопросы стандартизации страниц, входящих в интернет-приложение. Эти вопросы являются чрезвычайно важными в тех случаях, когда необходимо создавать сложные приложения, состоящие из множества страниц. Именно единообразно оформленное содержание страниц позволяет воспринимать их как нечто целостное. Тем не менее с увеличением количества страниц, входящих в Web-приложение, увеличиваются и трудозатраты, необходимые для поддержания их единого оформления, поэтому необходимы средства, способные упростить процесс создания и поддержания единообразного оформления большого количества страниц. К таким средствам можно отнести CSS - каскадные таблицы стилей, являющиеся стандартом при оформлении HTML-элементов управления. Однако не все задачи могут быть решены с их помощью.

ASP.NET содержит специфические средства, способные значительно упростить процесс централизованного оформления всех или определенных страниц Web-приложения. Это средство называется темы (themes).

Не секрет, что при разработке интернет-приложения достаточно большое внимание необходимо уделять его дизайну. Хорошо продуманный дизайн способствует повышению эффективности, простоте и удобству работы с ним пользователей. При этом дизайн всех страниц приложения должен быть единообразным, что фактически означает необходимость стандартизации каждого элемента управления, используемого на сайте. Для упрощения создания и поддержания разнообразия традиционно применяются каскадные таблицы стилей. В данном курсе этот инструмент рассматриваться не будет, т. к. он является стандартом и описан во многих руководствах. К тому же ранее, в .

В данной же лекции речь пойдет об использовании присущего только ASP.NET средства оформления содержимого интернет-приложений - темах. Темы позволяют расширить существующие в CSS возможности, особенно те, которые касаются серверных элементов управления ASP.NET Очень часто трудно бывает определить, с помощью какого именно тега HTML будет воссоздаваться тот или иной элемент управления на стороне клиента. В этом случае темы являются просто незаменимым инструментом определения свойств этих элементов.

Темы, в отличие от CSS, реализуются на стороне сервера. К тому же исходя из того, что темы применимы к элементам управления, а не к элементам HTML, с их помощью возможно определение практически любого свойства элемента управления.

Создание и использование тем

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

Как уже упоминалось ранее, в ASP.NET существует специальная папка для хранения тем. Определяя тему, ее необходимо поместить в отдельную папку, имя которой должно совпадать с именем темы, саму же папку необходимо поместить в каталог Арр_Theme, находящийся в корневом каталоге Web-приложения. В случае, если приложение содержит определение для нескольких тем, каждая из них должна быть помещена в отдельную папку. Тема должна состоять как минимум из одного файла оформления с расширением .skin. Он представляет собой текстовый файл, содержащий определения для элементов управления приложения. Фактически файл оформления содержит список дескрипторов элементов управления, похожих на описание самих элементов управления в коде страницы aspx, однако, в отличие от самих элементов, дескрипторы могут описывать лишь часть свойств элемента управления, значения которых необходимо установить. Например, наиболее типичным описанием для файла оформления является определение цвета фона или цвета переднего плана элемента управления. В этом случае достаточно задать значения свойств BackColor или ForeColor соответственно. Таким образом, для элемента управления TextBox строка описания файла оформления может выглядеть следующим образом:

<asp:TextBox runat="server" forecolor="blue" backcolor=
 "lightsteelblue"/>

Из примера можно заметить, что, в отличие от описания элемента управления страницы в файле оформления, атрибут id для элемента управления не применяется. Точнее, он может использоваться для однозначной идентификации элемента управления, которому соответствует данное описание, а может и не использоваться, в случае, когда необходимо создать описание, присущее всем элементам управления данного класса.

Для добавления темы в проект Web-приложения необходимо выполнить следующие действия:

Создать каталог Арр_Themes в том случае, если он еще не создан, и внутри каталога создать подкаталог с темой, присвоив ей имя, например example1.

В созданный каталог темы добавить файл оформления.

Для выполнения этих операций достаточно выполнить команду главного меню WebSite $$\Rightarrow$$ Add New Item, в открывшемся окне выбрать Skin File, нажать OK. Visual Studio предупредит о том, что создаваемый файл оформления будет помещен в папку Арр_Themes, и спросит, хотите ли вы добавить ее в проект в том случае, если она не существует.

(рис 8.1) Файл темы, добавленный в проект

Ввести дескрипторы описания оформления элементов управления приложения (пример описания оформления элементов TextBox приведен выше).

Добавить файл web.config, в котором определить тему, используемую в приложении, с помощью директивы pages. В этом случае тема будет применена ко всем страницам Web-приложения. В случае, если тему необходимо применить только к выбранной странице, необходимо выбрать объект DOCUMENT в окне свойств страницы и ввести в свойство Theme имя темы, которую необходимо применить к данной странице. При этом Visual Studio модифицирует директиву Page данной страницы.

<pages theme="example1"></pages>

При задании темы страницы ASP.NET в момент выполнения страницы на сервере подменяет значения свойств, существующие в элементах управления, на значения этих же свойств, которые указаны в теме, активной в данный момент для этого приложения.

Таким образом, тема является более приоритетной по отношению к свойствам элемента управления. На рис 8.2 показана одна из страниц предыдущего примера, где была применена тема, фрагменты которой указаны выше.

Как уже было сказано ранее, настройки элемента управления, указанные в теме, имеют более высокий приоритет по сравнению с настройками, указанными непосредственно в самом элементе управления. Это одно из основных отличий применения тем от работы с каскадными таблицами стилей CSS. Как известно, при использовании CSS параметры, определенные в каскадных таблицах стилей, применяются только тогда, когда аналогичные свойства элемента управления не заданы (отсутствует конфликт свойств). Таким образом, CSS имеет меньший приоритет по отношению к параметрам, указанным в самих элементах управления.

Иногда желательно, чтобы темы вели себя аналогично CSS, т. е. обладали меньшим приоритетом по отношению к параметрам, определенным в элементах управления. Для реализации такого поведения необходимо вместо атрибута Theme использовать атрибут styleSheetTheme в директиве pages файла Web.config либо объекта DOCUMENT страницы.

Конечно, одним из важнейших свойств тем является возможность их применения к большому количеству элементов управления с помощью всего лишь одного описания значений свойств его класса. Тем не менее может возникнуть необходимость конфигурации отдельных элементов управления, т.е. указания параметров в теме, которые будут применяться не ко всем элементам, а лишь к некоторым, либо настройки некоторых элементов таким образом, чтобы они вообще не принимали участие в формировании темы. В последнем случае достаточно установить значение свойства EnableTheming элемента управления равным false. В этом случае при обработке данного элемента управления никакие темы применяться не будут.

Если же необходимо, чтобы тема применялась лишь к избранным элементам оформления, можно создать именованное оформление. Для создания именованного оформления нужно проделать следующие действия:

SkinID:
<asp:Button SkinID="RedButton" runat="server" Font-Bold="True"
 ForeColor="Red" />

На рис 8.3 показан внешний вид элемента управления Button при установленном свойстве SkinID равным RedButton (справа) и при неустановленном свойстве SkinID (слева). Кроме того, в данном примере в качестве цвета фона элемента ввода e-mail указан PeachPuff, а в файле Web.config при определении темы использована директива styleSheetTheme, что привело к тому, что цвет фона элемента ввода e-mail отличается от цвета фона остальных элементов ввода данной страницы.

При использовании данного механизма поведение тем становится похожим на поведение CSS при использовании классов.

Совместное использование Themes и CSS

В ряде случаев неплохих результатов можно добиться, применяя комбинацию Themes и CSS. Такая комбинация может быть целесообразна в случае, когда необходимо создать оформление для серверных элементов управления и для HTML-элементов страниц, либо когда желательно использовать более стандартизованный подход к оформлению страниц, который может быть легко переносим с одной платформы на другую, либо когда уже существует оформление на базе CSS.

Для использования таблицы стилей в теме необходимо выполнить следующие операции:

Когда таблица стилей добавлена в тему, она становится частью этой темы. При обращении пользователя к странице ASP.NET динамически свяжет ее с файлом css, который определен в теме, заданной для данной страницы. Таким образом, обязательно необходимо, чтобы страница имела атрибут runat="server" для включения обработки раздела <head> на стороне сервера при обращении к странице. Раздел <head> здесь используется потому, что при динамическом связывании таблицы стилей со страницей происходит то же, что и при статической связке: добавление ссылки на файл таблицы стилей именно в раздел <head>.

Например, если добавить к рассматриваемому примеру таблицу стилей (рис 8.4) следующего содержания:

h1
{
  font-weight: bold;
  color: teal;
  font-family: Verdana;
}

то стиль заголовка "Регистрация пользователя" будет переопределен и отобразится, как показано на рис 8.5>.

Динамическое изменение темы

В ряде случаев нужно иметь возможность динамического изменения темы. Это может быть связано со сложившимися условиями в момент выполнения приложения либо с необходимостью предоставить пользователю возможность изменения внешнего представления приложения.

Изменение темы происходит достаточно просто. Для этого нужно установить соответствующее значение свойства Page.Theme. При этом мы должны помнить, что динамическое изменение темы необходимо производить в рамках события Page.Init, в противном случае будет выдано сообщение об ошибке.

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

Заполнение элемента DropDownList списком существующих тем должно быть организовано в момент загрузки страницы (событие Page Load ). Т. к. каждая тема располагается в отдельной папке проекта, для получения списка тем необходимо прочитать существующие имена папок и установить их в качестве значений выпадающего списка:

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
  {
    DirectoryInfo tDir = new DirectoryInfo(Server.MapPath(
    "App_Themes"));
    DropDownList2.DataTextField = "Name";
    DropDownList2.DataSource = tDir.GetDirectories();
    DropDownList2.DataBind();
    if (Session["CurrentThemeIndex"] != null)
      DropDownList2.SelectedIndex = (int)Session[
      "CurrentThemeIndex"];
  }
}

Класс DirectoryInfo содержит методы, необходимые для выполнения типичных операций над файлами и папками, таких как копирование, перемещение, переименование, создание и удаление.

В данном примере создается новый объект класса DirectoryInfo. С помощью метода GetDirectories() получается список всех подпапок текущей папки (в данном случае Арр_Themes ). Данный список представлен массивом строковых элементов, который затем посредством свойств DataSource и DataBind связывается с выпадающим списком.

Так как изменение оформления страницы требует инициации события postback и, как следствие, перезагрузки страницы, при которой должна измениться не только текущая тема, но и текущее значение элемента выпадающего списка, логика работы данного примера будет следующей. При выборе темы и нажатии на кнопку "Применить" устанавливаются две переменные состояния, в одной из которых будет храниться имя темы, выбранной пользователем, а во второй - индекс выбранного элемента выпадающего списка. В событии Page_PreInit будет производиться чтение значения переменной состояния, содержащей имя темы, и применение ее к текущей странице. Таким образом, условие

if (Session["CurrentThemeIndex"] != null)
  DropDownList2.SelectedIndex = (int)Session["Current
   ThemeIndex"];

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

Исходный код события Page_PreInit выглядит следующим образом:

protected void Page_PreInit(object sender, EventArgs e)
{
  if (Session["CurrentTheme"] == null)
  {
    Page.Theme = "";
  }
  else
  {
    Page.Theme = (string)Session["CurrentTheme"];
  }
}

Исходный код нажатия на кнопку "Применить" выглядит следующим образом:

protected void Button3_Click(object sender, EventArgs e)
{
  Session["CurrentTheme"] = DropDownList2.SelectedValue;
  Session["CurrentThemeIndex"] = DropDownList2.SelectedIndex;
  Server.Transfer(Request.FilePath);
}

В результате работы приложения при выборе темы и нажатии на кнопку "Применить" выбранная тема будет применена к текущей странице (рис 8.6).

Краткие итоги

Как уже отмечалось ранее, при разработке сложных Web-приложений вопросы создания эффективного дизайна и навигации являются чрезвычайно важными, от их решения во многом зависят удобства пользователей. ASP.NET наряду с другими возможностями и страниц приложения предлагает разработчикам средство создания единообразного оформления содержания страниц приложения с использованием тем.

Темы представляют собой средства эффективной организации оформления страниц Web-приложения, похожие на возможности CSS, но реализуемые на стороне сервера. Темы применимы к элементам управления, размещенным на страницах приложения, а не к элементам HTML, на которые ориентированы CSS. Это позволяет задать с помощью темы определение практически любого свойства элемента управления, размещенного на странице Web-приложения.

ASP.NET поддерживает определение нескольких тем в рамках одного приложения. Причем переключение между активными темами приложения возможно осуществлять динамически в процессе функционирования приложения. При задании темы страницы ASP.NET подменяет в момент выполнения страницы на сервере значения свойств, существующие в элементах управления, на значения этих же свойств, которые указаны в теме, активной в данный момент для этого приложения. Это делает тему более приоритетной по отношению к свойствам элемента управления.

Это еще одно отличие тем от каскадных таблиц стилей, при использовании которых свойства, определенные в них, применяются к элементам управления только в том случае, если данные элементы не содержат определения свойств внутри себя. Т. е. CSS имеет меньший приоритет по отношению к параметрам, указанным в самих элементах управления. При этом возможна настройка тем таким образом, чтобы они вели себя аналогично CSS, т. е. обладали меньшим приоритетом по отношению к параметрам, определенным в элементах управления. Существует также возможность применения параметров темы только к некоторым элементам управления, размещенным на странице. Это достигается за счет использования именованного оформления.

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

В ряде случае целесообразно использовать совместно темы и CSS.

Существует возможность динамического изменения темы в момент выполнения приложения.