Блог от AS3Coder'a о JavaScript, HTML, CSS... и немного о Flash.

понедельник, 26 апреля 2010 г.

Создание AIR-приложения во FlashDevelop

Что такое AIR?


Adobe® AIR™ - кросс-платформенная рабочая среда, предоставляющая разработчикам возможность использования технологий HTML, Ajax, Adobe Flash® и Adobe Flex® для создания многофункциональных настольных интернет-приложений.
Подробные ответы можно найти на сайте Adobe.

Если проще, то с помощью Adobe AIR мы можем заставить своё AS3-приложение работать как полноценная настольная программа с доступом к файловой системе, с работой с базами данных SQL, а также другими возможностями, которых не хватает во Flash Player.

Посмотреть полный список дополнительных возможностей можно в справочнике по языку ActionScript 3.0. Классы, которые помечены иконкой - логотипом технологии, предназначены для AIR-приложений и являются отличным дополнением к тем, что мы используем во Flash Player.



Создание AIR-приложений

Немного теории

AIR-приложения можно собирать использую разные технологии: Ajax (Javascript + HTML) и ActionScript (Flash и Flex). В последней версии FlashDevelop используется вариант с ActionScript и для этого имеется три типа проекта AIR AS3 Projector, AIR Flex 3 Projector и AIR Flex 4 Projector. Мы рассмотрим проект с чистым ActionScript 3.0.

Создаем новый проект "My First AIR Application":

AirIcon12x12

Во вкладке "Project", мы увидим директорию проекта.

2010-04-26 21 45 52

С директориями "bin", "lib" и "src" мы уже знакомы из раннего поста. А вот остальные файлы на не известны. Остановимся на них по-подробнее.

AIR_readme.txt - текстовый файл с инструкцией на английском языке, о том как компилировать приложение. По сути всё-то, о чем я буду говорить ниже :)

application.xml - файл с настройками приложения. По умолчанию файл имеет минимум настроек - это имя идентификатор, версия, имя, описание, авторство и внешний вид окна приложения. Также здесь можно задать иконку приложению, причем разных размеров:

<icon>
  <image16x16>icons/smallIcon.png</image16x16>
  <image32x32>icons/mediumIcon.png</image32x32>
  <image48x48>icons/bigIcon.png</image48x48>
  <image128x128>icons/biggestIcon.png</image128x128> 
</icon>
можно указать директорию установки приложения и директорию в списке программ:

<installFolder>Example Co/Hello World</installFolder>
<programMenuFolder>Example Co</programMenuFolder>
можно разрешить устанавливать приложения из браузера:

<allowBrowserInvocation>false</allowBrowserInvocation>
можно привязать к приложению файлы с заданным расширением, задав им свои иконки:

<fileTypes>
    <fileType>
        <name>adobe.VideoFile</name>
        <extension>avf</extension>
        <description>Adobe Video File</description>
        <contentType>application/vnd.adobe.video-file</contentType>
        <icon>
            <image16x16>icons/avfIcon_16.png</image16x16>
            <image32x32>icons/avfIcon_32.png</image32x32>
            <image48x48>icons/avfIcon_48.png</image48x48>
            <image128x128>icons/avfIcon_128.png</image128x128>
        </icon>
    </fileType>
</fileTypes>
полный список настроек смотрите в официальной справке от Adobe.

CreateCertificate.bat - исполняемый файл для создания само подписанного цифрового сертификата. Описывать сертификацию приложения в рамках данного материала, я не буду, постараюсь позже написать об этом отдельный пост. Скажу только одно: при установки приложения на компьютер у пользователя появляется диалоговое окно, с пугающими сообщениями:

2010-04-26 21 54 18

Избежать этих сообщений можно использую сертификат выданный доверенным центром сертификации, таких как VeriSign or Thawte. Подробнее о сертификации также есть в официальной справке.



PackageApplication.bat - исполняемый файл для сборки готового приложения. Подробнее здесь.


Теперь практика

В качестве примера напишем приложение, которое выводит на экран и затем пишет все доступные данные о плеере и системе пользователя (данные статического класса flash.system.Capabilities) в текстовый файл Capabilities.txt на рабочем столе.

Открываем файл основного класса Main.as и пишем туда:

/**
 * ...
 * @author AS3Coder
 */
package 
{
  /**
   * Импорт классов
   */
  import flash.filesystem.File;
  import flash.filesystem.FileStream;
  import flash.filesystem.FileMode;
  //
  import flash.display.Sprite;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.system.Capabilities;
  import flash.events.Event;
  import flash.text.TextField;
  import flash.text.TextFormat;
  import flash.text.TextFieldAutoSize;
  import flash.utils.ByteArray;
  
  /**
   * Основной класс приложения
   */
  public class Main extends Sprite 
  {
    /**
     * Конструктор
     */
    function Main():void 
    {
      addEventListener(Event.ADDED_TO_STAGE, onAddToStage, false, 0, true);
    }
    /**
     * Метод создает текстовое поле, заполняет его данными.
     * Открывает поток и записывает содержимое 
     * тектового поля в файл.
     */
    private function create ():void
    {
      var str:String;
      var txt:TextField;
      var fil:FileStream;
      //
      str = "";
      str += "navHardwareDisable: " + Capabilities.avHardwareDisable;
      str += "\nhasAccessibility: " + Capabilities.hasAccessibility;
      str += "\nhasAudio: " + Capabilities.hasAudio;
      str += "\nhasAudioEncoder: " + Capabilities.hasAudioEncoder;
      str += "\nhasEmbeddedVideo: " + Capabilities.hasEmbeddedVideo;
      str += "\nhasIME: " + Capabilities.hasIME;
      str += "\nhasMP3: " + Capabilities.hasMP3;
      str += "\nhasPrinting: " + Capabilities.hasPrinting;
      str += "\nhasScreenBroadcast: " + Capabilities.hasScreenBroadcast;
      str += "\nhasScreenPlayback: " + Capabilities.hasScreenPlayback;
      str += "\nhasStreamingAudio: " + Capabilities.hasStreamingAudio;
      str += "\nhasStreamingVideo: " + Capabilities.hasStreamingVideo;
      str += "\nhasTLS: " + Capabilities.hasTLS;
      str += "\nhasVideoEncoder: " + Capabilities.hasVideoEncoder;
      str += "\nisDebugger: " + Capabilities.isDebugger;
      str += "\nisEmbeddedInAcrobat: " + Capabilities.isEmbeddedInAcrobat;
      str += "\nlanguage: " + Capabilities.language;
      str += "\nlanguages: " + Capabilities.languages;
      str += "\nlocalFileReadDisable: " + Capabilities.localFileReadDisable;
      str += "\nmanufacturer: " + Capabilities.manufacturer;
      str += "\nmaxLevelIDC: " + Capabilities.maxLevelIDC;
      str += "\nos: " + Capabilities.os;
      str += "\npixelAspectRatio: " + Capabilities.pixelAspectRatio;
      str += "\nplayerType: " + Capabilities.playerType;
      str += "\nscreenColor: " + Capabilities.screenColor;
      str += "\nscreenDPI: " + Capabilities.screenDPI;
      str += "\nscreenResolutionX: " + Capabilities.screenResolutionX;
      str += "\nscreenResolutionY: " + Capabilities.screenResolutionY;
      str += "\nserverString: " + Capabilities.serverString;
      str += "\nversion: " + Capabilities.version;
      //
      txt = new TextField()
      txt.selectable = false;
      txt.multiline = true;
      txt.defaultTextFormat = new TextFormat("Courier New", 12);
      txt.autoSize = TextFieldAutoSize.LEFT;
      txt.text = str;
      txt.x = 10;
      txt.y = 10;
      addChild(txt);
      //
      fil = new FileStream();
      fil.open(new File(File.desktopDirectory.nativePath + "/Capabilities.txt"), FileMode.WRITE);
      fil.writeUTFBytes(str.split("\n").join("\r\n"));
      fil.close();
    }
    /**
     * Метод обрабатывает событие добавления 
     * основного клипа приложения на сцену.
     */
    private function onAddToStage (e:Event):void
    {
      removeEventListener(Event.ADDED_TO_STAGE, onAddToStage, false);
      //
      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.align = StageAlign.TOP_LEFT;
      //
      create();
    }
  }
}
Перейдем к настройкам. Попробуем задать окну приложения произвольную иконку. Для этого добавим в директорию “bin” файл изображения иконки, например такую cog . Теперь откроем файл с настройками application.xml и допишем туда блок:

<icon>
  <image16x16>cog.png</image16x16>
</icon>
результат мы увидим позже.

Теперь, когда код написан, добавлены настройки, можно переходить к сборке приложения. И для этого нам необходим сертификат подлинности. Для создания сертификата у нас имеется файл CreateCertificate.bat. Но прежде чем запустить сценарий исполнения, необходимо открыть содержимое файла и на 9 строке поменять путь до Flex SDK/bin на действительный. Узнать его можно в настройках FlashDevelop:

2010-04-27 21 50 50

После выполнения сценария в директории проекта появится файл самоподписанного сертификата:

2010-04-27 21 52 09

Для окончательной сборки AIR-приложения запускаем PackageApplication.bat. И увидим ошибку:

2010-04-27 21 54 47

также как в файле CreateCertificate.bat нужно прописать действительный путь до Flex SDK. Пробуем еще раз. Вводим пароль. И если все правильно, то в директории проекта появляется новая папка “air”, в которой лежит наше приложение.

2010-04-27 21 58 26

Для запуска .air-файлов на компьютере пользователя необходим плеер Adobe AIR. Если его нет, то нужно его поставить.

Попробуем запустить полученный .air-файл. Мы увидим стандартный установщик с минимум настроек. После установки мы увидим ярлык нашего приложения. Теперь наше AIR-приложение, является полноценной настольной программой. Запустив его, мы увидим в окне приложения ту иконку, которую мы указывали в настройках, а также файл Capabilities.txt на рабочем столе, который создала наша программа.

2010-04-27 22 03 04

Вот так легко и быстро мы (web-разработчики) теперь можем создавать полноценные настольные программы.



Смотрите также:

21 комментарий:

  1. Почему-то не могу набрать пароль в PackageAplication.bat Подскажите в чем может быть причина. Вот не могу по этой причине создать архив с приложением. Появляется две строчки, во второй стоит password: и мигающий курсор. Но я не могу набрать ни единого символа. Единственное что удается нажать Ввод. Но оно мне загружает кучу инструкций и указывает, что мол был неправильно набран пароль. Вот такая ситуация. Подскажите, как это исправить. Заранее благодарю.

    ОтветитьУдалить
  2. Ввод символов действительно не отображается. Возможно проблема в том, что при вводе стоит раскладка отличная от английской.

    ОтветитьУдалить
  3. ИМХО тут как в линуксе пароль у пользователя :). Я просто вводил пароль, нажимал ентер, и все подходило.

    ОтветитьУдалить
  4. Signing AIR setup using certificate SelfSigned.pfx.
    password:
    unexpected failure: inputs not set
    java.lang.IllegalStateException: inputs not set
    at com.adobe.air.ADTPackager.createPackage(ADTPackager.java:40)
    at com.adobe.air.ADTEntrypoint.parseArgsAndGo(ADTEntrypoint.java:132)
    at com.adobe.air.ADT.parseArgsAndGo(ADT.java:182)
    at com.adobe.air.ADTEntrypoint.run(ADTEntrypoint.java:68)
    at com.adobe.air.ADT.main(ADT.java:128)
    AIR setup creation FAILED.

    Troubleshotting:
    did you configure the Flex SDK path in this Batch file?

    Для продолжения нажмите любую клавишу . . .

    путь к флексу прописал. странно все это.

    ОтветитьУдалить
  5. Все те же грабли. То же сообщение что и у kkray

    ОтветитьУдалить
  6. Все заработало после того как я добавил ссылку на flex_sdk/bin в переменные среды.

    Я точно не уверен, я плохо знаю Windows (у меня стоит Windows 7), но возможно эта строчка не срабатывает как - надо :
    set PATH=%PATH%;C:\flex_sdk_4.1\bin
    (вместо С:\flex_sdk_4.1\bin должен быть ваш путь)

    И даже после того, как команда отработала Windows не видит команду adt

    Чтобы она ее увидела нужно явно добавить ее в переменные среды и перезагрузится

    Чтобы убедится что все работает в командной строке нужно вызвать adt -help

    ОтветитьУдалить
  7. вот что кстати обычно означает ошибка
    java.lang.IllegalStateException :
    You come from a state that is not yet recognized by the UN, possibly Kurdistan or Palestine. Get a real citizenship, recompile your java code and try again.

    ОтветитьУдалить
  8. У меня та же ошибка...

    Signing AIR setup using certificate SelfSigned.pfx.
    password:

    и не ввести пароль

    Ладно, не получается с Флашдевелопером сделал приложение с ФлашКС

    Но вот еще проблема. Как затем их удалять? Вот понимаю в Инно Сетап с приложениями удобно работать... А тут будет пока ничего хорошего не вижу :(

    ОтветитьУдалить
  9. Ура народ я решил эту проблем)
    Не можем ввести букавки и хрен с ними... Открываем PackageApplication.bat и в строке
    set SIGNING_OPTIONS=-storetype pkcs12 -keystore %CERTIFICATE% -tsa none
    прописываем ваш пароль
    -storepass password
    где password замените вашим паролем, без кавычек
    например:
    set SIGNING_OPTIONS=-storetype pkcs12 -keystore %CERTIFICATE% -storepass air -tsa none

    Но вопрос установки и автоматического удаления программы, меня до сих пор волнует не по детски)

    ОтветитьУдалить
  10. Дело не в путях -- просто у кого-то установлен не адобовский, а опенсорсный флекс сдк. Соответственно надо __доустановить__ эйр сдк )) отдельно.

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

    `set PATH=%PATH%;C:\Programs\FlexSDK\Flex4\bin;C:\Programs\AIRSDK\2.5\bin`

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

    2 genm: инно рулит! и нсис! инсталлшилд в топку!
    кстати -- в инно насколько помню, всего один флажок установить, чтобы файлы в сетап не компилировать. пробежаться один раз скриптиком по распакованному архиву -- и можно получить нормальную морду для установки/удаления.

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

    ОтветитьУдалить
  11. насчет того, что нельзя пароль набрать... Она набирается, но не визуализируется.. после нажатия enter все нажатые ваши символы используются и создается air файл..
    А тем, кто не знает какой нужно пароль набрать, нужно посмотреть на строку set PASSWORD=Paaroolee
    в файле CreateCertificate.bat например у меня пароль Paaroolee
    Так что урок очень хороший. И мне помогло, спасибо!

    ОтветитьУдалить
  12. "inputs not set"

    Здесь он требует входящий файл, а входящим файлом является swf'ка того же приложения! Так что сначала во флеш девелоп компилим саму swf (в том же приложении), и только затем вызываем батник PackageApplication. После этого у меня все собралось как надо.

    ОтветитьУдалить
  13. Коротко и по делу, молодец мужчина!

    ОтветитьУдалить
  14. Здравствуйте, не подскажете как можно включить в инсталлятор air приложения данные из applicationStorageDirectory? У меня каталог и там хранится очень много картинок, которые впоследствии будут обновляться и добавляться. Спасибо!

    ОтветитьУдалить
  15. Можете подробнее описать ситуацию? Зачем вам это?

    ОтветитьУдалить
  16. У меня написан каталог изделий. Он инсталится на разнах терминалах. Где-то раз в сутки программа проверяет обновления изделий. Соответственно появилась новая более лучшая фотография или вообще новое изделие - обновилась локальная база данных и залились( обновились) фотографии. Соответственно данные (база и картинки) должны лежать в папке с правом нетолько на чтение, вот я и выбрал applicationStorageDirectory.
    И так. Сейчас у меня уже есть приложение работающее с локальной базой данных и где-то 900 мБ фотографий. Мне надо всё это упаковать в air инсталлятор и раскидать по терминалам, где приложение сможет как само обновляться, так и обновлять картинки.
    По умолчанию air распаковывает всё в одну папку с правом read only, а мне нужно чтобы данные и само приложение лежали в разных местах. Может я неправильно мыслю. Посоветуйте как лучше.

    ОтветитьУдалить
  17. На сколько я понял у вас есть клиент (ваш каталог), сервер, на котором имеются самые свежие данные, и кеш, который вы копите в applicationStorageDirectory. И вы хотите этот кеш засунуть в инсталлятор, чтобы не качать 900 Мб при установке на новый терминал.

    Если это так, то это не есть хорошо :) Правильно бы было обновить локальную базу после установки именно с сервера, или же руками закинуть кеш в applicationStorageDirectory.

    С возможностью - закинуть файлы в applicationStorageDirectory из инсталлятора при первом запуске программы, я не сталкивался. Врятли такое возможно, хотя я могу ошибаться. Попробуйте поискать в http://help.adobe.com/en_US/air/build/index.html

    ОтветитьУдалить
  18. Это программа в будущем будет не только на терминалах - скорее всего будет распространяться и для выездных менеджеров. Представьте ситуацию: я каждому менеджеру выдаю по инсталятору. Они у себя его запускают и программа начинает выкачивать с инета минимум 900 метров информации или в инструкции по установке написано: установите программу, возьмите вот эту папку с фотографиями и базой, и закиньте всё это вон в ту папку. Да они опухнут от такого))))) А если интернет очень медленный или дорогой? Нее..лучше основную массу заталкать в инсталлер и сказать ему что куда раскидать. А по ссылке уже лазил, но там нет подобного. Вообще нигде нет - 2 день ищу. Уже думаю сторонний установщик взять и в него заталкать air инсталлер и папку с картинками.

    ОтветитьУдалить
  19. А они инсталлер не с инета будут качать? Он ведь тоже будет весить 900 Мб :)

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

    Для менеджеров необязательно всё сразу выкачивать сразу писать в кеш. Можно загружать, показывать и затем писать в кеш, только то что он запросил.

    В общем, этот вопрос уже не по теме.

    ОтветитьУдалить
  20. Инсталлер на диске предоставляется. Приложение должно работать автономно - сделал заказ - сохранил - появился инет - отправил на обработку.
    Ну спасибо за ответы! Буду дальше искать. Что интересного найду - расскажу.

    ОтветитьУдалить

Можно использовать некоторые HTML-теги, например <b>, <i>, <a>

Поиск по блогу

Обо мне



Farid Shamsutdinov (AS3Coder)
Russia, Tatarstan, Kazan
as3coder@gmail.com

Подробнее...

Постоянные читатели

© 2014 Farid Shamsutdinov. При копировании материалов, ссылка на источник обязательна. Технологии Blogger.