В 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 />

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

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

Error Dialog

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

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

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

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).

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

Существуеть возможность создавать свои собственные диалоги, которые могут содержать любые виджеты. Для создания диалога необходимо создать 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-объект сцены. В этом случае диалоговое окно может влиять на поведение сцены, например установить значения в некоторых контролах, как сделано у нас в примере.

На этом все.

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