Real-World AJAX Book Preview
How To Develop AJAX Applications
The steps involved in creating an application are as follows
May. 16, 2007 07:45 PM
This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.
Developing AJAX Applications
A Big Picture View of Application Development Steps
The steps involved in creating an application are as follows. (Note that these apply only to the Opera platform):
- Create the HTML document: Same as traditional HTML development
- Style Your Application: Applying CSS stylesheets to HTML
- Create the Script: Using JavaScript to add functionality
From this point on, the steps apply to mobile widget development. In other words, the same widget needs additional steps to convert it into a mobile widget.
- Make Your Application into an Opera Platform Application: Include Opera Platform JavaScript files by adding a script tag to the HTML header. The Opera platform JavaScript core is called oxygen.js and goes in the root Opera Platform directory.
- Include the Opera Platform Global Stylesheet: By including the global Opera Platform stylesheet, our application will inherit style rules from the system. This ensures that the look and feel of the system is consistent. Note that the application will work without the Opera Platform stylesheet. The Opera Platform stylesheet is included just like any other stylesheet. The stylesheet is called persistentStyles.css and is located in the /crown/persistentStyles/ directory.
- Create an Application Definition: An application definition file contains configuration data about an application. All applications must have an application definition to run. The application definition is kept in the same directory as the application and must always be called "appdef.xml."
- Define an Application Class Constructor: The application class is defined as any other class in JavaScript, but automatically inherits properties from the Opera Platform application prototype. This means that there are several methods the application developer can implement to get access to Opera Platform functionality. Some examples are methods to receive messages from other Opera Platform applications, getting keypress events from joysticks and softkeys, as well as making menus and so on. The most important method to implement is the "OnMessageReceived" method. Whenever a message is sent to the application, this method is called with the message as a parameter. A message is a container that can contain one or more message members.
- Add the Application to registeredApps.xml: Finally, the application is ready to run. The only step that remains is to add it to the list of registered applications. This file is called registeredApps.xml. The entry in registeredapps must point to the main application document.
- Put It All Together: This step simply combines it all together.
The 'Hello World' Widget (Browser)Let's start by developing the first "Hello world" widget. A widget requires at least two files:
- The main document
- The widget configuration file
As we add more functionality, we will need external CSS and JavaScript files that we can add later. First, create an HTML document called index.html. This document will be what your users see when they first load the widget.
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Creating the Widget Configuration File
Next, to be able to run the newly created widget file, we'll have to create an application definition file named config.xml. The file holds information on certain properties of the widget. Some properties of this XML file are required such as:
- The widget's name.
- The widget's dimensions. This is the maximum viewable area for a widget.
- Author information.
- A unique ID for the widget. This ID is made up of three parts: a hostname, a path, and a revision date on the YYYY-MM format (you can also use YYYY-MM-DDDD if you plan on revising the widget more than once a month).
- Security information that provides the widget user with information about which domains the widget will be contacting. Even if this security information is optional, any widget that contacts a third-party service is highly encouraged to include this since it will establish a trust relationship between you, the widget author, and the widget user.
The config.xml for the Hello World widget should look like this:
<?xml version="1.0" encoding="utf-8"?>
<widget>
<name>Hello World!</name>
<description>
This is the very first widget written!
</description>
<width>473</width>
<height>300</height>
<author>
<name>John Doe</name>
<link>http://acme-widget.example.com</link>
<organization>Acme Examples, inc.</organization>
</author>
<id>
<host>example.com</host>
<name>HelloWorld</name>
<revised>2006-01</revised>
</id>
</widget>
Running Your Widget for the First Time
During development, widgets can be opened by opening the config.xml file in the browser, either by dragging them from the file manager or by using the File Open menu. When you start the widget, you should see "Hello World" as shown in Figure 4.6.
Adding Style
In its current form, the widget's default background color is transparent and uses regular browser defaults for styling. We can spice it up by adding some CSS and some additional mark-up.
First, we'll add the stylesheet reference to the widget document. We'll also alter the document, so it's more suited to styling:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" href="helloworld.css">
</head>
<body>
<div id="frontview">
<div class="top">
<p>Hello World!</p>
</div>
<div class="bottom">
</div>
</div>
</body>
</html>
Now let's proceed to create the helloworld.css stylesheet. Note that the images needed for this file should be stored in the relevant images folder.
body {
width: 454px;
margin: 0;
padding: 0;
}
div.top {
padding: 45px 0 0 45px;
width: 454px;
height: 100px;
background: transparent url(images/hw_top.png) scroll no-repeat top left;
}
div.bottom {
width: 454px;
position: relative;
height: 36px;
vertical-align: top;
background: transparent url(images/hw_bottom.png) scroll no-repeat top left;
}
div.top p {
margin: 25px 0;
padding: 0;
font-size: 24px;
text-align: center;
width: 354px;
}
After this styling is applied, our widget no longer looks bland and unstyled. Instead it will have a nice background and shadows (see Figure 4.7).
This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.
About Newsfeeds / Video Feeds
.gif)
Adobe and Intel plan to collaborate on porting Adobe’s Flash widgetry to Intel’s Media Processor CE 3100, a way to put Flash-enhanced web content and rich Flash applications on television. The chip is bound for cable set-top boxes, Blu-ray Disc players, digital TVs and retail...
Here, SYS-CON's Web 2.0 Journal has asked a selection of the industry's brightest minds what their own advice would be in these troubled times, and assembled it into a ten-point guide for software vendors, entrepreneurs, and startups to riding out a recession.
