Стилевое оформление страниц

Темы

Как и CSS, темы определяют набор стилей, которые называют оформлениями и которые можно применять на многих страницах ASP.NET. Особенности тем состоят в следующем:

1. Стилевые параметры тем преобразуются элементами управления во внутренние стили HTML-дескрипторов при генерации HTML-кода и не могут быть реализованы напрямую на стороне броузера
2. Темы могут применяться вместе с таблицами стилей, тогда клиенту отсылается комбинированный стиль, определяемый CSS и сгенерированным стилем темы
3. CSS можно использовать как часть темы
4. Темы могут подключаться к множеству страниц через конфигурационные файлы
5. К странице одновременно может применяться только одна тема, темы друг с другом не объединяются. Темы для одной и той же страницы можно менять только программно при каждой новой загрузке страницы
6. Приоритетом внутреннего стиля элемента управления и его стиля, определенного в теме, можно управлять
7. Разработчик должен создавать свои темы с нуля или может загружать готовые темы с других Web-сайтов, например, http:// www.asp.net. Но если тема используется, то для обеспечения гибкости и автономности она должна физически находиться в каталоге приложения.

Все темы помещаются в каталог с зарезервированным именем App_Themes, который можно добавить к приложению в панели Solution Explorer, выполнив команду Add ASP.NET Folder/Theme контекстного меню для узла приложения

Каждая тема должна храниться в своей одноименной папке и может состоять из нескольких файлов текстового формата с произвольным именем и обязательным расширением .skin (skin - кожа). Эти файлы называются файлами оформлений и добавляются в папку App_Themes командой Website/Add New Item через соответствующее диалоговое окно

увеличить изображение

Папку App_Themes отдельно можно и не создавать, потому, что при попытке добавления нового файла типа Skin File оболочка предложит автоматически создать папку App_Themes

увеличить изображение

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

Структура папки App_Themes может иметь следующий вид

Проверим сказанное на практике.

Упражнение 5. Простое стилевое оформление страницы с помощью темы

• Добавьте к проекту новую страницу Page5.aspx с отделенным кодом
• Добавьте на страницу из вкладки Standard следующие элементы управления
  • BulletedList
  • Label
  • CheckBox
  • Button
• Назначьте свойства Text этих элементов (для BulletedList - коллекция Items ) и скомпонуйте их на странице так, чтобы их внешний вид на этапе проектирования был следующим

• В панели Solution Explorer создайте копию файла Page5.aspx и присвойте ей имя FirstSkin.aspx. Из него мы в дальнейшем сделаем файл оформлений
• Удалите файл кодовой поддержки FirstSkin.aspx.cs
• Настройте декларативно в панели Properties стилевые свойства объектов страницы FirstSkin.aspx

Внешний вид элементов управления после проведенных стилевых настроек должен быть таким

• Перейдите в режим Source и удалите из файла FirstSkin.aspx весь код, кроме открывающих дескрипторов элементов управления, в которых тоже удалите атрибуты, не относящиеся к настройкам стиля, включая атрибут ID

В файле FirstSkin.aspx должно остаться следующее

<asp:BulletedList runat="server" 
            BackColor="Yellow" BorderColor="Red" 
            BorderStyle="Ridge" BorderWidth="10px" 
            BulletStyle="Numbered" ForeColor="Blue" />
        <asp:Label runat="server" 
            BackColor="Blue" ForeColor="Yellow" 
            ToolTip="Текстовая метка" />
        <asp:CheckBox runat="server" 
            BackColor="Red" BorderStyle="Groove" 
            Font-Bold="True" ForeColor="White" />
        <asp:Button runat="server"
            BackColor="#FFC0C0" BorderColor="Blue" 
            BorderStyle="Solid" BorderWidth="2px" 
            Font-Bold="True" ForeColor="Blue" />

• Присвойте файлу FirstSkin.aspx новое расширение FirstSkin.skin
• Создайте в приложении папку с зарезервированным именем App_Themes и определите в ней подпапку с именем MyTheme, в которой будут храниться файлы оформлений этого упражнения (точнее, будет всего один файл FirstSkin.skin )
• В панели Solution Explorer захватите мышью файл FirstSkin.skin и переместите его в папку MyTheme

Тема подключается к странице с помощью атрибута Theme директивы @Page. Так, например, при применении темы с именем каталога MyTheme к странице упражнения Page5.aspx директива будет выглядеть так

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Page5.aspx.cs" Inherits="Page5"
         Theme="MyTheme" %>

Тему можно подключить к странице и в панели Properties через свойство Theme объекта DOCUMENT. В этом случае оболочка автоматически добавит атрибут Theme к директиве @Page с выбранным значением.

• В раскрывающемся списке панели Properties для страницы Page5.aspx выделите объект DOCUMENT и установите свойство Theme="MyTheme"
• Назначьте страницу Page5.aspx стартовой и выполните ее

Представление рендеринга на стороне клиента, сгенерированного активной страницей Page5.aspx, с учетом присоединенных через тему стилевых настроек элементов управления будет иметь вид

Естественно, что переопределяются только те стилевые настройки элементов управления страницы, которые указаны в подключенной теме. Остальные настройки не переопределяются.

Упражнение 6. Приоритеты тем и CSS

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

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

• В панели Solution Explorer получите копию страницы Page5.aspx и присвойте ей имя Page6.aspx
• Установите прямо в настройках страницы Page6.aspx для элемента CheckBox1 атрибуты
  • BackColor="Black"
  • ForeColor="Yellow"

Мы хотим, чтобы элемент CheckBox1 имел черный фон и желтый текст, т.е. ждем его таким

• Выполните страницу и убедитесь, что элемент CheckBox1 попрежнему будет иметь цвет фона красный, а цвет текста белый, определенные в подключенной к странице теме Theme="MyTheme"

Объект DOCUMENT страницы имеет еще одно свойство StyleSheetTheme, к которому также можно подключить внешнюю тему. В этом случае приоритет будут иметь индивидуальные настройки элементов управления, которые в них были явно определены. Но те настройки по умолчанию, которые мы не определяли на странице, но которые содержатся в теме, на свойства по умолчанию действуют.

• Для страницы Page6.aspx в панели Properties выделите объект DOCUMENT, очистите поле его свойства Theme и подключите тему MyTheme к свойству StyleSheetTheme
• Выполните страницу и убедитесь, что индивидуальная настройка элемента CheckBox1 имеет приоритет

• Для страницы Page6.aspx в панели Properties выделите объект DOCUMENT, очистите поле его свойства StyleSheetTheme и подключите тему MyTheme к свойству Theme
• Выделите объект CheckBox1 с индивидуальными настройками BackColor="Black" ; ForeColor="Yellow" и отключите для него влияние темы установкой значения свойства
  • EnableTheming="False"
• Выполните страницу и убедитесь, что настройки темы отключены и действуют только настройки по умолчанию и индивидуальные настройки элемента
• Выделите объект CheckBox1 и верните для него EnableTheming="True"

Упражнение 7. Именованные оформления элементов управления в теме

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

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

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

• Скопируйте страницу Page5.aspx в страницу Page7.aspx
• Добавьте в страницу Page7.aspx элемент Table из вкладки HTML панели Toolbox. Таблицу расположите между кнопкой и предшествующими элементами. Она будет компоновать расположение части элементов управления на странице и мы ее будем называть далее компоновочной

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

• Поместите из вкладки Standard панели Toolbox в средний столбец таблицы пять серверных элементов Label, а в правый - пять серверных элементов CheckBox

Компоновочная таблица

SkinID не подключен: действуют общие настройки по умолчанию	Label2
Именованные настройки подключены: SkinID="Variant3"	Label3
Именованные настройки подключены: SkinID="Variant4"	Label4
SkinID="Variant5" подключен, но тема подавлена: EnableTheming="False"	Label5
Подключен несуществующий SkinID="XXX": настройки темы не действуют	Label6

• В панели Solution Explorer щелкните на узле MyTheme и добавьте к проекту новый файл оформлений с именем FirstSkinID.skin

увеличить изображение

• Очистите от комментариев файл оформленийFirstSkinID.skin и дополните его индивидуальными именованными настройками стилей, чтобы общий код его стал таким

<asp:Label runat="server" BackColor="Blue" ForeColor="Yellow" SkinID="Variant2" />
<asp:CheckBox runat="server" BackColor="Red" BorderStyle="Groove"
    Font-Bold="True" ForeColor="White" SkinID="Variant2" />
<asp:Label runat="server" ForeColor="Blue" SkinID="Variant3" />
<asp:CheckBox runat="server" BorderStyle="Dotted" Font-Bold="True" 
    ForeColor="Red" SkinID="Variant3" />
<asp:Label runat="server" BackColor="Yellow" ForeColor="Red" SkinID="Variant4" />
<asp:CheckBox runat="server" BackColor="Red" BorderStyle="Solid"
    ForeColor="Yellow" SkinID="Variant4" />
<asp:Label runat="server" BackColor="Blue" ForeColor="Yellow" SkinID="Variant5" />
<asp:CheckBox runat="server" BackColor="Red" BorderStyle="Groove"
    Font-Bold="True" ForeColor="White" SkinID="Variant5" />
<asp:Label runat="server" BackColor="Blue" ForeColor="Yellow" SkinID="Variant6" />
<asp:CheckBox runat="server" BackColor="Red" BorderStyle="Groove"
    Font-Bold="True" ForeColor="White" SkinID="Variant6" />

• Установите в добавленных объектах свойство SkinID в соответствии с первым столбцом компоновочной таблицы, приведенной ранее
• Выполните страницу Page7.aspx, результат должен быть примерно таким

увеличить изображение

Вспомним, что активизируются все файлы оформлений, соответствующие указанной теме и расположенные в соответствующем одноименном каталоге. И в нашем упражнении часть элементов страницы оформляется с помощью неименованных атрибутов, расположенных в файле App_Themes\MyTheme\ FirstSkin.skin, а часть - с помощью именованных, расположенных в файле App_Themes\MyTheme\ FirstSkinID.skin.

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

Окончательный код интерфейсной части страницы Page7.aspx будет следующим

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Page7.aspx.cs" Inherits="Page7"
         Theme="MyTheme" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:BulletedList ID="BulletedList1" runat="server">
                <asp:ListItem>Туризм</asp:ListItem>
                <asp:ListItem>Спорт</asp:ListItem>
                <asp:ListItem>Музыка</asp:ListItem>
                <asp:ListItem Value="Танцы"></asp:ListItem>
            </asp:BulletedList>
            <asp:Label ID="Label1" runat="server" Text="Текстовая метка"></asp:Label>
            <asp:CheckBox ID="CheckBox1" runat="server" Text="Флажок" />
            <br />
            <br />
            <table bgcolor="#FFFFFF">
                <tr>
                    <td>
                        SkinID не подключен: действуют общие настройки по умолчанию
                    </td>
                    <td>
                        <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label></td>
                    <td style="height: 26px">
                        <asp:CheckBox ID="CheckBox2" runat="server" Text="CheckBox2" /></td>
                </tr>
                <tr>
                    <td>
                        Именованные настройки подключены: SkinID="Variant3"</td>
                    <td>
                        <asp:Label ID="Label3" runat="server" SkinID="Variant3" Text="Label3"></asp:Label></td>
                    <td>
                        <asp:CheckBox ID="CheckBox3" runat="server" SkinID="Variant3" Text="CheckBox3" /></td>
                </tr>
                <tr>
                    <td>
                        Именованные настройки подключены: SkinID="Variant4"</td>
                    <td>
                        <asp:Label ID="Label4" runat="server" SkinID="Variant4" Text="Label4"></asp:Label></td>
                    <td>
                        <asp:CheckBox ID="CheckBox4" runat="server" SkinID="Variant4" Text="CheckBox4" /></td>
                </tr>
                <tr>
                    <td>
                        SkinID="Variant5" подключен, но тема подавлена: EnableTheming="False"</td>
                    <td>
                        <asp:Label ID="Label5" runat="server" EnableTheming="False" SkinID="Variant5" 
                                   Text="Label5"></asp:Label></td>
                    <td>
                        <asp:CheckBox ID="CheckBox5" runat="server" EnableTheming="False" SkinID="Variant5"
                            Text="CheckBox5" /></td>
                </tr>
                <tr>
                    <td>
                        Подключен несуществующий SkinID="XXX": настройки темы не действуют</td>
                    <td>
                        <asp:Label ID="Label6" runat="server" SkinID="XXX" Text="Label6"></asp:Label></td>
                    <td>
                        <asp:CheckBox ID="CheckBox6" runat="server" SkinID="XXX" Text="CheckBox6" /></td>
                </tr>
            </table>
            <br />
            <asp:Button ID="Button1" runat="server" Text="Отправить" />
        </div>
    </form>
</body>
</html>