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”:http://www.nokia.com/nseries/?loc=inside,main_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”:http://my.opera.com/operaplatform/about/ 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.


h3. 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
h3. … 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:
!http://virtuelvis.com/download/2005/11/opera-platform/example-app.png (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:
!http://virtuelvis.com/download/2005/11/opera-platform/example-app-2.png (Basic styles on an Opera Platform Application)!
h3. 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 @