Pull to refresh

Hello World! в Adobe AIR

Reading time 5 min
Views 10K
Original author: Adobe Dev Team
Adobe AIR — это средство для разработки интерактивных приложений от Adobe. К особенностям можно отнести возможность разрабатывать кроссплатформенные приложения с использованием HTML/Ajax, Flex, Flash.

Для ознакомления сделаем пример «Hello World!» с использованием HTML.



Установка необходимых программ

Прежде всего требуется скачать сам пакет Adobe AIR (есть версии для Windows и MaxOSX, Linux версию обещали сделать).
Затем SDK для разработки приложений

Установите куда вам будет удобно, запомните путь — он вам пригодится.

Создание файла проекта

Каждый AIR-проект на HTML содержит как минимум 2 файла: файл описания проекта и главная страница приложения в HTML. В нашем примере так же используется ещё один HTML файл с форматированным текстом для вставки через JavaScript. Так же присутствует файл AIRAliases.js для создания алиасов с классами AIR API.

Для начала создайте папку HelloWorld. Скопируйте файл AIRAliases.js из папки SDK в вашу папку HelloWorld.

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

Создание файла описания проекта

Простейший файл выглядит примерно так:
<application>
    <id>...</id>
    <version>...</version>
    <filename>…</filename>
    <initialWindow>
        <content>…</content>
        <visible>…</visible>
        <width>…</width>
        <height>…</height>
    </initialWindow>
</application>



  • Создайте пустой файл и назовите его HelloWorld-app.xml и сохраните его в директорию проекта
  • Добавьте элемент с атрибутом AIR
    . Последняя часть "1.0.М6" означает версию runtime, которую использует приложения.

    Добавьте элемент
    examples.html.HelloWorld

    значение должно быть уникальным и не должно совпадать с другими приложениями. Для разделения имен используются точки. Уникальное имя требуется для установки, получения доступа к приватным файлам и тд.

    Добавьте элемент
    0.1
    - для контроля версий

    Добавьте элемент
    HelloWorld
    - имя используется для установки, создания папки с приложением на системе польователя

    Добавьте элемент с дочерними элементами:
    • HelloWorld.html - главный HTML файл, который будет загружен.
    • true - определяет будет ли окно видно при запуске приложения. В некоторых случаях нет необходимости показывать окно.
    • 400 - устанавливает ширину окна в пикселях.
    • 200 - устанавливает высоту окна.


    Сохраните файл. У вас должно получится примерно так:
    <?xml version="1.0" encoding="UTF-8"?>
    <application xmlns="http://ns.adobe.com/air/application/1.0.M6">
        <id>examples.html.HelloWorld</id>
        <version>0.1</version>
        <filename>HelloWorld</filename>
        <initialWindow>
            <content>HelloWorld.html</content>
            <visible>true</visible>
            <width>400</width>
            <height>200</height>
        </initialWindow>
    </application>
    



    В этом примере не используются все параметры. Для более подробной информации можно посмотреть описании всех характеристик файла проекта

    Создание главного HTML файла.

    1) Создайте файл HelloWorld.html, имя файла должно совпадать с именем в файле описания в элементе
    . Содержание должно быть примерно таким: 
    <html> <head> <title>Hello World</title> </head> <body onLoad="appLoad();"> <h1>Hello World</h1> <p>Loaded text:</p> <div id="display"> </div> </body> </html>


    2) В блоке добавьте загрузку файла AIRAliases.js

    Для доступа к функциям API можно использовать длинные вызовы. Например:
    var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");
    .

    Но в файле AIRAliases.js хранятся укороченные алиасы для более удобного вызова функций. Например, тот же вызов:
    var textFile = new air.File("app:/textfile.txt");

    3) Сразу после загрузки AIRAliases.js добавьте блок с функцией appLoad:

    <script type="text/javascript">
    function appLoad(){
        air.trace("Hello World");
        //чтение файла
        var textFile = new air.File("app:/textfile.txt");
        if(textFile.exists){
            var textStream = new air.FileStream();
            textStream.open(textFile, air.FileMode.READ);
            if(textStream.bytesAvailable > 0){
                  var fileText = textStream.readUTFBytes(textStream.bytesAvailable);
                textStream.close();
                air.trace("Чтение текста: " + fileText);
        
                //Создаем 'p' элемент для текста
                  var displayDiv = document.getElementById('display');
                var paragraph = document.createElement('p');
                var textNode = document.createTextNode(fileText);
                paragraph.appendChild(textNode);
                displayDiv.appendChild(paragraph);
            } else {
                air.trace("Файл пустой.");
            } 
        } else {
            air.trace("Файл не найден.");
        }
    } 
    </script>
    


    Эта функция использует метод air.trace(""); для вывода сообщений на консоль когда вы будете запускать программу через ADL, которая подходит для тестирования.

    Чтение файла состоит из трех частей:
    • Определяем объект File
      var textFile = new air.File("app:/textfile.txt");
    • Открывает FileStream с помощью нашего файла
      textStream.open(textFile, air.FileMode.READ);
    • Читаем данные из потока
      var fileText = textStream.readUTFBytes(textStream.bytesAvailable);


    Остальные функции стандартны и используются для вставки текста на страницу.

    Готовый файл должен быть примерно таким:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <html>
    <head>
        <title>Hello World</title>
        <script type="text/javascript" src="AIRAliases.js"></script>
        <script type="text/javascript">
        function appLoad(){
            air.trace("Hello World");
            //чтение текстового файла
            var textFile = new air.File("app:/textfile.txt");
            if(textFile.exists){
                var textStream = new air.FileStream();
                textStream.open(textFile, air.FileMode.READ);
                if(textStream.bytesAvailable > 0){
                    var fileText = textStream.readUTFBytes(textStream.bytesAvailable);
                    textStream.close();
                    air.trace("Text read: " + fileText);
            
                    //создаем 'p' элемент для текста
                    var displayDiv = document.getElementById('display');
                    var paragraph = document.createElement('p');
                    var textNode = document.createTextNode(fileText);
                    paragraph.appendChild(textNode);
                    displayDiv.appendChild(paragraph);
                } else {
                    air.trace("Файл пустой.");
                } 
            } else {
                air.trace("Файл не найден.");
            }
      } 
      </script>
    </head>
    <body onLoad="appLoad();">
        <h1>Hello World</h1>
        <p>Текст:</p>
        <div id="display"></div>
    </body>
    </html>
    



    Создаем текстовый файл

    Создаем текстовый файл и называем его textfile.txt. Добавим в него немного текста и сохраним.

    Тестирование приложения

    Для тестирования нам понадобится утилита ADL (AIR Debug Launcher). Она находится в папке bin в директории с SDK.

    Запустите консоль. Перейдите в вашу папку с примером. Затем выполните команду для запуска:
    adl HelloWorld-app.xml Скорее всего вы получите ошибку что утилита adl не найдена, тогда вам следует прописать полный путь к ней или добавить в системные пути папку "Путь к SDK"/bin .

    Вот что получилось у меня:

    Image Hosted by ImageShack.us

    Создание установочного файла

    После проверки нашего приложения мы можем создать установочный пакет для публикации.
    Установочный пакет должен быть подписан сертификатом. Для тестирований можно использовать свой сертифика, который можно сгенерировать специальной утилитой. Для продажи можно купить сертификаты подписанные VerySign или Thawte. В нашем случае когда пользователь устанавливает приложение, он видит что "издатель" не указан.

    1) Генерируем наш сертификат:

    adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

    2) Создаем установочный пакет:

    adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air HelloWorld-app.xml HelloWorld.html AIRAliases.js textfile.txt

    Введите пароль (samplePassword)

    HelloWorld.air это имя нашего пакета.

    Все, пакет создан. Теперь вы можете поделиться им с друзьями. Установка проста, просто дважды кликните по файлу. Не забудьте что для установки требуется AIR Runtime!

    P.S. Это мой первый перевод и первый топик на Хабре. Сразу указывайте ошибки! И сели кто знает, как можно убрать лишние переводы строки в блоках с кодом?
Tags:
Hubs:
+11
Comments 38
Comments Comments 38

Articles