Очень часто в приложении необходимо передать данные, введенные пользователем, из одной формы в другую. В 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>
Главная сцена состоит из контейнера с заголовком, двух кнопок и текстового поля.
Вторая сцена состоит из контейнера с заголовком, кнопки и текстового поля.
Ничего сверхъестественного. 🙂
Перед тем, как написать логику, стоит ознакомиться со схемой, описывающей жизненный цикл сцены:
Из схемы можно узнать, что первым делом вызывается конструктор сцены, затем метод 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(), в котором измененное значение снова появится в текстовом поле.
После всего наше приложение будет выглядеть так:
