Мобильные Rich Internet Applications

Автор: Анна Лысак и Татьяна Головко Дата публикации: 09.09.2011

Мы уже знакомы с RIA (Rich Internet Application) в настольном Вебе и в Web 2.0, но мы также можем создавать и мобильные RIA. Некоторые из используемых методов здесь точно такие же, а некоторые отличаются: в то время как Ajax методы (только те, которые касаются сетевых запросов), будут точно такими же, как и в настольном Вебе — некоторые элементы UI и средства управления должны быть переработаны для мобильного мира.

Мобильные RIA также называют веб-приложениями («webapp») — под этим термином часто имеют в виду приложения для iPhone, которые эмулируют нативное UI поведение, могут работать в режиме офф-лайн и у них есть значок на главном экране.

Такие особенности мобильных устройств как маленький экран и отсутствие мыши (а, значит, и отсутствие поддержки различных событий мыши) значительно усложнили разработку RIA для мобильных и здесь нам придется гораздо больше хитрить. Но тем не менее, «богатые» и продвинутые сервисы (например, механизмы автосохранения для больших текстовых полей) могут быть в полной мере реализованы, независимо от того, разрабатываешь ты приложение для настольных компьютеров или для мобильных устройств.

Некоторые, успешно работающие в мобильных веб-приложениях, UI шаблоны дизайна включают в себя:

  • Аккордеон;
  • Навигация по вкладкам;
  • Строки меню;
  • Оперативные редакторы.

В других случаях нужно дважды подумать и попробовать альтернативные решения. Реализация следующих вариантов может повлечь некоторые сложности:

  • Выпадающие календари на не-сенсорных устройствах;
  • Модальные CSS всплывающие окна;
  • Flash-взаимодействия и меню;
  • WYSIWYG-редакторы;
  • Продвинутые сетки данных (datagrids).

JavaScript UI библиотеки

Существуют десятки JavaScript UI библиотек, которые применяются для реализации многофункциональных элементов управления. И хороший вопрос: работают ли они в мобильных браузерах? В таблице 9.10 показаны результаты для 6 библиотек:

Табл. 9.10. Таблица поддержки UI библиотек
Браузер/ Платформа Yahoo! UI jQuery UI Sencha Control Toolkit GWT Adobe Spry
Safari Да Да Да Да Да Да
браузер Android Да Да Частично Да Да Да
Symbian/S60 Да Да Да Да Частично Да
Nokia Series 40 Нет до 6-го выпуска Да Да Да Да
webOS Да Да Нет Да Да Да
BlackBerry Нет до серии 5.0 Да Да Да Да
NetFront Нет Да Да Да Да Да
Internet Explorer Нет Да Да Да Да Да
Motorola Internet Browser Нет Да Да Да Да Да
Opera Mobile Частично Да Да Да Да Да
Opera Mini Да Да Частично Частично Да Да

Мобильные UI библиотеки

В последние несколько лет для облегчения мобильной разработки RIA на рынке появилось много UI библиотек. К сожалению, большинство из них разработаны для конкретных платформ, но, в принципе, с незначительными изменениями или несовместимостями они должны работать на всех устройствах.

Браузер с наиболее специфической платформой — мобильный Safari и многие библиотеки позволяют нам создавать многофункциональные веб-приложения, которые эмулируют нативные элементы управление поведением для iOS. UI библиотеки для iPhone:

Для Android официально есть только две бибилиотеки: WebApp.Net и Sencha Touch. Остальные тоже должны работать с Android, но с некоторыми ошибками в анимации и эффектах (из-за расширений Apple в Safari).

Для Symbian устройств есть новая, оптимизированная под виджеты библиотека (подробнее рассмотрим ее в Главе 12). но она также работает и c браузерными документами для некоторых из доступных элементов управления. Называется эта бибилиотека Guarana UI и по сути это jQuery UI библиотека для браузера Symbian WRT. Загрузить библиотеку можно на http://wiki.forum.nokia.com, а тестер элементов управления UI можно найти по ссылке http://www.jappit.com/m/guaranabrowser. На http://www.mobilexweb.com/go/ui размещен обновленный список UI библиотек для мобильных браузеров.

Давай подробнее разберемся с двумя, наиболее часто используемыми библиотеками для iPhone — iUI и jQTouch (рис. 9.4).

Используя простой код можно создавать прикольные эффекты в стиле iPhone, такие как изображены здесь. Сделано с использованием iUI (слева) и jQTouch (справа) Рис. 9.4. Используя простой код можно создавать прикольные эффекты в стиле iPhone, такие как изображены здесь. Сделано с использованием iUI (слева) и jQTouch (справа).

iUI

iUI была одной из первых библиотек, созданных для разработки приложений в стиле iPhone. Создал ее Джо Хьюитт (Joe Hewitt), сейчас он в составе команды разработчиков Facebook, а также является автором FireBug — популярного плагина для Firefox.

iUI — очень простая в использовании JavaScript библиотека, которая также включает в себя CSS и функции (как правило фоны), которые эмулируют нативные средства управления приложений iPhone, анимацию и процесс работы приложения.

Основные моменты:

  • Не требуется кодирования на JavaScript;
  • Расширение поведения стандартной HTML-разметки;
  • Переопределение ссылок и формы с Ajax запросами;
  • Обновление страницы со сглаженными iPhone переходами без какого-либо кода.

Библиотека используется метод навигации master-detail, такой же (в общем-то, скопированный) как и UITableView из Cocoa Touch. UITableView — нативная методика управления на iPhone.

Основная структура iUI-сайта — простой HTML-файл, который в свою очередь включает в себя CSS и JavaScript файлы, кроме того в этом HTML-файле содержится <div> для верхней панели (top toolbar) и по одному <ul> для каждого «list page», который нам нужно отобразить:

<!-- Leave this toolbar div with no changes -->
<div class="toolbar">
	<h1 id="pageTitle"></h1>
	<a id="backButton" class="button" href="#"></a>
</div>
<!-- This is the home screen -->
<ul id="home" title="Home Page" selected="true">
	<li><a href="#first">First</a></li>
	<li><a href="#second">Second</a></li>
	<li><a href="#third">Third</a></li>
	<li><a href="ajax.html">Loaded by AJAX</a></li>
	<li><a href="more.html" target="_replace">More...</a></li>
</ul>
<ul id="first" title="Other Screen">
... other options ...
</ul>
... other pages

iUI использует дочерний элемент с selected="true" в качестве домашнего экрана когда страница загружается первый раз и каждая ссылка — это якорь, являющийся ссылкой на другой экран, который загружается на той же самой странице и идентифицируется по ID после решетки (как WML карта).

Панель инструментов всегда доступна и кнопка «Назад» работает автоматически, возвращая пользователя к предыдущему экрану с применением сглаженной анимации.

Для внешних файлов можно использовать обычную ссылку: она загружается при помощи Ajax и вставляется под панель инструментов. У внешнего файла должен быть только <ul> или <div> и никаких других корневых тегов больше не нужно.

Мы также можем применить на сайте шаблон разбиения на страницы при помощи target="_replace". Таким образом загрузится документ при помощи Ajax и его контент будет вставлен в том <li> где было определено значение _replace. В этом документе должен быть только <li> и никакого другого корневого элемента, а если элементов больше чем на одну страницу то документ должен заканчиваться другой ссылкой.

iUI поддерживает также и другие дополнительные возможности:

  • модальные всплывающие диалоговые окна;
  • офрмление форм;
  • эмуляции нативных средств управления формой;
  • разделенные таблицы;
  • кнопки на панели инструментов.

Больше примеров использования библиотеки iUI можно найти на http://www.mobilexweb.com/go/iui.

jQTouch

jQTouch — это jQuery-плагин для веб-разработки под iPhone, результаты применения схожы с библиотекой iUI, но графика и анимация в данном случае будут более мощными. Использование этой библиотеки не доставляет особых неудобств, но для инициализации страницы потребуется немного JavaScript-кода.

С некоторыми визуальными различиями jQTouch работает и в браузерах Android и webOS.

Поддерживаются такие функции:

  • нативная WebKit-анимация с применением методов jQuery;
  • обработка событий;
  • гибкие темы;
  • детектирование жестов;
  • расширения: плавающая панель, геолокация, поддержка оффлайновой работы;
  • визуальные средства управления;
  • анимация.

Для работы с jQTouch нам нужно сначала загрузить jQuery 1.3.2 и скрипт jQTouch с двумя файлами CSS: основной файл (jqtouch.min.css) и та визуальная тема, которую мы хотим загрузить. Например:

	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<!-- We load jQuery using the Google AJAX API -->
	<script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
	<script type="text/javascript" src="jqtouch/jqtouch.min.js"></script>
	<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
	<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>

Для инициализации страницы мы можем использовать:

<script type="text/javascript">
	$.jQTouch({
		icon: 'iphone-icon.png',
		preloadImages: [
		'themes/jqt/img/chevron_white.png',
		'themes/jqt/img/bg_row_select.gif',
		'themes/jqt/img/back_button_clicked.png',
		'themes/jqt/img/button_clicked.png'
		]
	});
</script>

Есть десятки свойств, которые мы можем определить при инициализации. Список можно найти на http://code.google.com/p/jqtouch/w.

В Главе 12 мы поговорим о том, как на iPhone работать в полноэкранном режиме, обходя мобильный Safari UI и, соответственно, делая наше приложение полноправной составляющей основного экрана iPhone.

Как и в iUI, в этой библиотеке основная разметка делается при помощи элементов верхнего уровня (в данном случае div) c id и ссылками-якорями для навигации в этом же документе. Например:

<div id="home" class="current">
	<div class="toolbar">
		<h1>jQTouch</h1>
		<a class="button slideup" id="infoButton" href="#about">About</a>
	</div>
	<ul class="rounded">
		<li class="arrow"><a href="#ui">User Interface</a> <small class="counter">4</small></li>
		<li class="arrow"><a href="#animations">Animations</a> <small class="counter">8</small></li>
		<li class="arrow"><a href="#ajax">AJAX</a> <small class="counter">3</small></li>
		<li class="arrow"><a href="#callbacks">Callback Events</a> <small class="counter">3</small></li>
		<li class="arrow"><a href="#extensions">Extensions</a> <small class="counter">4</small></li>
		<li class="arrow"><a href="#demos">Demos</a> <small class="counter">2</small></li>
	</ul>
	<h2>External Links</h2>
	<ul class="rounded">
		<li class="forward"><a href="http://www.jqtouch.com/" target="_blank">Homepage</a></li>
		<li class="forward"><a href="http://www.twitter.com/jqtouch" target="_blank">Twitter</a></li>
		<li class="forward"><a href="http://code.google.com/p/jqtouch/w/list" target="_blank">Google Code</a></li>
	</ul>
</div>

Мобильные JavaScript UI шаблоны

Для обработки общих задач в мобильных устройствах пришлось придумывать альтернативные подходы.

Кнопка очистки текстового поля

В нативных UI сенсорных устройствах в текстовых полях есть отличная функция: возможность удалить весь текст при помощи маленького крестика в правой части поля (рис. 9.5). При отсутствии клавиатуры эта функция особенно полезна. Мы можем легко эмулировать этот шаблон UI при помощи комбинации изображения (или, как мы позже увидим, тега <canvas>) и небольшого JavaScript-кода.

Этот шаблон реализован на сайте Yahoo! для сенсорных устройств, таких как iPhone Рис. 9.5. Этот шаблон реализован на сайте Yahoo! для сенсорных устройств, таких как iPhone.

Для реализации кнопки очистки мы можем использовать изображение 20×20 пикселей (отлично подходит для встроенных изображений в устройствах с соответствующей поддержкой) со следующим стилем CSS. Изображение может быть отображено как div с фоновым изображением с самого начала или уже с его появлением, когда пользователь начнет вводить текст. Важно к полю ввода добавить правый паддинг и таким образом кнопка Х не перекрывается текстом:

<style type="text/css">
	div.clearx {
		background: transparent url('clearx.png') no-repeat right;
		height: 20px;
		width: 20px;
		margin-top: −26px;
		position: absolute;
		left: 235px;
	}
	input.clearx {
		padding: 2px 40px 2px 10px;
		width: 200px;
		height: 24px;
	}
</style>

HTML должен выглядеть так:

<input type="text" id="search" placeholder="Enter your search" class="clearx" />
<div class="clearx" onclick="document.getElementById('search').value=''"></div>

Автоматическое увеличение текстовой области

Этот UI шаблон был создан командой Google Mobile и в настоящее время он используется в Gmail. Проблема с текстовой областью вот в чем: если у нас в текстовой области слишком большое количество текста — появляется полоса прокрутки, которая в некоторых мобильных браузерах (например, в Safari на iOS) создает существенные проблемы. Решается эта проблема увеличением текстового поля в соответствии с размером содержимого и, таким образом, пользователь может по прежнему обходится обычной прокруткой страницы и не мучаться с отдельной прокруткой для текстового поля.

Все эти JavaScript UI шаблоны создаются при помощи объектно-ориентированного кода с добавлением небольшого количества JavaScript.

Мы можем перехватить событие onkeyup и при необходимости увеличить текстовую область. Мы точно также должны перехватить и onchange, потому что вставка текста в поле в iOS не генерирует событие onkeyup.

Полностью всю информацию об этом решении можно найти на http://www.mobilexcode.com/go/autogrowing. Вот код из Google Code Blog с некоторыми изменениями:

<script>
// Значение CSS свойства line-height для textarea.
var TEXTAREA_LINE_HEIGHT = 13;
	function grow(event) {
		var textarea = event.target;
		var newHeight = textarea.scrollHeight;
		var currentHeight = textarea.clientHeight;
		if (newHeight > currentHeight) {
		textarea.style.height = newHeight + 5 * TEXTAREA_LINE_HEIGHT + 'px';
	}
}
</script>
<textarea onkeyup="grow(event);" onchange="grow(event);" ></textarea>

Команда Google Mobile постоянно работает над мобильными UI шаблонами и проблемами оптимизации и делится своими советами и наработками в блоге на http://googlecode.blogspot.com.

Плавающая панель

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

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

Из-за отсутствия нужного уровня поддержки position: fixed нам нужно разработать решение для пользовательской плавающей панели.

Для корректной работы плавающей панели в браузере должна быть поддержка события onscroll. Если это событие поддерживается — перемещение тулбара может сделано автоматически, благодаря использованию в некоторых браузерах сглаженной анимации. Также ты можешь выбрать, когда будет появляться плавающая панель — сразу или только после начала скроллинга.

Этапы создания всплывающей панели

  1. создай <div> с контентом плавающей панели;
  2. скрой его с экрана с помошью отрицательного top;
  3. укажи WebKit-анимацию перехода (работать будет на совместимых устройствах);
  4. перехвати событие onscroll;
  5. если значение window.scrollY (верхнее положение прокрутки) близко к нулю — скрой или перемести <div> c экрана; если значение далеко от 0 — перемести div (изменяя свойство top) на позицию scrollY.

Для мобильного Safari есть решение, дающее лучшие показатели производительности: вместо применения анимации смещения и изменения значения top, мы можем использовать функцию translateY и осуществить преобразование анимации. Для лучшей производительности переходы используют аппаратные возможности.

При помощи следующего кода мы можем сделать плавающую панель с анимацией (для устройств с наличием соответствующей поддержки), пример можно увидеть на рисуноке 9.6:

<!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"><html
xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Mobile Web Test Suite</title>
	<style>
		p {
			font-size: xx-large;
		}
		#floaty {
			width: 200px;
			text-align: center;
			border: 2px solid red;
			-webkit-border-radius: 5px;
			background-color: silver;
			right: 0px;
			position: absolute;
			top: −50px;
			-webkit-transition: top 0.2s ease-out;
		}
	</style>
	<script type="text/javascript">
		window.onscroll = function() {
			var floaty = document.getElementById("floaty");
			if (window.scrollY<10) {
				// It is near the top, so we can hide the floaty bar
				floaty.style.top = "-50px"; // out of the screen
			}
			else {
				floaty.style.top = window.scrollY + "px";
			}
		}
	</script>
</head>
<body>
	<h1>Floaty Bar</h1>
	<div id="floaty">
		This is a floaty bar
	</div>
	<!-- Document goes here -->
</body>
</html>
Это папка спама Gmail с удобной всплывающей панелью в верхнем правом углу Рис. 9.6. Это папка спама Gmail с удобной всплывающей панелью в верхнем правом углу

Выпадающее меню

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

Так как в большинстве случаев каскадные меню будут использоваться в сенсорных устройствах, мы не будем для открытия или закрытия меню использовать события наведения мыши (mouseover). В тач-устройствах для обоих операции — и закрытия и открытия — лучше использовать событие onclick. Меню может быть скрыто, когда пользователь выбирает какую-то опцию, прокручивает страницу или перемещает фокус на другой объект.

Для операции скрыть/показать хорошо подойдет простой <div> с JavaScript или же можно (но только осторожно) использовать библиотеку JavaScript.

Автозаполнение

Автозаполнение — функция, помогающая упростить пользователю ввод текстовой информации (рис. 9.7) и с точки зрения мобильных устройств автозаполнение — отличная функция. Но в мобильном веб-сайте ее не так просто реализовать, как в декстопном. Есть два вида функции автозаполнения: предварительной загрузки (preloaded) и на основе технологии Ajax. Автозаполнение по типу предварительной загрузки включает загрузку и предложение всех возможных значений (не рекомендуется использовать больше 2000 значений) и их сохранение при помощи переменных JavaScript, а позже (если доступна возможность автономного хранилища), для будущего использования хранение их прямо в устройстве.

Автозаполнение на Google.com в устройствах на базе Android Рис. 9.7. Автозаполнение на Google.com в устройствах на базе Android.

Первая проблема касается задержки сети. Если пользователь пользуется технологиями 2G (GPRS, EDGE), то для связи с сервером и для предварительной загрузки необходимых значений может потребоваться довольно много времени и, кроме того, мобильный Интернет пока не дешев и такие долгие и дорогие операции пользователю наверняка не понравятся. Вторая проблема касается некоторых моментов UI: во многих мобильных браузерах может быть проблематично генерирование плавающего <div> поверх других элементов и, в таком случае, переключение между различными элементами в не-сенсорных мобильных браузерах может создавать определенные трудности.

Если ты планируешь использовать функцию автозаполнения, разработанную на базе JavaScript-решения, не забудь при помощи autocomplete="off" в текстовом поле отключить стандартное браузерное автозаполнение.

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

Итак, мы можем сделать вывод, что, во-первых, такое решение подходит и рекомендуется использовать только для сенсорных смартфонов, которые выходят в Интернет при помощи WiFi или 3G. Во-вторых, нам нужно подумать о дизайне. Рекомендуется вместо плавающего <div> над остальным контентом использовать скрытый <div> который заменяет или опускает вниз предыдущий контент. Этот <div> может появится под текстовым полем или рядом, в правом верхнем углу. У него должна быть кнопка «Закрыть».

Еще один момент для сенсорных устройств без QWERTY-клавиатур: когда пользователь наводит фокус на текстовое поле (с работающей функцией автозаполнения) — на экране появляется виртуальная клавиатура и, получается, что остается совсем немного свободного пространства. Есть решение, которое обеспечивает нужное количество места для списка предложенных вариантов. Суть решения: когда пользователь наводит фокус на текстовое поле — прокрутить документ до поля. В таком случае поле для ввода текста находится в верхней части экрана, клавиатура — в нижней, а середина экрана свободна для предложенного списка вариантов (рис. 9.7).

Для мобильных устройств BlackBerry 5.0 при помощи HTML5 эелемента datalist (рассмотрим чуть позже в этой же главе) можно реализовать локальные решения для функции автозаполнения.

Куда дальше