В этот раз мы рассмотрим способ создания окна-заставкои (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 *

P.

Plug-In Development Kit (PDK) для Palm WebOS доступно для скачивания

Инструментарий для разработки native-приложений для Palm WebOS – Plug-In Development Kit (PDK) доступен для загрузки. PDK позволяет писать приложения для WebOS, используя C++ и OpenGL ES, а также разрабатывать компоненты WebOS-приложений на С++.
С выходом этого инструментария для разработчиков открывается ну просто немерянное поле для творчества. Ведь на C++ можно сделать кучу всего полезного, чего [еще] нельзя сделать средствами JavaScript. 3D-игры, например. И вобще игры с хорошей графикой. Я уже думаю над чем-то подобным.

В общем, Качаем PDK для Palm WebOS и знакомимся с официальной документацией.

К.

Как сделать телефонный звонок из приложения в Palm WebOS

Для того чтобы сделать телефонный звонок из приложения в Palm WebOS есть только один способ – вызвать приложение Phone (стандартную звонилку) с помощью Application Manager. Пользователь обязательно должен подтвердить выполнение звонка, нажав кнопку дозвона. Выполнить звонок без подтверждения, возможности нет.

В API предусмотрена возможность запуска приложения дозвона с предварительной установкой телефонного номера, а также возможность запуска без установки параметров. Как использовать это API – смотрим ниже:

Для начала создадим приложение и в нем сцену с названием Call. Как создать приложение и сцену в нем, можно узнать здесь.

app/views/call/call-scene.html

<div class="palm-group">
  <div class="palm-group-title">Phone number</div>
  <div class="palm-row">
    <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
      <div class="title">
        <div class="label">Number</div>
        <div id="PhoneNumber" x-mojo-element="TextField"></div>
      </div>
    </div>
  </div>
</div>
<div id="DialerButton" x-mojo-element="Button"></div>
<div id="CallButton" x-mojo-element="Button"></div>
<div id="ExitButton" x-mojo-element="Button"></div>

Наша сцена содержит группу, в которой находится текстовое поле, а также три кнопки:

  • Кнопку запуска приложения дозвона без параметров
  • Кнопку запуска приложения дозвона с предустановленным номером (для завершения звонка необходимо нажать кнопку дозвона)
  • Кнопку для выхода из приложения.

app/assistants/call-assistant.js

function CallAssistant() {
}

CallAssistant.prototype.setup = function() {
    this.controller.setupWidget("PhoneNumber",
    {
        modelProperty: 'originalValue'
    },
    this.phoneNumberTextModel =
    {
        originalValue: ''
    });
    this.controller.setupWidget("DialerButton", {}, {label:"Launch dialer"});
    this.controller.setupWidget("CallButton", {}, {label:"Call"});
    this.controller.setupWidget("ExitButton", {}, {label:"Exit"});
}

После запуска приложение у нас должно получиться что-то подобное:
WebOS Dialer Sample

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

CallAssistant.prototype.handleDialerButton = function(event) {
    this.controller.serviceRequest('palm://com.palm.applicationManager',
    {
        method:'launch',
        parameters:
        {
            id:"com.palm.app.phone"
        }
    });
}

Мы вызываем метод launch сервиса Application Manager и указываем ему уникальный идентификатор приложения дозвона.

Теперь посмотрим как при запуске приложения дозвона можно указать телефонный номер:

CallAssistant.prototype.handleCallButton = function(event) {
    if (this.phoneNumberTextModel.originalValue.length < 7) {
        this.controller.showAlertDialog(
        {
            onChoose: function(value){},
            title: 'Error',
            message: 'Phone number should contain at least 7 digits',
            choices: [{label:'OK'}]
        });
        return;
    }
    this.controller.serviceRequest("palm://com.palm.applicationManager",
    {
        method : 'open',
        parameters:
        {
            target: "tel://" + this.phoneNumberTextModel.originalValue
        }
    });
}

Для начала, перед запуском мы проверяем длину значения в текстовом поле. Если она меньше 7ми символов, то выводим уведомление об ошибке.
Для запуска приложения дозвона мы используем метод open сервиса Application Manager и в качестве параметра скармливаем ему объект, свойство target которого содержит телефонный номер и префикс “tel://”.

Не забываем, также, что для всех кнопок нужно регистрировать обработчики в методе setup() и отключать их в методе сleanup().

CallAssistant.prototype.setup = function() {
...
    Mojo.Event.listen(this.controller.get("DialerButton"),
        Mojo.Event.tap, this.handleDialerButton.bind(this));
    Mojo.Event.listen(this.controller.get("CallButton"),
        Mojo.Event.tap, this.handleCallButton.bind(this));
    Mojo.Event.listen(this.controller.get("ExitButton"),
        Mojo.Event.tap, this.handleExitButton.bind(this));
}

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

CallAssistant.prototype.cleanup = function(event) {
    Mojo.Event.stopListening(this.controller.get("DialerButton"),
        Mojo.Event.tap, this.handleDialerButton.bind(this));
    Mojo.Event.stopListening(this.controller.get("CallButton"),
        Mojo.Event.tap, this.handleCallButton.bind(this));
    Mojo.Event.stopListening(this.controller.get("ExitButton"),
        Mojo.Event.tap, this.handleExitButton.bind(this));
}

После всех проделанных действий, после нажатия на кнопку Call, получим что-то вроде этого:

WebOS Phone Application GUI

На этом все.

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