Создание веб-сайта при помощи ASP.NET 2.0 и каскадной таблицы стилей (CSS)
ОГЛАВЛЕНИЕ
ASP.NET 2.0 предоставляет такие же адаптивные возможности по обработке, как и ASP.NET 1.x, хотя возможности браузера определяются скорее файлами определения веб-обозревателя, чем элементом <browserCaps>. (Поддержка <browserCaps> все еще существует в ASP.NET 2.0 для предоставления совместимости, но стоит воздержаться от использования данного элемента.) В дополнение к адаптивной обработке, фрэймворк обработки ASP.NET 2.0 также может быть настроен на использование адаптеров элементов управления. Адаптером элемента управления является опциональный класс - если он присутствует и при этом правильно настроен, то он используется для обработки элементов управления вместо того, чтобы использовать стандартную логику обработки элемента управления. Вкратце, используя данный адаптер, вы можете оставить основную функциональность веб-элемента управления, но полностью настроить выработанную разметку. Это удобно использовать, если вы хотите изменить стандартную обработку для всех браузеров, либо для конкретных пользовательских посредников - например, определенных сотовых телефонов или портативных устройств - для которых вам нужно предоставить специальную обработку.
Хороший пример мощи адаптеров элементов управления ASP.NET 2.0 можно загрузить на странице "Адаптеры элементов управления, поддерживающие CSS (CSS Friendly Control Adapters) в ASP.NET 2.0". Этот набор бесплатных адаптеров, выпущенный компанией Microsoft, обеспечивает обработку различных встроенных элементов управления ASP.NET, используя желаемую технологию CSS. К примеру, по умолчанию элемент управления Menu обрабатывается как <table> в HTML; при помощи адаптеров, данный элемент Menu обрабатывается как неотсортированный список при помощи CSS -позиционирования для корректного отображения меню. Более того, адаптеры элементов управления, поддерживающие CSS (CSS Friendly Control Adapters), игнорируют любые настройки стилей элементов, которые должны быть обработаны как внутренние (inline) элементы стиля (style) в разметке, и вместо этого требуют вынести данную информацию о стиле за пределы, указанные при помощи классов CSS.
В дополнение к данному адаптеру для элемента управления Menu, адаптеры элементов управления, поддерживающие CSS, включают в себя адаптеры для элементов TreeView, GridView, DataList, DetailsView, Login, CreateUserWizard и других. В данной статье мы начнем работу с адаптерами элементов управления и увидим, как они могут очистить и улучшить разметку вашего веб-обозревателя. Читайте далее, чтобы узнать больше об этом!
Краткий обзор адаптеров элементов управления
Когда пользователь посещает ASP.NET-страницу, главной целью страницы будет переработать содержимое в разметку, которую можно отослать обратно клиенту. ASP.NET-страница вырабатывает содержимое посредством прохода по дереву управления, как бы говоря своим элементам управления и статическому содержимому HTML: «Эй, обработайте сами себя». Каждый элемент управления покорно обрабатывает сам себя и возвращает разметку на страницу. Данные куски кода соединяются воедино и возвращаются запрашивающему клиенту.
В свою очередь, когда элемент управления получает приказ об обработке, он спрашивает: "Стоп, а есть ли у меня адаптер, который я должен использовать?" Адаптер элемента управления реализован как класс, унаследованный от класса ControlAdapter и обладает важными методами обработки, такими как BeginRender(), Render(), RenderChildren(), EndRender() и т.д. Если обрабатываемый элемент управления не адаптера, то он производит обработку в своих пределах (то есть он использует стандартную логику обработки вместо того, чтобы доверять ее внешнему адаптеру элемента управления ). Использовать или нет адаптеры элементов управления - решают файлы определения веб-обозревателя, которые включают в себя информацию о том, какие веб-элементы управления используют адаптеры для каких именно браузеров.
Чтобы использовать адаптер элемента управления в веб-приложениях ASP.NET нам необходимо выполнить два шага:
- Создайте (или загрузите) адаптер элемента управления. Опять же - это всего лишь класс, унаследованный напрямую либо косвенно из базового класса ControlAdapter. .NET Framework уже включает в себя некоторые классы которые расширяют класс ControlAdapter- PageAdapter, WebControlAdapter, DataBoundControlAdapter и т.д.- и эти классы зачастую наследуются во время построения адаптера элемента управления.
- Настройте либо создайте файл определения веб-обозревателя, чтобы указать, что адаптер элемента управления должен быть использован для конкретного элемента-управления и пользовательского клиента. Файлы определения веб-обозревателя имеют расширение .browser; по умолчанию файлы определения веб-обозревателя могут быть найдены в %WINDIR%\Microsoft.NET\Framework\v2.0.50727\CONFIG\Browsers. Данная информация может быть настроена для конкретного веб-приложения путем добавления каталога .browser files to the App_Browsers.
Улучшаем стандартную разметку веб-элементов управления ASP.NET
Каскадные таблицы стилей (CSS) используются в разработке веб-приложений для указания настроек стиля для конкретного HTML-элемента, класса HTML-элементов, либо для всех экземпляров конкретного типа HTML-элементов (таких, как указание настроек отображения для всех элементов <div>). Для указания настроек отображения для конкретного HTML-элемента может быть использован атрибут style. Например, следующая разметка указывает на то, что цвет фона элемента параграфа должен быть зеленым:
<p style="background-color: Green;">
This has a green background!
</p>
В идеале, информация об отображении может быть указана посредством CSS-классов. Классы CSS определяют стиль отображения для классов элементов и указываются в элементах <style> либо посредством внешних CSS–файлов, которые связываются со страницей через элемент <link>. Объявив класс, он может быть связан с конкретным HTML-элементом посредством использования атрибута class. Следующая разметка добавляет класс, названный .Warning , который отображает текст в красном цвете и жирным шрифтом. Следующий элемент <span> связан с классом, следовательно, будет выводить красный жирный текст в обозревателе.
<style type="text/css">
.Warning {
font-weight: bold;
color: red;
}
</style>
<span class="Warning">
Danger! Danger!
</span>
Данный подход с использованием класса CSS более практичен, чем использование стандартных стилей, по нескольким причинам. Во-первых, вы уменьшаете общий размер страницы, поскольку информация об отображении будет указана в одном месте - в элементе <style> либо в отдельном CSS-файле - и затем может быть применена в нескольких местах на странице. Если вы будете использовать встроенные стили, то информация об отображении будет применена несколько раз к каждому элементу управления. Во-вторых, сосредоточив данную информацию, вы сможете с большей легкостью изменить дизайн сайта, поскольку вам необходимо будет поменять настройки только в одном месте.
К сожалению, свойства стиля элементов управления ASP.NET обрабатываются как встроенные. То есть, если вы добавите элемент управления Label на страницу и установите ее свойство ForeColor в Red, Label обработает разметку как:
<span style="color: red;">Label Text</span>
Тем не менее, некоторые элементы управления достаточно интеллигентны, чтобы использовать классы, касающиеся вложенных стилей. Элемент Menu использует классы по отношению к встроенным стилям в случае, когда обрабатываются свойства, относящиеся к стилю. Более того, все элементы управления имеют свойство CssClass, которое вы должны использовать, но не так много разработчиков используют встроенные свойства.
В дополнение, многие элементы ASP.NET обрабатываются используя HTML-элемент <table> для позиционирования вместо того, чтобы использовать стандартные блок-элементы (как <div>) с позиционированием посредством CSS. HTML элемент <table> разработан для хранения табличной информации, но не в целях отображения информации, тем не менее он используется в этих целях вместе с Menu, TreeView, и другими встроенными элементами управления ASP.NET.
Тем не менее, такое поведение может быть перегружено при помощи адаптеров элементов управления. Хотя они могут быть созданы с нуля, Microsoft предоставил адаптеры элементов управления, поддерживающие CSS в ASP.NET 2.0, которые могут быть загружены и внедрены в ваше ASP.NET веб-приложение с применением минимальных усилий. С их установлением встроенные атрибуты стилей не будут обработаны (вам нужно использовать классы CSS) и тэги <table> в элементах Menu, TreeView и др. будут заменены техниками CSS.
| А вы используете тэги <table> или CSS? |
|---|
| По моему мнению, теги <table> должны быть использованы для отображения табличной информации, такой как информация в GridView, и не должны быть использованы для страничной верстки (как в случае, когда <table> используется для распределения страницы по трем колонкам и двум строкам). В идеале, техники CSS должны быть использованы для верстки страницы. Тем не менее, я чаще использую теги <table> в основном благодаря такому фактору, как удобство - я скорее знаю, как распределить содержимое при помощи тегов <table>, чем как это сделать при помощи CSS. В идеале, лучше использовать CSS, и, к счастью, адаптеры элементов управления, поддерживающие CSS, помогают в этом, причем нет особой необходимости изучать всю технику использования каскадной таблицы стилей. |
Загружаем и внедряем адаптеры элементов управления, поддерживающие CSS, в ваш веб-сайт
Для того чтобы начать строить веб-сайт на основе использования CSS при помощи адаптеров элементов управления, вам сначала потребуется загрузить файлы с сайта Microsoft. Последняя версия адаптеров элементов управления, поддерживающих CSS, доступна на странице http://www.asp.net/CSSAdapters/.
Данные адаптеры предоставляются в файле VSI. Предполагается, что у вас установлен Visual Studio 2005 либо Visual Web Developer, при этом просто запустите файл VSI после его загрузки. Это добавит новые шаблоны в ваш Visual Studio. Версия 1.0 адаптеров элементов управления содержит шаблон для создания нового веб-сайта ASP.NET, использующего CSS, а также учебник (Tutorial) по адаптерам элементов управления в ASP.NET. Учебник содержит необходимые файлы, а также примеры всех адаптеров, в то время как шаблон сайта содержит основные файлы и только сокращенный набор примеров. Вы также можете ознакомиться с онлайн-примерами на странице http://www.asp.net/CSSAdapters/.
Чтобы использовать шаблоны, запустите Visual Studio 2005 и выберите "New Web Site" для создания нового веб-сайта. В диалоговом окне создания сайта вы увидите "ASP.NET CSS Friendly Website" (ASP.NET веб-сайт с использованием CSS) и "Tutorial on ASP.NET CSS Friendly Control Adapters" (Учебник по адаптерам элементов управления, поддерживающих CSS в ASP.NET).
Выбрав любой из них, вы получите веб-сайт, имеющий как минимум основные файлы, необходимые для использования адаптеров элементов управления. Они включают в себя файлы классов адаптеров в каталоге App_Code, а также файл файл определения веб-обозревателя CSSFriendlyAdapters.browser в каталоге App_Browsers, который указывает на то, что каждый адаптер элементов управления должен быть использован для всех браузеров, и некоторые файлы JavaScript в каталоге JavaScript (в основном, используемые элементами управления Menu и TreeView для предоставления клиентской функциональности, столь чувствительной к обработанному результату). Для того чтобы превратить существующий ASP.NET веб-сайт в тот, который будет использовать CSS, просто скопируйте данные три каталога.Разметка для элемента Menu при помощи адаптеров элементов управления, поддерживающих CSS
Чтобы увидеть разницу при использовании адаптеров элементов управления, поддерживающих CSS, мы рассмотрим конкретный пример. Представьте, что мы имеем элемент управления Menu, определенный для отображения меню с единственным элементом меню верхнего уровня и четырьмя подпунктами элемента меню (потомками). Такая структура может быть статически определена в элементе Menu при помощи следующей декларативной разметки:
<asp:Menu ID="ProductMenu" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Products">
<asp:MenuItem Text="Beverages" />
<asp:MenuItem Text="Condiments" />
<asp:MenuItem Text="Confections" />
<asp:MenuItem Text="Dairy/Milk" />
</asp:MenuItem>
</Items>
</asp:Menu>
Также заметьте, что свойство BackColor Menu установлено в Yellow и свойства BackColors элементов меню установлены в Pink. Конечная обработанная HTML разметка, использующая стандартную логику обработки элемента Menu будет выглядеть следующим образом:
<table id="ProductMenu" class="ProductMenu_2" cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun0"><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products')">Products</a></td><td style="width:0;"><img src="/CSSControlAdapters/WebResource.axd?d=chn_rjDXviMiG52QjFyPeTtWQOV3vwPBosett_KzYtE1&t=632965002926288600" alt="Expand Products" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr>
</table><div id="ProductMenun0Items" class="ProductMenu_0 ProductMenu_3">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun1">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products\\Beverages')">Beverages</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun2">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products\\Condiments')">Condiments</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun3">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products\\Confections')">Confections</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun4">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products\\Dairy/Milk')">Dairy/Milk</a></td>
</tr>
</table></td>
</tr>
</table><div class="ProductMenu_0" id="ProductMenun0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/CSSControlAdapters/WebResource.axd?d=qidxSK8lNw1v6pL8IQZxzZrT3SMuvVDHqZfjfzhu6MM1&t=632965002926288600" alt="Scroll up" />
</div><div class="ProductMenu_0" id="ProductMenun0ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/CSSControlAdapters/WebResource.axd?d=uuL5BWm1omFEgQuN_dcSXY3whrEsc7zS_QoWROKGtMo1&t=632965002926288600" alt="Scroll down" />
</div>
</div>
Как мы видим данная разметка использует теги <table> для каждого элемента меню. Здесь не указаны также ссылки на внешние файлы JavaScript, которые могут обрабатывать отображение и сокрытие дочерних элементов пункта меню.
С внедрением адаптеров элементов управления , поддерживающих CSS, обработанная разметка будет изменена на более компактную:
<div class="AspNet-Menu-Horizontal" id="ProductMenu">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ProductMenu','bProducts')" class="AspNet-Menu-Link">
Products</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ProductMenu','bProducts\\Beverages')" class="AspNet-Menu-Link">
Beverages</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ProductMenu','bProducts\\Condiments')" class="AspNet-Menu-Link">
Condiments</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ProductMenu','bProducts\\Confections')" class="AspNet-Menu-Link">
Confections</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ProductMenu','bProducts\\Dairy\\Milk')" class="AspNet-Menu-Link">
Dairy/Milk</a>
</li>
</ul>
</li>
</ul>
</div>
Каждому элементу меню назначается соответственно названный класс CSS (AspNet-Menu, AspNet-Menu-WithChildren, AspNet-Menu-Leaf и т.д.). Настройки отображения для данных классов могут быть указаны в страничном элементе <style> или, что будет идеальным вариантом, в отдельном файле CSS.
Вывод
ASP.NET предоставляет огромную гибкость в обработке элементов управления (и следовательно, страниц). Элементы управления автоматически используют адаптивную обработку для создания соответствующей разметки, основываясь на типе браузера, с которого была открыта страница. При необходимости обработка может быть полностью настроена при помощи адаптеров элементов управления. В данной статье мы рассмотрели основы адаптеров элементов управления и исследовали бесплатный набор адаптеров элементов управления, поддерживающих CSS компании Microsoft. Вы можете внедрить их в свои веб-сайты для того, чтобы элементы управления Menu, TreeView, GridView, DetailsView и другие производили обработку, используя техники CSS. Более того, данные адаптеры элементов управления заставят разработчиков использовать классы CSS для указания настроек отображения.
Scott Mitchell