В данной статье будет рассмотрен пример портации веб-приложения написанного на JavaScript в приложение Adobe AIR.
В первую очередь, еще с момента появления Adobe AIR и первых примеров портации ExtJS в AIR, меня мучила мысль — а насколько тяжело или просто преобразовать веб-приложение написанное на JavaScript в AIR приложение. Пару дней назад появилось время поэкспериментировать.
Первым делом был скачан SDK для разработки AIR приложений. Порыскав по интернету, нашел пару примеров как сделать свое первое приложение на AIR.
Для портации я выбрал одну из последних своих работ – это веб-приложение www.datamash.us. Датамаш — это YouTube для виджетов. Виджеты сейчас превратились в новую форму медиа, однако до сих пор их можно было создавать только программистам. Датамаш помогает обычным людям управлять такой новой формой контента, как виджеты, сборкой и подключением внутренних потоков данных для них, облегчает их публикацию. Клиентский интерфейс Датамаша реализован на смеси Fullajax и ExtJS. Серверная часть на PHP.
Перед собой поставил следующую задачу — сделать приложение, которое запускает весь интерфейс с локальной файловой системы, но бизнес данные берет из Интернета. Приступив к экспериментам, переходя от простого к сложному, через часок я скомпилировал свое первое AIR приложение. Выяснилось, что песочница AIR имеет ограничения на выполнения JavaScript – одно из них это выполнение eval, которое необходимо для сборки объектов из JSON ответов, второе это создание и выполнение динамически подключаемых скриптов. Поискав информацию, про безопасность песочницы, нашел очень исчерпывающую информацию labs.adobe.com/wiki/index.php/AIR:HTML_Security_FAQ. Немного поразмыслив, решено сделать приложение, которое не будет ограниченно безопасностью песочницы AIR. Оказывается такая возможность существует, что приятно удивило. И сделать это просто: необходимо загрузить стратовую страницу приложения в iframe с дополнительными атрибутами.
sandboxRoot=http://www.datamash.us/ — определяет область песочницы
allowCrossDomainXHR=«true» — указывает на разрешение кроссдоменных запросов
documentRoot=«app:/»> — указывает базовое место для относительных путей
Таким образом мы получили приложение которое грузит интерфейс с локальной файловой системы.
Важным моментом оказалось то, что все настройки путей для AJAX запросов веб-приложения на первом этапе разработки я вынес в отдельный файл, и это сэкономило времени. Достаточно было переопределить все пути в файле конфигураций на внешний сайт и все заработало как надо.
Была одна проблема, над которой я возился часа два. Проблема была в том что изначально при AJAX запросах мне приходили пустые ответы от сервера. Я долго ломал голову почему, ведь все было сделано правильно. Проблема оказалась в следующем: если для iframe я указывал
Итого, на выходе имеем веб-приложение, которое запускается с локальной файловой системы а бизнес данные берет из Интернета. Портировать веб-приложение в AIR приложение оказалось относительно просто и быстро. Лично мне технология AIR понравилась.
Посмотреть на получившееся приложение в действии вы можете скачав и установив datamash.air
P.S.: Мой коллега сделал существенное замечание в сторону AIR — данная технология не имеет механизмов автообновления приложений. Т.е. к примеру, запустившись, очередной раз, с локальной файловой системы и обнаружив во внешнем мире более свежую версию интерфейса было бы замечательно, если AIR мог бы автоматически скачать на локальную файловую систему новую версию контента, и запускаться последующие разы уже с новым интерфейсом. Будем надеятся что Adobe добавит данную возможность.
В первую очередь, еще с момента появления Adobe AIR и первых примеров портации ExtJS в AIR, меня мучила мысль — а насколько тяжело или просто преобразовать веб-приложение написанное на JavaScript в AIR приложение. Пару дней назад появилось время поэкспериментировать.
Первым делом был скачан SDK для разработки AIR приложений. Порыскав по интернету, нашел пару примеров как сделать свое первое приложение на AIR.
Для портации я выбрал одну из последних своих работ – это веб-приложение www.datamash.us. Датамаш — это YouTube для виджетов. Виджеты сейчас превратились в новую форму медиа, однако до сих пор их можно было создавать только программистам. Датамаш помогает обычным людям управлять такой новой формой контента, как виджеты, сборкой и подключением внутренних потоков данных для них, облегчает их публикацию. Клиентский интерфейс Датамаша реализован на смеси Fullajax и ExtJS. Серверная часть на PHP.
Перед собой поставил следующую задачу — сделать приложение, которое запускает весь интерфейс с локальной файловой системы, но бизнес данные берет из Интернета. Приступив к экспериментам, переходя от простого к сложному, через часок я скомпилировал свое первое AIR приложение. Выяснилось, что песочница AIR имеет ограничения на выполнения JavaScript – одно из них это выполнение eval, которое необходимо для сборки объектов из JSON ответов, второе это создание и выполнение динамически подключаемых скриптов. Поискав информацию, про безопасность песочницы, нашел очень исчерпывающую информацию labs.adobe.com/wiki/index.php/AIR:HTML_Security_FAQ. Немного поразмыслив, решено сделать приложение, которое не будет ограниченно безопасностью песочницы AIR. Оказывается такая возможность существует, что приятно удивило. И сделать это просто: необходимо загрузить стратовую страницу приложения в iframe с дополнительными атрибутами.
Где<iframe id="UI" style="width:100%;height:100%;border:0" frameborder="0"
src="/chips/index.html"
sandboxRoot="http://www.datamash.us/"
allowCrossDomainXHR="true"
documentRoot="app:/">
sandboxRoot=http://www.datamash.us/ — определяет область песочницы
allowCrossDomainXHR=«true» — указывает на разрешение кроссдоменных запросов
documentRoot=«app:/»> — указывает базовое место для относительных путей
Таким образом мы получили приложение которое грузит интерфейс с локальной файловой системы.
Важным моментом оказалось то, что все настройки путей для AJAX запросов веб-приложения на первом этапе разработки я вынес в отдельный файл, и это сэкономило времени. Достаточно было переопределить все пути в файле конфигураций на внешний сайт и все заработало как надо.
...
var URL_LOGIN = 'http://datamash.us/system/login.php';
var URL_FOLDERS_LIST = 'http://datamash.us/system/folders.php';
var URL_OBJECT_LIST = 'http://datamash.us/system/objects.php';
var URL_OBJECT_JUMP = 'http://datamash.us/system/jump.php';
...
Была одна проблема, над которой я возился часа два. Проблема была в том что изначально при AJAX запросах мне приходили пустые ответы от сервера. Я долго ломал голову почему, ведь все было сделано правильно. Проблема оказалась в следующем: если для iframe я указывал
sandboxRoot=http://www.datamash.us/ и в путях прописывал www.datamash.usили
sandboxRoot=http://datamash.us/ и в путях прописывал datamash.usв ответ приходили пустые ответы. Все заработало только при указании
sandboxRoot=http://www.datamash.us/ и в путях datamash.usСтранный баг.
Итого, на выходе имеем веб-приложение, которое запускается с локальной файловой системы а бизнес данные берет из Интернета. Портировать веб-приложение в AIR приложение оказалось относительно просто и быстро. Лично мне технология AIR понравилась.
Посмотреть на получившееся приложение в действии вы можете скачав и установив datamash.air
P.S.: Мой коллега сделал существенное замечание в сторону AIR — данная технология не имеет механизмов автообновления приложений. Т.е. к примеру, запустившись, очередной раз, с локальной файловой системы и обнаружив во внешнем мире более свежую версию интерфейса было бы замечательно, если AIR мог бы автоматически скачать на локальную файловую систему новую версию контента, и запускаться последующие разы уже с новым интерфейсом. Будем надеятся что Adobe добавит данную возможность.
