В 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-приложений можно создавать и "родное" (native) приложение. Для таких приложений свойство 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-app-in-launcher.jpg (22.25 КБ) Просмотров: 21318
После запуска приложения получим вот такой экран:
- webos-manually-created-app.jpg (9.38 КБ) Просмотров: 21318
Теперь надо бы сделать так, чтобы в нашем приложении помимо главной страницы было еще что-нибудь.
Создаем сцену
Для начала надо создать структуру каталогов:
- 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-app-scene.jpg (10.12 КБ) Просмотров: 21318
Скачать исходный код примера.
Источник: http://mobile-developer.ru/webos/pishem ... kt-rukami/