Symbian Web Runtime: легкая разработка мобильных приложений

Этот пост участвует в конкурсе "Умные телефоны за умные посты".

Сейчас немало мобильных приложений пишутся с использованием HTML и Javascript. Оно и понятно — подобные приложения легче писать, легче переносить с одной мобильной платформы на другую, не нужно осваивать Java, Objective C и другие языки. Однако для большинства мобильных ОС все-таки требуется некая обертка. В самом простом случае необходимо написать небольшое приложение, которое будет представлять собой развернутое на максимум окошко встроенного веб-браузера. Для поддержки специальных возможностей (например, работы с контактами или файлами) нужно будет либо дописывать его для поддержки нужных функций, либо воспользоваться одним из фреймворков для написания мобильных приложений. В любом случае, вам понадобятся специальные инструменты, будь то компилятор или тот же фреймворк.

Однако в Symbian, начиная с Symbian S60 3rd Edition, появилась одна хорошая штука — Symbian Web Runtime (WRT). Она позволяет разрабатывать свои мобильные приложения с использованием HTML и Javascript, используя только стандартные средства практически любой десктопной операционки — текстовый редактор и ZIP-архиватор. По сути, это тоже мобильный фреймворк, но уже встроенный в систему, не требующий дополнительных инструментов или компиляции. Давайте посмотрим на него поближе?

Hello, world!


Будущее WRT-приложение (или правильнее, WRT-виджет) при первом рассмотрении представляет собой ZIP-архив с расширением .WGZ. В нем находится папка с файлами (если просто заархивировать файлы — работать не будет, только в папке). Внутри обязательно должен быть файл info.plist и основной HTML-файл. Также может быть файл icon.png с рекомендуемым размером 88x88 пикселей, который будет служить иконкой нашего виджета. Все остальное — на ваше усмотрение.

Формат файла info.plist почти точно такой же, как у Apple, и описан здесь. Вот пример:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd">
<plist version="1.0">
<dict>
  <key>DisplayName</key>
  <string>HelloWorld</string>
  <key>Identifier</key>
  <string>com.HelloWorld</string>
  <key>Version</key>
  <string>1.0</string>
  <key>MainHTML</key>
  <string>index.html</string>
  <key>MiniViewEnabled</key>
  <false/>
  <key>AllowNetworkAccess</key>
  <false/>
</dict>
</plist>
Параметр Тип Использование Описание
DisplayName Строка Обязательный Название вашего виджета. Будет отображаться в главном меню телефона.
Identifier Строка Обязательный Уникальный идентификатор виджета.
MainHTML Строка Обязательный Относительный путь к основному HTML-файлу.
Version Строка Необязательный Версия виджета.
AllowNetworkAccess Boolean Необязательный Дать виджету доступ к сети. По умолчанию false — доступ только к локальным данным.
MiniViewEnabled Boolean Необязательный Дать возможность добавлять виджет на рабочий стол. По умолчанию false. Если устройство не поддерживает виджеты рабочего стола, то этот параметр игнорируется.

Если теперь создать файл index.html в той же папке, в нем написать что-то типа этого:

<html>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

А затем сжать эту папку в ZIP-архив и поменять у него разрешение на .WGZ, то мы уже получим приложение для Symbian.

Вот для начала и все. Можете верстать странички, писать код на Javascript для них, тестировать в своем браузере, а потом легко и просто превращать их в мобильные приложения для Symbian. Стоит однако учесть, что для подключения CSS и Javascript файлов из интернета вам нужно будет включить параметр AllowNetworkAccess.

Локализация


Если вы желаете перевести свой виджет на множество языков, вам помогут встроенные средства локализации. Это довольно просто.

Для поддержки любого языка вам нужно создать внутри основной папки подпапку с названием <язык>.lproj (например, "en.lproj" или "fi.lproj"):

Если вы желаете перевести название вашего виджета, вам нужно создать файл infoplist.strings и поместить в него строчку примерно такого вида:

DisplayName = "Локализованное название"

В остальном процесс локализации довольно прост. При загрузке файлов с каскадными таблицами стилей, скриптами, картинками или другими ресурсами WRT ищет их сначала в подпапке с локализацией, и только потом — в основной папке. Например:

[основная папка]\fi.lproj\flag.png



[основная папка]\en.lproj\flag.png



[основная папка]\flag.png



Javascript

var flag = document.createElement('img');
flag.setAttribute('src', 'flag.png');

В результате для финского языка выведет финский флаг, для английского — английский, а для всех остальных — тот фиолетовый.

Web Runtime API


Отдельно стоит упомянуть об WRT API. Оно позволяет осуществлять взаимодействие с Symbian. В WRT 1.0 функций не особо много, но начиная с WRT 1.1 есть возможность работать со многими сервисами этой мобильной операционки. Об работе с сервисами — чуть ниже. Полную документацию вы можете найти на странице «Symbian Web Runtime API reference» официальной документации. Ниже я вкратце переведу часть этой документации. Некоторые моменты в документации просто не описаны или спорны, так что если заметите ошибку — пожалуйста, напишите о ней, и я ее исправлю.

Существует несколько специальных объектов WRT, к которым можно обращаться из Javascript:

Кроме того, поддерживается объект screen, позволяющий получить параметры экрана устройства.
Давайте рассмотрим их по очереди.

widget

Доступен как window.widget или просто widget. При этом слово widget является в WRT зарезервированным и не должно использоваться как название переменной или функции.
Список методов объекта widget:

Поясню, в чем суть функций prepareForTransition и performTransition. Допустим, вы желаете скрыть или показать какой-то элемент. Для этого вы используете elem.style.display = "block" или elem.style.display = "none". Однако если вы желаете анимировать этот показ или скрытие, вы должны поставить перед ним вызов widget.prepareForTransition("fade"), а после него — widget.performTransition().

Вот пример из документации:

HTML


<!-- Основной блок -->
<div id='main'>
  Привет, мир!
  <input type="button" value="Config" onclick="toMain(0);" />
</div>
<!-- Конец основного блока -->
<!-- Блок настроек -->
<div id='config'>
  Твой мир теперь мой, бугогашеньки!
  <input type="button" value="Main" onclick="toMain(1);" />
</div>
<!-- Конец блока настроек -->

Javascript


function toMain(main) {
  // подготовка к анимации
  widget.prepareForTransition("fade");
  if (main) { // переход от блока настроек к основному блоку
    // скрытие блока настроек
    document.getElementById("config").style.display = 'none';
    // показ основного блока
    document.getElementById("main").style.display = 'block';
    }
  else {  // переход от основного блока к блоку настроек
    // скрытие основного блока
    document.getElementById("main").style.display = 'none';
    // показ блока настроек
    document.getElementById("config").style.display = 'block';
    }
  // анимация
  widget.performTransition();
}


Список свойств объекта widget:


Подобъекты объекта widget:


menu

Доступен как window.menu или просто menu. При этом слово menu является в WRT зарезервированным и не должно использоваться как название переменной или функции.

При помощи этого объекта можно управлять меню приложения. Меню закреплено за левой программной кнопкой и не может быть переназначено на любую другую (например, на правую). Левая кнопка называется "Options" (или иначе в разных локализациях). Правая программная кнопка назвается "Exit" и завершает приложение. По умолчанию программные кнопки скрыты и показываются лишь тогда, когда пользователь нажимает одну из них (на клавиатуре устройства).

Список методов объекта menu:


Список свойств объекта menu:


MenuItem

Пункт меню.

Список методов объекта MenuItem:


Список свойств объекта MenuItem:


Пример из документации:

// Обработчик меню
function menuEventHandler(id)
{
  switch (id)
  {
  case 2001:
    break;
  case 2002:
    // что-то сделать
  break;
  }
}

// функция создания меню
function createMenu()
{
  // получение объекта меню
  var optionsMenu = window.menu;

  // установка функции-обработчика показа меню
  optionsMenu.onShow = function()
  { 
     // вывод сообщения
     alert('Event Trigger: optionsMenu.onShow');
  }

  // создание двух пунктов меню
  var m1 = new MenuItem('Песец', 2001);
  var m2 = new MenuItem('Бобер', 2002);

  // установка функции-обработчика выбора пунктов меню
  m1.onSelect = menuEventHandler;
  m2.onSelect = menuEventHandler;

  // добавление этих двух пунктов в меню
  optionsMenu.append(m1);
  optionsMenu.append(m2);

  // создание еще двух пунктов меню для организации подменю
  var m11 = new MenuItem('Северный', 3001);
  var m12 = new MenuItem('Полный', 3002);

  // добавление этих двух пунктов в подменю к пункту "Песец"
  // с поиском пункта меню по его id
  optionsMenu.getMenuItemById(2001).append(m11);

  // с поиском пункта меню по его названию
  optionsMenu.getMenuItemByName('Песец').append(m12);

  // Установка функции-обработчика выбора пунктов меню
  m11.onSelect = menuEventHandler;
  m12.onSelect = menuEventHandler;
}


device

Доступен как window.device или просто device. При этом слово device является в WRT зарезервированным и не должно использоваться как название переменной или функции.

Этот объект присутствует начиная с WRT 1.1 и открывает огромные возможности по работе с сервисами Symbian при помощи всего одной функции.

Список методов объекта device:

Сам по себе раздел об использовании сервисов Symbian в WRT довольно большой, и приводить его здесь я не буду. Если вы сочтете это интересным, я могу описать его в отдельной статье. Вообще, документация более-менее понятна и для каждого сервиса есть развернутый пример по всем функциям. Кстати, большинство функций имеют синхронный и асинхронный варианты, так что ваше приложение тормозить не будет.

Плюсы и минусы


Плюсы:Минусы: Плюсы и минусы примерно перевешивают друг друга, причем плюсов все-таки слегка побольше.

Кстати говоря, на тех же Nokia N9 и Nokia N950, на базе ОС MeeGo с браузером Nokia Browser 8.5, HTML 5 вполне поддерживается — вы можете, к примеру, написать игру с использованием Canvas, с поддержкой жестов и акселерометра. Правда, там уже используется не WRT, а возможности HTML 5.

Спасибо за прочтение. Извиняюсь за возможные ошибки и буду рад полезным замечаниям.
@
11.12.2011 22:27 UTC
Первоисточник