Permalink to this source

OAT Framework

Click here to see JS source used for currently selected demonstration.

Introduction
About
Usage
Compatibility
Licensing
Documentation
Complete widgets
Bar Chart
Grid
Pivot table
Date picker
Color picker
Tree control
Dock
Panelbar
Ticker
FishEye
OS-style Windows
WebDAV Browser
Supplemental widgets
Variable upload
Input restriction
Dimmer
QuickEdit
Combo list
Combo box
Combo button
Slider
Libraries
JSON
Cryptography
Statistics
AJAX
Ghost Drag
Ajax DB Connectivity
Mapping
Pivot
Scrollable cursors
Data modelling

About

OAT (OpenLink AJAX Toolkit) is a JavaScript-based toolkit for browser-independent Rich Internet Application development. It includes a rich collection of UI Widgets/Controls, Event Management System, and a truly platform independent Data Access Layer called AJAX Database Connectivity.

For maximum effect when viewing this Toolkit demo, please set your desktop resolution to at least 1024x768 pixels.

Usage

Using this toolkit is as simple as including two .js files in the <head> portion of an HTML document, and specifying a list of features you want to use. The framework will build the dependency tree and dynamically include all needed (and no other!) files.

OAT works in Gecko browsers (Firefox, Mozilla/SeaMonkey), IE6, Opera and Apple WebKit.

This particular demonstration page is XHTML/1.0 Strict valid.

Licensing information

OpenLink Software's Ajax Toolkit (OAT)

Copyright (C) 2006 Ondrej Zara
Copyright (C) 2006 OpenLink Software

This software is licensed under the GNU General Public License (see COPYING).

Note that the only valid version of the GPL license as far as this project is concerned is the original GNU General Public License Version 2, dated June 1991.

Bar Chart

Bar Chart - percentage

Grid

Interactive Pivot table

Aggregate function:

Date picker

Color picker

Click rectangle to change its color

AJAX

Asynchronous HTTP calls are easily available. Test them by specifying a search term (at least 5 chars); this script will tell you how many pages Google finds.


Tree control

JSON - JavaScript Object Notation

Click the button to display the whole JSON library in appropriate notation in the space below...

Variable upload

Client-side input restriction

Digits only, exactly 10 chars:
Letters only, 3-12 chars:
Date (1900/1/1-2010/12/31):

Dock

Can be used for personalized home page or similar. Drag these boxes around to see what they can do...

Welcome!
This is your home page.
News?
Everyone wants to have some cool boxes for syndicating news via RSS/ATOM today...
Weather forecast
Is another possibility for filling these draggable things up.
Google

[first three results will be displayed here]

Panelbar

This whole page is organized into parts using the Panelbar control (on the left side of the page). Its interface is well known from many user applications and web sites, and allows quick, easy, and intuitive navigation across multiple topics.

Ticker

Hover on any flag to see a short description...

USUK
CRZI

Dimmer

This control allows creation of DOM elements with 'modal' property, i.e., the user is unable to interact with any other objects while the modal element is shown.

This box is now modal. You may not click anything on the page until this box is closed.

Cryptography

Basic cryptographic routines can be found in this library. As you write text into input below, base64 version and two hashes are dynamically updated.


Base64 encoded:
MD5 hash:
SHA hash:

Statistics

Click the button below to generate a fresh set of random data.

Number of values:
Maximum value:


Data:

QuickEdit (or Edit-in-place)

This one might come handy when users want to quickly edit some portion of text displayed on page. Feel free to change the text below to suit your needs.

Dear sir,
I would like to thank you for the information you recently sent me. It proved to be very useful.
Yours, XXX

Combo list

Similar to existing <select> boxes, this one also provides a possibility of direct user input.

Combo button

Enables user to specify an action to be performed when button is clicked. Suitable for applications where multiple actions can be performed over one set of data.

Combo box

This one is basically an enhanced <select> which allows richer options.

Firefox
IE
Opera
Netscape

Fish Eye

Pure eye-candy, well known from Apple systems. Also known as 'dock'. Please note that images are not displayed correctly in IE because of its known PNG support issues.


Ghost Drag

Offers the well-known drag'n'drop functionality. User drags element's 'ghost', which may be dropped on a landing zone to perform some action. Otherwise, the 'ghost' returns back. Try this by putting some fruit items into this shopping cart:

[clear cart]

OS-style Windows

This is a generic window. It may be resized & dragged, just like any other element.
It can, of course, contain any HTML markup:
An important feature of these windows is that they automatically choose their look, based on operating system used. So they are rectangular on Windows, and rounded/brushed on Mac.

Slider

Value:

WebDAV Browser

Click on buttons to see WebDAV Browser in actions.

Use 'demo' when asked for credentials.

Choose file path:


Open/Save file

File name: Unknow

Documentation

The documentation project aims to describe all crucial objects and methods of OAT. It is available as a simple JS application here.

Compatibility Matrix

Hover over yellow/red cells for explanation

Compatibility matrixBrowser
(version)
FirefoxInternet ExplorerOperaWebKit (Safari)Camino
(1.5.0.4)(6.0)(8.5)(2.0.3)(1.0.1)
Toolkit Basic functionality
CSS
Mac windows & shadows
MS Live WebClip
Saving
QBE Query creation & execution
Pivots
DB Designer Basic functionality
Saving as SQL
Forms designer Form creation
Form viewing
Image control
Map control
Google map provider
Yahoo map provider
Virtual Earth map provider
OpenLayers map provider

Mapping features

Compatibility matrixMapping provider
GoogleYahoo!MS Virtual EarthOpenLayers
Basic displaying
Map dragging
Lookup pin window
Advanced lookup window actions
(e.g. dragging inside window)

Map Services Mashups

Use 'demo' when asked for credentials.

Dynamic Web Pivot Tables

Use 'demo' when asked for credentials.

Scrollable Cursors aware Data Grid

Use 'demo' when asked for credentials.

Database Modeling Diagrams

Use 'demo' when asked for credentials.