Your first Opera Platform application
If you are a web application author, and you want the opportunity to win a prize, you should continue reading this. My employer, Opera Software ASA will reward the author of the best Opera Platform web application with a brand new Nokia N70 (sorry guys for linking to something so Flash-centric, but trust me, this phone is pretty sweet). The deadline for the competition is before the end of December 18th, 2005 (GMT). To be eligble for participation, you must be a member of the Opera Platform Group at the My Opera community. Sign up, and get your chance.
To help you get started with the absolute basics of Opera Platform Web Applications, we have written a short tutorial (posted both here in this blog, and on Opera’s own site, if you prefer reading documentation on official sites). Reading it should take about ten minutes, and then it’s all up to you, your creatitivity and raw coding skills. Read on.
From standalone web page …
First, let’s start off with a completely plain “Hello World” page:
<!DOCTYPE html>
<html>
<head>
<title>My first Opera Platform Application</title>
</head>
<body>
<h1>Hello world!</h1>
<p>My first Opera Platform Application</p>
</body>
</html>When creating this file, we should write it to a directory in the Opera Platform Application Framework. For this example, it is assumed that you create a folder named ExampleApp in that directory, and that you save this file as index.html
… to Opera Platform
Yes, that’s it: Just a plain, old web page using HTML. Now let’s make it an Opera Platform application, by adding a reference to the framework script, and an application constructor class:
<!DOCTYPE html>
<html>
<head>
<title>My first Opera Platform Application</title>
<script type="application/vnd.opera.jsobj"
src="../oxygen.jsobj"></script>
<script type="text/javascript">
var MyExampleApp = function(){ }
</script>
</head>
<body>
<h1>Hello world!</h1>
<p>My first Opera Platform Application</p>
</body>
</html>The noteworthy lines here are the ones including the Opera Platform framework, and the Application constructor function. This application constructor function will later be referenced by the application definition file described later in this manual:
<script type="application/vnd.opera.jsobj"
src="../oxygen.jsobj"></script>
<script type="text/javascript">
/* Application constructor class.
We'll leave this empty for this
simple tutorial */
var MyExampleApp = function(){ }
</script>After we have done this, and we have added all the neccessary application definitions (how to do this is explained later in this tutorial), we have a minimal, functioning Opera Platform Application:
The application doesn’t yet seem to quite fit in within the Opera Platform Application Framework — but that is because we haven’t included the persistent stylesheet that makes the application’s appearance uniform with other apps yet. To make the application appear as being a part of an Opera Platform Application, we will have to include the Opera Platform persistent stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>My first Opera Platform Application</title>
<link rel="stylesheet" type="text/css"
href="../chrome/persistentStyles/persistentStyles.css"
media="screen,handheld,projection">
<script type="application/vnd.opera.jsobj"
src="../oxygen.jsobj"></script>
<script type="text/javascript">
var MyExampleApp = function(){ }
</script>
</head>
<body>
<h1>Hello world!</h1>
<p>My first Opera Platform Application</p>
</body>
</html>Please note that the persistent stylesheet is used both in projection, handheld and screen mode. This is being done to make the application look the same whether run inside a desktop browser, or on a browser. By this time, the application will have inherited some styles from the persistent styles, and looks like this:
More styling
As seen in the last screenshot, a few aspects of the styling is not done yet — the margin and padding is a bit off, and the text doesn’t have a background color. These can be added by adding some style definitions. We can either add these in an external stylesheet, or in a <style> element. Since we are dealing with single-page applications, adding these styles directly to the document is often beneficial, since file access on devices tends to be slower than on a desktop computer. This is especially true when Opera Platform is being run from an external memory card.
The code for our example application, with the neccessary styles added:
<!DOCTYPE html>
<html>
<head>
<title>My first Opera Platform Application</title>
<link rel="stylesheet" type="text/css"
href="../chrome/persistentStyles/persistentStyles.css"
media="screen,handheld,projection">
<script type="application/vnd.opera.jsobj"
src="../oxygen.jsobj"></script>
<script type="text/javascript">
var MyExampleApp = function(){ }
</script>
<style type="text/css"
media="screen,handheld,projection">
body {
margin: 0;
padding: 0;
}
h1 {
margin-top: 0;
margin-bottom: 5px;
}
p {
background-image: url(../../themes/shared/white50.png);
background-repeat: repeat;
margin: 5px 5px 0px 5px;
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>My first Opera Platform Application</p>
</body>
</html>By now, the application looks like it belongs in the Opera Platform Application Framework:
Adding your application to the framework
The final steps to creating an Opera Platform Application consists of two more steps:
- Adding the application to the list of registered applications. This file is always located in the root directory of the framework, and is always named registeredApps.xml
- Creating an application definition file. This file is always named appdef.xml and is located within the directory where the application lives.
registeredApps.xml
The registeredApps.xml is a simple xml document that contains references to all installed applications. A minimal version of the file can look like this:
<?xml version="1.0"?>
<services>
<url serviceid='200'>themes/index.html</url>
<url serviceid='203'
type='persistentService'
activeFrontpage='true'>appGrid/appGridNew.html</url>
<url serviceid='210' type='persistentService'>URLManager/URLManager.html</url>
</services>The serviceid attribute must always contain an integer that is locally unique, e.g. it must not appear on multiple <url> elements. The type attribute can have the value persistentService if we want to keep the application permanently loaded into memory, and we can use the activeFrontPage attribute on one application, to make that application the active front page application — the application that is initially displayed after loading. These optional parameters can safely be ignored. Now, let’s add our example application (there is no reason to delete any other entries in the default registeredApps.xml file:
<?xml version="1.0"?>
<services>
<url serviceid='200'>themes/index.html</url>
<url serviceid='203'
type='persistentService'
activeFrontpage='true'>appGrid/appGridNew.html</url>
<url serviceid='210' type='persistentService'>URLManager/URLManager.html</url>
<url serviceid='512'>ExampleApp/index.html</url>
</services>The final step: appdef.xml
The appdef.xml file is the last thing we need to create to have a real, working Opera Platform application. The file for our example application should look like this:
<?xml version="1.0"?>
<serviceDefinition xmlns="http://www.w3.org/1999/xhtml">
<name>Hello!</name>
<guid>bfgsdbrterewrwut7856</guid>
<version>0.1</version>
<screenName>Hello!</screenName>
<author>Opera Software ASA</author>
<javaScriptNS>MyExampleApp</javaScriptNS>
<generatedEvents></generatedEvents>
<supportedEvents></supportedEvents>
<icon>../chrome/icons/appgridIcon1.png</icon>
<menupriority>710</menupriority>
</serviceDefinition>Noteworthy here is:
javaScriptNS: This is the reference to a function that should be called by the Opera Platform core when the service is loaded. In our example, this contains the name of our application constructor class,MyExampleAppthat we added in step two.guid: This is a globally unique identifier for the application, and this string must not be used by any other application. Creating a globally unique identifier can be done in multiple ways. One way would be to use a tool for generating the guid, another could be to compute a checksum or hash, such as MD5 of a file in your application.nameandscreenName: These should normally be the same and should be the name of the application, as you want it displayed within the Opera Platform Application gridicon: A relative URL pointing to your application’s icon.menupriority: This integer determines where in the application grid your application will appear by default. A higher priority indicates that it should appear earlier in the grid.
When the appdef.xml file is created, we are done, and we have a fully working, minimal Opera Platform application. The very last step should now be to open Opera platform, and start your newly written Hello World!
This discussion has been closed. No further comments may be added.