My name is Alessandro La Rosa, and I'm a freelance software architect for Mobile and Web platforms. I'm living in Rome, Italy.
Feel free to contact me at: info@jappit.com
Today’s new QML tutorial shows how to implement a simple View Manager in QML.
The video below shows how the component behaves on a Nokia N8 device.
Check out the full article on Forum Nokia Wiki: simple QML View Manager.
Today I’ve published a new technical article on Forum Nokia Wiki, that shows how a CoverFlow component can be easily built with Qt Quick and QML.
You can see a video of the CoverFlow component in action on a Nokia N8 device below.
The full source code is available here: Building a CoverFlow component with QML.
Forum Nokia has just updated its excellent resource for mobile Web development, the Web Developer’s Library, adding a lot of resources to support the design and development of Web Runtime widgets.
Changes in this last release include:
If you’re a mobile Web developer, check it out!
When developing a Flash Lite, Web Runtime or Java ME application based on API Bridge, one of the things you know you’ll have to deal with is the Symbian packaging and signing process.
For single-person and small developer teams, the whole Symbian process could be a not suitable option. For this reason, I’ve looked for an alternative deployment approach that could bypass this process. The approach presented here is based on a delayed deploy model, meaning that the API Bridge engine is not deployed with your application, but in a successive moment: actually, it is deployed only when the application needs it.
How this can be achieved? Basically, there are 2 possible options to implement this model, and they’re based on:
If the target devices support Platform Services, the AppManager API can be used to retrieve the list of installed applications, and so to check if API Bridge is installed on the device itself.
The code below shows how this can be achieved by using JavaScript in a WRT widget. The same approach can be easily ported to ActionScript, and so used in a Flash Lite application.
var apiBridgeFound = false; var apiBridgeCheckError = null; var so = device.getServiceObject("Service.AppManager", "IAppManager"); var criteria = new Object(); criteria.Type = 'Application'; var result = so.IAppManager.GetList(criteria); if(result.ErrorCode == 0) { var iterator = result.ReturnValue; var application; while((application = iterator.getNext()) != undefined) { if(application.Uid == '0x20023710') { apiBridgeFound = true; break; } } } else { apiBridgeCheckError = result.ErrorMessage; }
The code works by checking the UID of all the installed applications, comparing them with the API Bridge UID (0×20023710). This code snipped defined 2 variables, that can be used to check for API Bridge availability:
So, once these 2 variable have been set, the application can perform the most appropriate operation, based on the AppManager call result. The code snippet below shows a possible implementation:
if(apiBridgeCheckError != null) { alert("There was an error! " + apiBridgeCheckError); } else if(!apiBridgeFound) { if(confirm("You have to install API Bridge to continue, press OK to download it")) { widget.openURL('http://www.yourserver.com/APIBridge_v1_1.sis'); } } else { alert("API Bridge is already installed on the device!"); }
And below you can see this code running on a Nokia 5800 XpressMusic:
Since the API Bridge engine works as a local HTTP server running on the mobile phone, the other possible approach is to make an HTTP request, and to check if any response from API Bridge comes.
Note: this approach works by using the API Bridge default port (9080). There are no guarantees that this port number is fixed, and that it will not be changed in future API Bridge releases. For this reason, my advice would be to use this second approach only when Platform Services are not available.
The code below shows how to make a request to the local API Bridge HTTP server, and how to check if it’s running or not: if it is running, the response status of the XMLHttpRequest object has to be different than zero.
function pollApiBridgeServer(_callback) { var request = new XMLHttpRequest(); request.open("GET", "http://127.0.0.1:9080", true ); request.send(null); request.onreadystatechange = function() { if( request.readyState == 4) { if(request.status != 0) { _callback(true); } else { _callback(false); } } } }
The approach described here can be used also when using API Bridge from other languages, as Flash Lite or Java ME. Anyway, when working with Flash Lite, in the scenario where API Bridge is not yet installed, you will incur in the typical (and horrible) error popups, that will inform you (and so the user) that the network call failed.
How to use the code above? First, define a callback:
function pollApiBridgeCallback(apiBridgeInstalled) { if(apiBridgeInstalled) { alert("API Bridge is already installed on the device"); } else { if(confirm("You have to install API Bridge to continue, press OK to download it")) { widget.openURL('http://www.yourserver.com/APIBridge_v1_1.sis'); } } }
Then, just call the pollApiBridgeServer() method by passing a reference to this callback:
pollApiBridgeServer(pollApiBridgeCallback);
Using one of the two approaches discussed above as some important advantages over the standard API Bridge deployment mechanism:
On the other side, these approaches have the main drawback on the user-experience side, since your users could be asked to download and install an additional component when they start to use your application. Anyway, this event will happen only once at most, so it could be considered reasonable in most scenarios.
Hi Alessandro , I’m trying to understand how to package/install a custom API bridge with a J2ME app. A specific post about that would be great. Thanks.
Hi Alessandro, Is there anyway to change themes phone using APIBridge by requisition for wrt ?
I wait answer, Thanks !
Yes, by implementing a custom plugin you can also let a WRT widget change the device active theme. This Forum Nokia Wiki article could help for the C++ part:
http://wiki.forum.nokia.com/index.php/TSS000456_-_Changing_the_active_theme
Hi,
I’m trying to use APIBridge on my app as you explain on this post, but whenever I try to do a function call (ie: retrieve the list of photos, or resize an image), the app crashes without any warning. Just quits and that’s it. The APIBridge detection is working as you outlined.
Do you know any way I can troubleshoot, where/if any logs exist that explain the cause?
Thanks a bunch.
Forum Nokia has recently published a very informative guide about developing RIAs for mobile devices: A developer’s guide to creating Rich Internet Applications for Nokia devices.
The document focuses on three kind of applications: websites, web apps, and stand-alone Adobe Flash applications, covering all topics involved in design and development of a RIA, from development tools to user experience design and evaluation, from testing to going to market.
Mobile offers significant opportunities for RIAs. The ability to access data and information anywhere there is a suitable network connection is of significant appeal to mobile users. The knowledge that their data is also securely stored on a remote server, regardless of what happens to the mobile device, is a significant attraction as well.
With many hundreds of millions of Nokia devices already in the market place that can run RIAs now, there has never been a better time to go mobile with your RIA.
We’ve seen, in this previous post, how to setup Eclipse in order to develop both Web Runtime widgets and Flash Lite applications, thanks to Aptana, the Nokia Web Runtime plugin and FDT. This article will focus on how to create a Web Runtime widget that includes some Flash Lite content.
First of all, be sure to have installed all the required Eclipse plugins, as described here.
To create a Web Runtime widget, just open up the “New Project” wizard and select the “New Nokia Web Runtime Widget”.
The wizard will now let you choose from some predefined widget templates. In this article, it is enough to start with an empty widget.
And finally enter the name and identifier of your new widget. The identifier has to be a string in the reverse domain format, and will uniquely identify your own widget.
Once created, the widget’s structure should be the one shown below.
First, create a new Flash Lite project by using the “New Flash Project” template. Then, create the project’s main class. One example is the MainMovie class shown below:
class com.jappit.flashlitetest1.MainMovie { public function MainMovie() { } public static function main(container : MovieClip) : Void { Stage.align = "TL"; Stage.scaleMode = "noScale"; container.createTextField("tf", 1, 0, 0, 100, 100); var tf : TextField = container["tf"]; tf.text = "I'm the Flash Lite content!"; } }
Now, the MTASC command has to be changed a bit, so that the generated SWF will automatically end up in the Web Runtime widget project’s folder.
To do this, open up the MTASC launch configuration, and change the generated SWF path to be a subpath of your widget’s main folder. You can see an example of the command in the picture below.
Now, run the project launch configuration, and check the widget’s folder: the SWF generated by MTASC should be there, together with the other widget’s files.
Forum Nokia Wiki has a comprehensive article explaining the possible ways of integrating Flash content into a Web Runtime widget. In this article the first described approach, the same used on the Web, is implemented.
So, take the widget’s index.html file, and add this HTML code:
<object id="MyFlash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200" height="200" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="align" value="middle" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="loop" value="false" /> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="bgcolor" value="#ffffff" /> <param name="src" value="default_mtasc.swf" /> <param name="name" value="Finish" /> <embed id="MyFlash" type="application/x-shockwave-flash" width="200" height="200" src="default_mtasc.swf" name="Finish" bgcolor="#ffffff" wmode="opaque" quality="high" menu="false" loop="false" allowscriptaccess="sameDomain" align="middle"></embed> </object>
If all went well, all is ready to be packaged and deployed.
Right click the project, choose “Package widget”, deploy and enjoy!
You can download the widget built in this article here: Flash Lite enabled WRT sample widget.
Thanks for the write up man.
nice article, thanks for posting.
Thank you! Glad to know you liked the article
max is discussing. 
Pedro Cardoso, 
Diogo Moreira, and 1 other are discussing. 
max 9:35 am on March 30, 2011 Permalink
Hi Alessandro,
thank you for a really cool article. I am having problems understanding the visibleChanged signal:
function connectViewEvents(view)
{
view.visibleChanged.connect(function() {
SVM.showView(view);
});
where is the signal visibleChanged declared? Can you kindly explain the connect call and how it works?