Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 25.09.2008 | Доступ: свободный | Студентов: 3223 / 516 | Оценка: 4.32 / 3.98 | Длительность: 18:50:00
ISBN: 978-5-94774-991-5
Специальности: Программист, Разработчик интернет-проектов
Теги:
Лекция 8:
Использование тем при оформлении Web-приложения
Совместное использование Themes и CSS
В ряде случаев неплохих результатов можно добиться, применяя комбинацию Themes и CSS. Такая комбинация может быть целесообразна в случае, когда необходимо создать оформление для серверных элементов управления и для HTML-элементов страниц, либо когда желательно использовать более стандартизованный подход к оформлению страниц, который может быть легко переносим с одной платформы на другую, либо когда уже существует оформление на базе CSS.
Для использования таблицы стилей в теме необходимо выполнить следующие операции:
- Добавить таблицу стилей в папку темы.
- Определить параметры оформления в таблице стилей.
- Убедиться в том, что раздел <head> страницы, для которой определены стили, содержит директиву runat="server".
Когда таблица стилей добавлена в тему, она становится частью этой темы. При обращении пользователя к странице 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.
Существует возможность динамического изменения темы в момент выполнения приложения.
