В этот раз мы рассмотрим способ создания окна-заставкои (Splash Screen) для WebOS-приложений. Заставка, хотя и не несет функциональной роли в приложении, может быть очень полезна для привлечения пользователей, ведь это именно то, что пользователь видит при запуске вашего приложения. Кроме того, на splash screen’е можно разместить, например, индикатор загрузки или еще какую-нибудь полезную (например с маркетиноговой точки зрения) информацию.Для того, чтобы сделать ЭТО создадим новый проект и в нем две сцены – main и splash.
app/views/main/main-scene.html

<div id="ExitButton" x-mojo-element="Button"></div>

app/assistants/main-assistant.js

function MainAssistant() {
}

MainAssistant.prototype.setup = function() {
    this.controller.setupWidget("ExitButton", {}, {label:"Exit"});
    Mojo.Event.listen($(ExitButton), Mojo.Event.tap, this.onExit.bind(this));
    this.controller.stageController.pushScene("splash");
}

MainAssistant.prototype.onExit = function(event) {
    this.controller.stageController.getAppController().closeAllStages();
    window.close();
}

MainAssistant.prototype.cleanup = function(event) {
    Mojo.Event.stopListening($(ExitButton), Mojo.event.tap, this.onExit);
}

app/assistants/stage-assistant.js

function StageAssistant() {
}

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

Stage Assistant просто запускает сцену main.

Главная сцена содержит одну кнопку, нажав которую можно выйти из приложения. При инициализации сцены мы отображаем сцену splash.

Но если мы все оставим как есть, то вместо рабочего приложения получим просто пустую сцену (т.к. сцена splash, которая автоматически становится активной, не содержит никаких виджтов. Будем это исправлять.

Создадим изображение размером 320×480, назовем его splash.jpg и положим его в папку images нашего проекта.

Теперь в CSS-файле проекта пропишем следующее:
stylesheets/splashscreentest.css

body.splash {
    position: absolute;
    top: 0;
    left: 0;
    height: 454px;
    width: 320px;
    background: url(../images/splash.jpg) no-repeat;
    z-index: 100;
}

В этом CSS-файле для класса splash мы указываем фоновое изображение. Для того чтобы это фоновое изображение было отображено на сцене splash, нам надо добавить CSS-класс splash к тегу body сцены.

app/assistants/splash-assistant.js

function SplashAssistant() {
}

SplashAssistant.prototype.setup = function() {
    $$('body')[0].addClassName('splash');
    this.splashTimer = setTimeout(this.removeSplashScreen.bind(this), 4000);
}

SplashAssistant.prototype.removeSplashScreen = function() {
    this.controller.stageController.popScene();
    clearTimeout(this.splashTimer);
}

SplashAssistant.prototype.deactivate = function(event) {
    $$('body')[0].removeClassName('splash');
}

В assistant-классе сцены splash при инициализации мы добавляем класс splash к тегу body, а при деактивации сцены удаляем этот класс из тега body. Также, при инициализации мы запускаем таймер, в обработчике собфтия для этого таймера закрываем сцену.

В результате у нас получается такое:

WebOS Create Splash Screen

Скачать исходный код примера.

Previous ArticleNext Article
Технический директор IT-Dimension, компании-разработчика кросс-платформенного программного обеспечения

Leave a Reply

Your email address will not be published. Required fields are marked *

О.

Обзор инструментов, входящих в состав WebOS SDK

Эта статья посвящена вопросам использования инструментов, входящих в состав Palm® Mojo™ SDK.

При создании приложения для Palm WebOS, используется такая последовательность действий:

WebOS Application Development Workflow

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

  • palm-generate — Для генерирования сцен и приложений
  • palm-package — Для создания инсталляционного пакета, который можно установить на устройство или в эмулятор
  • palm-install —Для установки пакетов на устройство или в эмулятор
  • palm-launch — Для удаленного запуска приложений на устройстве или в эмуляторе
  • worm.jar — Для профилировки приложений

palm-generate

Этот скрипт используется для создания приложений и сцен

Синтаксис вызова утилиты:

palm-generate options

Доступны следующие параметры запуска:

Опция Описание
-f
–overwrite
Перезаписывать существующие файлы
-l
–list
Вывести список доступных шаблонов.
-p {property}
–property={property}
Определяет свойства генерируемого шаблона. Параметр {property} содержит JSON-объект или пары ключ-значение в формате “ключ=значение”. В обоих случаях необходимо заключение значения в кавычки. Кроме того, если в значениях есть пробелы, то эти значения должны быть заключены в одинарные кавычки.
-t {template}
–template={template}
Указывает на необходимость использования шаблона {template}. Если этот параметр не указан, то по умолчанию будет генерироваться новое приложение – шаблон new{{_app}}.
–help Вывод справочной информации.
Примеры использования

Сгенерировать проект с названием “Sample Application” в папке ~/projects/SampleApp

palm-generate -p "title=Sample Application" ~/projects/SampleApp

Создать новое приложение и указать название, уникальный идентификатор и версию

palm-generate -p "{title:'Super Application', id:com.mystuff.superapp, version:'1.1'}" ~/projects/SuperApp

Добавить новую сцену с названием First в приложение HelloWorld

palm-generate -t new_scene -p "name=First" ~/projects/HelloWorld

palm-package

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

Синтаксис вызова:

palm-package [options ] application-directory

Доступные опции:

Опция Описание
-o {directory}
–outdir={directory}
Каталог, в котором должен быть создан .ipkg файл. Если эта опция не задана, то установочный пакет приложения будет создан в текущем каталоге.
–exclude={pattern} Исключает из обработки файлы, которые подпадают под описание {pattern}. Шаблон {pattern} может также содержать символы * и ?. Значение шаблона чувствительно к регистру если не указана опция –ignore-case.
-X {pattern_file}
–exclude-from={pattern_file}
Исключает из обработки файлы, названия которых совпадают с любым из шаблонов, указанных в параметре {pattern_file}. В файле {pattern_file} указываются шаблоны названий файлов, по одному в каждой строке. Шаблоны названий файлов могут содержать символы * и ?. Значение шаблона чувствительно к регистру если не указана опция –ignore-case.
–ignore-case Указыват что регистр символов в названиях файлов должен быть проигнорирован.
–no-exclude-eclipse По умолчанию, файлы проектов Eclipse исключаются из обработки. Если нужно их включить в инсталляционный пакет, используется эта опция.
–no-exclude-hidden По умолчанию, скрытые файлы исключаются из обработки. Если нужно их включить в инсталляционный пакет, используется эта опция.
–no-exclude-vcs По умолчанию, файлы и каталоги, необходимые для работы систем контроля версий, исключаются из обработки. Если нужно их включить в инсталляционный пакет, используется эта опция.
–help Выводит справочную информацию.
Примеры использования

Создать приложение HelloWorld

palm-package ~/projects/HelloWorld

Создать приложение Sample но исключить из дистрибутива текстовые файлы и папку docs.

palm-package --exclude="*.txt" --exclude="docs" ~/projects/Sample

palm-install

Эта утилита устанавливает приложения в эмулятор или на устройство. Нельзя установить приложение если устройство находится в режиме синхронизации (Media Sync mode). Если приложение устанавливается на устройство, то устройство должно находиться в режиме Developer Mode (см. ниже)

Синтаксис вызова:

palm-install [options] [package]

Доступные опции:

Опция Описание
-d {device}
–device={device}
Указывает устройство, на которое должна производиться установка приложения:

  • tcp – эмулятор.
  • usb – устроство.
    Если эта опция не указана, то программа будет установлена на первое найденное устройство.
-l
–list
Выдает список приложений, установленных на устройстве.
-r {application}–remove {application} Удаляет приложение, уникальный идентификатор которого соответствует параметру {application}.
–help Выводит справочную информацию.
Примеры использования

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

palm-install ~/projects/packages/com.example.app_1.0_all.ipk

Удалить приложение

palm-install -r com.example.app

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

palm-install -d tcp -l

palm-launch

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

Синтаксис вызова:

palm-launch [options] {application}

{application} – уникальный идентификатор приложения

Доступные опции:

Опция Описание
-c
–close
Закрывает приложение вместо запуска.
-d {device}
–device={device}
Устройство:

  • tcp – эмулятор.
  • usb – устроство.
    Если эта опция не указана, то программа будет установлена на первое найденное устройство.
-f
–relaunch
Перезапускает приложение.
-i Запускает приложение в Inspector.
-l
–list
Выводит список установленных приложений.
-p {parameters}–params={parameters} Указывает параметры запуска. Значение {parameters} содержит JSON-объект или пары ключ-значение в формате “ключ=значение”. В обоих случаях необходимо заключать все в двойные кавычки.
–help Выводит справочную информацию.
Примеры использования

Запустить приложение

palm-launch com.example.app

Запустить приложение в режиме отладки

palm-launch -p "{mojoConfig:true, debuggingEnabled:true}" com.example.app

Включение Developer Mode

  1. В Card view или в Launcher ввести текст:
    upupdowndownleftrightleftrightbastart
  2. Нажать на иконку Developer Mode Enabler.
  3. В приложении установить значение слайдера Developer Mode в позицию On.
  4. Нажать Reset the Device.

После перезагрузки режим Developer Mode будет включен.

Д.

Доступно Palm WebOS SDK v1.4

Вышла новая версия инструментария разработки приложений для Palm WebOS.

В новой версии:

  • Эмулятор теперь работает с WebOS 1.4
  • В эмуляторе Location Services теперь включены по умолчанию
  • В API для камеры добавлена возможность инициировать запись видео
  • Утилита palm-generate теперь может создавать два типа приложений и два типа сцен

Посмотреть полный список изменений в WebOS SDK v1.4

Руководство по переводу приложений с API v1.3.5 до API v1.4