Opera Platform™ SDK

Quick How-To

The purpose of this document is to provide an example of an absolutely minimal Opera Platform Web Application, with the goal of enabling a web application author to create an Opera Platform Web Application within minutes. This serves as a companion to the official documentation, and does not cover every aspect of Opera Platform Web Application development.

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:

Example 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:

Basic styles on an Opera Platform Application

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:

Basic styles on an Opera Platform Application

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, MyExampleApp that 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.
name and screenName: These should normally be the same and should be the name of the application, as you want it displayed within the Opera Platform Application grid
icon: 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!