Создаём Ваше первое webOS приложение

Мар 06
2011

zxcatUncategorized HelloWorld, HTML, JavaScript, Palm, webOS, перевод, уроки 6 комментариев

Разбирал webOS, решил перевести вводную статью с сайта developer.palm.com. Перевод местами вольный.

В данной статье будет показано, как создать Ваше первое приложение для HP webOS. Вместо показа традиционного «Hello, World!», мы создадим простой счётчик, подсчитывающий число нажатий на кнопку. По завершении урока вы будете знакомы с такими понятиями, как сцены* (stages), экраны* (scenes), помощники* (assistants), и с другими важными понятиями webOS.

* С русской терминологией «пальмоводов» не знаком, так что переводил, как пришло в голову. Scene с третьей попытки перевёл как «экран», вроде бы отражает суть и не конфликтует. Быть может в терминах театра лучше перевести: тут и сценарии (scripts), и помост (сцена), и сцены («явления»), и ассистенты.

Перед тем как вы начнёте

Этот урок поможет вам собрать простое webOS приложение и удостовериться, что ваши средства разработки настроены и работают как надо. Предполагается, что вы знакомы с JavaScript и HTML. Если же вы только начинаете изучение HTML и JavaScript, можете ознакомиться со следующим списком ссылок для новичков (англ), подготовленным для вас. Или лучше в поиске русские аналоги поищите.

Перед тем, как мы начнём написание первого webOS приложения, установите HP webOS SDK. В webOS SDK входят несколько консольных утилит, предназначенных для создания, упаковки, установки и отладки приложений, которые вы будете писать. На странице установки также описано, как скачать виртуальную машину Oracle® VirtualBox™, необходимую для эмуляции Palm webOS устройства.

Ознакомьтесь с описанием эмулятора и убедитесь, что знаете, как запустить приложение на эмуляторе через Пуск (список программ, Launcher). (Чтоб открыть Пуск нажмите на иконку со стрелкой в правом нижнем углу главного экрана webOS). Эмулируемое устройство работает практически идентично реальному, но для набора используется клавиатура компьютера, а для «жестов» — мышь. Жест «назад» («back») можно быстро вызвать клавишей «Esc».

Создавать webOS приложения можно используя только лишь консольные утилиты HP  и свой любимый текстовый или Веб-редактор. Либо же использовать Eclipse™ с плагином webOS, это упростит отладку, упаковку, установку и запуск webOS приложений.

Структура каталога приложения

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

(Если вы используете Eclipse с webOS SDK плагином, просто выберете File > New > Mojo Application. Введите «HelloWorld» в качестве названия проекта (project name) и заголовка (title). Остальные поля можно оставить без изменения, нажмите кнопку «Finish» для содания каркаса приложения.)

Подготовка структуры каталога приложения

1. Откройте командную строку и перейдите в каталог, где будут храниться ваши приложения.
2. Из этого каталога выполните следующую команду (обратите внимание на одинарные и двойные кавычки):

palm-generate -p "{title:'Hello World', id:com.mystuff.hello, version:'1.0.0'}" HelloWorld

В результате будет создана папка HelloWorld, рассмотрим её содержимое:

• папка app — содержит помощники (assistants), модели (models), и виды (views), составляющие приложение. Позже вы добавите сюда файлы.
• папка images — любые картинки, используемые приложением.
• папка stylesheets — содержит файлы CSS стилей приложения.
• appinfo.json — файл информации о приложении.
• icon.png — иконка, обозначающая приложение в списке программ.
• index.html — главная сцена (stage) приложения, на которой показываются экраны (scenes).
• sources.json — список исходных файлов для каждого экрана (scene).

Более подробно организация каталога рассмотрена на странице Application Structure (англ).

Информация о приложении

Файл appinfo.json предоставляет информацию, используемую SDK для сборки (package) и запуска приложения. Расмотрим содержимое appinfo.json:

{
  "id": "com.mystuff.hello",
  "version": "1.0.0",
  "vendor": "My Company",
  "type": "web",
  "main": "index.html",
  "title": "Hello World",
  "icon": "icon.png"
}

Обратите внимание на параметры id и vendor, которые будут нужны, когда вы будете собирать и подписывать приложения для запуска на реальных устройствах.

Подготовка Сцены (Stage)

Сцена — это платформа, на которой строится пользовательский интерфейс вашего приложения. Как правило, сцена соотносится с простой картой (card) или с окном приложения. Большинство простых приложений содержат единственную сцену в файле index.html. Приложение, позволяющее пользователю одновременно выполнять более одного действия, может потребовать создания нескольких сцен. Примером может быть почтовый клиент, в одной сцене показывающий Входящие письма, а для написания нового письма запускающий другую сцену. Приложения-уведомления и фоновые приложения могут вообще обходиться без сцен.

Рассмотрим содержимое файла index.html:

<!DOCTYPE html>
<html><head>
    <title>Hello World</title>
    <script src="/usr/palm/frameworks/mojo/mojo.js type="text/javascript" x-mojo-version="1"></script>
    <!-- стили приложения должны загружаться после загрузки framework -->
    <link href="/stylesheets/helloworld.css" media="screen" rel="stylesheet" type="text/css">
</head></html>

Как видно, index.html — это обычная HTML страница, содержащая тэг <script>, который подключает SDK framework, необходимый для  webOS приложений. Хотя наше приложение сейчас почти ничего не делает, самое время проверить его в эмуляторе.

Запуск эмулятора

В зависимости от вашей операционной системы, выполните:

• Linux: в командной строке наберите palm-emulator.
• Mac: даблклик на иконке Emulator в папке приложений (Applications folder).
• Windows: выполните Пуск > Все программы > Palm > SDK > Emulator.

Запуск приложений в эмуляторе

Если вы используете webOS плагин к Eclipse, вы можете запустить приложение через меню. Вызовите Run > Run Configurations…, затем выберите «Palm Emulator». При следующих запусках воспользуйтесь Run > Run As… > Mojo Application. Eclipse автоматически собирает, пакует, устанавливает и запускает приложение. Используя Eclipse, вам не нужно удалять (uninstall) приложение перез повторным запуском.

Если вы используете командную строку, то для запуска приложения используйте консольные утилиты webOS, входящие в SDK.

Этот раздел включает описание следующих действий:

• Сборка и установка приложения на эмулятор
• Запуск приложения в эмуляторе из командной строки
• Закрытие приложения в эмуляторе из командной строки
• Удаление приложение из эмулятора

Примечания:

• В инструкции используется пример «Hello, World!». Для своих приложений надо будет поменять некоторые параметры.
• Рабочая папка приложения «workspace directory» содержит все файлы и каталоги приложения.
• Изменения, сделанные при разработке и отладке могут не появиться пока предыдущая версия не будет удалена и заменена установкой заново собранного обновлённого приложения.
• Установка новой версии приложения не удаляет никакие исходные файлы, этой версией не используемые. Поэтому при тестировании полезно удалять старую версию перед установкой новой.

Для каждого из следующих действий необходимо:

1. Запустить эмулятор. (Если он уже не запущен).
2. Используя Командую строку перейти в вашу рабочую папку (workspace directory).

Сборка и установка приложения на эмулятор

1. Используйте команду palm-package как показано ниже, чтоб собрать дистрибутив приложения из каталога, в котором расположены его исходные файлы:

   palm-package HelloWorld

2. Для установки получившегося файла .ipk в эмулятор используйте команду palm-install как показано ниже. (Обратите внимание: если вы используете реальное webOS устройство подключенно через USB, а не эмулятор, данная команда установит приложение на ваше устройство, если на нём включен режим разработчика Developer Mode. Подключая устройство к компьютеру для загрузки приложения, выберите режим «Just Charge».)

   palm-install com.mystuff.hello_1.0.0_all.ipk

Запуск приложения в эмуляторе из командной строки

1. Используйте команду palm-launch следующим образом:

   palm-launch com.mystuff.hello

Закрытие приложения в эмуляторе из командной строки

1. Используйте команду palm-launch следующим образом:

   palm-launch -c com.mystuff.hello

Удаление приложение из эмулятора

1. Используйте команду palm-install следующим образом:

   palm-install -r com.mystuff.hello

После того, как вы соберёте и установите приложение Hello World в эмулятор, запустите его с помощью командной строки или из эмулятора, выбрав Launcher > Hello World (иконка по умолчанию — серп луны). На экране появится нечто похожее на скриншот.

За более подробной информацией о работе эмулятора обратитесь в раздел Emulator (англ.).

Создание Экрана (Scene)

Экран — это оформленный экран, показывающий пользователю определённую информацию или задачу. Каждый экран имеет вид (view) и «помощника» (assistant). Вид определяет разметку и внешний вид кадра. Помощник — его поведение. Некоторые экраны также имеют модели (models), предоставляющие данные.

Команду palm-generate можно использовать для создания экранов и помощников. Она также добавляет в файл sources.json строчки, необходимые для связи экранов и помощников. Создадим экран с именем «first», который будет включать следующие файлы:

• /app/assistants/first-assistant.js — помощник.
• /app/views/first/first-scene.html — вид.
• sources.json — этот файл теперь содержит информацию в формате JSON, связывающую first-assistant.js с первым экраном.

Создание и редактирование первого экрана

1. Используйте команду palm-generate следующим образом:

   palm-generate -t new_scene -p "name:first" HelloWorld

   Эта команда создаст файлы first-assistant.js и first-scene.html.

2. Откройте файл first-scene.html в редакторе и замените его содержимое следующими строками:

<div id="main" class="palm-hasheader">
     <div class="palm-header">Заголовок</div>
     <div id="count" class="palm-body-text">0</div>
     <div id="MyButton" name="MyButton1" x-mojo-element="Button"></div>
</div>

Для того, чтобы показать экран, вы должны сказать сцене «вытолкнуть» («push») этот экран. В следующем разделе мы этим и займёмся.

Помощник сцены

У сцены, также как и у вида, есть помощник. В нашем простом приложении единственная задача помощника сцены — «вытолкнуть» экран, сделав его видимым. Помощник сцены — это файл с именем stage-assistant.js, расположенный в папке помощников (assistants), и содержащий два метода:

• StageAssistant() — конструктор.
• setup(), который вызывается при запуске сцены и выталкивает первый экран.

Выталкиваем экран приложения

1. Откройте в текстовом редакторе stage-assistant.js.
2. Отредактируйте StageAssistant.prototype.setup следующим образом:

StageAssistant.prototype.setup = function() {
     this.controller.pushScene("first");
};

Теперь у приложения есть сцена и экран. Напишем немного кода в помощнике, чтобы появился и какой-то функционал.

Пишем код

Наконец настало время вдохнуть жизнь в наше приложение, добавив код в помощник для первого экрана. Чтобы кнопка первого экрана функционировала, необходимо добавить её обработчик. Эта новая функция обновляет текст каждый раз, когда пользователь нажимает на кнопку.

Добавим функцию-обработчик для кнопки

1. Откройте файл first-assistant.js.
2. Добавьте следующую функцию:

FirstAssistant.prototype.handleButtonPress = function(event){
  // увеличиваем на 1 значение переменной total и обновляем отображение
     this.total++;
     this.controller.get("count").update(this.total);
};

После регистрации обработчика как приёмника (listener) события касания (Tap) для кнопки , framework будет вызывать обработчик при каждом нажатии на кнопку. Обработчик должен быть связан с помощником экрана, чтобы когда framework вызывает обработчик, последний имел доступ к экрану и его объектной модели DOM. В противном случае по умолчанию обработчик связывается с вызывающим объектом, что ничего не даёт. Необходимо выполнить два шага:

• связать обработчик с помощником экрана при помощи функции bind(this)
• зарегистрировать обработчик в качестве приёмника функцией Mojo.Event.listen()

Связывание и регистрация обраотчика

1. Откройте файл first-assistant.js.
2. Отредактируйте функцию setup следующим образом:

FirstAssistant.prototype.setup = function() {
  // задаём начальное значение переменной total и показываем его
     this.total = 0;
     this.controller.get("count").update(this.total);
  // локальный объект с атрибутами будущей кнопки
     this.buttonAttributes = {};
  // локальный объект с моделью кнопки
     this.buttonModel = {
     "label" : "ЖМИ МЕНЯ",
     "buttonClass" : "",
     "disabled" : false
     };
  // настройка кнопки
     this.controller.setupWidget("MyButton", this.buttonAttributes, this.buttonModel);
  // связываем кнопку с её обработчиком
    Mojo.Event.listen(this.controller.get("MyButton"), Mojo.Event.tap,
        this.handleButtonPress.bind(this));
};

Заключение

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

Когда вы запустите приложение, оно будет показывать, сколько раз вы нажади на кнопку. Если вы не видите такую картинку, значит необходимо оладить приложение — где-то ошибка. Обычно это опечатки или неверный регистр букв. После отладки для нормальной работы прилождения необходимо удалить предыдущую версию, а затем пересобрать и переустановить обновлённую.

Что дальше

• Более подробно структура приложений webOS описана в Application Basics (англ.).
• Примеры кода есть в Samples (англ.).
• Информацию о виджетах webOS смотрите в Widgets (англ.).

Обновление: webOS больше не существует, ссылки могут не работать. На смену есть пришла Open_webOS.