Як поєднати замовлений дизайн і ASP.NET web-сайти

Ви почали розробку нового 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.

Наприклад, у нашому випадку:


Головне ж, це те, що автори розробили набір таких адаптерів для основних елементів управління 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 проектах.


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*