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

Мы уже знакомы с 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 библиотек:

• Yahoo! UI ;
• jQuery UI;
• Sencha (ранее называлась Ext JS);
• Microsoft Ajax Control Toolkit;
• Google Web Toolkit;
• Adobe Spry (включена в Adobe Dreamweaver).

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

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

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

• iUI;
• jQTouch и Sencha Touch;
• iWebKit;
• WebApp.Net (также официально совместима с Android);
• ciUI (с C-NET альтернативой iUI);
• Универсальная iPhone UI Kit;
• Magic Framework;
• Safire.

Для 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).

Рис. 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/">Loaded by AJAX</a></li>
	<li><a href="more/" 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-кода.

Рис. 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>

Рис. 9.6. Это папка спама Gmail с удобной всплывающей панелью в верхнем правом углу

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

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

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

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

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

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

Рис. 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 (рассмотрим чуть позже в этой же главе) можно реализовать локальные решения для функции автозаполнения.

Куда дальше

• следующая — HTML5
• предыдущая — CSS расширения для WebKit
• содержание