В этот раз рассмотрим более детально структуру приложения для WebOS. В SDK есть достаточное количество дополнительных утилит, кторые могут помочь сгенерировать приложение или сцену. Но, при использовании автоматических кодогенераторов, понимания того, как же всетаки устроен проект, не прибавляется. Если кодогенератор отработает некорректно по какой-либо причине, без знания структуры проекта вернуть все в рабочее состояние будет непросто.

Для начала сделаем вот что: создадим пустой проект. В Eclipse идем в File -> New -> Other, в диалоговом окне выбираем General -> Project. Далее в мастере указываем имя проекта и путь, где он будет создан.

Создаем файл описания приложения

Создаем пустой файл в проекте, называем его appinfo.json

{
	"id": "com.itdimension.manuallycreatedwebosproject",
	"version": "1.0.0",
	"vendor": "Mobile-Developer.ru",
	"type": "web",
	"main": "index.html",
	"title": "Manually Created Project",
	"icon": "icon.png"
}

В этом файле указаны:

  • id – уникальный идентификатор приложения
  • version – версия приложения
  • vendor – название производителя
  • type – тип проекта
  • main – начальная страница приложения
  • title – название проекта (оно будет использовано для отображения в списке установленных  приложений WebOS)
  • icon – иконка приложения (также будет использоваться при отображении в Launcher’е)

Как видно, файл настроек приложения содержит упоминание двух файлов – файла главной страницы, а также иконки приложения. Узнать больше о параметрах, которые можно указать в appinfo.js можно здесь. Интересным также является тот факт, что кроме web-приложений можно создавать и нативные приложения. Для таких приложений свойство type будет иметь значение native.

Создаем файл главной страницы

В проекте Eclipse создаем новый html-файл, называем его index.html.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>CameraTest</title>
	<script 
		src="/usr/palm/frameworks/mojo/mojo.js" 
		type="text/javascript" x-mojo-version="1" />
	<link
		href="stylesheets/cameratest.css" 
		media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
	<h2>Manually Created Project</h2>
</body>
</html>

Если в приложении будут использоваться нестандартные CSS-стили элементов управления, то они должны быть указаны обязательно ПОСЛЕ ссылки на mojo.js.

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

Для создания пакета в Palm Mojo SDK есть скрипт palm-package. Нам достаточно скормить этому скрипту путь к папке с проектом и на выходе получим .ipk файл с приложением.

palm-package ManuallyCreatedWebOSProject

В результате выполнения этой команды у нас должен получиться файл com.itdimension.manuallycreatedwebosproject_1.0.0_all.ipk
Для того чтобы загрузить пакет на эмулятор необходимо вызвать скрипт palm-install и скормить ему .ipk файл

D:\Projects\Eclipse Projects>palm-install com.itdimension.manuallycreatedwebosproject_1.0.0_all.ipk

После этого в эмуляторе запускаем Launcher и видим в нем наше приложение.
WebOS Manually Created Application in Launcher
После запуска приложения получим вот такой экран:
WebOS Manually Created App
Теперь надо бы сделать так, чтобы в нашем приложении кроме главной страницы было еще что-нибудь.

Создаем сцену

Для начала надо создать структуру каталогов:

  • app
    • assistants – в ней юудут находиться js-файлы, содержащие логику управления сценами
    • views – в ней будут содержаться html-файлы сцен

В WebOS-приложении есть понятие “stage” – окно и “scene” – панель в окне. Для каждой сущности нужен свой assistant-класс с обработчиками событий.

stage-assistant.js

function StageAssistant() {
}

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

Как видим, в конструкторе assistant-класса мы отображаем сцену с именем main. Теперь создадим саму сцену:

В папке views создаем папку main и в ней файл main-scene.html

<div id="main" class="palm-hasheader">
    <div class="palm-header">Camera Test</div>
    <div id="MyButton" x-mojo-element="Button"></div>
</div>

В папке assistants создаем main-assistant.js

function MainAssistant() {
}

MainAssistant.prototype.setup = function() {
	this.controller.setupWidget("MyButton", {}, {label:"My Button"});
}

Теперь создадим файл sources.json, в котором будут регистрироваться файлы с assistant-классами.

[
    {"source": "app\/assistants\/stage-assistant.js"},
    {
        "source": "app\/assistants\/main-assistant.js",
        "scenes": "main"
    }
]

В результате после запуска приложения получим такой пользовательский интерфейс:
WebOS Manually Created Scene

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

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

Leave a Reply

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

В.

Впечатления от вебкаста по Palm webOS

Palm PreПоучаствовал в вебкасте по разработке для Palm webOS.

Как это было? Это было ммм.. довольно странно. Видео тормозило просто жутчайшим образом, а звука вобще не было. Вернее вместо этого был только шум. Как вариант предлагалось позвонить по телефону и послушать таким образом о чем там идет речь, но… как-то межлународный звонок в течении часа.. ну не каждый осилит.

Но в общем ладно. Теперь о хорошем. Как-то так постараюсь тезисно свое мнение изложить:

  1. Palm OS это прикольно. 😉
  2. Т.к. приложения пишутся на JavaScript, то для разоаботки GUI кроме текстового редактора ничего не нужно.
  3. В вебкасте чудо-человек разработчик демонстрировал все под Mac OS но т.к. JavaScript отрабатывает на клиенте, то писать можно и под Windows и под Linux
  4. JavaScript как и реньше не имеет доступа к системным ресурсам, зато для этого предусмотрен серверный функционал. Для получения, например, данных о GPS координатах из JavaScript выполняется запрос к локальному Web-сервису (URL начинается как-то так с “palm://…”, целиком не запомнил)
  5. Архитектура приложения на вид напоминает MVC. В подробности особо не вдавались, вебкаст короткий.
  6. Форматирование и GUI-контролы реализуются с помощью предустановленных CSS-стилей. На вид выглядит довольно аккуратно и юзабельно.
  7. SDK будет включать (по крайней мере по обещаниям) какое-то подобие веб-сервера, реализующего эмуляцию серверной части API для webOS (тех веб-сервисов, которые доступны в самой OS и которые можно использовать из JS).
  8. Не очень понятно пока каким образом можно реализовывать свой серверный функционал (т.е. например какой-нибудь сервис, который могут дергать все приложения, запущенные на устройстве, это пока загадка).
  9. Не очень понятно как поучаствовать в закрытом бета-тестировании SDK (оно пока не доступно для широкой общественности).
  10. Записанный вариант вебкаста обещали выложить (не знаю пока, в публичном доступе или только для участников) и прислать адрес в почту. Если пришлют, обязательно выложу информацию здесь на сайте.

Ну вот как-то так. Жаль, конечно, что из-за недостаточного качества организации мероприятия не получилось узнать больше, но тема сама по себе очень интересная.

К.

Как сделать телефонный звонок из приложения в 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

На этом все.

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