Click here for the URI (Permalink) of this source
Complete widgets
Dock

### 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-2008 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.

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

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

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

### 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:

### Tag Cloud

Watch various visualization forms of the Tag Cloud widget.

### 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 |  |  |  |  |  |
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 |  |  |  |  |  |
RDF Browser | Basic functionality |  |  |  |  |  |
SVG Visualization |  |  |  |  |  |

### Mapping features

Compatibility matrix | Mapping provider
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.

- Google
- Yahoo!
- MS Virtual Earth
- OpenLayers

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

- Basic scrollable cursors (Sales by Products)
- Scrollable cursors and two-state (tabular/columnar) form control

### 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

### OAT RDF Browser

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

link