Изучение Grails: Grails и мобильный Web

M – новый WWW

Общемировое количество владельцев мобильных телефонов в настоящий момент достигает 3.3 миллиардов человек и продолжает возрастать. Вместе с ним возрастает и популярность мобильных устройств как средств доступа в Интернет. При этом создание Web-приложений для мобильных устройств имеет свои отличительные особенности. В данной статье серии "Изучение Grails" Скотт Дэвис расскажет о том, как сделать ваши приложения Grails удобнее для мобильных пользователей.

Скотт Дэвис, главный редактор, AboutGroovy.com

Скотт Дэвис (Scott Davis) является международно признанным автором, лектором и разработчиком программного обеспечения. Среди его книг: Groovy Recipes: Greasing the Wheels of Java, GIS for Web Developers: Adding Where to Your Application, The Google Maps API и JBoss At Work.



29.04.2009

К счастью, редкая Web-страница в наши дни содержит оговорку "Этот сайт оптимизирован для [Браузер Х]". По большей части абстрагирование от различий между браузерами Firefox, Internet Explorer и Safari берут на себя такие современные Ajax-библиотеки, как Prototype, Dojo и YUI. Однако посетители вашего сайта, просматривающие его на экране своего телефона (марки Nokia, Motorola или Apple), могут по-прежнему испытывать трудности, обусловленные особенностями конкретного браузера. При этом несколько небольших поправок в коде страницы зачастую повышают качество отображения даже в наиболее современных мобильных браузерах, декларирующих "полную поддержку HTML". В данной статье рассказывается об оптимизации приложений Grail для мобильных Интернет-пользователей.

Рост популярности мобильного Интернета

По данным Internet World Stats, число активных пользователей Интернета составляет порядка 1.4 миллиарда, то есть около 20% населения Земли (см. Ресурсы). Три из четырех жителей Северной Америки регулярно используют Интернет.

При этом ровно половина земного населения имеет мобильные телефоны. Уровень их проникновения на североамериканском рынке примерно соответствует уровню проникновения Интернета. В других регионах наблюдается иная картина. Например, в Гонконге уровень их проникновения достигает 140%, а в некоторых странах Евросоюза (Литве, Италии и Люксембурге) - 150%. Как видите, бывает, что количество мобильных телефонов превышает число людей в данном регионе.

Лучше всего текущее положение дел охарактеризовал Колин Кроуфорд из компании IDG Communications (см. Ресурсы): "В последние несколько лет стало очевидно, что мобильные телефоны заменят персональные компьютеры в качестве основных средств доступа в Интернет. Уже сейчас около 30% обращений к Сети происходит через мобильные устройства, а в некоторых странах, например, в Японии, этот показатель достигает 70%".

Взгляните на статистику в заметке "Рост популярности мобильного Интернета", если вы еще не убеждены в том, что при создании Web-страниц должны учитываться особенности мобильных устройств. Общая статистика выглядит убедительно, но у меня есть и личная заинтересованность в том, чтобы Web стал более "дружелюбным" по отношению к мобильным пользователям. Свой iPhone я купил летом 2007 г., сразу после его официального выхода. С тех пор я занимаюсь активным поиском Web-сайтов, которые удобно просматривать на экране моего телефона. Разумеется, я могу зайти на любую страницу (при условии, что на ней не используются Flash или Java-апплеты, не поддерживаемые iPhone). Но вся трудность в том, что страницы, созданные с прицелом на разрешение 800х600 и выше, выглядят весьма неприглядно на экране с диагональю 3.5 дюйма.

Я регулярно посещаю Web-сайты, которые более-менее соответствуют моим ожиданиям, предоставляя интерфейс, который учитывает особенности мобильных устройств. Такие страницы можно находить, меняя традиционную аббревиатуру www на m в адресах популярных серверов. Например, страницы http://m.cnn.com, http://m.yahoo.com и http://m.google.com выглядят неплохо на экране моего телефона. Некоторые Web-сайты, например, http://www.twitter.com, видоизменяют собственный интерфейс неким волшебным образом: просматривая их на своем компьютере, я вижу полный набор графических элементов, но на экране телефона они выглядят по-другому, оптимизируя содержимое для наилучшего отображения. То есть URL остается тем же, а интерфейс меняется. Ниже я покажу, как вы можете реализовать подобное поведение для своих страниц.

Технологии разработки Web-приложений для мобильных устройств

Как и многие Java-программисты, я слишком полагался на принцип "Write Once, Run Anywhere" ("Написано однажды, работает всегда"), поэтому мысль об оптимизации моего приложения под конкретную операционную систему или архитектуру даже не приходила мне в голову. Однако если вы собираетесь заниматься разработкой Web-приложений для мобильных платформ, вам необходимо ознакомиться с тремя основными технологиями, поддерживаемыми различными типами устройств.

  • Язык разметки для беспроводных устройств (Wireless Markup Language – WML) 1.х
  • WML 2.x или "мобильные профили" (XHTML-MP)
  • HTML-теги для iPhone

Ниже будет показано, как можно добавлять фрагменты разметки WML и XHTML-MP на страницы GSP (Groovy Server Pages), создаваемые при помощи Grails, с целью оптимизации интерфейса для мобильных устройств. Кроме того, я расскажу о том, как, подкорректировав HTML-код страниц, сгенерированных Grails, можно сделать их удобнее для владельцев iPhone.

Работа с WML 1.x в Grails

WML – это язык разметки гипертекста, схожий с HTML, но имеющий ряд отличий (WML 1.0 был стандартизирован в 1998 г., а текущей версией является 1.3). WML-документы нельзя просматривать в обычном Web-браузере (по крайней мере без помощи специального эмулятора), так же как и HTML-документы - в браузере WML. Производители мобильных телефонов, как правило, предоставляют HTML-WML шлюзы, которые преобразовывают один формат в другой прозрачным для браузера образом.

Об этой серии

Grails – это современная инфраструктура для разработки Web-приложений, сочетающая использование знакомых Java-технологий, например, Spring и Hibernate, с такими популярными в настоящее время принципами, как соглашения по конфигурированию (convention over configuration). Будучи написанной на языке Groovy, Grails позволяет легко интегрировать старый Java-код в новые приложения, предоставляя гибкие возможности динамического скриптового языка. Изучение Grails навсегда изменит ваш взгляд на Web-разработку.

Документы WML передаются через протокол беспроводного доступа WAP (Wireless Access Protocol) аналогично тому, как HTML-трафик передается через HTTP. В повседневной жизни термины WAP и WML практически взаимозаменяемы, в частности, в описании функций мобильных телефонов можно часто видеть либо упоминание WAP-браузера, либо указание на поддержку WML 1.x (ссылки на официальные спецификации WAP и WML приведены в разделе Ресурсы).

Знание WML особенно пригодится вам при создании приложений, ориентированных на устройства BlackBerry компании Research in Motion (данная компания занимает примерно 40% рынка смартфонов, оставляя iPhone и устройства под управлением Windows® Mobile на втором и третьем месте соответственно). Смартфоны BlackBerry поставляются с WAP-браузерами, хотя многие продвинутые пользователи предпочитают загружать полноценные Web-браузеры, в частности, Opera Mini (см. Ресурсы).

Мобильное приложение для планирования путешествия

Если вы читали предыдущие статьи серии "Изучение Grails", то вы уже знакомы с приложением-планировщиком поездок. Здесь мы приспособим его для удобной работы через мобильные телефоны. Создайте файл под именем testwml.gsp в каталоге web-app приложения и добавьте в него статический фрагмент WML, приведенный в листинге 1.

Листинг 1. Фрагмент статического WML
<% response.setContentType("text/vnd.wap.wml") %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
   "http://www.phone.com/dtd/wml11.dtd" >

<wml>
  <card id="f1" title="Flight 1">
    <p mode="wrap">From: DEN</p>
    <p mode="wrap">To: ORD</p>
    <p mode="wrap">UAL 1234</p>
    <p mode="wrap">Jun 30, 10:30am</p>
    <p>
      <anchor>Next<go href="#f2"/></anchor>
    </p>  
  </card>

  <card id="f2" title="Flight 2">
    <p mode="wrap">From: ORD</p>
    <p mode="wrap">To: DEN</p>
    <p mode="wrap">UAL 9876</p>
    <p mode="wrap">Jul 02, 1:15pm</p>
    <p>
      <anchor>Previous<go href="#f1"/></anchor>
    </p>  
  </card>
</wml>

Если вам интересно, как эта страница будет выглядеть на экране вашего телефона, то обратитесь к ней по адресу http://www.davisworld.org/testwml.gsp. Вы уже должны хорошо представлять себе, как выглядит HTML внутри GSP. Теперь в роли HTML выступает WML.

При формировании WML-документов через страницы GSP необходимо менять MIME-тип по умолчанию (text/html) на text/vnd.wap.wml, как показано в первой строке листинга 1. Однако если вы создаете статическую WML-страницу, то достаточно просто присвоить файлу расширение WML вместо GSP, после чего большинство Web-серверов при пересылке документа сами установят корректный MIME-тип, даже без предварительного вызова response.setContentType. Заглянув в файл $TOMCAT_HOME/conf/web.xml, вы увидите, что он по умолчанию содержит MIME-тип для WML-файлов. При использовании сервера Apache HTTPD подобные настройки для файлов WML находятся в файле $APACHE_HOME/conf/mime.types. Фрагмент настроек MIME-типов для сервера Tomcat показан в листинге 2.

Листинг 2. Конфигурирование MIME-типов в Tomcat
<mime-mapping>
  <!-- Страницы WML -->
  <extension>wml</extension>
  <mime-type>text/vnd.wap.wml</mime-type>
</mime-mapping>

Следующий момент, на который следует обратить внимание в листинге 1 – это DOCTYPE. Включение DTD (Document Type Definition) помогает идентифицировать файл testwml.gsp как корректный документ WML.

Обратите внимание, что тело документа заключено в теги <wml>, вместо знакомых <html>. Далее вы, скорее всего, заметите отсутствие в листинге 1 секций <head> и <body>. Каждая WML-страница представляет собой карточку – элемент card с атрибутами id (уникальный идентификатор) и title (заголовок, предназначенный для отображения пользователю).

Нередко несколько страниц (карточек) загружаются одновременно в одном файле. Это было сделано ввиду ограниченных возможностей старых телефонов, в частности, медленных каналов передачи данных. Чем больше данных будет загружаться за один раз, тем меньше служебный трафик между телефоном и сервером. В каждый момент времени на экране может отображаться только одна карточка, поэтому остальные просто ждут своей очереди. При этом вся навигация между карточками происходит исключительно на клиентской стороне.

Теги <p> должны выглядеть привычно для разработчиков HTML. Несмотря на различия в синтаксисе, WML-тег <anchor> работает аналогично тегу <a> в HTML (более подробная информация о WML приведена в разделе Ресурсы).

В WML используется один хитрый трюк, связанный со ссылками. Поскольку WML служит для отображения документов, предназначенных для мобильных телефонов, можно создавать гиперссылки, нажатие на которые приведет к звонку по указанному номеру. В листинге 3 показан пример гиперссылки, перейдя по которой пользователь позвонит по номеру 303-555-1212.

Листинг 3. Пример ссылки с номером телефона в WML
<do type="accept">
 <go href="wtai://wp/mc;3035551212"/>
</do>

Обратите внимание на протокол, указанный в ссылке. Вместо знакомого http:// используется wtai:// - сокращение от Wireless Telephony Applications Interface (интерфейс приложений беспроводной телефонии).

Эмулятор WML

Для просмотра этой страницы на PC вам понадобится эмулятор WAP (в разделе Ресурсы приведены ссылки на все эмуляторы, упоминаемые в статье). Можно воспользоваться эмулятором dotMobi, реализованным в виде Java-апплета. Введите URL davisworld.org/testwml.gsp (как видите, префикс http:// автоматически добавляется в левой части поля ввода). Интерфейс должен выглядеть примерно как на рисунке 1.

Рисунок 1. WAP-страница на экране эмулятора
WAP-страница на экране эмулятора

Обратите внимание на то, что эмулятор dotMobi предоставляет две интерфейсные оболочки, которые копируют не только внешний вид устройств, но и их функции. Если вам необходим эмулятор конкретного устройства, то имеет смысл поискать его на Web-сайте, посвященному разработке приложений. Подобные сайты, как правило, создаются каждой компанией-производителем мобильных устройств.

Динамическая генерация WML-документов при помощи GSP

Наш первый пример на WML был полностью статическим. В листинге 4 показан пример страницы GSP, содержащей знакомые теги <g:each> и <g:if>.

Листинг 4. Фрагменты WML внутри GSP-страницы
<% response.setContentType("text/vnd.wap.wml") %>
<%
def flightList = []
flightList << [iata1:"DEN", iata2:"ORD"]
flightList << [iata1:"ORD", iata2:"DEN"]
%>

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
   "http://www.phone.com/dtd/wml11.dtd" >

<wml>
  <g:each in="${flightList}" var="${flight}" status="i">
    <card id="f${i}" title="Flight ${i}">
      <p mode="wrap">From: ${flight.iata1}</p>
      <p mode="wrap">To: ${flight.iata2}</p>      
      <g:if test="${flightList.size() > i+1}">
        <p>
          <anchor>Next<go href="#f${i}"/></anchor>
        </p>  
      </g:if>  
    </card>
  </g:each>  
</wml>

Как видно из листинга 4, в приложении не используется инфраструктура MVC, а данные об авиарейсах берутся из простой хэш-таблицы. Главная цель этого примера – показать совместное использование тегов GSP и WML аналогично тому, как это ранее было показано для GSP и JavaScript (см. статью "Изменение представления при помощи серверных страниц Groovy"). Данный пример можно увидеть в действии по адресу http://davisworld.org/testwml2.gsp.

WML 1.x: Конец эпохи

Несмотря на часто звучащие утверждения о том, что WML потерял свою актуальность, по-прежнему в ходу телефоны, которые поддерживают только этот язык разметки. Однако это не меняет общей картины: WML 1x несомненно устаревает. Все больше современных мобильных телефонов отказываются от "отдельной, но равноценной" WML-платформы в пользу полноценных Web-браузеров. Как будет показано ниже, создание Web-сайтов, пригодных для просмотра на экранах iPhone или устройств, поддерживающих WML 2.x, требует лишь небольшого редактирования существующего HTML-кода, а не преобразования его в альтернативный язык разметки.


Использование WML 2.x (или XHTML-MP) вместе с Grails

Если речь идет о WML 2.x, то аббревиатура WML скорее обозначает своего рода марку, чем самостоятельный язык разметки гипертекста (в отличие от WML 1.x). На самом деле WML 2.x представляет собой не что иное, как диалект XHTML, а конкретнее – XHTML-MP.

Наиболее жестким требованием к XHTML-MP было то, что страницы должны представлять собой корректно сформированные документы XML. Это означает, что каждому открывающему тегу должен соответствовать закрывающий (например, (<p></p>, <li></li>), значения атрибутов должны быть заключены в двойные кавычки (<a href="http://somewhere.com">), а в именах элементов могут использоваться только строчные символы (то есть <h1>, а не <H1>).

XHTML-MP включает в себя XHTML-Basic. Скорее всего вы обнаружите, что, приложив минимум усилий, можно добиться, чтобы ваш Web-сайт уложился в рамки XHTML-Basic. При этом нельзя использовать фреймы и вложенные таблицы, а все файлы изображений должны быть в форматах gif или png. Кроме того, некоторые рекомендации (например, указание размера изображений и текста подсказок) являются обязательными правилами в XHTML-Basic. Многие, хотя и не большинство, знакомых HTML-тегов по-прежнему доступны. Ссылки на дополнительные источники информации о том, какие именно теги можно использовать в XHTML-Basic и XHTML-MP, приведены в разделе Ресурсы.

Очевидно, что оптимизация Web-сайтов под малый размер экранов означает, что следует сократить объем данных, пересылаемых в ответ на запросы. Размер Web-страниц, состоящих из HTML-содержимого, CSS и изображений, не должен превышать 20 КБ. Приложения должны активно кэшировать страницы, используя заголовки Expires и Cache-Control. Объемные Web-страницы должны декомпозироваться на две или три части. В качестве примера обратите внимание на сайт http://m.cnn.com, который эффективно разделяет статьи на порции по три-четыре страницы в каждой. В дополнение к этому предоставляется ссылка "статья целиком", по которой можно получить полную версию документа, если вас не беспокоит лишний трафик.

Как и при использовании WML 1.x, в начале файла должно присутствовать DTD. Кроме того, следует отредактировать тег <html>, добавив в него атрибут xmlns, как показано в листинге 5.

Листинг 5. Начало файла XHTML-MP
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
...
</html>

Для страницы должен быть установлен корректный MIME-тип application/vnd.wap.xhtml+xml, хотя многие мобильные браузеры могут отображать страницы, имеющие более общий тип application/xhtml+xml. Использование application/xhtml+xml также упрощает отладку страницы в обычном браузере.

Просмотр страниц XHTML-MP

Примером документа XHTML-MP может служить страница http://m.yahoo.com (в Web-браузере она выглядит несколько аскетично, но на экране телефона - отлично). Выбрав пункт меню View > Source, вы должны увидеть разметку XHTML-MP, начинающуюся с определения DTD.

Чтобы лучше представить, как этот Web-сайт будет выглядеть на экране мобильного устройства, вам потребуется другой эмулятор. Например, в блоге Сандипа Читале (Sandip Chitale) приводится ссылка на подключаемый модуль Firefox, интерфейс которого как две капли воды похож на iPhone (см. Ресурсы). Учтите, что окно данного эмулятора превосходит по размеру iPhone, поэтому это больше красивый интерфейс, чем точный эмулятор. Тем не менее он поможет вам получить некоторое представление о том, как ваша страница будет выглядеть на экране iPhone (далее я приведу ссылки на средства для более строгой проверки). Внешний вид страницы m.yahoo.com в эмуляторе Читале показан на рисунке 2.

Рисунок 2. Просмотр мобильной версии сайта Yahoo! в эмуляторе iPhone
Просмотр мобильной версии сайта Yahoo! в эмуляторе iPhone

Проверка документов XHTML-MP

Существует несколько online-валидаторов - Web-приложений для проверки того, что страница является корректно сформированным документом XHTML-MP. Вы можете воспользоваться либо mobileOK Basic Checker от W3C, либо утилитой для тестирования под названием ready.mobi (см. Ресурсы). Оба средства хороши, но эмулятор ready.mobi выдает несколько больше информации, чем приложение от W3C.

На рисунке 3 показан отчет валидатора W3C о странице http://m.google.com.

Рисунок 3. Результаты проверки валидатором W3C мобильной версии сайта Google
Результаты проверки валидатором W3C мобильной версии сайта Google

На рисунке 4 показана первая часть отчета о странице http://m.yahoo.com, сформированного ready.mobi.

Рисунок 4. Отчет ready.mobi о проверке мобильной версии сайта Yahoo!
Отчет ready.mobi о проверке мобильной версии сайта Yahoo!

Сайт Yahoo! получил от ready.mobi оценку 4 по 5-бальной шкале. Прокрутив отчет чуть вниз, вы увидите, что приложение позволяет отобразить страницу при помощи разных визуализаторов. Например, на рисунке 5 показан внешний вид страницы на экране Nokia N70.

Рисунок 5. Просмотр мобильного сайта Yahoo! при помощи эмулятора
Просмотр мобильного сайта Yahoo! при помощи эмулятора

В нижней части страницы ready.mobi выводит результаты выполнения набора тестов, отмечая зеленым успешно пройденные тесты, красным – не пройденные, а желтым – частично пройденные. Например, несмотря на то, что страница http://m.yahoo.com благополучно отображается на экранах большинства устройств, ее код не на 100% удовлетворяет спецификации XHTML (рисунок 6).

Рисунок 6. Отчет о несоответствии страницы стандарту XHTML-MP
Отчет о несоответствии страницы стандарту XHTML-MP

Более того, как видно из рисунка 7 ниже, для некоторых изображений на странице Yahoo! не указан размер, либо пропущены атрибуты alt.

Рисунок 7. Отчет, содержащий конкретные пункты несоответствия
Отчет, содержащий конкретные пункты несоответствия

Grails и XHTML-MP

Итак, достаточно ли стандартных средств Grails при создании Web-страниц для мобильных устройств? На рисунке 8 показан отчет, построенный ready.mobi по данным проверки страницы приложения для планирования путешествий, на которую выводится список пунктов назначения.

Рисунок 8. Сам по себе Grails не полностью соответствует XHTML-MP
Сам по себе Grails не полностью соответствует XHTML-MP

Как видите, над страницей придется поработать. Для начала создадим замыкание mlist в файле grails-app/controllers/AirportController.groovy. Единственное, чем оно будет отличаться от предыдущего замыкания – это тем, что возвращаться будут 5 элементов вместо 10 (листинг 6). Создание отдельного замыкания позволит сохранить страницу list.gsp в первоначальном виде, что полезно для дальнейших сравнений.

Листинг 6. Новое замыкание в классе AirportController
def mlist = {
  if(!params.max) params.max = 5
  [airportList:Airport.list(params)]
}

Теперь создайте копию файла grails-app/views/airport/list.gsp под именем mlist.gsp. Ниже я приведу несколько способов прозрачного перенаправления мобильных пользователей на оптимизированные страницы. Пока же будет достаточно простого копирования.

Как вы помните, валидатор указывал на то, что содержимое Web-страницы не соответствует XHTML-MP. Отредактируем страницу mlist.gsp, включив необходимое объявление DTD и атрибут xmlns в теге <html>. Кроме того, необходимо убрать тег meta, который устанавливает text/html в качестве MIME-типа. Наконец, скопируйте в mlist.gsp строку включения CSS в странице grails-app/views/layout/main.gsp. (Библиотека шаблонов SiteMesh, использующаяся в Grails, по умолчанию применяется только для оформления страниц с типом содержимого text/html). Код страницы mlist.gsp приведен в листинге 7.

Листинг 7. Приведение GSP-страницы в соответствие с XHTML-MP
<% response.setContentType("application/xhtml+xml")%>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
        "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <!--meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/-->
    <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
    <meta name="layout" content="main" />
    <title>Airport List</title>
  </head>
  ...
</html>

В процессе редактирования страницы можно заодно упростить разметку таблицы. Валидатор указал на недопустимость тегов <thead> и <tbody>, поэтому их придется удалить. Вариант, показанный в листинге 8, будет выглядеть предпочтительнее, так как на экране мобильных телефонов по вертикали можно разместить больше информации, чем по горизонтали.

Листинг 8. Упрощенный вариант таблицы
<table>
  <tr>
    <g:sortableColumn property="id" title="Id" />
    <g:sortableColumn property="name" title="Name" />
  </tr>
  <g:each in="${airportList}" status="i" var="airport">
  <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
    <td>
      <g:link action="show" 
              id="${airport.id}">${airport.id?.encodeAsHTML()}
      </g:link>
    </td>
    <td>${airport.iata?.encodeAsHTML()}<br/>
        ${airport.name?.encodeAsHTML()}
    </td>
  </tr>
  </g:each>
</table>

На рисунке 9 показано, как новая страница выглядит в эмуляторе iPhone.

Рисунок 9. Страница со списком пунктов назначения, оптимизированная под iPhone
Страница со списком пунктов назначения, оптимизированная под iPhone

Результаты проверки новой страницы валидатором ready.mobi показаны на рисунке 10.

Рисунок 10. Результаты успешной проверки страницы
Результаты успешной проверки страницы

Намного лучше, не правда ли? При этом для удовлетворения валидатора понадобились минимальные изменения, которые можно внести в шаблоны по умолчанию, выполнив команду grails install-templates (см. статью "Изменение представлений при помощи серверных страниц Groovy").


Создание страниц для iPhone

Из всех трех типов устройств проще всего создавать Web-приложения для iPhone. Их страницы могут ничем не отличаться от обычных Web-страниц. Версия браузера Safari для iPhone реализована на той же основе, что и версия для настольных компьютеров, поэтому мобильные пользователи могут просматривать те же страницы, что и все остальные. Тем не менее можно привести ряд советов, как улучшить внешний вид Web-сайта в ситуации, когда он отображается на экране iPhone.

Размеры дисплея iPhone составляют 320x480, при этом браузер по умолчанию устанавливает ширину Web-страниц в 980 пикселов. Таким образом, режиме текст тяжело читать в горизонтальном режиме экрана, а в вертикальном он становится и вовсе микроскопическим. Но это не страшно, так как есть тег meta, значение которого анализируется исключительно браузером iPhone. При помощи данного тега можно скорректировать размер Web-страницы, причем благодаря атрибуту viewport можно указывать Safari, как следует отображать страницу. Добавив строчку, приведенную в листинге 9, вы значительно улучшите читаемость страницы при просмотре в iPhone. (К сожалению, meta не поддерживается модулем эмуляции iPhone в Firefox, поэтому почувствовать преимущества данного тега могут только владельцы iPhone.)

Листинг 9. Использование viewport на странице, предназначенной для iPhone
<meta name="viewport" content="initial-scale=1.0" />

Значением inital-scale (изначальный масштаб) может быть любое, в том числе дробное, число в диапазоне от 1 до 10. Можно также явно задавать размеры страницы через параметры width и height (значения не должны превышать 10000 пикселов). Пример показан в листинге 10.

Листинг 10. Задание параметров width и height для viewport
<meta name="viewport" content="width=600;height=400" />

Гиперссылки на экране iPhone

iPhone предоставляет ряд специальных возможностей для работы с гиперссылками. Например, нажатие на ссылку с префиксом tel: вместо http:// (листинг 11), приведет к звонку по указанному номеру.

Листинг 11. Пример ссылки для вызова указанного номера
<p>
telephone number: 
<a href="tel:303-555-1212">303-555-1212</a>
</p>

При нажатии на ссылку с префиксом mailto: (листинг 12) вызовется приложение для работы с электронной почтой.

Листинг 12. Пример ссылки для отправки электронной почты
<p>
mail: 
<a href="mailto:scott@aboutgroovy.com">Scott Davis</a>
</p>

Если нажать на ссылку, указывающую на сервис Google Maps (листинг 13), то вместо отображения страницы в Safari откроется специальное приложение для работы картами Google.

Листинг 13. Пример ссылки на карту Google Maps
<p>
local google maps:
<a href="http://maps.google.com/maps?q=denver+international+airport">DEN</a>
</p>

Если в ссылке указаны начальная и конечная точки путешествия (листинг 14), то приложение выведет рекомендуемый маршрут поездки.

Листинг 14. Ссылка на карту Google Maps, содержащую рекомендованный маршрут поездки
<p>
driving directions:
<a href="http://maps.google.com/maps?daddr=
    denver+airport&saddr=coors+field+denver,+co">Directions</a>
</p>

Стратегии разработки Web-приложений для мобильных устройств

Теперь, когда вы представляете себе процесс создания Web-страниц для трех различных типов устройств, остается только научиться определять, как должны обрабатываться запросы от каждого конкретного клиента. Для этого существует три основных подхода.

Создание отдельной версии Web-сайта для мобильных пользователей

Как вы уже успели заметить, многие Web-сайты используют так называемую "m-стратегию". В частности, Google, Yahoo! и CNN создали специальные доменные имена, начинающиеся с префикса m, для страниц, которые предназначены для просмотра на мобильных устройствах. Если вам не хочется иметь дело с системой доменных имен (Domain Name System – DNS), то вы можете создать URL наподобие http://mysite.org/mobile. Кроме того, можно зарегистрировать домен .mobi и зарезервировать его исключительно для мобильного контента.

Проверка пользовательского агента

Каждый Web-браузер идентифицирует себя при выполнении запроса к серверу. Эту информацию можно использовать для выдачи версии страницы, оптимизированной для данного устройства (этот подход используется сайтом http://twitter.com).

Обратитесь по адресу http://davisworld.org/echo.gsp. При помощи простого цикла страница, показанная в листинге 15, выведет интересные фрагменты HTTP-запроса.

Листинг 15. Страница, выводящая содержимое заголовка запроса
<h2>Request Headers</h2>
<table border="1">
  <tr>
    <th>Header</th>
    <th>Value</th>
  </tr>
  
  <g:each in="${request.headerNames}" var="${name}">
    <tr>
      <td>${name}</td>
      <td>${request.getHeader(name)}</td>
    </tr>
  </g:each>
</table>

Как видно из рисунка 11, при обращении к странице мой Firefox передает серверу достаточно много сведений о себе.

Рисунок 11. Просмотр заголовка HTTP
Просмотр заголовка HTTP

Проанализировав строку user-agent (рисунок 11), можно с уверенностью сказать, что браузер пользователя работает на платформе Mac с процессором Intel. Также можно определить версию операционной системы (10.5), систему отображения HTML (Gecko) и марку браузера (Firefox). В листинге 16 приведены другие распространенные примеры строк user-agent.

Листинг 16. Примеры распространенных вариантов user-agent
BlackBerry7520/4.0.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 
    UP.Browser/5.0.3.3 UP.Link/5.1.2.12

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
    AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)

Таким образом, на основе значения request.getHeader("user-agent") можно принять решение о том, какую версию страницы передавать клиенту в ответ на данный запрос.

Передача той версии страницы, которая поддерживается клиентским браузером

Третья стратегия заключается в том, чтобы передавать браузеру страницы, которые он в состоянии отобразить. Вдобавок к user-agent каждый запрос содержит атрибут accept. Например, Firefox передает следующее значение accept:

text/html,application/xhtml+xml,application/xml;

Данное значение говорит о том, что Firefox предпочитает содержимое типа text/html. Если на сервере нет страниц с таким типом содержимого, то он может передать страницы типа application/xhtml+xml. Если же и таковых нет, то сервер будет перебирать список MIME-типов до тех пор, пока не найдет тот, который он может передать клиенту.

Старые браузеры WAP 1.x запрашивают страницы типа text/vnd.wap.wml, а более новые телефоны будут указывать тип application/vnd.wap.xhtml+xml. Проанализировав эту информацию можно выбрать наиболее подходящий тип для каждого клиента.

Разумеется, стратегии, описанные выше, вовсе не являются взаимоисключающими. Вы можете сочетать их использование, гарантировав тем самым, что ваш Web-сайт смогут посещать все 3.3 миллиарда пользователей мобильного Интернета.


Заключение

Усилия, которые необходимо приложить для того, чтобы с вашим Grails-приложением можно было работать через мобильные телефоны, зависят от типа телефонов. В случае iPhone они практически не требуются, для устройств XHTML-MP они минимальны, а при необходимости поддержки браузеров WML 1.x может потребоваться полностью переписать Web-страницы. Рассмотренные в этой статье программы для эмулирования устройств и валидации страниц помогут вам в оптимизации приложений для мобильных пользователей.

В следующей статье мы расскажем о применении Grails при работе со старыми базами данных. Вы узнаете о языке Mapping DSL, а также об аннотациях Hibernate и файлах HBM. При помощи этих технологий вы сможете заставить Grails работать с существующими таблицами и полями базы данных, даже если они не соответствуют стандартным правилам именования в Grails. А пока – получайте удовольствие от освоения Grails.


Загрузка

ОписаниеИмяРазмер
Образец кодаj-grails06178.zip866KБ

Ресурсы

Научиться

Получить продукты и технологии

  • Grails: загрузите последнюю версию Grails. (EN)
  • Opera Mini: загрузите бесплатный браузер для мобильных устройств. (EN)

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Технология Java
ArticleID=386166
ArticleTitle=Изучение Grails: Grails и мобильный Web
publish-date=04292009