Воздушная технология от Adobe

Степан «Step» Ильин (step@gameland.ru)

Хакер, номер #111, стр. 111-034-1

Изучаем Adobe AIR на практике

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

Что если веб-программист решит заняться программированием обычных приложений для десктопа? Фактически это означает для него необходимость откинуть весь свой опыт программирования для веб и браться за изучение сложных объектно-ориентированных сред, как правило, зависимых от платформы. Стоп! Правильнее говорить не «означает», а «означало», потому как именно сейчас, наконец, появилась технология, позволяющая веб-девелоперам, используя имеющийся багаж знаний, инструменты и даже заготовки кода, создавать полноценные десктопные приложения! Такие возможности по созданию Rich Internet Application (RIA) им предоставила новая разработка — Adobe AIR.

Что такое AIR

Итак, AIR - это платформа от известнейшей компании Adobe, позволяющая веб-программистам создавать насыщенные интернет-приложения для десктопа. Подобно самым обычным приложениям, RIA могут обращаться к файловой системе компьютера, управлять другими приложениями, поддерживают drag'n'drop, работают с локальной базой данных и в тоже время обладают всеми теми возможностями, которые присущи онлайн-сервисам. Однако AIR - это не просто хитрый браузер. Это платформа, исполняемая среда (кстати говоря, AIR расшифровывается как Adobe Integrated Runtime), позволяющая не только запускать созданные для нее приложения, но и взаимодействовать им с системой, а также исполняться в защищаемой песочнице - sandbox.

Такой подход дает массу преимуществ, одним из которых является кросс-платформенность. AIR-приложения уже сейчас можно запускать под Windows и Mac OS X, а к финальному выходу технологии разработчики Adobe обещают разработать версию и для Linux'ов. Другое не менее важное преимущество заключается в том, что конечные приложения получаются очень небольшого размера, поскольку реализация всех функций содержится в самой платформе. Фактически собранный бинарник - это просто контейнер из одного или более HTML- или Flash SWF-файлов. Платформа AIR создает для них специальный контейнер, позволяя им запускаться в обычном окне с возможностями десктопных приложений и веб-сервисов одновременно. Правда, здесь есть и обратная сторона: без установленной AIR на компьютере пользователя ни одна разработанная для нее программа не заработает. Для того чтобы создать приложение, недостаточно только HTML’ки и флешки, необходим еще и XML-файл, называемый также дескриптором приложения. В нем прописываются параметры программы, например название и размеры окна, и, что самое главное, указывается файл (HTML или SWF), который загрузится в контейнер и будет описывать внешний вид и функциональность приложения. В результате своего рода компиляции получается air-файл, который легко запускается на любом компьютере, где есть платформа.

Первый опыт

Итак, теперь, когда у тебя есть некоторая теоретическая база, пора закрепить полученные знания на практике. Можно было бы написать стандартное приложение Hello World!, но это слишком скучно. Давай подумаем: когда RIA-приложения могут проявить себя во всей красе? Очевидно, что в тех случаях, когда программа должна правильно функционировать, находясь как в онлайне, так и в оффлайне. Ну, скажем, если в AIR разработать систему для управления блогом (а такой пример есть на сайте Adobe), то она обязательно должна предоставлять пользователю возможность создавать пост (запись в дневнике) независимо от того, есть ли в текущий момент подключение к Инету или нет. Если пользователь находится онлайн, то никаких проблем не возникает и написанный пост сразу отсылается на сервер. Если же подключения к Сети нет, то программа обязана сохранять пост (например, в локальной SQLite-базе данных) до тех самых пор, пока соединение с инетом не будет установлено, после чего отправить его. Задача хоть и несложная, но некоторых навыков все-таки требует, поэтому мы начнем с более простого примера.

В главном окне нашего приложения разместятся три элемента: текстовое поле для поиска, кнопка Search, а также небольшая иконка, которая будет указывать на то, установлено ли соединение с инетом или нет. Если пользователь наберет что-то в текстовом поле и нажмет кнопку, то откроется окно браузера и будет произведен поиск, но... только в том случае, если компьютер находится онлайн. В противном случае кнопка для поиска будет заблокирована, а цвет иконки сообщит об отсутствии соединения. Таким образом, мы создадим полностью рабочее приложение, которое будет контролировать подключение к интернету и в зависимости от его наличия/отсутствия по-разному реагировать на действия пользователя. Круто? Тогда поехали. Нам потребуются две вещи:

1. Непосредственно исполняемая среда AIR (http://labs.adobe.com/downloads/air.html), необходимая для запуска air-файлов. Ее нужно просто установить в систему, никаких дополнительных настроек не требуется.
2. Набор разработчика в виде SDK (http://labs.adobe.com/downloads/airsdk.html), в котором содержатся утилиты, примеры кода, а также библиотеки, необходимые для разработки AIR-приложений. SDK распространяется в виде обычного архива, который следует распаковать. Комплект включает в себя две важные для нас утилиты: ADL, предназначенную для того, чтобы запускать и отлаживать приложения, а также ADT, необходимую для создания air-контейнер, который можно распространять. Чуть позже мы рассмотрим их более детально.

Дескриптор приложения

Процесс разработки любого приложения начинается с создания его дескриптора - специального файла в XML-формате, в котором прописываются все возможные параметры будущей программы. Делается это очень просто: в любом текстовом редакторе создается файл примерно следующего содержания:

<?xml version="1.0" encoding="utf-8" ?>

<application xmlns="http://ns.adobe.com/air/application/1.0.M6">

<filename>Xakep inet monitor</filename>

<customUpdateUI>false</customUpdateUI>

<name>Connection Monitor</name>

<id>ru.xakep.AIR.monitor.test</id>

<version>2</version>

<initialWindow>

<content>Test.html</content>

<height>480</height>

<width>640</width>

<systemChrome>standard</systemChrome>

<transparent>false</transparent>

<visible>true</visible>

<resizable>false</resizable>

</initialWindow>

</application>

Большая часть этих параметров понятна и без комментариев. Хочу лишь обратить твое внимание на элемент <initialWindow>, в котором описываются различные параметры окна (title - название, width - ширина, height - высота и т.д.), а также то, что в нем будет содержаться. Заметь, в самом файле-дескрипторе никакие элементы интерфейса, равно как и реализации каких-либо функций приложений, не описываются. Но в то же время существует специальный параметр <content<, который указывает на HTML- или SWF-файл - вот тут-то и расположено описание внешнего вида приложения, а также ее функциональность (в обычном HTML-формате!). Надо сказать, что параметров может быть намного больше (например, можно указать иконку, стандартный путь для установки приложения в систему и т.д.), подробности ты найдешь в официальной документации.

Пишем код

Как описать внешний вид нашего приложения? Назовем файл с версткой Test.html, как если бы мы верстали самую обычную HTML-страничку. Я не буду останавливаться на HTML-разметке, тем более что полный код будет у нас на диске. Давай лучше подумаем, как реализовать заявленную функциональность. Все делается при помощи обычных веб-скриптов (на языке JavaScript), а также расширенного набора функций, имеющегося у нас в распоряжении благодаря использованию AIR. Так как же мониторить состояние соединения? Платформа AIR поддерживает две специальные функции: URLMonitor, отслеживающую доступность HTTP-страницы, а также SocketMonitor, предназначенную для контроля за конечным TCP-узлом. Нам удобнее использовать первую. Делается это в четыре этапа:

1. Создается объект URLRequest, которому в качестве параметра передается URL страницы, состояние которой нужно отслеживать. Пусть это будет www.xakep.ru/default.asp. Чтобы каждый раз не загружать страницу полностью, устанавливаем для него режим HEAD и будем получать только заголовки.
2. Создаем объект URLMonitor, который будет производить мониторинг, и передаем ему в качестве параметра только что созданный нами объект типа URLRequest (где указан нужный URL).
3. Далее создаем обработчик событий для URLMonitor, который будет отслеживать значения события StatusEvent.STATUS и задавать функцию, описывающую то, как нужно реагировать на текущее событие.
4. Запускаем мониторинг.

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

var monitor;

function onLoad() {

var request = new air.URLRequest( "http://www.xakep.ru/default.asp" );

request.method = "HEAD";

monitor = new air.URLMonitor( request );

monitor.addEventListener( air.StatusEvent.STATUS, doStatus );

monitor.start();

}

Обработчику событий помимо самого события передается также название функции, которое будет это событие обрабатывать (в нашем случае doStatus). От нас сейчас требуется описать ее таким образом, чтобы в случае отсутствия соединений программа делала кнопку Search неактивной и изменяла статус-иконку. Получается примерно следующий код (я привожу его с комментариями):

function doStatus( event ) {

var elem = document.statusImage;

// Если соединение доступно

if(monitor.available == true) {

// Отображаем иконку зеленого цвета и делаем кнопку Search доступной

elem.src = "greenLight.png";

document.searchForm.searchButton.disabled = false;

// Если соединение недоступно

} else {

// Отображаем иконку красного цвета и отключаем кнопку Search

elem.src = "redLight.png";

document.searchForm.searchButton.disabled = true;

}

}

Для того чтобы иметь возможность использовать функции AIR, необходимо предварительно скопировать файлы servicemonitor.swf и AIRAliases.js из папки SDK в папку с нашим проектом и подключить их в нашем Test.html. В противном случае ничего работать не будет.

<script src="servicemonitor.swf" type="application/x-shockwave-flash" />

<script type="text/javascript" src="AIRAliases.js"></script>

Как видишь, основные элементы нашего приложения очень просты. Я опущу ту часть кода, которая вызывает браузер и передает значение нашего текстового поля поисковику. На диске ты найдешь полную версию приложения и убедишься, что это реализуется самым тривиальным образом. Сейчас же самое время разобраться, что делать с полученным кодом!

Создание air-контейнера

Для того чтобы протестировать то, что у нас получилась, понадобится уже упоминавшаяся ранее утилита ADL (AIR Debug Launcher), которая находится в папке bin в директории с SDK. Утилита консольная, поэтому все действия производятся в командной строке. А набрать нужно всего ничего:

adl.exe application.xml

Единственный параметр - это файл-дескриптор приложения. Если вместо красивого окошка нашей программы ты получишь ошибку: утилита adl не найдена, следует добавить путь до папки в SDK/BIN в переменную окружения PATH или же в консоли каждый раз указывать в параметрах запуска полный путь до adl.exe. Теперь можешь насладиться разработкой: отключить интернет-соединение и посмотреть, как программа грамотно среагирует на это событие.

Теперь, когда мы убедились, что все работает как надо, попробуем создать дистрибутив нашего приложения, который можно будет смело распространять среди других пользователей. Любой установочный файл AIR должен быть подписан сертификатом - таким образом проверяется подлинность приложения. Сертификат известного разработчика - это своего рода гарант качества приложения или по крайней мере отсутствия в сорцах зловредного кода. Выдать сертификат могут уполномоченные компании (например, VerySign и Thawte), но на первых порах мы можем сгенерировать его сами, воспользовавшись специальной утилитой ADT:

adt -certificate -cn SelfSigned 1024-RSA xakep.pfx mypassword

Последний параметр, передаваемый этой утилите, является паролем, которые ты затем используешь во время компиляции установочного пакета. После этого образуется PFX, который и будет использоваться далее для подписи нашего приложения. Теперь можно приступать к созданию установочного пакета:

adt -package -storetype pkcs12 -keystore xakep.pfx xakep.air application.xml

После того как мы успешно введем пароль для сертификата, мы получим заветный файлик - xakep.air. Вот его с гордостью можно распространять. После установки такого приложения у пользователя на его рабочем столе и в меню «Пуск» появится ярлык для запуска. Окно приложения будет выглядеть самым обычным образом, и вообще все, чем наше приложение будет отличаться от других, - это то, что в основе лежит обычный HTML. Надо сказать, что помимо связки HTML/JS можно было с легкостью использовать новую технологию от Adobe - Flex, специально разработанную для создания RIA приложений. В качестве средств разработки подойдет известный среди дизайнеров Dreamweaver с установленным плагином, Adobe Flex Builder на базе мощнейшей IDE Eclipse (+ Adobe AIR plugin for Flex Builder), а также набирающая обороты интегрированная среда разработки Aptana. Все это ты, разумеется, найдешь на нашем диске.

WWW

• http://en.wikipedia.org/wiki/Rich_Internet_application - общая информация о RIA.
• labs.adobe.com/technologies/air - официальный сайт Adobe AIR.

DVD

В материалах на диске ты найдешь дистрибутив AIR, SDK разработчика, примеры, а также исходники приложения, которое мы сегодня с тобой разработали.

INFO

В качестве движка для парсинга и отображения веб-страниц применяется движок WebKit, который используется в известнейшем браузере для Mac – Safari.

Между прочим, у Adobe AIR есть немало конкурентов. Среди них: JavaFX от Sun Microsystems, Mozilla Prism from от Mozilla Foundation и Silverlight от Microsoft'а. Думаю, мы о них еще поговорим :).