Date post: | 14-Jan-2015 |
Category: |
Documents |
Upload: | sampetruda |
View: | 1,462 times |
Download: | 1 times |
Wang Zhi MingMay. 21, 2008
Web Widget on S60
Contents
• S60 browser introduction• History• Architecture• Functionalities
• Web Widget overview• Introduction• Features• Web-Run-time (WRT)
• How to develop widget• Widget project• Development tools• Other issue..
• references
S60 Browser Introduction
S60 browser history
Prior S60 3.0
WAP browser
S60 3.1
2nd half 2006S60 3.0
1st half 2006
Nokia WAP browser +Nokia Web Browser for S60
Nokia Web Browser for S60(WML+HTML)
Nokia Web Browser for S60 + Web RunTime
S60 3.2Now
Nokia WAP browser (WML)
Time
S60 browser history (cont.)
S60 browser architecture
Symbian OS
NokiaUI
features
S60 plug-ins, incl. Flash Lite, SVG, and audio.
Symbian HTTP framework
Netscapeplug-in
API(NPL)
WebCoreKHTML
JavaScriptCore
KJS
Browser Control
S60 WebKit
OS adaptations Memory manager
Closed source(S60, Nokia,
Symbian)
Already open source
Legend
open sourcedby Nokia
Flexible for plug-ins & extensions
S60 Browser UI Widget Runtime
APIs supportingapplication interworking
More information about webkit: http://www.webkit.org
S60 browser functionality
• All web browsers perform the same tasks. The order and how the process is performed is what differentiate browsers.
• The tasks are:• Fetch markup• Parse markup• Construct a document tree (nowadays a DOM tree)
• Find external references (images, CSS, javascript) and issue load requests for them.
• Construct boxes of content to render• Apply style information to boxes• Layout the boxes• Render boxes• Process user events
S60 browser as a run-time platform
• It is the browser engine, which comprises of some core components such as the XML engine, HTML parser, JavaScript engine, CSS processor, rendering engine etc.
• It has web applications and widgets as client applications
• JavaScript as an application programming language• Scripts typically cannot directly access the file system or the
network
• It provides certain access level to the system properties• Traditionally, a browser mainly provides functionality to
access data on the Internet, not data on a local storage
• It is the Web Run-Time platform (WRT)• Browser as Development Platform
S60 browser features
• Full HTML desktop-like browsing experience• Page overview and zooming• Visual History, an easy-to-use back function, showing
miniature views of previous pages • Support for DHTML and javascript, e.g. AJAX
application
Web Widget Overview
Web application
• an application accessed with the Web browser over the Internet
• uses standard Web-based technologies such as HTML/XHTML, CSS, JavaScript, DOM etc.
• Typical Web applications are Webmail, online auction (eBay), online booking or Webblogs
Web widget
• Widget is a standalone Web application• Typically front-end a Web 2.0 service or other
Internet content• Local on the handset & distributed like any other
application• Widget at its core is a Web page designed for a
specific purpose• Widgets use same technologies, HTML, CSS,
JavaScript, AJAX, as Web pages• Developed in days - not months or years• Development to Deployment in “clicks”
• Types of Widget• Accessory widgets (clock, calendar …)• Application widgets (games, address book …)• Information widgets (weather, stocks …)
Web widget examples
• S60 as the 1st mobile platform announcing widget support
• Empowered by the mobile widget engine
• Fully compliant with standard-based Internet technologies
Web App vs. Widget
Web App• Running directly under the browser
UI -> each running web app requires one instance of the browser
• Web pages are constructed in Web server and transferred to client side -> More data over the network
• Not suitable to design for working offline
• No distribution channel
• Delivering as a continually updated service
Widget• Running independently from the
browser UI -> light weight in using resource
• Widget’s resources located on the client side, only data is necessarily downloaded from the server side -> Network effects
• Possible to design for working offline
• Can be distributed via numbers of channels
• Delivering as downloadable and installable package
Web widget advantages
• Easy to use• quick, instant, easy access to information• Contaxt-aware, location-aware aspects (planned)• Take advantage of mobile device capabilities (planned)
• Vast connectivity
• Easy to deploy and share• managed the same as existing S60 applications• download and install like applications
• Personalized services and contents• Easy to get information• Reduced data flow
Web run-time – current status
• A web application development environment • Widgets leverage the Web
• use internet services and Web APIs to access information• use XmlHttpRequest and AJAX techniques• low effort to port widgets from other platforms
• Widgets integrated into S60 user experience• display the icon in the Application Menu• can be assigned to Idle screen soft keys and shortcuts• appear in the Active Applications list• managed the same way as existing S60 applications
• Familiar (Un)Installer user experience• Visible in Application manager
Web run-time – next stage
• Widgets leverage the smart phone platform• combine information from Web with platform services• improves user experience• Location, PIM & media… information • additional UI enhancements and features
• Ever evolving development platform• Safely leverage S60 platform services• Access platform services through S60 API• Add safety and signature for widget
More on Web Run-Time: http://www.s60.com/webruntime
Web widget development
Some concepts
• RSS (Really Simple Syndication)• a XML format used to describe and
synchronize contents between web sites.
• AJAX(Asynchronous JavaScript and XML)
• XMLHttpRequest• JavaScript• XML parsing• DOM
• Interactive UI• Bandwidth efficiency
Web widget structure
• A Widget is constructed of following files• HTML (mandatory)• CSS• Javascript• Info.plist (mandatory)• Resource, e.g. icon, images
• A widget project is a file-system directory, in which widget’s component files are stored.
• Widget’s mandatory files and the icon.png (if included) MUST be located at the root directory of a widget project.
Development tools
• For implementing widget code:• Text editor or a web IDE
• For debugging a running widget• Firefox
• firebug
• For testing a widget:• S60 3rd Edition FP2 SDK emulator
• Available on Forum Nokia website • Compatible S60 device with custom SW
• E.g., Nokia N95, N95 8G• Remote device access
• http://www.forum.nokia.com/main/technical_services/testing/rda_introduction.html
Get firebug: https://addons.mozilla.org/en-US/firefox/addon/1843
Hello world widget
• Create following files:
Helloworld.html (mandatory)
Helloworld.css
Helloworld.js
Default.png icon.png
info.plist (mandatory)
•Zip these files and rename it to helloworld.wgz
•Test and debug with S60 emulator
• Send to mobile device and install
info.plist
•A manifest file in XML format, containing the property and configuration information of a widget.
<?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>WidgetName</string><key>Identifier</key><string>com.company.widget.project</string<key>MainHTML</key><string>Main.html</string>
</dict></plist>
info.plist (cont.)
info.plist (cont.)
WRT Supported Properties
Name Type Use Description
DisplayName String Required Specify the actual name of the widget listed on the Installed application bar
Identifier String Required Specify unique string identifier for the widget in reverse domain format
MainHTML String Required Specify the name of the main HTML page that points to the widget
AllowNetworkAccess
Boolean Optional Specify access to the network based resources from the widget
Version String Optional Specify release version of the widget bundle
icon.png
• PNG image to be used as application icon• Recommended size 88x88 px• Default S60 application icon used if icon.png is
missing
HTML, Backbone of a widget
• Defines the structure of the widget.
• Recommended HTML 4.01 specification.
• Use the <div> (block-level) element to construct the widget’s views.
• Views can be constructed with static HTML elements or can be dynamically created by JavaScript at runtime.
<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>
CSS, Makeup for a widget
• Style and layoutinformation
• Defines how to display HTML element: position, color, background color etc.
• CSS information can be embedded in the HTML file
• Or imported from an external stylesheet
// 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;
}
// class selector to design a pattern stylediv.subview div {
margin: 10px 0 0 0;padding: 20px 20px 20px 20px;font-size: 22px;text-align: left;color: blue;
}
JS, The brain of a widget
• The intelligence of a widget?• Without JavaScript code, a widget is just a passive Web
page• JavaScript code can be embedded in the HTML file
within <script> elements
• JavaScript API, Java DOM API, AJAX API• ECMAScript standard; Extension JavaScript objects• Core DOM and HTML DOM APIs• XMLHttpRequest object
• Platform services via Nokia-specific extended JavaScript API:
• Available only from Widget JavaScript code
JS (cont.)
// define some global variablevar globalVariable = 0;// function multiply(xValue, yValue){
return xValue * yValue;}// create a new element with DOM functionvar newElement = document.createElement(‘div’);newElement.setAttribute(‘id’, ‘extraView’);newElement.setAttribute(‘class’, ‘subView’);
// show/hide viewsfunction changeView(activeViewId, hiddenViewId){
var activeView = document.getElementById(activeViewId);var hiddenView = document.getElementById(hiddenViewId);activeView.style.display = ‘block’;hiddenView.style.display = ‘none’;
}
widget installation package
• Widget installation file format
• Compressed with any ZIP application
• ZIP file contains html, CSS, js, icons, graphics and the widget info file
• Widget installation file extension
• WidgetName.wgz
• Widget installation MIME type
• x-nokia-widgets
Widget.wgz
Widget MIMErecognizer
Symbian system MIME
type recognizer
WidgetInstaller
S60 SW installerframework
Installed
x-nokia-widgets
other issues
• Porting
•Port from web application
•Yahoo widget, Apple widget, etc.
• Sever side development
• development environment
•Get S60 3rd Edition, FP2 from forum Nokia web site.
http://www.forum.nokia.com/info/sw.nokia.com/id/4a7149a5-95a5-4726-913a-3c6f21eb65a5/S60-SDK-0616-3.0-mr.html
references
Widget discussion board:• put your Questions & Answers here,http://discussion.forum.nokia.com/forum/showthread.ph
p?t=130035 (E.g. Taiwan code camp)• Widget topichttp://discussion.forum.nokia.com/forum/showthread.ph
p?t=115609
More about widget:• http://www.forum.nokia.com/widgets
Widget API Introduction
Widget object
• Widget object is a built-in module of the widget engine
• widget or window.widget
• Widget object provides basic utility functions to manipulate widget’s properties
var h = window.screen.height;var w = window.screen.width;if (h < w)
widget.setDisplayLanscape();
widget.onhide = pause;function pause(){
clearTimeout(timer);}
• Widget methods• openURL(String:url)• setPreferenceForKey(String:prefere
nce, String:key)• preferenceForKey(String:key)• prepareForTransition
(String:transitionState)• performTransition(void)• setNavigationEnabled(Boolean:flag)• openApplication(Uid, param)• setDisplayLandscape(void)• setDisplayPortrait (void)
• Widget properties• identifier [readonly, String]• onshow [assigned callback function]• onhide [assigned callback function]• isRotationSupported [readonly,
Booloean]
Menu object
• Menu object is an extension from the widget object
• menu or window.menu
• Menu object provides interfaces to manipulate the options menu and softkeys (right and middle keys) of a widget
var opMenu = window.menu; // ! menu is reserved
{...opMenu.setRightSoftKeyLabel(
‘Back’, toMainView);}
function toMainView(){...opMenu.setRightSoftkeyLabel(‘’, null);
}
• Menu methods• append(MenuItem menuItem)• remove(MenuItem menuItem)• getMenuItemById(Integer:id)• getMenuItemByName(String:label)• setRightSoftKeyLabel(String:label,
function:callbackfunction)• showSoftkeys(void)• hideSoftkeys(void)• clear(void)
• Menu properties• onShow [assigned callback function]
MenuItem object
• MenuItem provides interfaces to create menu items and submenus (cascading) for the options menu
function createMenu{var settings = new MenuItem(
‘Settings’, 10);settings.onSelect = showSettings;window.menu.append(settings);
}
function showSettings(id){document.getElementById(
‘setting’).style.display = ‘block’;}
• Menu Item methods• new MenuItem(String:label, Integer:id)• append(MenuItem:childMenuItem)• remove(MenuItem:childMenuItem)• replace(MenuItem:oldMenuItem,
MenuItem:newMenuItem)• setDimmed(Boolean:flag)
• Menu Item properties• onSelect [assigned callback function]
System Info Service API
• System info service API is a scriptable Netscape plug-in module
• Subset of system properties accessible• Memory, network and battery status, etc.
• System info service plug-in module is loaded via an HTML <embed> element
• <embed type="application/x-systeminfo-widget" hidden="yes"></embed>
• System info service plug-in module is not loaded in Browser context
System Info Service API (cont.)
• Power properties• chargelevel [readonly, int]• chargerconnected [readonly, int]• onchargelevel [writeonly, function]• onchargerconnected [writeonly, function]
• Network properties• signalbars [readonly, int]• signalstrength [readonly, int]• networkname [readonly, string]• registrationstatus [readonly, int]• onsignalstrength [assigned callback function]
System Info Service API (cont.)
var sysInfo = null;
function init(){// get the handle to the system info objectsysInfo = document.embeds[0];var battLevel = sysInfo.chargelevel;sysInfo.onchargelevel = "batteryStatusCallback()";
}
function batteryStatusCallback() {var battLevel = sysInfo.chargelevel;
}
System Info Service API (cont.)
• Light methods• lighton(Int:lighttarget, Int:duration, Int:intensity, Int:fadein)• lightblink(Int:lighttarget, Int:duration, Int:onduration,
Int:offduration, Int:intensity) • lightoff(Int:lighttarget, Int:duration, Int:fadeout)
• Light properties• lightminintensity [readonly, Int]• lightmaxintensity [readonly, Int]• lightdefaultintensity [readonly, Int]• lightinfiniteduration [readonly, Int]• lightmaxduration [readonly, Int]• lightdefaultcycletime [readonly, Int]• lighttargetprimarydisplayandkeyboard [readonly, Int]• lighttargetsystem [readonly, Int]
System Info Service API (cont.)
• Vibra methods• startvibra(Integer:duration, Integer:intensity) • stopvibra(void)
• Vibra properties• vibraminintensity [readonly, Integer]• vibramaxintensity [readonly, Integer]• vibramaxintensity [readonly, Integer]• vibrasettings [readonly, Integer]
• Beep methods• beep(Integer:frequency, Integer:duration)
• Memory properties• totalram [readonly, Integer]• freeram [readonly, Integer]
System Info Service API (cont.)
• File system methods• drivesize(String:drive) • drivefree(String:drive)
• File system properties• drivelist [readonly, String]
• Language properties• language [readonly, String]
Thank you.
应用开发入门指南
•成为诺基亚论坛注册会员
•订阅中英文开发伙伴通讯稿
•选择开发平台和技术
•学习开发技术
• 下载开发工具和文档
• 使用中英文多媒体自学资料
• 查询知识库及中英文WiKi中的经验分享
•加速开发进程
• 使用中英文讨论区搜寻已有答案,提出问题
• 使用远程测试服务
•参与中文讨论区、中文WiKi分享经验,赢取手机
诺基亚论坛中文:www.forum.nokia.com.cn英文:www.forum.nokia.com
参见诺基亚论坛中文WiKi中”现在成为移动应用开发者”一文参见诺基亚论坛中文WiKi中”现在成为移动应用开发者”一文