Реклама показывается только незарегистрированным пользователям. Вход или Регистрация

Пишем первое приложение и создаем проект своими руками

Здесь выкладываются готовые статьи и рабочие исходники, решения каких-либо задач или советы

Пишем первое приложение и создаем проект своими руками

Сообщение Архивариус » 31 июл 2010, 10:40

В этом материале будет более подробно рассмотрена структура приложения для 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-приложений можно создавать и "родное" (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
webos-manually-created-app-in-launcher.jpg (22.25 КБ) Просмотров: 10795


После запуска приложения получим вот такой экран:

webos-manually-created-app.jpg
webos-manually-created-app.jpg (9.38 КБ) Просмотров: 10795


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

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

Для начала надо создать структуру каталогов:
  • 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
webos-manually-created-app-scene.jpg (10.12 КБ) Просмотров: 10795


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

Источник: http://mobile-developer.ru/webos/pishem ... kt-rukami/
Если наш форум помог вам выбрать телевизор - напишите отзыв о покупке.
Архивариус

 
Сообщения: 3198
Зарегистрирован: 29 июл 2010, 16:22
Благодарил (а): 285 раз.
Поблагодарили: 376 раз.
Телевизор: LG 55UB950 24MT57S

Вернуться в Статьи, исходники и примеры



 


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0