Forum Nokia Web Talks

Guarana UI: a jQuery-Based UI Library for Nokia WRT available

wmseto — Wed, 18 Nov 2009 21:58:26 +0200

A Nokia WRT UI framework has been posted in Forum Nokia Wiki page. This will accelerate current WRT widget developers to create innovative applications. Up until now a version of WRTKit UI framework has been shipped with our WRT Plug-in tools for Aptana, Dreamweaver, and MS Visual Studio. Web developers have been asking for UI framework that is closer to what is used in the real world. jQuery is a popular JavaScript UI library/framework. With Guarana UI, developers have one more option to create their WRT widget applications.

http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT

This is the documentation of the Guarana UI - a jQuery-Based UI Library for Nokia WRT. Nokia WRT is a development and delivery platform that allows the creation of applications (widgets) based on standard web technologies, such as HTML, CSS, JavaScript, and AJAX.

Wai Seto
FNDC

Web Runtime APIBridge

wmseto — Thu, 05 Nov 2009 20:19:27 +0200

From Nokia has now release an APIBridge component for WRT developers. This component was once internal and only available to our selected partners (e.g. facebook, netflix, project). FN has now approval from internal teams to release to general developers.You can find the download here:http://www.forum.nokia.com/info/sw.nokia.com/id/d697a64f-ddae-4937-8151-be157b542d26/ApiBridge.html

DescriptionApiBridge enables developers to extend the features of Web Runtime widgets by using various capabilities of Symbian OS. The capabilities available include:

Uploading files.
Capturing video, image, and audio.
Reading files.
Resizing images.
Creating image thumbnail.
Using the logging service.
Using the location service.
Using the media management Service

Supported platformsApiBridge can be used to access Symbian OS capabilities from WRT widgets on the following platforms:S60 5th Edition.S60 3rd Edition, Feature Pack 2.S60 3rd Edition, Feature Pack 1.Wiki doc is here with a list of features: http://wiki.forum.nokia.com/index.php/APIBridge_Web_Runtime_API

-Wai Seto

Ovi APIs/SDK Whereabouts in Oct-09

uptian — Fri, 02 Oct 2009 15:20:32 +0300

Oct is a busy month for industry events and so does Ovi. You find the Ovi evangelists at Nokia booth @ CTIA in San Diego (7-9 Oct), Web 2.0 Summit in San Francisco (oct 20-22) and Symbian Exchange in London (Oct 27-28). At the Ovi APIs/SDK demo pod, we will show you the latest Ovi APIs/SDK offering and demostrate the Ovi apps from the Calling All Innovators, Apps on Maps winners, websites with Ovi Maps embedded (e.g. www.earthcomber.com, www.tunewiki.com/nokia and etc). If you want to see/touch the Ovi for developer offering, please come by Nokia booth and say hi.

We have been working closely with selected beta developers since Sept 3 announcement at Nokia World. Many of the beta participants provided us great inputs and suggestions on the APIs/SDK. This is a great collaboration between Nokia and developers to work together to improve Ovi developer offering. if you want to be part of the fun, join the beta program here. We are constantly look for innovative Ovi apps and websites so we can work with you to enhance/complete the apps/websites. For those innovative apps/websites, you may get a chance to work with us to demostrate your apps to the industry audience, developers at events or conferences.

Example of websites with Ovi Maps embedded

uptian — Sun, 13 Sep 2009 19:40:43 +0300

I would like to share some of our developers’ websites with Ovi Maps embedded and their quotes. These developers have joined the Ovi for developer Beta Program and gained access to the Ovi Maps Player API which allows them to embed Ovi Maps within their websites.

    * www.earthcomber.com
          o Quote from James Brady, Founder and President of Earthcomber LLC: Not only is the environment is better, and Ovi maps produce amazing visual perspectivies, it’s ultimately control and flexibility that count. We can see immediately that Ovi supports openness and is built, frankly, for orchestrating technologies into the unique experience you’re always aiming for

    * www.tunewiki.com/nokia
          o Quote from Amon Sarig, President, TuneWiki Inc: Ovi is so cool and powerful we decided to swap our existing maps solution to Ovi Maps. The Nokia team is second to none in their entrepreneurial spirit and the way they go out their way to help us

    * www.nstreet.it/map/esperiene
          o Quote from Stefeno Guerra. IT Manager, The BlogTV : The integration of Ovi Maps Player in Nstreet was easier than expected. Meaning the code is strong and has been developed and tested by a top quality team.

We continue to work with them to enhance the website experience with Ovi Maps. They have provided lots of good feedback to us to continue improving the Maps Player API. Take a look of the above websites and your comment/feedback is welcome.

For more details of the Ovi Maps Player API for web, check it out here, http://www.forum.nokia.com/Ovi/Ovi_Maps_Player_API.xhtml

Nokia Introduces Ovi APIs and Ovi SDK Beta for Publishers and Developers

uptian — Thu, 03 Sep 2009 13:44:21 +0300

Nokia has made it easier for web publishers and developers to quickly and easily create applications with integrated services and native-like user interfaces, using the all new Ovi APIs and the Ovi SDK Beta. Nokia will regularly roll out web and mobile APIs for its services, beginning with the Ovi Maps Player API and the Ovi Navigation Player API for cutting-edge location-based solutions on its smartphones.

Nokia is inviting developers to preview this new developer offering by joining its Ovi for developers Beta programme, and it will make the Ovi SDK Beta and Ovi APIs available to all developers who are approved to join the programme. Applications created with Ovi SDK Beta and Ovi APIs will be distributed through Ovi Store in early 2010, bringing the applications to the hands of millions of consumers around the world.

Developers that register for the programme will have access to the following:

Ovi SDK Beta - An easy-to-use, web-based tool which provides resources to create applications for the web, and Symbian and maemo platforms, with integrated Ovi features and a distinct user interface. The Ovi SDK contains the Ovi APIs and all-new Ovi User Interface (UI) libraries, which enable effortless creation of rich applications. The Ovi SDK Beta uses standard web technologies – such as HTML, CSS and JavaScript – that are familiar to the world’s developer community.

Ovi APIs – Providing developers with a simple way to integrate features and functionality such as maps or navigation into their web applications. To start, Nokia has introduced the first two Ovi APIs:

Ovi Maps Player API – Bringing maps to mobile and web applications effortlessly. The API is powered by NAVTEQ and features more than 180 country maps, location-based search, and detailed place information. Other features include vector-based maps that give a range of views, including: map, terrain and 3D modes for dynamic map mash-ups. The Ovi Maps Player API for the web was introduced earlier this year

Ovi Navigation Player API - Allowing developers to bring Nokia’s industry-leading walk and drive navigation features to their applications, including: pedestrian navigation, turn-by-turn car navigation, and route planning. Developers can deliver applications that get consumers exactly where they want to go.

Request access to join the Ovi for developers Beta programme now.

Tech Buzz Homescreen Widget

wmseto — Wed, 02 Sep 2009 03:42:40 +0300

Grand Prize winner in the Internet Innovation category of the 2009 Forum Nokia Calling All Innovators contest: the Tech Buzz Homescreen Widget

Link to Ovi store entry

I have it running on my N97. The developer has spent a log of time to make this widget attractive! There is a little ad box at the bottom, but it is not intrusive at all. A good example of try to bring some money in with your widget.

Are you using my (un-official) Forum Nokia Facebook app?

wmseto — Fri, 01 May 2009 23:16:53 +0300

Last year I experimented how to write Facebook apps, I created two. One of them was created to show Forum Nokia news/feeds. How many of you know about it? If you are interested, you can add it into your Facebook profile. The home page of this app has a link to the source code. You are welcome to reuse it.

Forum Nokia News
App link: http://www.facebook.com/apps/application.php?id=22623363472

Just a reminder, you can do the same with iGoogle. Here is my previous post on this topic .

- Wai Seto

Turn my S60 WRT widget into an iPhone app

wmseto — Sun, 19 Apr 2009 04:48:43 +0300

It's possible... Not perfect yet.

Couple months back, I experimented S60 WTR (Web-Runtime) widget with Google Translate API. It was a fun excise. One of the key reasons to write WRT widgets instead of native programming languages (C/C++) is because JavaScript, CSS, HTML are widely supported on browsers and many mobile platforms. Apple, Google, Palm, Qt and Nokia all have webkit engines on their mobile platforms... So ideally my code should work on all mobile platforms. Unfortunately, not all mobile platforms offer "widget" development "per-se". Here is my attempt to turn my S60 WRT widget into an iPhone app. Nothing spectacular here and I think most developers can figure these out anyway. There are some items I still don't know how to solve and try to get workarounds.

(Disclaimer: I am only writing this to demonstrate the advantage of using standard web technologies to achieve cross (mobile) platforms programming. This is not to promote one or the other platform.)

What I have done

(You do need the SDK and the compilers, etc...)

Step 1) There is a new sample code (dated 2009.04.12) in IPhone Developer web site named "TransWeb" (registered users only). It pretty much gives me everything I need. The sample use a module called "UIWebView" (a webkit based UI control). It loads a HTML page into the view. The control also allows JavaScript to be run, so it is almost like a widget engine.

Step 2) Uncompress the sample code, and you will find an html file named webViewContent.html. I simply cut and pasted the my Google Translator code I had into this html file.

Step 3) Rebuild the sample code and there you have a S60 WTR widget turns iPhone app!

Some findings and limitations

1) I cannot store data, such as user name and password., via JavaScript, since there is no direct file access from UIWebView. Nokia S60 WRT allows you to save data in the preference list and (soon) in file system, so that is handy. A work around for now is (actually, my widget don't need any data to be store, but just for the sake of investigation) I can use the native UI to store username and password. In my JavaScript code, I place something like 'var = "_VAR_";' statement. At the time I load the HTML content, I just substitute the variable to what I need.

NSString *finalHtmlString = [htmlString stringByReplacingOccurrencesOfString:@"_VAR_" withString:@"username"];

Therefore when the time of the JavaScript is loaded the right content is set in the variable. (if you know of a better way, let me know!)

2) I have found UIWebView zoom out quite a bit by default. I believe the UI control has a property to set autosize or fit to screen. I have not try the property myself. In stead, I put this tag in the HTML <meta name = "viewport" content = "width = device-width, height = device-height">in the <head></head> section. And the zooming works nicely for me.

3) Graphics... I am not able to load any local graphics. For example, <img src="something.jpg"> don't show anything. I am still looking into it. May be I have missed something

3) JavaScript and HTML are in a single file. Related to above, I cannot reference any local file yet. However, external JavaScript is okay; for example, the Google Translate API works perfectly.

Finally, some screen shorts

It would be really nice if there is some local storage... Then graphics can be loaded from the phones and all kinds of interesting can happen. Can someone tell me it is possible and I have just missed it? :-) I am still playing around with this, and hopefully I will have some updates here again soon. It is almost the same as my S60 version. :-)

- Wai Seto

Google Translator Widget for S60 WRT

wmseto — Tue, 27 Jan 2009 00:38:49 +0200

First happy (lunar) new year!

Story: This morning I wanted to send some Chinese SMS msgs from my phone, because today was the Lunar New Year. However, I couldn't find a way to give me easy translated strings... I searched a bit on the Internet; there were some S60 WRTs already, but none seemed to let me cut and paste the results... I was suprised no one (at least I couldn't find) had created a Google Translate version for S60. So I had done the engineer's way, write it myself; here I go... I wrote the whole thing in less then 20 min. Believe me, it took more time to upload the widget to MOSH, create the preview pictures, and write this post to tell you about it.

Comments and suggestions are welcome. If there are updates, I will post the links in this post or my personal blog here.

Some tips:

1) If you interested in reading more about Google AJAX Lanaguage API, here is the link: http://code.google.com/apis/ajaxlanguage/documentation/#Examples

2) If your favorite language(s), are not there you can change the code your self. Go into the widget index.html and change this section

    <select id="tlang">
    <option value="zh-TW">Chinese Trad</option>
    <option value="zh-CN">Chinese Simpl</option>
    <option value="en">English</option>
    <option value="fi">Finish</option>
      <option value="fr">French</option>
    <option value="de">German</option>
      <option value="it">Italian</option>
      <option value="ja">Japanese</option>
    <option value="ko">Korean</option>
    <option value="pt">Portuguese</option>
    <option value="es">Spanish</option>
    </select><br/>

(there are other resources about widget development, for example here, so I am not going into that here.)

That is really, now here is the link in to download and install the widget:

Here is the first (0.1) version: GoogleTranslator0.1.wgz

Update 01:
I have put the index.html on my web, you can use any browser to use this web app (S40 and others):
http://camelot.net/stage/gtranslator/

Update 02, 2009.02.01:
Symbian Freak site has reported this widget, thanks guys! link

Update 03, 2009.02.25:
This widget has made top 10 freeware for Samsung over at AllAboutSymbian.com, thanks Steve! link

Update 04, 2009.04.06:
Since MOSH will be closing shortly, I have moved the widget file to this site. The link above is updated. Unforunately, I will not have the capability to track how many people have downloaded the widget... My last count of user download from MOSH is...

Update 05: 2009.04.18
If you are a developer and enjoy reading this, you might also be interested in my new article on Turn my S60 WRT into an iPhone app: http://blogs.forum.nokia.com/blog/forum-nokia-web-talks/2009/04/19/turn-my-s60-wrt-widget-to-an-iphone-app

Update 06: 2009.08.28

I suddenly decided to make a demo video... for no reason... kinda fun

- Wai Seto

Access FN feeds and Ovi site via iGoogle full canvas

wmseto — Fri, 24 Oct 2008 10:42:26 +0300

iGoogle recently has launched a feature to allow gadgets to show in canvas view. I have tried a few canvas view enable gadgets and really like them. Then I remember a while back, using the sample Feeds/Tabs sample, I have modified it to read rss feeds from Forum Nokia and made a iGoogle gadget. And tonight, I have made a few modifications to enable canvas view. It looks quite okay. Quickly, I've written another one with iframe to access Ovi.com.

Okay, so the URLs to add these two gadgets are:

Forum Nokia Feeds: http://camelot.net/stage/google/fn_feeds_tabs_ig_01.xml

MyOviGadget: http://camelot.net/stage/google/myovigadget_01.xml

Steps to add them to iGoogle

1) Login to iGoogle... (hum... if you don't know how to do this, you probably should move on... )

2) Find "Add Stuff" link, it should be on the top right somewhere, click it.

3) Now at the left hand side, find "Add feed or gadget".

4) Copy and paste one of the xml link above to the dialog box, click "add".

5) That's it. Go back to your iGoogle home page and observer the Home and Canvas view.

Questions? Comments? Feel free to download the xml files and improve them yourself. If I have more time, I will look into what OpenSocial things I can do with these gadgets.

Bye Bye!

- Wai Seto

P.S. I have also experimented a similar FN feeds app on facebook: http://www.facebook.com/apps/application.php?id=22623363472 Let's get social