Очень часто в приложении необходимо передать данные, введенные пользователем, из одной формы в другую. В Palm WebOS для этих целей можно использовать Cookies. API для использования Cookies довольно прозрачно, как и многие другие вещи в WebOS, не требует особых умений.

В этот раз мы рассмотрим пример того, как различные сцены могут обмениваться данными.

Для начала создадим новое приложение, в нем новую сцену с названием Main и еще одну с названием Second. Как создать проект и сцену можно узнать из этой статьи.

Напишем HTML-шаблоны сцен:

views/main/main-scene.html

<div id="main" class="palm-hasheader">
<div class="palm-header">Main</div>
<div id="SecondSceneButton" x-mojo-element="Button"></div>
<div id="ExitButton" x-mojo-element="Button"></div>
<div id="counter" class="palm-body-text"></div>
</div>

views/second/second-scene.html

<div id="main" class="palm-hasheader">
     <div class="palm-header">Second Scene</div>
     <div id="CloseButton" x-mojo-element="Button"></div>
     <div id="valuetext" class="palm-body-text">Unknown value</div>
</div>

Главная сцена состоит из контейнера с заголовком, двух кнопок и текстового поля.
Вторая сцена состоит из контейнера с заголовком, кнопки и текстового поля.
Ничего сверхъестественного. 🙂

Перед тем, как написать логику, стоит ознакомиться со схемой, описывающей жизненный цикл сцены:

WebOS Scene Lifecycle

Из схемы можно узнать, что первым делом вызывается конструктор сцены, затем метод setup(), а когда сцена загрузилась, вызывается метод activate(). Также activate() вызывается при каждом появлении сцены на экране.

Что это нам даст? Посмотрим на пример кода ниже:

MainAssistant.prototype.setup = function() {
  this.controller.setupWidget("SecondSceneButton",
    {}, {label:"Second Scene"});
  this.controller.setupWidget("ExitButton",
    {}, {label:"Exit"});

  Mojo.Event.listen(this.controller.get("SecondSceneButton"),
    Mojo.Event.tap,
    this.handleSecondSceneButton.bind(this));
  Mojo.Event.listen(this.controller.get("ExitButton"),
    Mojo.Event.tap,
    this.handleExitButton.bind(this));

  this.counter = 0;
  this.counterCookie = new Mojo.Model.Cookie("counterCookie");
  this.counterCookie.put(this.counter);
}

MainAssistant.prototype.activate = function(event) {
  this.counter = this.counterCookie.get();
  this.controller.get("counter").update(this.counter);
}

MainAssistant.prototype.cleanup = function(event) {
  this.counterCookie.remove();
}

В методе setup() мы создали переменную counter, поместили ее в Cookie с названием counterCookie, а в методе activate() мы берем значение из Cookie и отображаем в текстовом поле. И каждый раз, когда форма будет активизироваться, в текстовом поле будет появляться актуальное значение из Cookie.
Метод cleanup() вызывается в конце жизненного цикла сцены и в нем мы удаляем созданную Cookie.

Теперь напишем обработчик нажатия кнопки SecondSceneButton:

MainAssistant.prototype.handleSecondSceneButton = function(event) {
  this.counter++;
  this.counterCookie.put(this.counter);
  this.controller.stageController.pushScene("second", 1);
}

В обработчике мы прибавляем единицу к переменной counter, записываем ее значение в Cookie и отображаем сцену Second.

Дальше нам необходимо получить значение в сцене Second и как-то там поиспользовать.

function SecondAssistant() {
}

SecondAssistant.prototype.setup = function() {
  this.controller.setupWidget("CloseButton",
    {}, {label:"Close"});

  Mojo.Event.listen(this.controller.get("CloseButton"),
    Mojo.Event.tap,
    this.handleCloseButton.bind(this));
  this.counterCookie = new Mojo.Model.Cookie("counterCookie");
  this.controller.get("valuetext").update(this.counterCookie.get());
}

SecondAssistant.prototype.handleCloseButton = function(event) {
  var value = this.counterCookie.get();
  value++;
  this.counterCookie.put(value);
  this.controller.stageController.popScene();
}

В методе setup() сцены мы создаем объект Cookie, получаем сохраненное значение и отображаем его в текстовом поле.

В обработчике нажатия кнопки мы берем значение Cookie, прибавляем к нему единицу и записываем обратно в Cookie. Затем закрываем сцену.

После закрытия сцены Second будет отображена главная сцена Main и при активации вызовется метод activate(), в котором измененное значение снова появится в текстовом поле.

После всего наше приложение будет выглядеть так:

WebOS Cookies Test GUI

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

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

Leave a Reply

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

Д.

Доступно Palm Mojo SDK v1.3.5 – Инструментарий разработки для Palm WebOS

Вышлв новая версия инструментарий разработки для Palm WebOS – Mojo SDK v1.3.5

Из полезных нововведений:

  • Возможность установки приложений в раздел media
  • Поддержка эмулятором сочитаний клавиш для симуляции поворота экрана и встряхивания
  • Программный интерфейс для получения состояния акселерометра с высокой скоростью.
  • Куча багфиксов

Из неприятных моментов – поддержка Windows XP x64 и Ubuntu x64 довольно корявая.

P.

Project Ares – Web IDE для Palm WebOS

Хм… А все-таки Palm делают странное. Недавно они запустили Web-based среду разработки мобильных приложений для Palm WebOS. Публичная бета доступна уже сейчас и все желающие могут ее поиспользоваться и пообвыкнуть.

Обещают что IDE покрывает все нужды, начиная от разработки и отладки, и заканчивая публикацией приложений в Palm App Catalog.

Из полезных возможностей следует отметит:

  • Визуальный редактор графического интерфейса
  • Редактор кода
  • Визуальный отладчик
  • Просмотр логов приложения в браузере
  • Интеграция с системами контроля версий.

Работает Ares в Safari, Chrome, Firefox (по крайней мере официально так заявлено).

Попробовать Ares в действии можно здесь.

Ares - Web IDE for Palm WebOS