Як поєднати замовний дизайн і ASP.NET web-сайти, HTML, XML, DHTML, Інтернет-технології, статті

Ви почали розробку нового web-додатки. Аналітики обговорили з замовником та затвердили ТЗ. Замовлення на макет першої сторінки пішов у студію web-дизайну (якщо у вашій компанії є власний дизайнер, все ставати простіше). Його затвердили і дизайнери почали нарізати макет в html. Команда розробників отримала специфікації і html-прототип дизайну, запустила Visual Studio і з ентузіазмом ломанулась назустріч премії за успішне завершення проекту.

Якщо під час читання останнього рядка у вас з’явилася скептична посмішка – читайте далі, можливо ця стаття вам стане в нагоді 🙂

Якщо ж посмішки не було, але ви задумалися в чому тут каверза – давайте я розповім, як це було в нашому попередньому проекті.

Ми отримали дизайн першої сторінки, звично розбили його на частину, загальну для всіх сторінок сайту і частині для інших модулів (новини, анонси, меню та ін.) Загальну частину перенесли в Master page, а решта були розібрані розробниками разом зі специфікаціями окремих модулів. Ось тут то і почалися проблеми.

Справа в тому, що частина результуючого html коду автоматично формується елементами управління ASP.NET, причому часто формується зовсім не так, як в замовному дизайні.

Якщо узагальнити, існує два основних підходи до html-верстки: в таблицях або за допомогою стилів. Елементи управління ASP.NET в основному використовують табличний метод, формуючи розмітку за допомогою вкладених таблиць. Якщо ж замовлений дизайн був виконаний за допомогою стилів – розробник, м’яко кажучи, дещо замислюється. Подивимося на прикладі …

У нас була форма реєстрації, в якій користувачі вказували свій eMail і вибирали тип реєстрації – “претендент”, “роботодавець”, “кадрове агенство” і т.д. Для вибору типу використовувався набір radio buttons і в надісланому дизайні це виглядало приблизно так (точно не згадаю, але для ідеї це не важливо):





<div class=”regRadio”>
  <ul>

  • Шукач
  • Роботодавець
  • Кадрове агенство
        …
      </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” />

    Перше, що прийшло в голову – покластися на “авось” і помістити RadioButtonList в . Не вийшло – в розробленому дизайні були визначені якісь стилі для

    , в результаті чого radio buttons виявилися спозіціонірованни по центру сторінки, а написи виводилися рази в два менше ніж потрібно (позначився розмір шрифту, виставлений у відсотках). Я зійшовся в нерівній сутичці зі стилями, в результаті чого через пару годин здався на милість переможця – відновити картинку не викинувши всі надіслані стилі (які якимось чином накладалися на html теги) у мене не вийшло. Природно якщо прибрати стилі – летів весь інший дизайн. Вобщем дизайн форми довелося переробляти самому.

    Є ще ряд моментів, які можуть привести до проблем. Наприклад, використання ID для прив’язки до стилів – елементи управління ASP.NET дуже важко змусити формувати зумовлені ID та ще й однакові для декількох елементів 🙂 Або скажемо ще, в таблицях можна використовувати теги

    ,

    і , які теж важко 🙂 знайти в коді, сформованому за допомогою стандартного елемента 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 проектах.


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


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

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

    Ваш отзыв

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

    *

    *