ASP.NET MVC 4: Что нового в области разработки мобильных приложений

В течение длительного времени разработчики искали чашу Грааля с таким инструментарием, который позволил бы им поддерживать единую кодовую базу для всех платформ, и сегодня это стало еще актуальнее. Из-за растущей во всем мире популярности и разнообразия смартфонов и планшетов крайне важно, чтобы у вашего сайта был приятный и удобный интерфейс для пользователей мобильных устройств. Конечно, вы могли бы пойти по пути разработки «родных» приложений и создавать специфические приложения для iOS, Android, Windows Phone, BlackBerry и др., но, увы, родные приложения требуют написания кода, специфичного для данного платформы.

К счастью, HTML5 и CSS3 ознаменовали появление инструментария, который наконец-то позволит реализовать принцип «пишем один раз, выполняем где угодно». Хотя эти спецификации еще не закончены, HTML5 и CSS3 быстро становятся промышленными стандартами для сайтов, ориентированных на множество платформ, и большая часть функциональности новых спецификаций уже поддерживается основными браузерами. Самое замечательное в сочетании HTML5/CSS3 заключается в том, что это просто HTML-разметка, которую можно использовать из любого инструментария на основе HTML — от PHP до ASP.NET MVC.

В этой статье мы подробно рассмотрим новые средства ASP.NET MVC 4, многие из которых используют независимые от конкретных браузеров возможности HTML5 и CSS3 и упрощают разработку сайтов, ориентированных исключительно на мобильные браузеры, а также сайтов, предназначенных для мобильных и настольных браузеров.

Если вы еще не установили ASP.NET MVC 4 и используете Visual Studio 2010, то можете скачать нужный пакет через Web Platform Installer или напрямую с веб-сайта ASP.NET MVC (asp.net/mvc/mvc4). ASP.NET MVC 4 будет поставляться с Visual Studio 11.

Адаптивный рендеринг

Адаптивный рендеринг (adaptive rendering) — это процесс отображения веб-сайта по-разному в зависимости от возможностей целевого устройства и браузера. Многие методики адаптивного рендеринга уже включены в ASP.NET MVC 4.

Meta-тег viewport По умолчанию браузеры — даже на мобильных устройствах и планшетах — предполагают, что они визуализируют страницы на настольном компьютере, отображая контент с шириной 980 пикселей и уменьшая масштаб. На рис. 1 показан сайт, созданный с применением шаблона интернет-сайта по умолчанию из ASP.NET MVC 3. Обратите внимание: сайт отображается в мобильном браузере, но последний все равно считает, что он осуществляет рендеринг на настольном компьютере. Хотя сайтом, визуализируемым в такой манере, вполне можно пользоваться, он явно не идеален.

Рис. 1. Экран по умолчанию, создаваемый при использовании ASP.NET MVC 3

Вместо этого вы можете использовать meta-тег viewport, чтобы явно указать браузеру ширину, высоту и масштаб для визуализации контента. Вы также можете сконфигурировать meta-тег viewport под рендеринг на основе возможностей устройства:

<meta name="viewport" content="width=device-width" />

На рис. 2 показана страница после добавления meta-тега viewport в _Layout.cshtml. Сайт теперь масштабируется до ширины устройства. Создав новый проект ASP.NET MVC 4 с использованием любого шаблона проектов (кроме шаблона Web API), вы можете открыть файл _Layout.cshtml и увидеть meta-тег viewport в разделе head.

Рис. 2. Масштабирование под устройство с помощью ASP.NET MVC 4

Media-запросы CSS При разработке сайта для нескольких платформ вы, как правило, хотите, чтобы мобильные пользователи видели представление, отличное от того, которое видят пользователи настольных браузеров. Обычно функциональность практически одинакова, но стиль и отображение контента различаются. С помощью media-запросов CSS можно по условиям применять конкретные CSS-стили в зависимости от возможностей браузера, запрашивающего ваш веб-сайт:

@media only screen and (max-width: 850px) {
    header{
      float: none;
    }
  }

Этот media-запрос будет применять включенные стили, только когда тип media является screen, но не print, и максимальная ширина области, в которой визуализируется сайт, будет не более 850 пикселей. Эта методика позволяет изменять стиль контента как угодно в зависимости от возможностей браузера.

Имея дело с мобильными браузерами, вы всегда должны учитывать ограниченную полосу пропускания мобильной связи. В целом, когда вы используете мобильное устройство, вы не подключены к Wi-Fi или другой высокоскоростной сети, поэтому, рассчитывая свой сайт на обслуживание мобильных устройств, делайте это максимально эффективно. Например, если какие-то изображения не существенны для функциональности вашего сайта, не включайте их в мобильные представления. Если же изображения действительно нужны, позаботьтесь об их корректных размерах, т. е. отправляйте изображения, подогнанные под размеры экрана того устройства, на котором они будут отображаться. Если с помощью CSS можно просто указывать изображения, то с помощью media-запросов можно определять изображения разных размеров на основе возможностей устройства и его браузера.

Все шаблоны проектов ASP.NET MVC 4 по умолчанию, кроме шаблона Web API, включают некоторые примеры media-запросов CSS. Чтобы убедиться в этом, создайте и запустите новый проект ASP.NET MVC 4 с выбранным шаблоном проектов Internet Application. Полностью разверните окно своего браузера, а затем начинайте потихоньку уменьшать размеры его окна. Как только размер окна достигнет 850 пикселей или менее, вы заметите массу изменений в отображении исходной страницы. ЧТобы разобраться в деталях этих изменений, просмотрите файл Site.css, начиная со строки 466.

Когда нельзя обойтись использованием только CSS

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

Обслуживание представлений, специфичных для мобильных устройств Идея обслуживания страниц, специфичных для конкретных браузеров, не нова. Разработчики уже давно используют распознавание браузеров. В ранних версиях ASP.NET MVC вы могли создать свою реализацию механизма представлений, наследующую от аналогичного механизма из Web Forms или Razor, переопределить метод FindView, добавить некую логику распознавания браузеров и возвращать представление, специфичное для данного браузера. В ASP.NET MVC 4 появились два новых средства, позволяющих решать эту задачу на разных уровнях с гораздо меньшими усилиями.

Новая функциональность в ASP.NET MVC 4 позволяет глобально переопределять представления для мобильных устройств, используя соглашение, а не конфигурацию. Когда ASP.NET MVC 4 обслуживает запрос от мобильного браузера и определяет, какое представление нужно передать ему, эта инфраструктура сначала ищет представления с именами по соглашению [view].mobile.cshtml. Если какое-то представление совпадает с соглашением об именовании, ASP.NET MVC передает его; в ином случае она переключается на стандартное представление.

Как видно на рис. 3, я сделал копию _Layout.cshtml и переименовал ее в _Layout.mobile.cshtml согласно этому соглашению. Я выделил добавленную строку HTML, чтобы было четко понятно, какой _Layout.cshtml использовался для визуализации этой страницы. Когда сайт визуализируется в настольном браузере, ничего не меняется, но при визуализации сайта в мобильном браузере, как показано на рис. 4, вы можете видеть, что используется мобильная версия _Layout.cshtml.

Рис. 3. Специфичный для мобильных устройств _Layout.cshtml

Рис. 4. Представление, специфичное для мобильного браузера

Передача представлений, специфичных для браузеров По большей части больше нет нужды передавать в настольные системы специфичные для браузеров представления или контент. Однако, если вы уже некоторое время занимаетесь разработкой веб-сайтов, весьма вероятно, что вы писали особый код или CSS, чтобы заставить что-то работать в каком-то конкретном браузере. Именно в такой ситуации мы теперь находимся с мобильными браузерами, но проблема сложнее из-за огромного разнообразия мобильных платформ, каждая со своим браузером. И будто этого мало, мы сейчас имеем еще и концепцию «родных» сайтов. Уже не достаточно того, что сайт обеспечивает качественную визуализацию в мобильных браузерах; чтобы сайт считался совершенным, он должен полностью соответствовать «духу и букве» родных приложений, выполняемых на устройствах. Это требует передачи специфических представлений не только для мобильных браузеров в целом, но и для каждого мобильного браузера индивидуально.

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

Для этого в ASP.NET MVC 4 введены так называемые режимы отображения — Display Modes. Эта новая функция позволяет сочетать простоту соглашения о конфигурации с надежностью распознавания браузера и передавать специфические для браузера представления.

Чтобы задействовать преимущества Display Modes, нужно сначала определить эти режимы в методе Application_Start в Global.asax, например:

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
  ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

Это Display Mode, созданный для браузера на iPhone. Первый экземпляр «iPhone» определяет суффикс представления, который ASP.NET MVC будет искать, определяя, какое представление подлежит рендерингу. Второй экземпляр «iPhone» относится к пользовательскому агенту, выдающему запрос, и определяет условие, которое ASP.NET MVC будет использовать, проверяя соответствие соглашению об именовании [view].iPhone.cshtml. Фактически можно сформулировать так: когда браузер iPhone выдает запрос, искать сначала представления с суффиксом «iPhone».

Чтобы продемонстрировать Display Mode браузера iPhone, я сделал другую копию _Layout.cshtml и присвоил ей имя _Layout.iPhone.cshtml по соглашению об именовании, определенному при создании этого Display Mode. Затем я модифицировал ее, чтобы было очевидно, что при просмотре сайте с iPhone использууется разметка iPhone. Если я просматриваю сайт с настольного браузера или из эмулятора браузера Windows Phone, я не вижу своих изменений, но, как только я обращаюсь к сайту в браузере iPhone, модификации тут же проявляются, как показано на рис. 5.

Рис. 5. Представление, специфичное для iPhone

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

jQuery Mobile и jQuery.Mobile.MVC

jQuery Mobile — это библиотека с открытым исходным кодом, позволяющая создавать UI для мобильных устройств на основе jQuery Core. Поскольку jQuery Mobile тщательно документирована и поскольку реализация jQuery Mobile в ASP.NET MVC 4 ничем не отличается от ее реализации в любом другом языке или инфраструктуре, я не стану углубляться в эту тему, а только поясню, как интегрировать ее в ASP.NET MVC 4.

По умолчанию jQuery Mobile не включается в шаблоны проектов ASP.NET MVC 4 (кроме шаблона Mobile Application), но добавить ее в приложение ASP.NET MVC 4 нетрудно. Вы должны использовать NuGet для установки скриптов и других необходимых файлов, а затем открыть _Layout.cshtml и вручную добавить необходимые ссылки на файлы скриптов и CSS. В качестве альтернативы можно установить NuGet-пакет jQuery.Mobile.MVC, который сам установит все скрипты и прочие файлы, создать _Layout.Mobile.cshtml и добавить ссылки на все файлы скриптов и CSS-файлы jQuery Mobile. NuGet-пакет jQuery.Mobile.MVC также добавляет функциональность переключения представлений, которые дают возможность пользователям, просматривающим мобильную версию сайта, переключаться на полноэкранное представление для настольной системы, как показано на рис. 6.

Рис. 6. Представление jQuery Mobile с функциональностью переключения представлений

Шаблон проекта

Если вы хотите создать сайт, рассчитанный только на мобильные браузеры, то в ASP.NET MVC 4 есть шаблон проекта специально для этих целей. Теперь, создавая новый проект ASP.NET MVC 4, вы можете выбрать шаблон Mobile Application.

Создайте проект ASP.NET MVC 4 с использованием шаблона Mobile Application, а затем изучите общую структуру проекта. Вы не увидите никаких очевидных изменений по сравнению со стандартным шаблоном проекта ASP.NET MVC 4: в вашем распоряжении все те же модели, представления и контроллеры. Однако, когда вы запустите приложение, то заметите, что сайт адаптирован под мобильные браузеры.

Как я уже вскользь упоминал, это единственный шаблон, который изначально включает jQuery Mobile. Более того, он реализует jQuery Mobile во всех представлениях по умолчанию:

<h2>@ViewBag.Message</h2>
<p>
  To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc"
    title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Navigation</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Этот код взят из Views/Home/Index.cshtml. Если вы не знакомы с jQuery Mobile и тем, как она реализуется, то, вероятно, первым делом обратите внимание на атрибуты «data-». Именно с их помощью jQuery Mobile конфигурирует элементы управления на странице.

Шаблон проектов Mobile Application в ASP.NET MVC 4 — отличная штука, когда вы создаете сайт, ориентированный только на мобильные браузеры, или когда вам нужен эталон в реализации средств, специфичных для таких браузеров. По большей части вы скорее всего будете создавать сайты, которые на самом деле ориентированы на настольные браузеры. Тем не менее вы наверняка захотите, чтобы ваш сайт приемлемо отображался в мобильных браузерах без чрезмерных затрат времени и сил с вашей стороны на внесение в код изменений, специфичных для этих браузеров. К счастью, шаблон проектов Mobile Application в ASP.NET MVC 4 можно использовать и в таких случаях — он послужит отправной точкой для введения функций, специфичных для мобильных браузеров, в существующее MVC-приложение, рассчитанного на настольные браузеры.

В связи с ростом популярности мобильных устройств неудивительно, что в ASP.NET MVC 4 им уделяется такое внимание. Использование новых средств ASP.NET MVC 4 позволит сайтам не только охватывать всю потенциальную аудиторию, но и делать это без чрезмерных усилий в кодировании и без дублирования кода на уровне UI.