Вы начали разработку нового web-приложения. Аналитики обсудили с заказчиком и утвердили ТЗ. Заказ на макет первой страницы ушел в студию web-дизайна (если в вашей компании есть собственный дизайнер, все становиться проще). Его утвердили и дизайнеры принялись нарезать макет в html. Команда разработчиков получила спецификации и html-прототип дизайна, запустила Visual Studio и с энтузиазмом ломанулась навстречу премии за успешное завершение проекта.
Если во время чтения последней строки у вас появилась скептическая улыбка - читайте дальше, возможно эта статья вам пригодится :)
Если же улыбки не было, но вы задумались в чем тут подвох - давайте я расскажу, как это было в нашем предыдущем проекте.
Мы получили дизайн первой страницы, привычно разбили его на часть, общую для всех страниц сайта и части для остальных модулей (новости, анонсы, меню и пр.). Общую часть перенесли в Master page, а остальные были разобраны разработчиками вместе со спецификациями отдельных модулей. Вот тут то и начались проблемы.
Дело в том, что часть результирующего html кода автоматически формируется элементами управления ASP.NET, причем часто формируется вовсе не так, как в заказном дизайне.
Если обобщить, существует два основных подхода к html-верстке: в таблицах или при помощи стилей. Элементы управления ASP.NET в основном используют табличный метод, формируя разметку при помощи вложенных таблиц. Если же заказной дизайн был выполнен при помощи стилей - разработчик, мягко говоря, несколько задумывается. Посмотрим на примере ...
У нас была форма регистрации, в которой пользователи указывали свой eMail и выбирали тип регистрации - "соискатель", "работодатель", "кадровое агенство" и т.д. Для выбора типа использовался набор radio buttons и в присланном дизайне это выглядело примерно так (точно не вспомню, но для идеи это не важно):
| <div class="regRadio"> <ul> <li><input type="radio" name="Reg"/>Соискатель</li> <li><input type="radio" name="Reg"/>Работодатель</li> <li><input type="radio" name="Reg"/>Кадровое агенство</li> ... </ul> </div> |
Для списков из radio buttons в ASP.NET есть компонент RadioButtonList. Вот только код он генерирует несколько другой:
| <table id="ctl00_Content_rbl" border="0"> <tr> <td> <input id="ctl00_Content_rbl_0" type="radio" name="ctl00$Content$rbl" /> <label for="ctl00_Content_rbl_0">Соискатель</label> </td> </tr> <tr> <td> <input id="ctl00_Content_rbl_1" type="radio" name="ctl00$Content$rbl" /> <label for="ctl00_Content_rbl_1">Работодатель</label> </td> </tr> <tr> <td> <input id="ctl00_Content_rbl_2" type="radio" name="ctl00$Content$rbl" /> <label for="ctl00_Content_rbl_2">Кадровое агенство</label> </td> </tr> </table> |
Первое, что пришло в голову - понадеяться на "авось" и поместить RadioButtonList в <div class="regRadio">. Не получилось - в разработанном дизайне были определены какие-то стили для <table>, в результате чего radio buttons оказались спозиционированны по центру страницы, а надписи выводились раза в два меньше чем нужно (сказался размер шрифта, выставленный в процентах). Я сошелся в неравной схватке со стилями, в результате чего через пару часов сдался на милость победителя - восстановить картинку не выбросив все присланные стили (которые каким-то образом накладывались на html теги) у меня не получилось. Естественно если убрать стили - летел весь остальной дизайн. Вобщем дизайн формы пришлось переделывать самому.
Есть еще ряд моментов, которые могут привести к проблемам. Например, использование ID для привязки к стилям - элементы управления ASP.NET очень трудно заставить формировать предопределенные ID да еще и одинаковые для нескольких элементов :) Или скажем еще, в таблицах можно использовать теги <thead>, <tbody> и <tfooter>, которые тоже трудно :) найти в коде, сформированном при помощи стандартного элемента GridView.
Теперь собственно о главном ...
Недавно я наткнулся на сайт, описывающий CSS Friendly Control Adapters. Вкратце объясню, о чем идет речь.
Разработчики Microsoft понимали, что способ, при помощи которого элементы управления ASP.NET формируют свое html-представление, может зависеть от многих вещей. Например типа или даже версии браузера (для IE 6.0 - один, для IE 7.0 - другой). Поэтому, они ввели такое понятие как control adapter. Его задача - на основании объекта (например RadioButtonList) сформировать html представление нужным разработчику образом. .NET Framework содержит несколько базовых классов для таких адаптеров, например WebControlAdapter, DataBoundControlAdapter или HierarchicalDataBoundControlAdapter.
Например, в нашем случае:
- Создаем новый класс RadioButtonListAdapter, наследуя его от DataBoundControlAdapter
- Связываем его с элементом управления RadioButtonList. Для этого предназначены специальные "Browser File" файлы (расширение .browser), живущие в служебном каталоге ASP.NET "App_Browsers". Выглядит это примерно так:
<browsers>
<browser refID="Default">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.RadioButtonList"
adapterType="RadioButtonListAdapter" />
... - Переопределяем методы базового класса DataBoundControlAdapter, которые занимаются формированием html для нашего RadioButtonList. Обычно это RenderBeginTag, RenderEndTag и RenderContents. Во время выполнения страницы ASP.NET автоматически создаст экземпляр нашего класса RadioButtonListAdapter и вызовет его методы, формирующие html, вместо соответствующих методов оригинального RadioButtonList.
Главное же, это то, что авторы разработали набор таких адаптеров для основных элементов управления ASP.NET 2.0, таких как Menu, GridView, FormView и пр. Эти адаптеры формируют html представление используя стили, а не таблицы. Для примера можете посмотреть варианты html для FormView, созданные при использовании CSS Friendly Control Adapters и без них.
Сайт с CSS Friendly Control Adapters содержит подробное описание как самой технологии control adapters, так и разработанных ими адаптеров с примерами формирующегося html кода. Кроме того, вы можете скачать и установить два шаблона проектов для Visual Studio. Первый - новый web-сайт, настроенный для использования CSS Friendly Control Adapters, второй - сайт, с примерами реализации и использования этих адаптеров.
Возможно, описанный подход окажется хорошим решением проблемы использования дизайна, сверстанного при помощи стилей в ASP.NET проектах.