Create Nokia WRT Widget App
â˘
9 gefällt mirâ˘3,716 views
How to create Nokia WRT Widget App in basic and advance IDE with instruction, examples and resources.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ăhnlich wie Create Nokia WRT Widget App
Ăhnlich wie Create Nokia WRT Widget App (20)
Mehr von Bess Ho
Mehr von Bess Ho (20)
KĂźrzlich hochgeladen
KĂźrzlich hochgeladen (20)
Create Nokia WRT Widget App
- 1. Develope WRT App in Nokia S40 & S60 Web Runtime Widget Using HTML, CSS, JavaScript Bess Ho
- 2. 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
- 3. 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)
- 5. Aptana - IDE Testing Download & Install Aptana Studio FREE Open Source http://www.aptana.org/studio/download
- 6. WRT Plug-in Testing Download Nokia WRT Plugins
- 7. WRT Plug-in Testing Install Nokia WRT Plugins
- 8. WRT Plug-in Testing Accept License for Nokia WRT Plugins
- 9. Create a WRT Widget New Project
- 10. WRT Plug-in Testing Accept License for Nokia WRT Plugins
- 11. WRT Plug-in Testing Select Nokia WRT Widget
- 12. WRT Plug-in Testing Select Basic Widget Project
- 13. WRT Plug-in Testing Create a New Basic Widget Project
- 14. WRT Plug-in Testing Create a Project Settings
- 15. 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
- 16. 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
- 17. WRT Plug-in Testing info.plist
- 18. WRT Plug-in Testing info.plist <plist version =â1.0â> ... </plist>
- 19. WRT Plug-in Testing info.plist <dict> <key>DisplayName</key> <string>text</string> ... </dict>
- 20. WRT Plug-in Testing info.plist <dict> ... <key>Identifier</key> <string>com.text.basic.widget</string> ... </dict>
- 21. WRT Plug-in Testing info.plist <dict> ... <key>Version</key> <string>1.0</string> ... </dict>
- 22. WRT Plug-in Testing info.plist <dict> ... <key>AllowNetworkAccess</key> <true/> ... </dict>
- 23. WRT Plug-in Testing info.plist <dict> ... <key>MainHTML</key> <string>index.html<string/> ... </dict>
- 24. WRT Plug-in Testing info.plist <dict> ... <key>MiniViewEnabled</key> <false/> ... </dict>
- 25. 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)
- 26. WRT Plug-in Testing index.html
- 27. WRT Plug-in Testing basic.js
- 28. 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
- 29. Optional: Add Flash Lite .SWF New .fla
- 30. 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
- 31. Adobe Flash Testing Create a New Flash file (Mobile)
- 32. Adobe Flash Testing Select Target Device
- 33. Adobe Flash Testing Select Player Version, ActionScript Version, Content Type
- 34. Adobe Flash Testing Save .fla
- 35. Adobe Flash Testing Create a new layer âBackgroundâ
- 36. Adobe Flash Testing Select frame 1 on layer âBackgroundâ & Import to Stage...
- 37. Adobe Flash Testing Select frame 1 on layer âBackgroundâ
- 38. Adobe Flash Testing Select frame 1 on layer 1 and rename âActionScriptâ
- 39. Adobe Flash Testing Select frame 1 on layer âActionScriptâ and open layer
- 40. Adobe Flash Testing Save file as .fla
- 41. Adobe Flash Testing Start coding in ActionScript...
- 42. 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
- 43. Adobe Flash Testing Publisher Settings & Publish .fla into .swf
- 44. 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
- 45. 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>
- 46. 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
- 48. 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
- 49. WRT Project Testing File > Import
- 50. WRT Project Testing Select General > File System
- 51. WRT Project Testing Select folder From Directory and select .swf
- 52. WRT Project Testing Preview the WRT Widget
- 53. Package WRT Widget New .WGZ
- 54. WRT Project Testing View .swf inside the Project inside Projects Panel
- 55. WRT Project Testing Right Click on Project and Select âPackage Widgetâ
- 57. Testing Nokia Developer Forum Registered Nokia Developer Benefits Emulator Device Emulator Nokia Device Anywhere Browser Nokia Remote Device Access (RDA) Service S60 Device
- 58. Testing Browser To test the widget in a browser, just open the index.html
- 59. 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
- 60. 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.
- 61. 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
- 62. 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
- 64. Nokia Packaging App WRT Symbian .WGZ .SIS Symbian Publisher ID $200 per year No Signing Symbian Signed Acct
- 65. Nokia OVI Store OVI Store http://www.ovi.com
- 69. WRT Widget Testing Create 1st WRT Widget http://wiki.forum.nokia.com/index.php/ Create_your_ďŹrst_WRT_widget
- 70. 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
- 72. WRT Widget Testing Create 1st WRT Advance Widget http://wiki.forum.nokia.com/index.php/ Create_your_ďŹrst_WRT_widget_using_an_IDE
- 73. 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
- 74. 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
- 75. 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
- 76. 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
- 77. END