Getting Started

The best place to begin is in the documentation folder (The default path is C:\Program Files\AOLOCP\documentation). Inside this folder you'll find boxelyDocs.html . This file contains an offline copy of the Boxely User Guide and OCP Services API Reference documentation.

The Boxely User Guide guides you step-by-step through building a sample Boxely application with accompanying exercises and code samples.

The Open Client Platform (OCP) enables Boxely to extend its functionality through the use of modular libraries called services. These services are provided to allow access to various tools that are not native to JavaScript.

The OCP Services API Reference provides a list of the classes, protocols, methods, and properties for each service that is included in the OCP Preview package. Where applicable, sample code snippets have been included to show you how they may be implemented.

Navigating the Boxely UI Toolkit

After the Boxely installer has been run, the following files will exist in your installation directory (The default path is C:\Program Files\AOLOCP):

• README.html - Read this file to get started.

• boxelyApp.exe - Customizable Boxely application viewer. This will not launch any Boxely application unless configured.

• boxelyApp.ini - Boxely application viewer configuration file.

• Uninstall.exe - The uninstaller.

• documentation/ - The offline documentation directory.

  • boxelyDocs.html - Displays the Boxely User Guide and the API documentation to the services included with the package.

  • html/ - The HTML documentation files linked from boxelyDocs.html.

• exercises/ - Source files used with the exercises in the Boxely User Guide.

  • ToDoList/ - Source files used with the "To-Do List" exercises in the user guide.

  • appendix/ - Source files used with Appendix exercises in the user guide.

• ocpSamples/ - Boxely samples based on the OCP Toolkit.

  • ocpSamples.exe - The Boxely samples viewer.

  • ocpSamples.ini - The Boxely samples configuration file.

  • content/ - Individual sample box files and associated code.

  • theme/ - The Boxely samples images.

  • resources/ - Localized resources.

• userSamples/ - A collection of Boxely samples contributed by other users.

  • helloWorld/ - A Hello World application demonstrating how to create an application using an independent toolkit.

  • boxelyMediaPlayer/ - A media player written using the OCP Toolkit.

  • clixely/ - A simple, but addictive game.

  • dealLocator/ - Locates deals from dealmac.com.

  • flickrBar/ - Shows a floating bar that loads random images from Flickr.

  • flickrClickr/ - Allows you to search images hosted on Flickr.

  • LifeGoals/ - View life goals tagged on 43things.com.

  • resourceBrowser/ - Browse Boxely resources from within a Boxely application.

• RuntimeSupport/ - Directory containing the Open Client Platform runtime and services.

Boxely Documentation

The Boxely UI Toolkit is accompanied by the following documentation to provide step-by-step instructions and accompanying exercises for developers to perform tasks within the Boxely application.

• User Guide : This guide serves as an introduction to the Boxely User Interface (UI) Toolkit, providing you the techniques needed to build real-world applications.
• OCP Service API Reference : This reference provides documentation for each service provided with the OCP Preview Package.
• FAQ : Answers to frequently asked questions regarding the Boxely UI Toolkit.

Development Prerequisites:

Knowledge of XML and JavaScript are essential to building a Boxely application.

Prior to using this guide, it is important that you familiarize yourself with the elements of a Boxely application.

A Boxely application is a collection of XML and JavaScript files that describe a user interface and the associated logic behind it. A typical application is initiated by an XML file containing a root window element that presents the main application window to the user. Within this root element are the following types of objects; boxes, libraries, resources, and scripts.

About Boxes

Starting at the simplest level, the XML file describing a Boxely application comprises a hierarchy of boxes that represent rectangles on the screen. In addition to the application window, boxes represent interactive controls, images, and text. Boxes can be arranged and styled in a wide variety of ways as well as programmed to respond to user interaction and timeline animation.

About Libraries and Resources

A resource is an object that describes some characteristic of one or more boxes and can be shared by any number of boxes at once. The available resources include visual styles, bitmaps, gradients, gadgets, event handlers, and animations. Resources are generally bundled into libraries that are loaded into memory once and can be shared by any number of scenes.

About Scripts

To make the elements of an XML file perform useful functions, you can write JavaScript functions to perform such tasks as opening a new window, manipulating a box, or creating a new box.

JavaScript functions are called in response to events that take place during an application’s runtime. Supported events include animation events, keyboard and mouse events, DOM events, and more.

What can be Built with this Toolkit:

All kinds of applications can be built using the rich UI layer Boxely provides and the OCP services that ship with this toolkit. For some ideas, see the applications in the samples directory.

Here is a list of user-contributed samples that we're shipping with:

• AOLPictures - An application that allows the user to import pictures from any public AOL Pictures account and browse them by album.
• clixely - A simple, but addictive game.
• dealLocator - Locates deals from dealmac.com.
• flickrBar - Shows a floating bar that loads random images from Flickr.
• flickrClickr - Allows you to search images hosted on Flickr.
• LifeGoals - View life goals tagged on 43things.com.
• resourceBrowser - Browse Boxely resources from within a Boxely application.

Go to the screenshots gallery for screenshots of these samples and more!

Previous Versions