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

Д.

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

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

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

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

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

А.

А вы уже зарегистрировались на вебкаст по разработке для Palm webOS?

Еще почти двое суток осталось до начала ознакомительного вебкаста от разработчиков Palm webOS. Обещают много интересного. Митч Аллен (Mitch Allen) CTO компании Palm Software и сотрудник команды разработчиков Palm webOS проведут обзор материала первой главы книги о разработке для этой мобильной операционной системы, а также рассажут о разработке ПО с использованием Mojo SDK.

Palm webOS

Почитать обзор предстоящего вебкаста можно здесь.

Зарегистрироваться на участие в вебкасте можно здесь.