Opera Platform
Introduction
The Opera Platform SDK is a framework for building web based applications on mobile devices. Currently it only supports Symbian devices running Series 60, but according to Opera the SDK will also be available for Windows Mobile devices. It uses HTML and Stylesheets to present the user interface, and Javascript for functionality. It also supports developing AJAX applications using XMLHTTPRequest. This makes developing for the Opera Platform SDK very similar to developing web applications. Additionally the SDK provides access to phone functionality such as messaging or receiving events from the hardware buttons. The XMLHTTPRequest object can also read files on the device filesystem. All the example applications can be found in this archive.
A simple AJAX tutorial
In this chapter we will make a simple AJAX web application which converts between different currencies. The example uses a freely available web service [IV]. I will later show how to modify this application to make it an Opera Platform Web Application.
AJAX is asynchronous, because you don’t wait for data to be returned from a server, but rather hava a function be called when data is returned. This function is supplied by the XMLHttpRequest objet. Also there is no need to reload the entire web page, as it is possible to modify the DOM tree[VI] using JavaScript code.
Making the HTML document
The HTML document will consist of two lists of available currencies, an input for amount to convert, a button to do the conversion and a paragraph for displaying the result. In this example I have only included a few currencies, but the complete list is used in the example.
Currency Converter
| From: | |
| To: | |
| Amount: | |
Adding the script
This gives us our user interface, but still nothing happens when we click the ‘Convert’ button. The first step is to create the XMLHTTPRequest object. The XMLHttpRequest object is supported on most modern browsers, but in MS Internet Explorer it is an ActiveX component, so this needs to be concidered. We will now add code to make this object, the following script should be placed in the head tag.
Asynchronous communication with server
Now we will need to send a request to the web service. Insert the following code into the script above.
var convert = function() { // Retrieve data from the input fields. var f = document.getElementById('from').value; var t = document.getElementById('to').value; // If from and to are the same, no need to send request to server. if(f==t){ var amount = document.getElementById('amount').value; document.getElementById('result').innerHTML = amount + ' ' + f + ' = ' + amount + ' ' + t; return; } // Make the GET Request URL http.open('GET', 'http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate?FromCurrency='+ f +'&ToCurrency=' + t); // Specify a function to handle the result http.onreadystatechange = handleResponse; // Send request http.send(null); }
The last three statements are where AJAX comes into the picture. First we create the request using http.open. As mentioned AJAX is asynchronous. Therefore our convert method will not wait for an response from the server, rather we let XMLHttpRequest take care of that. When the response is ready the http.onreadystatechange method is called. In the example we set handleResponse as our onreadystatechange method. The last line sends the request to the server. Often this function call will work without the null parameter. However the IE ActiveX component require it, and other implementations will ignore it, so it’s best not to leave it out. The last step is to create the handleResponse method which will be called when the response from the server is ready.
var handleResponse = function() { // Check if response is correct if(http.readyState==4 && http.status==200){ var f = document.getElementById('from').value; var t = document.getElementById('to').value; var amount = document.getElementById('amount').value; // The response is XML var xml = http.responseXML; // The rate is in a 'double' tag var rate = xml.getElementsByTagName('double')[0].firstChild.nodeValue; // Do the conversion var result = rate*amount; // Display the result document.getElementById('result').innerHTML = amount + ' ' + f + ' = ' + result + ' ' + t; } }
First we check if the response is correct. Then we parse the resulting XML document. The format of the result is specified by the web service. Using XML formated data is common, but not required. Any text based format will work. Then we update the DOM tree to display the result.
The last thing we need to do is to attach functionality to the ‘Convert’ button, so we’ll switch the button code with the following
This will cause our convert method to be called when button is clicked.
Installing the SDK
The SDK is available for Series 60, and for a desktop environement. All installation files can be downloaded from the Opera Platform Developer forum[I]. The desktop environment can be used for development and testing without having to copy the application to the phone. However the desktop environment doesn’t support phone functions such as messaging and making calls, so using this functionality will cause your application to fail silently on the desktop.
Installing the desktop environment
To develop web applications in a desktop environment you need to download the Opera Platform enabled version of the Opera Desktop Browser. After signing up to at the Opera Platform website[I] download and install the Windows/Mac OSX/Linux Opera Platform browser. This is a custom version of the standard Opera web browser, with relaxed security. Therefore it is not recommended for ordinary browsing, but can be installed in a separate directory, and used alongside the standard Opera web browser. Then you will need the Opera Platform SDK Zip archive for desktop. Unzip this to any location. This archive contains the Opera Platform and some demo web applications. To start the Opera Platform go to the oxygen-sdk-1.0-beta1-rev1\ directory and open the home.html file. This will launch the Opera Platform in the Opera browser.
Installing the Series 60 SDK
To run your web applications on a Series 60 device you will need to install the Opera Platform Application Player for Series 60. This has the same function as the Opera Platfrom Desktop browser. The application player can be downloaded from the same location as the desktop environment. If communication between the phone and computer is set up correctly you can just run the SIS file to install the application player. It is recomended to install to a memory card rather than on the phone memory if possible. Also download and install the Opera Platform SDK SIS installer for Symbian Series 60. This is exactly the same as the Opera Platfor Zip archive, so you could also just copy the desktop installation, but the SIS file is more convenient. The Platform SDK will be installed in System\Apps\op\data\ directory, which will contain the same as the oxygen-sdk-1.0-beta1-rev1\ directory for your desktop environment. From now on I will refer to this location as the root directory of the SDK installation, both for desktop and device. The SIS file will install an icon called Web apps in your Series 60 application menu, which will open the Opera Platform.
Other useful tools
- P3NFS - On Linux it’s possible to use P3NFS, which lets you mount the Symbian filesystem on your local filesystem. Thus enabling you to develop directly on the target device.
- FExplorer - FExplorer is a file system browser that give you access to the complete file system. It is usefull for copying web applications from the visible parts of the file system to the target location.
- MakeSIS - Used to make SIS files, that can install your application without having to manually move it from the visible part of the file system.
Making Opera Platform Web Applications
In this part we will make the currency conversion application into an Opera Plataform web application. To achieve this we need to include the Opera Platform framework script, and the Opera Platform persistent stylesheet. Also we can specify an application class. The following code includes the Opera Platform framework script and the Opera Platform persistent stylesheet:
We give the map container as a parameter to the YMap constructor. Then we call the drawZoomAndCenter method to draw a map of the location specified by myPoint with zoom level 3. Further we make the appdef.xml file as usual, but this time we specify loadMap as the application class.
loadMap
This example isn’t really programmed in an object oriented fashion, so the only effect specifying loadMap as the application class will have is that it will be called when the application starts.
Adding controls
Now we will add some controls to the map. The YMap object provides functions for panning and zooming, so all we need to do is make a user interface that trigger theese functions. We add some links
[N] [S] [W] [E] [+] [-]
Then we add the panMap, zoomIn and zoomOut functions to our javascript.
function panMap(direction){ // Retrieve current position var myPoint = myMap.getCenterLatLon(); // Move 20px var crd = myMap.convertLatLonXY(myPoint); switch (direction){ case 'N': crd.y=crd.y-20; break; case 'S': crd.y=crd.y+20; break; case 'E': crd.x=crd.x+20; break; case 'W': crd.x=crd.x-20; break; } // Write to lat/lon object myPoint = myMap.convertXYLatLon(crd); // Pan to new location myMap.panToLatLon(myPoint); } function zoomIn(){ var zoom = myMap.getZoomLevel(); if(zoom<=1) return; myMap.setZoomLevel(zoom-1); } function zoomOut(){ var zoom = myMap.getZoomLevel(); if(zoom>=16) return; myMap.setZoomLevel(zoom+1); }
Using Opera Platform DOM Interface - Sending SMS
The Opera Platform SDK offers developers access to some platform specific functionality, such as battery indicators and messaging, through JavaScript. All of the DOM Interface functionality[III] is available thorugh the device object. In this example we will send an SMS message, but sending other messages (MMS, E-Mail etc.) is very similar.
draft = device.createMessage(); contact = device.createContactByAddress('sms',phone_nr); draft.to.add(contact); draft.content = message; sent = draft.send('sms');
First we create a DraftMessage object using device.createMessage. Then we create a contact using device.createContactByAddress, specifying that it’s an SMS contact so the address is a phone number. Contacts can also be fetched from the phone contact list. The contact list can be accessed through the deviece.contacts object, which is of type ContactList. The next step is to add contacts that will recieve the message to the to object in line 3. The DraftMessage object has a list of attachments, this is an AttachmentList object named attachmens. This is where we add the contents of the message. The content object however is a shorthand for accessing the first text/plain attachment’s text attribute, so for SMS text messages it is sufficient to use the content object. This is set in line 4. The last thing to do is to send the message through the send method. This is done on the last line, with the argument ’sms’ specifying it is an SMS message to send. The send method returns a CompleteMessage object.
A complete example of and SMS sender application can be found below.
SMS Sender
| Send to: |
| Message |