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