В 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 Pre включена возможность Kill Switch

Kill Switch in WebOSДва дня назад Palm выпустила новую версию Palm WebOS, а несколькими днями ранее официально открыла прием приложений в Palm App Catalog. Все хорошо, если бы не одно «но». Оказывается дурные примеры заразительны и Palm, вслед за Google, включила возможность Kill Switch для App Catalog, с помощью которой они смогут удалять приложения, загруженные из App Catalog, удаленно с устройств пользователей.

Palm reserves the right, at its sole discretion and at any time, to add, remove, disable access to, block, or modify the App Catalog, and to add, remove, disable access to, block, or modify remotely any Applications previously downloaded to your device from the App Catalog.

Ну почему, почему все кому ни попадя хотят ковыряться в софте, установленном на моем устройстве? Я негодую!

П.

Полноэкранный режим работы приложений в Palm WebOS

Работа в полноэкранном режиме на мобильном устройстве – полезная штука, особенно если вы пишете что-нибудь эдакое, например игру. Размер экрана и так небольшой, а панель состояния отбирает у приложения таоке драгоценное пространство.

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

Создаем новый проект и в нем две сцены – main и fullscreen.

app/views/main/main-scene.html

<div class="palm-hasheader">
  <div class="palm-header">FullScreen Test</div>
</div>
<div class="palm-header-spacer"></div>
<div id="FullScreenSceneButton" x-mojo-element="Button"></div>
<div id="ExitButton" x-mojo-element="Button"></div>

app/assistants/main-assistant.js

function MainAssistant() {
}

MainAssistant.prototype.setup = function() {
    this.controller.setupWidget("FullScreenSceneButton", {}, {label: "FullScreen Scene"});
    this.controller.setupWidget("ExitButton", {}, {label: "Exit"});

    Mojo.Event.listen($(FullScreenSceneButton), Mojo.Event.tap, this.onFullScreen.bind(this));
    Mojo.Event.listen($(ExitButton), Mojo.Event.tap, this.onExit.bind(this));
}

MainAssistant.prototype.onFullScreen = function(event) {
    this.controller.stageController.pushScene("fullscreen");
}

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

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

На нашей сцене – заголовок и две кнопки. Первая – открывает сцену fullscreen, а вторая – закрывает приложение.

app/views/fullscreen/fullscreen-scene.html

<div class="palm-group">
  <div class="palm-group-title">Sample Fullscreen Scene</div>
</div>
<div id="PopButton" x-mojo-element="Button"></div>

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

app/assistants/fullscreen-assistant.js

function FullscreenAssistant() {
}

FullscreenAssistant.prototype.setup = function() {
    this.controller.setupWidget("PopButton", {}, {label: "Close"});
    Mojo.Event.listen($(PopButton), Mojo.Event.tap, this.onClose.bind(this));
}

FullscreenAssistant.prototype.activate = function(event) {
    this.controller.enableFullScreenMode(true);
}

FullscreenAssistant.prototype.onClose = function(event) {
    this.controller.stageController.popScene();
}

FullscreenAssistant.prototype.deactivate = function(event) {
    this.controller.enableFullScreenMode(false);
}

FullscreenAssistant.prototype.cleanup = function(event) {
    Mojo.Event.stopListening($(PopButton), Mojo.Event.tap, this.onClose);
}

Активацию полноэкранного режима нужно делать при активации сцены, а выход из полноэкранного режима – при деактивации сцены. Не надо переходить в полноэкранный режим внутри метода setup(). Из-за этого можно получить артефакты отрисовки. По этому поводу можно найти достаточно информации на официальном форуме WebOS-разработчиков. В общем, activate() и deactivate() – это как раз подходящие методы для этого.

После всего получаем такой вот результат (скрин из эмулятора):

WebOS Fullscreen

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