All blogs

Who am I?

(Above is public photo taken by user "jciv" at flickr.com http://flickr.com/photos/jciv/)

This weblog is about web technologies and news. Welcome to exchange your thoughts about the web. I am hoping to invite some guest and partner writers for this site. Therefore you may see multiple writers blogging here.

Calendar

«	April 2009	»
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Recently...

Syndicate

Forum Nokia Web Talks

Turn my S60 WRT widget into an iPhone app
wmseto | 19 April, 2009 04:48

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

Picture 3.png

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. :-)