OAT Framework

Click here for the URI (Permalink) of this source

OAT Framework

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

Click here for the URI (Permalink) of this Demo

Introduction

About

Usage

Compatibility

Licensing

Documentation

Download

Complete widgets

Bar Chart

Pie Chart

Line Chart & Sparklines

Grid

Pivot table

Tree control

Dock

Panelbar

Slidebar

Ticker

FishEye

WebDAV Browser

Timeline

RDF Graph

Supplemental widgets

Variable upload

Input restriction

Dimmer

QuickEdit

Combo list

Combo box

Combo button

Slider

Date picker

Color picker

Enhanced Anchor

RSS Reader

Notification

Libraries

JSON

Cryptography

Statistics

AJAX

Ghost Drag

OS-style Windows

Rounded corners

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.

You can view the online HTML version of OAT Presentation.

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/7, Opera and Apple WebKit.

This particular demonstration page is XHTML/1.0 Strict valid.

Licensing information

OpenLink Software's Ajax Toolkit (OAT)

Copyright (C) 2005-2012 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

Pie Chart (SVG-based)

Line Chart & Sparklines (SVG-based)

Grid

Interactive Pivot table

Use select-boxes above the table to select a desired aggregate function
Use buttons below the table to toggle charts
Click the main heading (left top corner) to change numerical type and
Click any aggregate heading to change the order, filter values and toggle subtotals
Drag any aggregate heading to any place that becomes red

Aggregate function:
Subtotals aggregate function:

Date picker

Color picker

Click rectangle to change its color

Enhanced Anchor

SQL lookup (hover) - categories > 1
RSS Timeline (click) - here
SPARQL query (click) - here
In-page form with SQL data (click) - here

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

/
- boot
  - kernel
- etc
  - resolv.conf
  - inittab
- lib
  - modules
- share
- usr
- var
  - log
    - messages

JSON - JavaScript Object Notation

Click the button to display some sample data 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...

This is your home page.

Everyone wants to have some cool boxes for syndicating news via RSS/ATOM today...

Is another possibility for filling these draggable things up.

[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.

Slidebar

Slidebar is an animated panel which slides from the side when activated, either by a click or hover, depending of its settings. In autohide mode it slides back automatically after a defined period of time upon mouseout.

White hat
Grey hat
Black hat

Ticker

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

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.

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:

One
Two
Three

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

This interface presents WebDAV Browser in 'Open File' mode. User can navigate through directory structure, create directories and filter files based on their type.

File name:	[not yet selected]
File content:

Timeline

Rounded corners

simple antialiased

no antialiasing, border

only left top & bottom right

smaller corners

larger corners

RSS Reader

Can display RSS feeds...

...as well as RDF feeds...

...and also ATOM feeds!

Notifications

Click buttons below to launch several notifications...

RDF Graph Visualizer (SVG-based)

SVG-based: works in Gecko and Opera 9
Hover over elements to see their values

Drag canvas to move whole graph
Drag subjects to move them
Ctrl-drag subjects to move them and their descendants

Load RDF file by URL:

Pre-set URLs:

Documentation

The documentation project aims to describe all crucial objects and methods of OAT. It is available here.

Compatibility Matrix

Hover over yellow/red cells for explanation

Compatibility matrix		Browser (version)
		Firefox	Internet Explorer	Internet Explorer	Opera	WebKit (Safari)	Camino
		(2.0.0.3)	(6.0)	(7.0)	(9.20)	(2.0.4)	(1.0.1)
Toolkit	Basic functionality
	CSS
	SVG
	Mac windows & shadows
	MS Live WebClip
	Saving
QBE	Query creation & execution
QBE	Pivots
DB Designer	Basic functionality
DB Designer	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
RDF Browser	Basic functionality
RDF Browser	SVG Visualization

Mapping features

Compatibility matrix	Mapping provider
Compatibility matrix	Google	Yahoo!	MS Virtual Earth	OpenLayers
Basic displaying
Smart marker re-positioning
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.

Employee sales by Ship country

Scrollable Cursors aware Data Grid

Use 'demo' when asked for credentials.

Database Modeling Diagrams

Use 'demo' when asked for credentials.

Database design

Interactive SQL Query Builder

Query by example for XML/A connectivity to SQL databases. Draw and execute your queries!

link

Database Designer

Visual database schema designer. Ability to import existing design via XML/A calls.

link

Web Forms Designer

Draw data presentation forms, add widgets and controls to them. Bind to virtually any data sources (SQL, REST, WSDL, SPARQL...).

link

Interactive SPARQL Query Builder

Visual (SVG-based) SPARQL query generator and results browser.

link

OpenLink Data Explorer

Explore the world of RDF! Take advantage of Virtuso's RDF sponging feature, view and traverse RDF graphs, visualize in many ways.

link

OAT Framework

About

Usage

Licensing information

Bar Chart

Bar Chart - percentage

Pie Chart (SVG-based)

Line Chart & Sparklines (SVG-based)

Grid

Interactive Pivot table

Date picker

Color picker

Enhanced Anchor

AJAX

Tree control

JSON - JavaScript Object Notation

Variable upload

Client-side input restriction

Dock

Panelbar

Slidebar

Ticker

Dimmer

Cryptography

Statistics

QuickEdit (or Edit-in-place)

Combo list

Combo button

Combo box

Fish Eye

Ghost Drag

OS-style Windows

Slider

WebDAV Browser

Timeline

Rounded corners

RSS Reader

Notifications

RDF Graph Visualizer (SVG-based)

Tag Cloud

Documentation

Compatibility Matrix

Mapping features

Map Services Mashups

Dynamic Web Pivot Tables

Scrollable Cursors aware Data Grid

Database Modeling Diagrams

Interactive SQL Query Builder

Database Designer

Web Forms Designer

Interactive SPARQL Query Builder

OpenLink Data Explorer