Оформление дизайна страниц в ASP.NET

Лабораторная работа №14

Оформление дизайна страниц в ASP.NET

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

Теоретические сведения

Шаблоны дизайна — это визуальное наследование страниц, впервые появившееся в ASP .NET 2.0. Вы можете создавать основу для любого количества страниц приложения. Шаблоны позволяют легче создавать и поддерживать приложения. Visual Studio 2005 включает поддержку создания и редактирования шаблонов страниц.

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

         Основы Master Pages

С помощью шаблонов страниц вы определяете некоторое общее содержание и помещаете его в страницу с расширением .master. Естественно, таких страниц в приложении может быть несколько. Этот шаблон могут использовать любое количество дочерних страниц, которые, как и обычные страницы, имеют расширение aspx.

В страницу шаблона также включают общие заголовки и нижние колонтитулы.

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

Когда дочерняя страница редактируется в среде разработки, на вкладке Design видна полная страница вместе с элементами из шаблона, но они показаны серым цветом. Их редактировать нельзя. Можно редактировать то, что находится в элементах Content.

В диалоге Add New Item выберите тип страницы Master Page. Как и обычные страницы, их можно создавать с отделенным кодом или кодом, встроенным в страницу. Это никак не влияет на модель разделения кода дочерних страниц. Кроме того, главная и дочерняя страницы могут разрабатываться на разных языках.

Первое отличие этой страницы от обычной в том, что она начинается с директивы Master, а не Page. Класс мастер-страницы определен в файле MasterPage.master.cs:

public partial class MasterPage : System.Web.UI.MasterPage

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

}

Класс шаблона — наследник System.Web.UI.MasterPage, который в свою очередь наследует от System.Web.UI.UserControl.

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

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"

AutoEventWireup="true" CodeFile="MainSchool.aspx.cs"

Inherits="MainSchool" Title="Untitled Page" %>

Атрибут MasterPage директивы Page определяет шаблон дизайна, или эталонную страницу данной страницы.

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

        <pages masterPageFile="~/ MasterPage.master " />

Но и в этом случае назначение главной страницы в директиве Page имеет приоритет над назначением на уровне приложения. Установка web.config действует на тех страницах, в которых masterPageFile не указан, но определены элементы управления Content. Эта установка не действует на обычные aspx-страницы.

В странице содержания можно переназначить ее главную страницу программно. Для этого нужно присвоить нужное значение свойству Page.MasterPageFile. Шаблон поменяется независимо от того, какой шаблон был назначен в директиве @Page. Но если попробуете проделать это в функциях Page_Load или Page_Init, получите ошибку времени выполнения.

Это свойство можно изменить только во время обработки события Page_PreInit. Событие Page_PreInit — самая ранняя фаза жизненного цикла страницы, к которой можно получить доступ. Во время события Init главная и дочерняя страница уже сливаются в одну, поэтому поздно менять шаблон. По этой причине событие Page_PreInit — единственное, в обработчике которого можно работать с главной страницей отдельно от страницы содержания:

protected void Page_PreInit(object sender, EventArgs e)

{

Page.MasterPageFile = "~/MyMasterPage.master";

}

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

Label mpLabel = (Label) Master.FindControl("masterPageLabel");

if(mpLabel != null)

{

   //Set content page title to master page control

   Title.Text = mpLabel.Text

}

Страницы шаблона могут иметь методы и свойства. Чтобы можно было обращаться к ним, нужно использовать директиву @MasterType. При этом становится доступен класс страницы шаблона дизайна через строго типизированную ссылку. Атрибут TypeName задает имя типа, а VirtualPath — путь относительно корневого каталога web-приложения к файлу шаблона:

<%@ page language="C#" masterpagefile="~/Site3.master" %>

<%@ mastertype virtualpath="~/Site3.master" %>

Свойства могут быть определены в классе главной страницы:

    public String FooterText {

        get {

            return Footer.Text;

        }

        set {

            Footer.Text = value;

        }

    }

Таким образом, страница разрешает доступ извне к свойствам своих элементов.

Страница содержания меняет это свойство, а элемент управления AdRotator находит с помощью FindControl:

  void Page_Load()

  {

    Master.FooterText = "This is a custom footer";

    AdRotator ad = (AdRotator)Master.FindControl("MyAdRotator");

    if (ad != null)

    {

      ad.BorderColor = System.Drawing.Color.Purple;

      ad.BorderWidth = 10;

    }

  }

Темы и skin (шкурки)

В интерфейсе почтовой службы 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, календарь будет выглядеть так:

У описания шкурки может быть описан атрибут SkinId. Скин с установленным атрибутом SkinID называется именованным скином. Этот атрибут при описании каждого типа элемента управления должен быть уникальным. Скин применяется к тем элементам, у которых значение свойства SkinId совпадает со SkinId описания:

<asp:Label Runat="server" SkinId="June" ForeColor="#Teal" Font-Names="Verdana"

Font-Size="X-Small" />

При этом, если у элемента не определен SkinId, применяется скин, в котором SkinId тоже отсутствует (скин по умолчанию). Этот скин для каждого класса может быть описан только один раз.

Задание на работу

1        Рассмотреть возможности технологии ASP.NET для оформления приложения

2        Выполнить учебный проект (см. файл «к заданию 5.ppt»)

3        На основе предыдущего задания разработать дизайн оформления сайта приложения. Использовать возможности  MasterPage, Theme  и skin.

Скачано с www.znanio.ru