Develope WRT App in Nokia S40 & S60
                        Web Runtime Widget




       Using HTML, CSS, JavaScript
    ...
WRT
      Nokia S60
Screen Size: 640x360 pixels
    Screen Ratio (16:9)
   Touch and/or Keypad

      Nokia S40
Screen Siz...
GPS              Microphone
     (Geo)                               Camera
                         (Audio)
             ...
Preparation




Install IDE
Aptana - IDE
         Testing
    Download & Install Aptana Studio

 FREE Open Source




http://www.aptana.org/studio/dow...
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                      i...
WRT Plug-in
                 Testing
         Optional: Adding an application icon

•   No custom icon is added, a default...
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...
WRT Plug-in
         Testing
                 info.plist

<dict>
   ...
   <key>Version</key>
   <string>1.0</string>
   ....
WRT Plug-in
        Testing
               info.plist

<dict>
   ...
   <key>AllowNetworkAccess</key>
   <true/>
   ...
</...
WRT Plug-in
         Testing
                 info.plist

<dict>
   ...
   <key>MainHTML</key>
   <string>index.html<strin...
WRT Plug-in
        Testing
               info.plist

<dict>
   ...
   <key>MiniViewEnabled</key>
   <false/>
   ...
</di...
WRT Plug-in
              Testing
OR                      info.plist

   <dict>
      ...
      <key>MiniViewEnabled</key>...
WRT Plug-in
 Testing
  index.html
WRT Plug-in
 Testing
   basic.js
WRT Plug-in
            Testing
Launch Method         Pros              Cons

                  Ability to add   Content a...
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) Ope...
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) Ope...
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) Ope...
WRT Project
          Testing
<object classid="clsid:d27cdb6e-
ae6d-11cf-96b8-444553540000" codebase="http://
download.mac...
WRT Project
            Testing

1) Create a Flash Lite project .fla
2) Publish Flash Lite .fla into .swf and .html
3) Ope...
WRT Project
 Testing
WRT Project
            Testing

1) Create a Flash Lite project .fla
2) Publish Flash Lite .fla into .swf and .html
3) Ope...
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
...
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...
Testing: Device
    Testing
     PC   Use Nokia PC Suite to
          connect the mobile phone
          using 1) Bluetoot...
Testing


           Nokia Device Anywhere
    https://www.deviceanywhere.com/nokia/welcome.htm




•   Hundred of models ...
Testing


     Nokia Remote Device Access
       http://www.forum.nokia.com/Technology_Topics/
       Application_Quality/...
Resources




Packaging
Nokia
      Packaging App

   WRT             Symbian

  .WGZ                 .SIS

               Symbian Publisher ID
  ...
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_wi...
WRT Widget
            Testing
           Basic WRT Widget works

1) WRT-supported S60 3rd Edition Feature Pack 2
Nokia E7...
Resources



 Advance
WRT Widget
WRT Widget
         Testing
     Create 1st WRT Advance Widget




    http://wiki.forum.nokia.com/index.php/
Create_your_...
Advance WRT Widget
            Testing
 Advantages
  •   Preview, debug, validate, package, and deploy
  •   Code completi...
Advance WRT Widget
         Testing
APIBridge
• Enables WRT widgets to communicate with
  Symbian plug-ins
• Plug-in archi...
Advance WRT Widget
           Testing
APIBridge Exmaples
•   Upload files to website
•   Capture videos, images, audios
• ...
Advance WRT Widget
         Testing
Nokia Platform Services 2.0

• JavaScript API to access device data & info
• Addition ...
END
Upcoming SlideShare
Loading in...5
×

Create Nokia WRT Widget App

10,542

Published on

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

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,542
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Transcript of "Create Nokia WRT Widget App"

    1. 1. Develope WRT App in Nokia S40 & S60 Web Runtime Widget Using HTML, CSS, JavaScript Bess Ho
    2. 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. 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)
    4. 4. Preparation Install IDE
    5. 5. Aptana - IDE Testing Download & Install Aptana Studio FREE Open Source http://www.aptana.org/studio/download
    6. 6. WRT Plug-in Testing Download Nokia WRT Plugins
    7. 7. WRT Plug-in Testing Install Nokia WRT Plugins
    8. 8. WRT Plug-in Testing Accept License for Nokia WRT Plugins
    9. 9. Create a WRT Widget New Project
    10. 10. WRT Plug-in Testing Accept License for Nokia WRT Plugins
    11. 11. WRT Plug-in Testing Select Nokia WRT Widget
    12. 12. WRT Plug-in Testing Select Basic Widget Project
    13. 13. WRT Plug-in Testing Create a New Basic Widget Project
    14. 14. WRT Plug-in Testing Create a Project Settings
    15. 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. 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. 17. WRT Plug-in Testing info.plist
    18. 18. WRT Plug-in Testing info.plist <plist version =”1.0”> ... </plist>
    19. 19. WRT Plug-in Testing info.plist <dict> <key>DisplayName</key> <string>text</string> ... </dict>
    20. 20. WRT Plug-in Testing info.plist <dict> ... <key>Identifier</key> <string>com.text.basic.widget</string> ... </dict>
    21. 21. WRT Plug-in Testing info.plist <dict> ... <key>Version</key> <string>1.0</string> ... </dict>
    22. 22. WRT Plug-in Testing info.plist <dict> ... <key>AllowNetworkAccess</key> <true/> ... </dict>
    23. 23. WRT Plug-in Testing info.plist <dict> ... <key>MainHTML</key> <string>index.html<string/> ... </dict>
    24. 24. WRT Plug-in Testing info.plist <dict> ... <key>MiniViewEnabled</key> <false/> ... </dict>
    25. 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. 26. WRT Plug-in Testing index.html
    27. 27. WRT Plug-in Testing basic.js
    28. 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. 29. Optional: Add Flash Lite .SWF New .fla
    30. 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. 31. Adobe Flash Testing Create a New Flash file (Mobile)
    32. 32. Adobe Flash Testing Select Target Device
    33. 33. Adobe Flash Testing Select Player Version, ActionScript Version, Content Type
    34. 34. Adobe Flash Testing Save .fla
    35. 35. Adobe Flash Testing Create a new layer “Background”
    36. 36. Adobe Flash Testing Select frame 1 on layer “Background” & Import to Stage...
    37. 37. Adobe Flash Testing Select frame 1 on layer “Background”
    38. 38. Adobe Flash Testing Select frame 1 on layer 1 and rename “ActionScript”
    39. 39. Adobe Flash Testing Select frame 1 on layer “ActionScript” and open layer
    40. 40. Adobe Flash Testing Save file as .fla
    41. 41. Adobe Flash Testing Start coding in ActionScript...
    42. 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. 43. Adobe Flash Testing Publisher Settings & Publish .fla into .swf
    44. 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. 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. 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
    47. 47. WRT Project Testing
    48. 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. 49. WRT Project Testing File > Import
    50. 50. WRT Project Testing Select General > File System
    51. 51. WRT Project Testing Select folder From Directory and select .swf
    52. 52. WRT Project Testing Preview the WRT Widget
    53. 53. Package WRT Widget New .WGZ
    54. 54. WRT Project Testing View .swf inside the Project inside Projects Panel
    55. 55. WRT Project Testing Right Click on Project and Select “Package Widget”
    56. 56. Resources Testing
    57. 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. 58. Testing Browser To test the widget in a browser, just open the index.html
    59. 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. 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. 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. 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
    63. 63. Resources Packaging
    64. 64. Nokia Packaging App WRT Symbian .WGZ .SIS Symbian Publisher ID $200 per year No Signing Symbian Signed Acct
    65. 65. Nokia OVI Store OVI Store http://www.ovi.com
    66. 66. Nokia Publisher https://publish.ovi.com/info/
    67. 67. Nokia Developer http://www.forum.nokia.com/
    68. 68. Resources Code Example
    69. 69. WRT Widget Testing Create 1st WRT Widget http://wiki.forum.nokia.com/index.php/ Create_your_first_WRT_widget
    70. 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
    71. 71. Resources Advance WRT Widget
    72. 72. WRT Widget Testing Create 1st WRT Advance Widget http://wiki.forum.nokia.com/index.php/ Create_your_first_WRT_widget_using_an_IDE
    73. 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. 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. 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. 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. 77. END

    ×