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

Для начала создадим новое приложение и в нем новую сцену с названием Main. Как создать проект и сцену можно узнать из этой статьи.

Затем добавим в созданную сцену список:

views/main/main-scene.html

<div class="palm-group">
  <div class="palm-group-title" id="sample-toggle">
  	<span x-mojo-loc="">Database Content</span></div>
    <div class="palm-list">
       <div id="dbList" x-mojo-element='List'></div>
    </div>
  </div>
</div>

Для нашего списка нам необходимо определить HTML-шаблон элементов списка:
views/main/dbItemTemplate.html

<div class="palm-row" x-mojo-tap-highlight="momentary">
  <div id="nameField">#{Name} (#{Year})</div>
</div>

В шаблоне указано, что если в элементе списка есть свойства Name и Year, то они должны быть отображены.

Теперь в assistants/main-assistant.js внесем необходимые изменения для того, чтобы виджет-список создался при запуске:

function MainAssistant() {
}

MainAssistant.prototype.setup = function() {
this.count = 0;
this.dbListModel = {};
this.controller.setupWidget("dbList",
        {
            itemTemplate: "main/dbItemTemplate"
        },
        this.dbListModel);
}

Как видно из кода, в атрибутах виджета мы указываем шаблон элементов main/dbItemTemplate. Название должно совпадать с названием ранее созданного HTML-файла с описанием шаблона элементов.

После всех манипуляций, описанных выше, у нас должно получиться что-то подобное:

WebOS Empty List

Отлично, с GUI мы закончили, теперь займемся получением данных с сервера.

Для начала создадим базу данных и в ней таблицу, из которой мы будем получать записи и отображать их на форме:

CREATE TABLE remote_data(
 ID INTEGER NOT NULL AUTO_INCREMENT ,
 Name VARCHAR( 32 ) NOT NULL ,
 Year SMALLINT NOT NULL ,
 PRIMARY KEY ( ID )
);

Затем создадим PHP-скрипт, который будет получать данные из таблицы и выдавать их в формате JSON:

<?php
header('Content-type: application/json');
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "webos_test";
$link = mysql_connect($dbhost, $dbuser, $dbpass)
    or die('Could not connect: ' . mysql_error());
mysql_select_db($dbname) or die('Could not select database');

switch($_POST['operation'])
{
 case 'getResults':
 {
  $table = $_POST['table'];
  $query = sprintf("SELECT * FROM %s", mysql_real_escape_string($table));
  $result = mysql_query($query) or die('Query failed: ' . mysql_error());
  $all_recs = array();
  while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
  {
   $all_recs[] = $line;
  }
  break;
 }
}
echo json_encode($all_recs);
mysql_free_result($result);
mysql_close($link);
?>

Что делает этот скрипт:

  • Получает из POST-параметров название операции, непример getResults.
  • Если операция поддерживается, то получает из POST-параметров имя таблицы
  • Получает записи из таблицы в массив
  • Конвертирует в JSON и отдает клиенту

В результате у нас в выдаче должно получиться что-то подобное:

[
 {"ID":"1","Name":"Test 1","Year":"2008"},
 {"ID":"2","Name":"Test 2","Year":"2009"},
 {"ID":"3","Name":"Test 3","Year":"2010"}
]

Теперь нам надо научить наше WebOS приложение получать эти данные с сервера.

Для получения данных в приложении нам необходимо выполнить AJAX-запрос на сервер. Для этого используется метода Ajax.Request():

MainAssistant.prototype.getRemoteData = function(table) {
    var url = 'http://192.168.0.1/remote-data.php';
    try
    {
        if(!table)
        {
            throw('getRemoteData(): You should specify database table name');
        }
        var request = new Ajax.Request(url,
        	{
            	method: 'post',
            	parameters: {'operation': 'getResults', 'table': table},
            	evalJSON: 'true',
            	onSuccess: this.getRemoteDataSuccess.bind(this),
            	onFailure: function()
            	{
                	Mojo.Log.error('Failed to get Ajax response');
            	}
        	});
    }
    catch(e)
    {
        Mojo.log.error(e);
    }
}

В исходном коде указан IP адрес машины в локальной сети. Если вы тестируете приложение на эмуляторе, а сервер со скриптом и базой данных находится в Internet, то, скорее всего, доступа к серверу у вас по умолчанию не будет. Для того, чтобы разрешить эмулятору ходить в сеть, надо в настройках LAN-соединения разрешить доступ из подсети VirtualBox:
Share Internet with WebOS Emulator

Итак, в приведенном выше коде указано, что при успешном завершении запроса необходимо вызвать метод getRemoteDataSuccess(). В этом методе мы должны преобразовать полученный ответ от сервера в массив и обновить список. Делается это следующим образом:

MainAssistant.prototype.getRemoteDataSuccess = function(response) {

 	try
 	{
 		this.dbListModel.items = response.responseText.evalJSON();
 		this.controller.modelChanged(this.dbListModel);
 	}
 	catch(e)
 	{
 		Mojo.log.error(e);
 	}
}

Для преобразования JSON-строки в массив мы использовали метод evalJSON(), а для того чтобы виджет обновил список элементов мы вызвали метод modelChanged() объекта-контроллера.

Все это чудесно, научили приложение делать запрос к серверу и обрабатывать результаты, но если мы запустим приложение, то ничего не произойдет. А все потому что мы не указали, когда должен вызываться метод getRemoteData().

Вызвать этот метод можно при запуске приложения. У класса сцены есть метод, который отрабатывает, когда сцена загружена. Это метод ready(). Вот в нем мы и запустим выполнение AJAX-запроса:

MainAssistant.prototype.ready = function() {
this.getRemoteData('remote_data');
}

И вот, после запуска увидим такое:

WebOS List Loaded from MySQL Database

На этом все.

Скачать исходный код демонстрационного приложения.

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

Leave a Reply

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

О.

Обработка параметров запуска приложения в Palm WebOS

В прошлый раз я рассказывал о том, как выполнить телефонный звонок из приложения в Palm WebOS. Все манипуляции выполнялись с помощью сервиса Application Manager, который запускал приложение дозвона с параметрами.

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

Чтобы оно заработало, нам эти параметры надо как-то этому приложению передать. И вот для этих целей мы напишем утилиту-launcher, которая с помощью Application Manager будет запускать наше приложение и передавать в параметрах ему все что нужно.

Пишем Launcher

Создадим новый проект и добавим в него сцену.

app/views/main/main-scene.html

<div>
<div class="palm-group">
  <div class="palm-group-title">Application</div>
  <div clas="palm-list">
    <div class="palm-row first">
      <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
        <div class="title">
          <div class="label">Name</div>
          <div id="AppTextBox" x-mojo-element="TextField"></div>
        </div>
      </div>
    </div>
    <div class="palm-row">
      <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
        <div class="title">
          <div class="label">Action</div>
          <div id="ActionTextBox" x-mojo-element="TextField"></div>
        </div>
      </div>
    </div>
    <div class="palm-row last">
      <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
        <div class="title">
          <div class="label">Parameter</div>
          <div id="ParamTextBox" x-mojo-element="TextField"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="LaunchButton" x-mojo-element="Button"></div>
<div id="ExitButton" x-mojo-element="Button"></div>
</div>

app/assistants/main-assistant.js

function MainAssistant() {
}

MainAssistant.prototype.setup = function() {
        this.controller.setupWidget('AppTextBox',
        {
            modelProperty:  'originalValue',
            textCase:       Mojo.Widget.steModeLowerCase,
            focus:          true
        },
        this.appModel =
        {
            originalValue : 'com.mobiledeveloper.appparameters'
        });
        this.controller.setupWidget('ActionTextBox',
        {
            modelProperty:  'originalValue',
            textCase:       Mojo.Widget.steModeLowerCase,
            focus:          false
        },
        this.actionModel =
        {
            originalValue : 'add'
        });
    this.controller.setupWidget('ParamTextBox',
        {
            modelProperty:  'originalValue',
            textCase:       Mojo.Widget.steModeLowerCase,
            focus:          false
        },
        this.paramModel =
        {
            originalValue : 123.45
        });

        this.controller.setupWidget("LaunchButton", {}, {label:"Launch"});
        this.controller.setupWidget("ExitButton", {}, {label:"Exit"});

        Mojo.Event.listen(this.controller.get("LaunchButton"),
            Mojo.Event.tap, this.handleLaunchButton.bind(this));
        Mojo.Event.listen(this.controller.get("ExitButton"),
            Mojo.Event.tap, this.handleExitButton.bind(this));
}

MainAssistant.prototype.cleanup = function(event) {
        Mojo.Event.stopListening(this.controller.get("LaunchButton"),
            Mojo.Event.tap, this.handleLaunchButton.bind(this));
        Mojo.Event.stopListening(this.controller.get("ExitButton"),
            Mojo.Event.tap, this.handleExitButton.bind(this));
}

MainAssistant.prototype.handleLaunchButton = function(event) {
        try
        {
            this.controller.serviceRequest('palm://com.palm.applicationManager',
            {
                method:'launch',
                parameters:
                {
                        id: this.appModel.originalValue,
                        params:
                        {
                            action: this.actionModel.originalValue,
                            param: this.paramModel.originalValue
                        }
                }
            });
        }
        catch(e)
        {
            this.controller.showAlertDialog({
                onChoose: function(value){},
                title: 'Error',
                message: e,
                choices: [{label:'OK'}]
        });
    }
}

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

Сцена содержит три поля ввода:

  • В первом – вводим уникальный идентификатор приложения, которое будем запускать
  • Во втором – параметр action, который будет передан запускаемому приложению
  • В третьем – параметр param, который будет передан запускаемому приложению

При запуске Launcher выглядит так:

WebOS Application Launcher (sample)

Рассмотрим более детально, как же происходит запуск стороннего приложения:

  • Мы вызываем Application Manager с помощью метода serviceRequest() объекта-контроллера
  • Методу serviceRequest мы скармливаем название сервиса и JSON-объект с параметрами вызова сервиса
  • В параметрах вызова сервиса указываем, что вызывается метод launch, а также указывается JSON-объект , который будет передан в качестве параметра методу launch.
  • Объект, передаваемый методу launch содержит поле id, а котором указан идентификатор вызываемого приложения, а также поле params, содержащее JSON-объект, передаваемый в качестве параметра запускаемому приложению.

И вот, c launcher’ом мы закончили. Теперь приступим к примеру, демонстрирующему обработку параметров запуска.

Учимся обрабатывать параметры запуска приложения

Для начала создадим новое приложение и в нем сцены с названием first и add.

Если приложение должно обрабатывать параметры запуска, это значит что нам необходимо создать свой Application Assistant – класс, обеспечивающий логику работы приложения. Если мы создаем свой Application Assistant, то и создание GUI мы тоже должны будем прописывать руками. По умолчанию генератор проектов создает проект, содержащий главное окно. В нашем же случае все окна мы будем создавать руками (в коде). Для того, чтобы создавать окна в коде и избавиться от автоматически создаваемого окна, нам надо править файл appinfo.json. В нем необходимо указать параметр noWindow равным true.

{
"id": "com.mobiledeveloper.appparameters",
"version": "1.0.0",
"vendor": "Mobile-Developer.ru",
"type": "web",
"main": "index.html",
"title": "AppParameters",
"icon": "icon.png",
"noWindow": "true"
}

Указание значения noWindow является очень важным шагом, т.к. без этого свойства в приложении будут создаваться два окна и при запуске это будет выглядеть очень странно, что может в последствии стать причиной отказа в приеме приложения в Palm’овский e-commerce для приложений.

По умолчанию, кодогенератор для проектов создает код для Stage Assistant. Нам он теперь не понадобится и поэтому файл app/assistants/stage-assistant.js можно смело удалять.

Теперь поработаем над созданными ранее сценами:

app/views/first/first-scene.html

<div id="main" class="palm-hasheader">
  <div class="palm-header center" id="main-hdr">Main Scene</div>
</div>
<div x-mojo-element="Button" id="AddSceneButton"></div>
<div x-mojo-element="Button" id="ExitButton"></div>

app/assistants/first-assistant.js

function FirstAssistant() {
}

FirstAssistant.prototype.setup = function() {
    this.controller.setupWidget("AddSceneButton", {}, {label:"Add"});
    this.controller.setupWidget("ExitButton", {}, {label:"Exit"});
    Mojo.Event.listen(this.controller.get("AddSceneButton"),
        Mojo.Event.tap, this.handleAddButton.bind(this));
    Mojo.Event.listen(this.controller.get("ExitButton"),
        Mojo.Event.tap, this.handleExitButton.bind(this));
}

FirstAssistant.prototype.cleanup = function(event) {
    Mojo.Event.stopListening(this.controller.get("AddSceneButton"),
        Mojo.Event.tap, this.handleAddButton.bind(this));
    Mojo.Event.stopListening(this.controller.get("ExitButton"),
        Mojo.Event.tap, this.handleExitButton.bind(this));
}

FirstAssistant.prototype.handleAddButton = function(event) {
    this.controller.stageController.pushScene("add");
}

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

Сцена First содержит две кнопки. Первая кнопка запускает сцену Add, а вторая – завершает работу приложения

app/views/add/add-scene.html

<div class="palm-row">
<div class="palm-hasheader">
  <div class="palm-header">Add Scene</div>
</div>
</div>
<div class="palm-row">
  <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
    <div class="title">
      <div id="ParamTextBox" x-mojo-element="TextField"></div>
    </div>
  </div>
</div>

app/assistants/add-assistants.js

function AddAssistant(param) {
    if(param)
    {
        this.initialValue = param;
    }
    else
    {
        this.initialValue = '';
    }
}

AddAssistant.prototype.setup = function() {
    this.controller.setupWidget('ParamTextBox',
    {
        modelProperty: 'originalValue',
        focus: true
    },
    {
        originalValue: this.initialValue
    });
}

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

И вот мы подошли к самому главному – как именно наше приложение должно получать и обрабатывать параметры запуска.

Для того чтобы обработать параметры запуска, в Application Assistant есть метод handleLaunch, у которого есть параметр launchParams – это объект, содержащий параметры запуска. Если приложение было запущено без параметров, то launchParams будет равен null.

app/assistants/app-assistant.js

var AppParameters = {}
AppParameters.StageName = "AppParamaters";

function AppAssistant() {
}

AppAssistant.prototype.handleLaunch = function(launchParams) {
    if(!launchParams)
    {
        Mojo.Log.info('Applicaion was started without parameters');
        this.startDefault();
    }
    else
    {
        Mojo.Log.info('Applicaion was started with parameters');
        switch(launchParams.action)
        {
        case 'add':
            Mojo.Log.info('ADD action');
            this.addSceneParam = launchParams.param;
            this.handleAddAction();
        break;
        }
    }
}

AppAssistant.prototype.startDefault = function() {
    this.stageController = this.controller.getStageController(AppParameters.StageName);
    if (this.stageController)
    {
        this.stageController.popSceneTo('first');
        this.stageController.activate();
    }
    else
    {
        var stageParams =
        {
            name: AppParameters.StageName,
            lightweight: true
        }
        this.controller.createStageWithCallback(stageParams,
            this.pushFirstScene.bind(this));
    }
}

AppAssistant.prototype.handleAddAction = function() {
    this.stageController = this.controller.getStageController(AppParameters.StageName);
    if (this.stageController)
    {
        this.stageController.popSceneTo('first');
        this.stageController.pushScene('add', this.addSceneParam);
        this.stageController.activate();
    }
    else
    {
        var stageParams =
        {
            name: AppParameters.StageName,
            lightweight: true
        }
        var addStageCallback = function(stageController)
        {
            stageController.pushScene('first');
            stageController.pushScene('add', this.addSceneParam);
        }
        this.controller.createStageWithCallback(stageParams,
        addStageCallback.bind(this));
    }
}

AppAssistant.prototype.pushFirstScene = function(stageController) {
    stageController.pushScene('first');
}

В методе handleLaunch мы проверяем значение launchParams и если оно равно null, то вызываем метод startDefault(). Если launchParams не null, то мы выполняем проверку значения поля action и если оно равно add, то вызываем сцену Add.

Метод handleLaunch может быть вызван в двух случаях – при запуске первого экземпляра приложения и для уже запущенного приложения. Об этом надо помнить, когда мы реализуем логику создания сцен в методах startDefault() и handleAddSAction().

В теле метода startDefault() мы получаем объект Stage Controller с именем “AppParameters”. Если полученное значение равно null, то у нас первый запуск приложения. Мы создаем новое окно (stage) с помощью метода createStageWithCallback() и в callback-функции, которая отрабатывает после успешного создания окна, создаем сцену first.

Если же ссылка на Stage Controller, полученная в методе startDefault(), не равна null, то у нас произошел вызов уже запущенного приложения. Мы закрываем все сцены, которые находятся над сценой first. Делаем мы это с помощью метода popSceneTo().

Метод handleAddAction() работает аналогично. Если у нас происходит вызов уже запущенного приложения, то мы закрываем все сцены, находящиеся над сценой first, а затем открываем сцену add и передаем ей в качестве параметра поле param из launchParameters.

Если же мы вызываем приложение первый раз с параметром action=add, то создаем новое окно, в нем создаем сцену first, а затем сцену add и точно так же, скармливаем ей в качестве параметра поле param из launchParameters.

WebOS Launch Application with Parameters

На этом все.

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

Д.

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

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

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

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

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