Saturday, June 17, 2006

 

Gadgets and Style box files - part I

In the previous post I've shown you how you can create the simplest Boxely program, with a single window object.

In this post I will try to address the two basic types, which are used in boxely. Gadgets and Styles.
Looking at the AIM environment, it seems that box files are divided into 3 separate groups. Gadgets declaration files, Styles declaration files, and application layout files.

It seems that this is only a logical division of the three. You can, If you want, write all your gadgets and style declarations directly in your application's box file.

In order to use a pre-defined gadget from within our application's box file, we simply import the file using the input directive.
This is the same as using an #include directive in a C++.

<?import href="box://boxelyToolkit/theme/toolkit.box"?>

Before I get into the details of defining basic gadgets and styles, take a second look at the line above.
What does box:// stands for?

Boxely is a toolkit which is mainly dedicated to create client side GUI applications, but it is only a part of a bigger environment called OCP, which stands for AOL's Open Client Platform.
The first layer of the OCP is the Execution Engine(EE). This layer is probably in charge, among other things, to find our box files, parse them, and execute them appropriately.

The OCP folder Hierarchy

the box:// notation stands for the library called services under the EE directory.
The EE folder seems to contain some core services like aollaunch.exe, AOLHostMgr.dll and AOLSvcMgr.dll.
The services directory seems to be the root of all the services and applications defined in the OCP system.
The Triton IM software resides under imApp.
The BoxelyToolkit service seems to be a infra structure for other applications. An implementation of ready made of some common and some extra ordinary gadgets, styles, and resources.

Versioning

If you will look under the ee\services\boxelyToolkit directory you will not find a directory called themes. Instead you will find a directory named something like ver1_4_29_1.
I can't tell how OCP versioning works, because I didn't find any application which has more than one version. The manifest.xml file under the version folder, contains the same version number in its package version attribute, and is mandatory if you want the environment to find your box files.

The version folder itself is divided into 3 folders. This is consistent among other services.
The content folder contains the gadgets box and Java Script files.
The themes folder contains the style and resource definition box files.
The resources folder contains the actual resources (bitmaps, icons, pngs etc.).


In part II of this article, I will enter some basic details regarding styles and gadgets definition.

 

'Hello World' using Boxely

So...

Lets start and look at some very simple Boxely code, and explain what its all about.
Copy the following code into your blab.box file, and run the AOL Triton shortcut.


<?xml version="1.0" encoding="UTF-8" ?>

<window xmlns="http://www.aol.com/boxely/box.xsd"
        xmlns:s="http://www.aol.com/boxely/style.xsd"
        title="Hello world"
        s:width="180" s:height="80"
/>


And here is the outcome:



analysis:
The first row, which defines the XML version and the document encoding, resides in all AOL Triton box files.
I've tried to delete it and the program still ran. Anyhow it is self explanatory.

The rest of the code is pretty straight forward too.
The box file is used to define the window layout of the program.
Our application has only a single window object.

The window is an object of the class window (under boxely a class or a template is known by the name gadget).

Next we set the window's attributes and style, using an XML like manner.

I don't have a clue what the xmlns and xmlns:s attributes stands for, but they are mandatory in order for the program to run.

Note: If the boxely environment encounters an error while parsing the file (Missing attribute, tag mismatch etc.), the program aborts immediately without any notification.

Setting attributes is done by stating their name, and giving them a proper value, in brackets.
Setting styles is done similarly, using the prefix s: before the style name.

After setting all attributes, we close the window object tag, with a backslash followed by a closing bracket.

Look what happens if you add the following line before the declaration of your window object:

<?import href="box://boxelyToolkit/theme/toolkit.box"?>

The window style suddenly changes a little.
Can you guess why?

I'll try to elaborate on my findings a little bit more on the next post.

Friday, June 16, 2006

 

4 Easy steps to start programming with Boxely

The AOL's Boxely environment lets you develope a rich client side Windows application, and supports many features.
Many of them can be found Here.
In order develop an application which supports most Boxely features, you actually don't need a compiler, but only a simple text editor (and maybe some Java Script debugger program).

So where do I get this runtime environment you ask?
and how do I start programming?

Step 1:
Download the Boxely runtime environment.

Download the AOL's AIM Triton 1.5 instant messaging software from the AOL's AIM site .

The new AOL IM software is written using Boxely, and installing it actually installs the entire Boxely runtime environment.
The environment will load into memory your XML box files (more on this later), and will start the application for you.

Step 2:
Finding the root box file.

Search for a file named blab.box under c:\program files\common files\aol

Wait! do not look for it directly under the directory above, but rather run a search through the directory tree.
The file is actually much further into the folder hierarchy, and I hope to get into explaining some of this hierarchy logic later.
For the time being, you just need to know that this file will be the starting point of your application. your main() function if you like.

Step 3:
Writing down your application.

The blab.box file is the main entry point for the AOL IM client.
If you'll go over it carfully, you can see that it actually describes the layout and behavior of the application's main window.
So... Although Boxely is not yet out, and we don't have a way to load out box files into memory and start running them, We can replace the code of the blab.box file with some code of our own, and create this type of service for us.

I'll show an example for such a program in my next post.

Step 4:
Running the application.

Simply run the AOL AIM Triton from its shortcut.

 

First read this

Hi,

I'm jovanni.
An unemployed programmer from Italy, with a lot of spare time on his hands. In the last couple of weeks I've spent my time investigating the new AOL UI toolkit, AKA Boxely, which should be released soon.
In this blog I will try to share some of my findings regarding the basic syntax of this language, using code examples, which you can easily download, run and modify.

Important Note: I am not an employee of AOL, and will probably be wrong from time to time. Please feel free to correct me, because I'm actually new to this, the same way you are.

If you are a programmer , and still asks yourself what the hell am I talking about, first read the following three articles, written by one of their former employees, Joe Hewitt, and we will go on from there:

Boxely introduction part 1
Boxely introduction part 2
Boxely introduction part 3

and now...
Lets get down to business
Enjoy the ride,
Jovanni

This page is powered by Blogger. Isn't yours?

Blog Counter