Embed Size (px)
Citation preview
Разработка WRT приложений
Александр Труфанов Senior Technical Consultant
Forum Nokia
[email protected] май, 2011
© 2011 Nokia
Интернет эволюция
Виджеты
оптимизированные
клиенты для web-
инфомации и служб
Оптимизированные
для мобильных
устройств сайты
Полнофункциональный
HTML браузер позволил
пользователям полноценно
работать в Web
Втджеты + Platform
Services позволяют
интегрировать Web и
персональный
контекст
© 2011 Nokia
Что такое Виджеты? • Web-сайты часто не подходят для
отображения на маленьком экране
• Виджеты – “локальные web-сайты” на
устройстве
– Рендерятся при помощи браузера
– Получают данные при помощи
AJAX (Web 2.0)
– Выглядят как обычные приложения
– Но: просты в разработке т.к. используют
HTML & JavaScript
8/23/2010 3
HOMESCREEN!
© 2011 Nokia
Поддерживаемые платформы
8/23/2010 5
http://www.forum.nokia.com/devices/matrix_webruntime_1.html
Более 50 моделей устройств начиная с S60 3rd ed FP1:
http://www.forum.nokia.com/wrt
Дополнительная информация:
© 2011 Nokia
Как создать WRT виджет Свойства
виджета
+
HTML
каркас PNG иконка
+
CSS
+
js логика
info.plist (обязательно)
[name].html (обязательно)
icon.png
[name].css
[name].js
Корневая
папка!
© 2011 Nokia
info.plist
• Сердце вижета
– Определяет виджет
– XML файл
– Содержит информацию о
компонентах и свойствах
данного виджета
8/23/2010 7
... <plist version="1.0"> <dict> <key>DisplayName</key> <string>AccuWidget</string> <key>Identifier</key> <string>com.nokia.forum.accuwidget </string> <key>MainHTML</key> <string>accuwidget.html</string> <key>AllowNetworkAccess</key> <true /> ...
© 2011 Nokia
HTML
• Определяет структуру
виджета
– Создает view с
помощью статических
HTML элементов или
…
– Создает их
динамически из
JavaScript в runtime.
8/23/2010 8
<html> <head> .. </head> <body id="body"> <div id=‘mainView’> <span class=‘title’>Front view</span> </div> <div id=‘subView1’ class=‘subView’> <p class=‘title’>Back view</p> </div> <div id=‘subView2’ class=‘subView’> <p class=‘title’>Config view</p> </div> </body> </html>
© 2011 Nokia
CSS
• Стиль отображения и
размещения информации
– Определяет как
отображать HTML
элементы: позицию, цвет,
размер и т. д.
– Встриавывайте CSS в HTML
файл или импортируйте из
внешней таблицы стилей
8/23/2010 9
// Class selector to define common style for similar components
.title { font-size: 26px; color: blue; } .subView { display: none } // Id selector to define a unique style for a unique component
#mainView { font-size: 16px; color: red; text-align: center; } // Pseudo-class selector to design a pattern style
div.subview div { margin: 10px 0 0 0; padding: 20px 20px 20px 20px; . . . }
© 2011 Nokia
JavaScript
XMLHttpRequest
DOM манипуляции
Обработка событий
Подстройка UI
UI эффекты
© 2011 Nokia
Home Screen • Зачем это пользователю?
– Добавление / удаление контента с экрана
– Быстрый переход к виджету по нажатию
• Виджеты с поддержкой Home screen (HS) должны
реализовать 2 view:
– Home screen view
– Full screen view
• HS уведомляет виджет в моменты, когда с ним
взаимодействует пользователь
– onload() и onresize() – интерфейсные функции на
стороне виджета
– JavaScript код для определения текущего view по
размеру виджета
8/23/2010 11
Home screen view Full screen view
© 2011 Nokia
Второе поколение средств Web-
разработчика
nokiawrt.com
© 2011 Nokia
Nokia WDE: полный цикл разработки
nokiawrt.com
© 2011 Nokia
Web SDK Simulator
Манипулирование местоположением
Изменение показаний акселерометра
Виртуальная клавиатура
Системные события
Web Inspector
Настройка размера экрана и типа устройства
Демо
27.05.2011 15
© 2011 Nokia
Ovi App Wizard • Селайте ваш web-контент (RSS / Atom)
мобильным и публикуйте его в Ovi Store
– Использование бесплатно.
– Доступен всем, как компаниям, так и физ. лицам
– Не требует навыков программирования
– Создание занимает несколько минут
– Приложение публикеутся в Ovi Store в течении 24 часов
– Опционально: Монетизация с помощью рекламы или продажи приложения
– Распространение практически для всех устройств Nokia
– http://oviappwizard.com/
16 27.05.2011
© 2011 Nokia
Ovi Maps Rendering API
27.05.2011 17
http://www.forum.nokia.com/Develop/Web/Maps/
• Карта в заданной точке
• Отображение POI
• Поиск и мест
• Отображение маршрута
• Отображение развязок
и поворотов
© 2011 Nokia
Ovi Maps Rendering API в действии
18
http://m.ovi.me/?c=60.1
7675,24.929974&t=0&z
=15&nord
http://m.ovi.me/?c=60.1
7675,24.929974&t=3&z
=15&nord
http://m.ovi.me/?c=60.17675,24.92
9974&h=400&w=550&hc&nord
http://m.ovi.me/p?searchValue=Munich La
Fiorentina
http://m.ovi.me/p?pid=276u281z-
e6d54339e5c041e690b0ddd96663e576&nord
http://m.ovi.me/junction?r=48.15308,1
5.97347&turn=r&h=360 http://m.ovi.me/?c=60.17675,24.929974&h=400&w=55
0&u=1m&nord
© 2011 Nokia
Виджеты и Platform Services • Platform Services
– Фреймворк для абстрагированного доступа к
различным сервисам
– Доступ через JavaScript
• Примеры использования:
– Объединение Web-данных с локальной
информацией для предоставления релевантных,
персонализированных сервисов
– Сохранение важных контактов и событий в
устройстве
8/23/2010 19
© 2011 Nokia
• Механизм, позволяющий расширить возможности Java, WRT и Flash Lite приложений
• На данный момент имеет следующие плагины:
– Загрузка файлов на сервер.
– Запись видео, аудио и фотографирование.
– Чтение файлов.
– Масштабирование изображений.
– Создание preview изображений.
– Использование службы ведения логов.
– Использование служб определения
местоположения
– Использование служб управления медиа.
– Отправка DTMF сигналов.
APIBridge
27.05.2011 20
© 2011 Nokia
Шаблон On-demand WebTV • Онлайн видео-вещание
(требуется RSS с описаниями
и ссылками на видео)
– Бесплатен
– HTTP progressive и RTMP
– Flash video (FLV/F4V)
или MP4
– H.264, On2 VP6
– 640 x 360 и больше, 16:9
– 3G или WiFi
– Только для Symbian^3
– Возможен downgrade на S60 5th ed.
– http://bit.ly/d82Sz3
© 2011 Nokia
Гибридные приложения
27.05.2011 22
HTML приложение
Qt Web
Qt
© 2011 Nokia
Преимущества гибридных приложений
Qt
C++
Полный доступ к устройству
Библиотеки
Web
HTML, CSS, JavaScript
Быстрая разработка
Широкое распростронение
Интеграция элементов Qt UI в HTML страницу
Доступ к объектам Qt из JavaScript
Вызов JavaScript из Qt
Разделяемые хранилища http://qt.nokia.com/forms/whitepapers/reg-whitepaper-hybrid
© 2011 Nokia
Вопросы
