Знакомство с Web Runtime (WRT) виджетами

Знакомство с Web
  Runtime (WRT)
   виджетами

     Sami.J.Viitanen@nokia.com
         1

Интернет и
 Виджеты

     2

Эволюция Интернет в S60

  Полноценный               Сайты,         Виджеты, позволяющие      Виджеты + Сервисы
  HTML браузер,     оптимизированные для создать акцентированный,      платформы S60
предоставляющий     мобильных устройств,     оптимизированный           обеспечивают
  пользователям          содержащие      интерфейс для отображения    интеграцию Web и
    мобильных        специализированные   информации из различных       персонального
устройств широкие          сервисы         информационных Web-            окружения
 возможности для                                 сервисов                пользователя
  работы в Web                                                       мобильных устройств

                                           3

Что такое виджет?
• Виджеты – самостоятельные Web-приложения
                                                   Web-страница за
    • Запускаются, выглядят и работают как         рамками браузера
      настоящие программы
    • Хранятся на устройстве и распространяются
      также как дистрибутивы программ

• В основе виджета - специально спроектированная
  Web-страница
     • Виджеты используют Web-технологии: HTML,
       CSS, JavaScript, AJAX
     • Разработка занимает несколько дней, а не
       месяцев или лет
     • От разработки к распространению за
       несколько щелчков мыши

• Типы виджетов
    • Помощники (часы, календарь…)
    • Приложения (игры, контактная книга …)
    • Информационные (погода, курсы валют …)

                                     4

S60 WebKit

     5

WebKit: ядро для браузеров
с открытым исходным кодом
                 Браузер S60 и Web среда исполнения основаны
                           на использовании WebKit
   Native
   C/C++                       Web
    “Web
                  Widgets
                             Browser    Интерфейс браузера           Среда исполнения
   Capable”
 Плагины S60, вкл.                             S60                       виджетов
 Flash Lite, SVG и
 аудио.
                                                      Browser control API

  Интеграция с          Функции
  сервисами               UI                         WebCore                JavaScript
  платформы                             S60
                                                                              Core
                                       WebKit          KHTML                   KJS
                                                     (LGPL+BSD)               (LGPL)

                                            Адаптации OS              Менеджер памяти

                                                           Подробнее о Webkit:
                                                           http://www.webkit.org
                                                6

Устройства

     7

Устройства Nokia,
поддерживающие виджеты

              http://www.forum.nokia.com/devices/
              matrix_webruntime_1.html

Распространение - Ovi Store
 •   Таргетирование при помощи социальных связей и
     физического местоположения!
 •   Загрузка контента началась в Марте
 •   Уже открылся!
 •   Ассортимент? Приложения, игры, видео, виджеты,
     подкасты, программы с использованием местоположения
     и персонализированный контент
         Зарегистрируйтесь сейчас!
           https://publish.ovi.com

                            9

Распространение – сторонние каналы
  Порталы                                      Сторонние
 операторов        Сйты партнеров
                                              аггрегаторы

              Принадлежащие нашим            Аггрегаторы,
  Порталы     партнером сайты, позволяющие   собирающие
 операторов   скачивать и устанавливать      и публикующие
              виджеты. Например:
                                             виджеты
              reuters.com/tools/widgets

                         10

S60 WRT виджеты
 в подробностях

       11

Ингредиенты WRT виджета

                                      Настройки
                                       виджета
     info.plist (обязательно)             +
     [name].html (обязательно)          HTML
     icon.png                           основа
     [name].css
     [name].js         PNG иконка
                          +
                         CSS        Корневая
                     размещение      папка!
                           +
                       js логика

                         12

HTML

  Задает                           

     структуру                      
                                     ..
                                    
     виджета.                       
                                           Front
                                     view
                                     
                                           Back view
                                     
Представления (View) могут           
                                           Config view
создаваться при помощи элементов    
                                   
статического HTML или
динамически генерироваться
JavaScript во время работы.

                                    13

CSS
• Стиль и расположение          // Селектор класса для задания
                                 общего стиля для схожих
  информации                     компонентов
                                .title {
   – Определяет как               font-size: 26px;
                                  color: blue;
                                }
     отображать HTML            .subView {
                                }
                                  display: none

     элемент: позиция, цвет,    // Селектор Id для задания
     цвет фона и так далее       стиля уникального компонента
                                #mainView {
• Данные CSS могут                font-size: 16px;
                                  color: red;
                                  text-align: center;
  быть встроены в HTML          }
                                // Селектор псевдо-класса для
  файл или                       проектирования стиля паттерна
  импортированы из              div.subview div {
                                  margin: 10px 0 0 0;
                                  padding: 20px 20px 20px 20px;
  внешней таблицы стилей          . . .
                                }

                           14

JavaScript

  Обработка событий
          XMLHttpRequest
Манипуляции DOM
       Эффекты UI
      Тонкая настройка UI

                15

Сервисы
платформы

    16

Виджеты и сервисы платформы
• Фреймворк для абстрагирования доступа к набору
  сервисов
• Ограничения и система безопасности,
  специфичные для среды исполнения
• Доступ к сервисам платформы из JavaScript
• Примеры использования:
  • Совмещение данных из Web с локальными для
    предоставления персонализированных и более
    релевантных сервисов
  • Сохранение важных контактов и событий из
    Web на устройство для повышения надежности
    программ-напоминаний
                           17

WRT 1.0:
Системная информация в виджетах
HTML:
 
JavaScript:

                        18

WRT 1.1 – простые шаги!

    1. Создание сервисного объекта
      so = device.getServiceObject("Service.Messaging", "IMessaging");

       2. Определяем критерии
      var criteria = new Object();
      criteria.MessageType = 'SMS’;
      criteria.To = …;
      criteria.BodyText = …;

             3. Вызов метода сервиса
            so.IMessaging.Send(criteria, msgSendCallBack);

                     4. Обработка результата
                    function msgSendCallBack(transID, eventCode, result
                    {…
                                19

Главный экран

      20

Что содержит главный экран?
• Появился в Nokia N97
• Отображает динамический,
  конфигурируемый контент
• Размер зависит от устройства
   – Nokia N97: 309x85 пикселей
• Пользовательские элементы
  управления главным экраном
   – Какой контент отображается
   – Расположение отображаемого

              Замечание! Ряд элементов отображаются
              устройством в обязательном порядке.
                         21

Как насчет виджетов на главном
экране?
• Контент или виджеты?
   – Виджеты для разработчиков…
   – Контент для потребителей!
• Контент может публиковаться Symbian
  C++ приложением или S60 Web Runtime
  виджетом
• Взаимодействие с пользователем:
   – Добавление / удаление контента с
     главного экрана
   – Нажатие на контент открывает
     виджет в полноэкранном режиме
                         22

Главный экран
или полноэкранный режим?
• WRT виджет для отображения на
  главном экране должен                 Представление Полноэкранное
  реализовать 2 представления          главного экрана представление
  – Представление главного экрана
  – Полноэкранное представление
• При взаимодействии пользователя
  с главным экраном, виджет
  получает уведомления
  – onload(), onshow() и onresize():
    функции интерфейса на стороне
    виджета
  – JavaScript код для определения
    текущего размера представления
                            23

Создание и проектирование
Контента для главного экрана
•   Контент динамичен, но
     – Не должен содержать анимаций, видео и пр.
     – Используются JavaScript таймеры для
        обновления
•   Индикатор последнего обновления
•   Обработка исключительных ситуаций
•   Ограничение объѐма отображаемых данных
     – Оптимизация контента улучшает восприятие
     – Привлекательный контент: пользователь
        переходит в полноэкранный режим!
•   Не забывайте о масштабируемости –
    используйте относительные значения

                                 24

Aptana Studio

      25

Aptana Studio и
Nokia WRT плагин

• Nokia WRT плагин для
  Aptana Studio:
   – Создание,
     редактирование,тести
     рование и подготовка
     к распространению
     WRT виджетов

                     www.aptana.com/nokia
                            26

Примеры и задания

        27