• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Create Nokia WRT Widget App
 

Create Nokia WRT Widget App

on

  • 12,556 views

How to create Nokia WRT Widget App in basic and advance IDE with instruction, examples and resources.

How to create Nokia WRT Widget App in basic and advance IDE with instruction, examples and resources.

Statistics

Views

Total Views
12,556
Views on SlideShare
12,070
Embed Views
486

Actions

Likes
8
Downloads
0
Comments
0

12 Embeds 486

http://www.cyworld.vn 150
http://www.slideshare.net 113
http://npossibilidades.blog.br 109
http://sanjaysurani.blogspot.com 41
http://sanjaysurani.blogspot.in 31
http://npossibilidades.com.br 18
http://bcgcommunity.blogspot.com 18
file:// 2
http://www.sanjaysurani.blogspot.com 1
http://webcache.googleusercontent.com 1
http://www.lmodules.com 1
http://sanjaysurani.blogspot.ca 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Create Nokia WRT Widget App Create Nokia WRT Widget App Presentation Transcript

  • Develope WRT App in Nokia S40 & S60 Web Runtime Widget Using HTML, CSS, JavaScript Bess Ho
  • WRT Nokia S60 Screen Size: 640x360 pixels Screen Ratio (16:9) Touch and/or Keypad Nokia S40 Screen Size: 320x240 pixels Screen Ratio (4:3) Keypad
  • GPS Microphone (Geo) Camera (Audio) (Photo / Video) Magentometer (Compass) Accelerometer Touch (XZY) (Device Orientation) Wireless Bluetooth (File) Data Plan / WiFi Memory Card (Web) (Data) USB Cable SMS (Data) (Data)
  • Preparation Install IDE
  • Aptana - IDE Testing Download & Install Aptana Studio FREE Open Source http://www.aptana.org/studio/download
  • WRT Plug-in Testing Download Nokia WRT Plugins
  • WRT Plug-in Testing Install Nokia WRT Plugins
  • WRT Plug-in Testing Accept License for Nokia WRT Plugins
  • Create a WRT Widget New Project
  • WRT Plug-in Testing Accept License for Nokia WRT Plugins
  • WRT Plug-in Testing Select Nokia WRT Widget
  • WRT Plug-in Testing Select Basic Widget Project
  • WRT Plug-in Testing Create a New Basic Widget Project
  • WRT Plug-in Testing Create a Project Settings
  • WRT Plug-in Testing Widget automically generate 4 files info.plist index.html container for Flash Lite container for Flash Lite SWF content SWF content basic.css basic.js design & layout of logic layer widget’s contents
  • WRT Plug-in Testing Optional: Adding an application icon • No custom icon is added, a default icon is shown • Custom icon is in PNG and named as icon.png • Icon size is 88x88 pixels • Icon is in the same directory at the root Submission Requirement • Minimal 256x256 pixel • Maximal 2000x2000 pixel
  • WRT Plug-in Testing info.plist
  • WRT Plug-in Testing info.plist <plist version =”1.0”> ... </plist>
  • WRT Plug-in Testing info.plist <dict> <key>DisplayName</key> <string>text</string> ... </dict>
  • WRT Plug-in Testing info.plist <dict> ... <key>Identifier</key> <string>com.text.basic.widget</string> ... </dict>
  • WRT Plug-in Testing info.plist <dict> ... <key>Version</key> <string>1.0</string> ... </dict>
  • WRT Plug-in Testing info.plist <dict> ... <key>AllowNetworkAccess</key> <true/> ... </dict>
  • WRT Plug-in Testing info.plist <dict> ... <key>MainHTML</key> <string>index.html<string/> ... </dict>
  • WRT Plug-in Testing info.plist <dict> ... <key>MiniViewEnabled</key> <false/> ... </dict>
  • WRT Plug-in Testing OR info.plist <dict> ... <key>MiniViewEnabled</key> <true/> ... </dict> • widget should have a static part to be shown on the home screen of the device • Use Homescreen widget guidelines to add the widget to the home screen of the device (Available on limited Nokia such as Nokia N97)
  • WRT Plug-in Testing index.html
  • WRT Plug-in Testing basic.js
  • WRT Plug-in Testing Launch Method Pros Cons Ability to add Content appears HTML embedded assets around in browser SWF context White blank Widget content screen after exit. SWF Launch appears as Prompt user to stand-alone SWF save SWF on exit Customized <meta> Refresh Simple HTML content in Launch refresh tag original window
  • Optional: Add Flash Lite .SWF New .fla
  • WRT Project Testing 1) Create a Flash Lite project .fla 2) Publish Flash Lite .fla into .swf and .html 3) Open *.html and copy <object> code only 4) Insert the code into WRT Widget index.html inside HTML <body> tag 5) Import .SWF into WRT Widget
  • Adobe Flash Testing Create a New Flash file (Mobile)
  • Adobe Flash Testing Select Target Device
  • Adobe Flash Testing Select Player Version, ActionScript Version, Content Type
  • Adobe Flash Testing Save .fla
  • Adobe Flash Testing Create a new layer “Background”
  • Adobe Flash Testing Select frame 1 on layer “Background” & Import to Stage...
  • Adobe Flash Testing Select frame 1 on layer “Background”
  • Adobe Flash Testing Select frame 1 on layer 1 and rename “ActionScript”
  • Adobe Flash Testing Select frame 1 on layer “ActionScript” and open layer
  • Adobe Flash Testing Save file as .fla
  • Adobe Flash Testing Start coding in ActionScript...
  • WRT Project Testing 1) Create a Flash Lite project .fla 2) Publish Flash Lite .fla into .swf and .html 3) Open *.html and copy <object> code only 4) Insert the code into WRT Widget index.html inside HTML <body> tag 5) Import .SWF into WRT Widget
  • Adobe Flash Testing Publisher Settings & Publish .fla into .swf
  • WRT Project Testing 1) Create a Flash Lite project .fla 2) Publish Flash Lite .fla into .swf and .html 3) Open *.html and copy <object> code only 4) Insert the code into WRT Widget index.html inside HTML <body> tag 5) Import .SWF into WRT Widget
  • WRT Project Testing <object classid="clsid:d27cdb6e- ae6d-11cf-96b8-444553540000" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=8,0,0,0" width="360" height="490" id="widget" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="widget.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="widget.swf" quality="high" bgcolor="#ffffff" width="360" height="490" name="widget" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x- shockwave-flash" pluginspage="http://www.adobe.com/ go/getflashplayer" /> </object>
  • WRT Project Testing 1) Create a Flash Lite project .fla 2) Publish Flash Lite .fla into .swf and .html 3) Open *.html and copy <object> code only 4) Insert the code into WRT Widget index.html inside HTML <body> tag 5) Import .SWF into WRT Widget
  • WRT Project Testing
  • WRT Project Testing 1) Create a Flash Lite project .fla 2) Publish Flash Lite .fla into .swf and .html 3) Open *.html and copy <object> code only 4) Insert the code into WRT Widget index.html inside HTML <body> tag 5) Import .SWF into WRT Widget
  • WRT Project Testing File > Import
  • WRT Project Testing Select General > File System
  • WRT Project Testing Select folder From Directory and select .swf
  • WRT Project Testing Preview the WRT Widget
  • Package WRT Widget New .WGZ
  • WRT Project Testing View .swf inside the Project inside Projects Panel
  • WRT Project Testing Right Click on Project and Select “Package Widget”
  • Resources Testing
  • Testing Nokia Developer Forum Registered Nokia Developer Benefits Emulator Device Emulator Nokia Device Anywhere Browser Nokia Remote Device Access (RDA) Service S60 Device
  • Testing Browser To test the widget in a browser, just open the index.html
  • Testing Emulator • N97 SDK emulator can verify a homescreen widget that display on homescreen • Nokia WRT plug-in has preview feature supported by Aptana Studio Download Nokia S60 SDK Nokia N97 Nokia 5th Edition Nokia 3rd Edition Feature Package 2 http://www.forum.nokia.com/info/sw.nokia.com/id/ec866fab-4b76-49f6-b5a5- af0631419e9c/S60_All_in_One_SDKs.html
  • Testing: Device Testing PC Use Nokia PC Suite to connect the mobile phone using 1) Bluetooth or 2) USB cable. Double click on the .wgz package to install and open the app Mac Use 1) Bluetooth or 2) USB cable to transfer the .wgz package from Memory Card. Use File Manager App to install the package. Open the app in the App.
  • Testing Nokia Device Anywhere https://www.deviceanywhere.com/nokia/welcome.htm • Hundred of models • Can’t test location • Avoid purchase • Can’t test accelerometer • FREE • Can’t test sound • Limited to no. of hrs per month
  • Testing Nokia Remote Device Access http://www.forum.nokia.com/Technology_Topics/ Application_Quality/Testing/Remote_Device_Access • Hundred of models • Can’t test location • Avoid purchase • Can’t test accelerometer • FREE • Can’t test sound • Limited to no. of hrs per day
  • Resources Packaging
  • Nokia Packaging App WRT Symbian .WGZ .SIS Symbian Publisher ID $200 per year No Signing Symbian Signed Acct
  • Nokia OVI Store OVI Store http://www.ovi.com
  • Nokia Publisher https://publish.ovi.com/info/
  • Nokia Developer http://www.forum.nokia.com/
  • Resources Code Example
  • WRT Widget Testing Create 1st WRT Widget http://wiki.forum.nokia.com/index.php/ Create_your_first_WRT_widget
  • WRT Widget Testing Basic WRT Widget works 1) WRT-supported S60 3rd Edition Feature Pack 2 Nokia E72 or Nokia N96 2) WRT-supported S60 5th Edition Nokia 5800 XpressMusic or Nokia N97 3) SDK emulator
  • Resources Advance WRT Widget
  • WRT Widget Testing Create 1st WRT Advance Widget http://wiki.forum.nokia.com/index.php/ Create_your_first_WRT_widget_using_an_IDE
  • Advance WRT Widget Testing Advantages • Preview, debug, validate, package, and deploy • Code completion for Web Runtime API • Sample data for platform services API • Ability to create device events Adobe Microsoft Aptana Studio Dreamweaver Visual Studio
  • Advance WRT Widget Testing APIBridge • Enables WRT widgets to communicate with Symbian plug-ins • Plug-in architecture to add access to any Symbian features • Tool package includes JavaScript code that support APIBridge and a .SIS file that adds the plug-ins to Symbian devices
  • Advance WRT Widget Testing APIBridge Exmaples • Upload files to website • Capture videos, images, audios • Read files resident on a device • Resize images • Access and create thumbnail images • Access device’s log • Access device’s location • Access media on device • Issue DTMF tones to a active call
  • Advance WRT Widget Testing Nokia Platform Services 2.0 • JavaScript API to access device data & info • Addition of one or two lines of JavaScript code into a widget • Access location, contact http://www.forum.nokia.com/info/sw.nokia.com/id/cccea743-f4e5-418f- ad9f-0a7a7f50868f/Nokia_Platform_Services_2_0.html
  • END