В WebOS диалогом называется модальная панель, всплывающая внизу экрана. Пользоваться диалогами в WebOS приложениях бывает очень удобно. Например, можно организовать ввод логина и пароля, вывод сообщений об ошибках и уведомлений, выполнять ввод различных данных в случаях, если продолжение работы приложения невозможно, пока пользователь эти данные не введет. В общем, возможностей применения уйма.

И вот в этот раз мы узнаем, как же всем этим добром пользоваться.

В WebOS существует возможность создать три типа диалоговых окон:

  • Диалог с сообщением об ошибке (Error Dialog)
  • Диалог с сообщением/уведомлением (Alert Dialog)
  • Пользовательский диалог (для которого необходимо писать свой собственный шаблог и Assistant)

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

app/views/main/main-scene.html

<br />
&lt;div class=&quot;palm-page-header&quot;&gt;<br />
  &lt;div class=&quot;palm-page-header-wrapper&quot;&gt;<br />
    &lt;div class=&quot;title&quot;&gt;WebOS Dialog Test&lt;/div&gt;<br />
  &lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;div id=&quot;MainDatePicker&quot; x-mojo-element=&quot;DatePicker&quot;&gt;&lt;/div&gt;<br />
&lt;div id=&quot;AlertButton&quot; x-mojo-element=&quot;Button&quot;&gt;&lt;/div&gt;<br />
&lt;div id=&quot;ErrorButton&quot; x-mojo-element=&quot;Button&quot;&gt;&lt;/div&gt;<br />
&lt;div id=&quot;DialogButton&quot; x-mojo-element=&quot;Button&quot;&gt;&lt;/div&gt;<br />
&lt;div id=&quot;ExitButton&quot; x-mojo-element=&quot;Button&quot;&gt;&lt;/div&gt;<br />
&lt;div id=&quot;info&quot; class=&quot;palm-body-text&quot;&gt;&lt;/div&gt;<br />

Сцена содержит заголовок, виджет для ввода даты, кнопки для отображения различных типов диалогов и кнопку закрытия приложения.

app/assistants/main-assistant.js

<br />
function MainAssistant() {<br />
}</p>
<p>MainAssistant.prototype.setup = function() {<br />
    this.controller.setupWidget(&quot;MainDatePicker&quot;,<br />
        {<br />
            modelProperty: &quot;date&quot;<br />
        },<br />
        this.mainDateModel =<br />
        {<br />
            date: new Date()<br />
        });<br />
    this.controller.setupWidget(&quot;AlertButton&quot;, {}, {label:&quot;Alert Dialog&quot;});<br />
    this.controller.setupWidget(&quot;ErrorButton&quot;, {}, {label:&quot;Error Dialog&quot;});<br />
    this.controller.setupWidget(&quot;DialogButton&quot;, {}, {label:&quot;Custom Dialog&quot;});<br />
    this.controller.setupWidget(&quot;ExitButton&quot;, {}, {label:&quot;Exit&quot;});</p>
<p>    Mojo.Event.listen($(AlertButton), Mojo.Event.tap, this.onAlert.bind(this));<br />
    Mojo.Event.listen($(ErrorButton), Mojo.Event.tap, this.onError.bind(this));<br />
    Mojo.Event.listen($(DialogButton), Mojo.Event.tap, this.onDialog.bind(this));<br />
    Mojo.Event.listen($(ExitButton), Mojo.Event.tap, this.onExit.bind(this));<br />
}</p>
<p>MainAssistant.prototype.onAlert = function(event) {<br />
}</p>
<p>MainAssistant.prototype.onError = function(event) {<br />
}</p>
<p>MainAssistant.prototype.onDialog = function(event) {<br />
}</p>
<p>MainAssistant.prototype.onExit = function(event) {<br />
    this.controller.stageController.getAppController().closeAllStages();<br />
    window.close();<br />
}</p>
<p>MainAssistant.prototype.cleanup = function(event) {<br />
    Mojo.Event.stopListening($(AlertButton), Mojo.Event.tap, this.onAlert);<br />
    Mojo.Event.stopListening($(ErrorButton), Mojo.Event.tap, this.onError);<br />
    Mojo.Event.stopListening($(DialogButton), Mojo.Event.tap, this.onDialog);<br />
    Mojo.Event.stopListening($(ExitButton), Mojo.Event.tap, this.onExit);<br />
}<br />

Наша сцена после всего этого у нас сцена должна выглядеть так:
WebOS Dialogs

Теперь можно писать логику приложения.

Error Dialog

Для отображения диалога с сообщением об ошибке есть функция Mojo.Controller.errorDialog(). В качестве параметра в эту функцию передается строка, которая будет отображаться в диалоге.

<br />
MainAssistant.prototype.onError = function(event) {<br />
    Mojo.Controller.errorDialog(&quot;Simple Error Dialog&quot;);<br />
}<br />

Выглядит такой диалог вот как:

WebOS Error Dialog

Alert Dialog

Для отображения всякого рода сообщений/уведомлений используется Alert Dialog. Для вызова подобного диалога есть метод Mojo.Controller.showAlertDialog():

<br />
MainAssistant.prototype.handleAlertDialog = function(event) {<br />
    $(info).update(&quot;Alert dialog result: &quot; + event);<br />
}</p>
<p>MainAssistant.prototype.onAlert = function(event) {<br />
    this.controller.showAlertDialog({<br />
        onChoose: this.handleAlertDialog.bind(this),<br />
        title: $L(&quot;Alert Title&quot;),<br />
        message: $L(&quot;Sample Alert Message&quot;),<br />
        choices:<br />
        [<br />
            {label:$L(&quot;Normal&quot;), value:&quot;med&quot;},<br />
            {label:$L(&quot;Affirmative&quot;), value:&quot;aff&quot;, type:'affirmative'},<br />
            {label:$L(&quot;Negative&quot;), value:&quot;neg&quot;, type:'negative'},<br />
            {label:$L(&quot;Cancel&quot;), value:&quot;cancel&quot;, type:'dismiss'}<br />
        ]<br />
    });<br />
}<br />

Параметры у этого метода такие:

  • onChoose – функция, которая будет вызвана при завершении работы диалога. Параметр этой функции будет содержать код нажатой кнопки
  • title – заголовок диалога
  • message – текстовое сообщение
  • choices – массив объектов, описывающих параметры кнопок, которые будут отображены в диалоге

Каждый объект из массива choices содержит такие поля:

  • label – текст кнопки
  • value – код кнопки. При закрытии диалога этот код будет передан в функцию-обработчик, указанную в параметре onChoose.
  • type – тип кнопки. Соответствует CSS-классам для кнопок (например primary, affirmative, negative, dismiss).

WebOS Alert Dialog

Пользовательские диалоги

Существуеть возможность создавать свои собственные диалоги, которые могут содержать любые виджеты. Для создания диалога необходимо создать html-файл шаблона и Assistant-класс, который будет обрабатывать события от виджетов в диалоге, аналогично Assistant-классу сцены.

Вызвать такой диалог можно с помощью метода Mojo.Controller.showDialog():

<br />
MainAssistant.prototype.onDialog = function(event) {<br />
    this.controller.showDialog({<br />
            template: &quot;main/custom-dialog&quot;,<br />
            assistant: new CustomDialogAssistant(this)<br />
        });<br />
}</p>
<p>var CustomDialogAssistant = Class.create({<br />
    initialize: function(sceneAssistant) {<br />
        this.sceneAssistant = sceneAssistant;<br />
        this.controller = sceneAssistant.controller;<br />
    },<br />
    setup : function(widget) {<br />
        this.widget = widget;<br />
        var today = new Date();<br />
        this.controller.setupWidget(&quot;SampleDatePicker&quot;,<br />
            {<br />
                modelProperty: 'date'<br />
            },<br />
            this.dateModel =<br />
            {<br />
                date: today<br />
            });<br />
        this.controller.get('primary_button').addEventListener(Mojo.Event.tap,<br />
            this.handleButton.bind(this));<br />
        this.controller.get('secondary_button').addEventListener(Mojo.Event.tap,<br />
            this.handleButton.bind(this));<br />
        this.controller.get('negative_button').addEventListener(Mojo.Event.tap,<br />
            this.handleButton.bind(this));<br />
    },</p>
<p>    handleButton: function() {<br />
        this.sceneAssistant.mainDateModel.date = this.dateModel.date;<br />
        this.sceneAssistant.controller.modelChanged(this.sceneAssistant.mainDateModel);<br />
        this.widget.mojo.close();<br />
    }<br />
});<br />

В качестве параметра функции showDialog() передается объект с такими полями:

  • template – шаблон диалога
  • assistant – Assistant-объект диалога

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

WebOS Custom Dialog

На этом все.

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

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

Leave a Reply

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

У.

Учимся делать Splash Screen для приложения в Palm WebOS

В этот раз мы рассмотрим способ создания окна-заставкои (Splash Screen) для WebOS-приложений. Заставка, хотя и не несет функциональной роли в приложении, может быть очень полезна для привлечения пользователей, ведь это именно то, что пользователь видит при запуске вашего приложения. Кроме того, на splash screen’е можно разместить, например, индикатор загрузки или еще какую-нибудь полезную (например с маркетиноговой точки зрения) информацию.Для того, чтобы сделать ЭТО создадим новый проект и в нем две сцены – main и splash.
app/views/main/main-scene.html

<div id="ExitButton" x-mojo-element="Button"></div>

app/assistants/main-assistant.js

function MainAssistant() {
}

MainAssistant.prototype.setup = function() {
    this.controller.setupWidget("ExitButton", {}, {label:"Exit"});
    Mojo.Event.listen($(ExitButton), Mojo.Event.tap, this.onExit.bind(this));
    this.controller.stageController.pushScene("splash");
}

MainAssistant.prototype.onExit = function(event) {
    this.controller.stageController.getAppController().closeAllStages();
    window.close();
}

MainAssistant.prototype.cleanup = function(event) {
    Mojo.Event.stopListening($(ExitButton), Mojo.event.tap, this.onExit);
}

app/assistants/stage-assistant.js

function StageAssistant() {
}

StageAssistant.prototype.setup = function() {
    this.controller.pushScene("main");
}

Stage Assistant просто запускает сцену main.

Главная сцена содержит одну кнопку, нажав которую можно выйти из приложения. При инициализации сцены мы отображаем сцену splash.

Но если мы все оставим как есть, то вместо рабочего приложения получим просто пустую сцену (т.к. сцена splash, которая автоматически становится активной, не содержит никаких виджтов. Будем это исправлять.

Создадим изображение размером 320×480, назовем его splash.jpg и положим его в папку images нашего проекта.

Теперь в CSS-файле проекта пропишем следующее:
stylesheets/splashscreentest.css

body.splash {
    position: absolute;
    top: 0;
    left: 0;
    height: 454px;
    width: 320px;
    background: url(../images/splash.jpg) no-repeat;
    z-index: 100;
}

В этом CSS-файле для класса splash мы указываем фоновое изображение. Для того чтобы это фоновое изображение было отображено на сцене splash, нам надо добавить CSS-класс splash к тегу body сцены.

app/assistants/splash-assistant.js

function SplashAssistant() {
}

SplashAssistant.prototype.setup = function() {
    $$('body')[0].addClassName('splash');
    this.splashTimer = setTimeout(this.removeSplashScreen.bind(this), 4000);
}

SplashAssistant.prototype.removeSplashScreen = function() {
    this.controller.stageController.popScene();
    clearTimeout(this.splashTimer);
}

SplashAssistant.prototype.deactivate = function(event) {
    $$('body')[0].removeClassName('splash');
}

В assistant-классе сцены splash при инициализации мы добавляем класс splash к тегу body, а при деактивации сцены удаляем этот класс из тега body. Также, при инициализации мы запускаем таймер, в обработчике собфтия для этого таймера закрываем сцену.

В результате у нас получается такое:

WebOS Create Splash Screen

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