Opera Unite Programming from a Newbie Perspective

Opera Unite is a personal web server platform provided by the Opera browser. To me, Opera Unite is a JavaScript tinkerers platform that is perfect for experimenting with different ideas I may come up with. The Opera web site gives the newbie a list of articles that introduces the different parts of the platform and libraries used to develop an Opera Unite program (http://dev.opera.com/articles/unite/). This article is meant as an introduction to the platform from a newcomers point of view. You should download and install the Opera browser from http://www.opera.com/. There are versions for virtually every popular operating system in use today.

What is Opera Unite?

Opera Unite is a Web Server service that lives inside of the Opera browser. Opera provides your browser with a web address when you enable Unite services in the browser. All calls to that web address are forwarded through the Opera web site to your Unite service through a special service proxy.  People call the address Opera provides you with to run an Opera Unite program installed in your browser. When you are not online, or when your Opera Unite service is not running users that call your web address are forwarded to your Opera Unite profile page.

How Do I Enable Opera Unite?

To enable the Unite service, click the Panels button in the lower left corner of the Opera browser, a toolbar should open up on the left side of the screen. Click the third button down from the top which is the Unite button. The Unite service panel should be open. Click the start button on the top of the panel and follow the directions. The Unite service comes with six apps by default (you should see them listed).

Programming for the Opera Unite Service

In order to program anything for Opera Unite you must have a basic working knowledge of JavaScript. If you are new to it there are plenty of tutorials out there on the Internet. JavaScript is not difficult to learn even though it may seem the opposite from looking at somebody else’s code sometimes. Similar to C++, JavaScript allows a programmer to abstract the abstracted abstraction. In other words, it may seem difficult simply because the script is some other programmers interpretation of something. The basic syntax of JavaScript is always the same, no matter how someone else structures or abstracts something.

(At this point I am assuming you know a bit of JavaScript and you want to get started)

The Structure and Anatomy of an Opera Unite Application

The organization of an Opera Unite application is a simple folder structure containing the files and scripts that your application will use zipped together (with the .zip file extension changed to .ua). There is an xml configuration file that tells Unite the name, path, author, among other things. Also, there is a html index file that acts strictly as a script loader (if you have ever scripted Spartan html this concept shouldn’t be new to you). Other than that there are the scripts that get executed which usually consist of a main.js and library files that you plan to utilize.


  • someuniteapp.ua
    • -scriptsfolder
      • –main.js
    • -index.html
    • -config.xml

    If this is your first time experimenting with Unite development on a Windows system there is something that you must do before you get started. Windows by default hides all known file extensions in Windows Explorer. You must change this in order to be able to change the extension of the zip files you create (so Unite will recognize it as an application). Do this by going to Folder Options in your Windows Explorer Tools menu and choose the View tab. Turn off the check box labeled Hide extensions for known file types. Click the OK button and you’re done. Keep in mind that with this option turned off you rename file types as well as their names (you’ll have to be careful not to change or erase the extension while renaming anything else on your system)(or you could change the setting back when you are finished).

    Config File

    Before anything you should create the configuration file. This is a short xml file that describes your program to Opera:

    
    <?xml version="1.0" encoding="utf-8"?>
    <widget webserver="yes" file="yes" network="private public" >
    <widgetname>YourOperaUniteApplicationName</widgetname>
    <description>A description of your Opera Unite application.</description>
    <author>
    <name>Your Name Goes Here</name>
    <organisation>If you‘re part of a company it’s name goes here</organisation>
    </author>
    <feature name="<a href="http://xmlns.opera.com/webserver&quot;">http://xmlns.opera.com/webserver"</a>>
    <param name="type" value="service"/>
    <param name="servicepath" value="thepaththatyouwanttouse"/>
    </feature>
    <feature name="<a href="http://xmlns.opera.com/fileio&quot;">http://xmlns.opera.com/fileio"</a>></feature>
    </widget>
    
    

    Opera based their Unite feature on their already established widget system which also uses xml configuration files. The file is pretty basic as you can see. The important fields are the application name and description, the author name, and the servicepath field. The service path field is the actual path address for the application that comes after your top level Opera Unite url. Features that are part of Opera’s xml namespace get a feature tag with an address. In the example above I have included the FileIO xml tag for the FileIO feature (you need it to use templates or write to a data file, so I included it).

    Dummy Index File

    The next file is the dummy index.html file. All that file does is call the scripts that are included and ran when you get a visitor. It is not meant to be a home page or anything like that. You create the home page from your script file (you can use a html template file for your html). It could be a blank page template or even just the script tags that include your scripts. Any library (server-side) you plan to use is included here. There is also a loader script library that you can use as well. To me, its just seems easier to use the standard html script tags to include my server-side scripting files:

    
    <!doctype html>
    <html>
    <head>
    <title></title>
    <script src="scripts/template/template.js"></script>
    <script src="scripts/main.js"></script>
    </head>
    <body>
    </body>
    </html>
    
    
    Scripts

    The next thing that you should do is create your scripts folder. In it you will include you main.js along with the libraries you will use in subfolders. Opera has a very good set of libraries to get you started on the server side( http://dev.opera.com/libraries/unite/ ). Keep in mind that you can write your own libraries if you please. The platform is completely extensible in that regard.

    Your main.js file is meant to be the heart of your Opera Unite application. All page requests are answered and processed in this file. Basically, what you do is set up listeners that listen for a ‘page’ request. That listener function will call a specified function (that you write) that will process the request and return a page to the client.  You can write the most Spartan system possible (such as the blog application explained in the developers primer article that concatenates the html response together in a string variable) or you can use the markuper template library – or even roll your own. It really doesn’t matter how you put the response together just as long as what is returned to the client is valid.
    A really simplified example would be (no template):

    // main.js
    var webserver;
    window.onload = function () {
    webserver = opera.io.webserver
    if (webserver)
    {
    // page requests are listened for here (_index is the default listener for the app)</code><code>
    webserver.addEventListener('_index', myHomePage, false);
    }
    }
    function myHomePage(e)
    {
    // set up the response object here
    var response = e.connection.response;
    // page variable
    var pg = “<html><head><title>Spartan Response</title></head><body>Hello simple example</body></html>”;
    // now send it to the client
    response.write(pg);
    // done now close the connection
    response.close();
    }

    Granted, this example really doesn’t do anything special; but it does give the very basic structure of the whole request process. Basically, listeners are set up that call handler functions that handle requests. Response objects are created through the WebServerRequestEvent object that is passed to the handler function (e in the case above) and written out to the client using the write() function of that response object.

    Other Various Files

    Other files that are included would be the icon files that you point to in your configuration file (they’re not really needed but that is where you would include them). Other graphics that your application would use could go in an images folder. Cascading Style Sheets used by your application could go in another folder.

    Note: Opera Unite applications are dependent upon your connection UPLOAD speed. Big images and files could slow down your application drastically. If your application is image laden your best bet would be to upload them to a service such as flickr and call them from within the client html. The same goes for scripting libraries used inside the client html. You could call libraries from google and save the bandwidth to make your application more responsive. However, any libraries you use on the server side should be included in the .ua file.

    Testing

    Opera has to approve any program that they include on their site. However, in order to test something you write you’ll have to install the program off of your hard drive. To do that you zip the files together, rename the file to have a .ua extension instead of a .zip extension (Windows users may have to change the Show File extensions for all Known File Types Windows Explorer setting in order to do this), and drag it to the browser window. This should start the installation process. Keep in mind that you have to have the Unite service already running to install anything from your hard drive.

    Troubleshooting

    If you are having problems installing your application there are two things to check first. Firstly, check and make sure that the Opera Unite service is currently running when you drag your application to the browser window. Secondly, check and make sure that the index.html and the config file is at the root of the .ua (zip) file. Some compression programs will include the folder as the top level – which is what you don’t want (Opera will not recognize it as an application). Simply select all of the files enclosed (instead of right clicking on the folder) in the app folder and add them that way. Other than that – check your script for mistakes.

    In Conclusion

    While this has been a rudimentary look at how an Opera Unite application is constructed I tried to cover the most important parts plainly and blatantly. You can see how requests and responses are handled and how the basic structure of an application comes together. Opera Unite applications can be as simple or as complex as you want them to be.

    From here you could utilize functionality in your application by learning how to use the different Unite libraries in your scripts (the two most prevalent would be Markuper and Yusef Opera’s template and server libraries).

    Reading

Happy Tinkering!

Advertisements

2 thoughts on “Opera Unite Programming from a Newbie Perspective

    1. I suppose if you have some commercial interest you should host your site on a server. Web servers don’t have hours of operation for instance. JavaScript on the server is truly coming of age with technologies such as Node.js (which runs very fast and efficient) getting popular.
      I feel that the Opera Unite platform would be more suited for an application that wouldn’t actually be needed 24 hours a day seven days a week. Nor is it nearly ideal for anything commercial based as I’ve personally viewed too many posts in the forums related to security issues. The technology is still very young but it does allow you to develop a web facing application hosted on your personal computer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s