Basic operation

This short document describes what you need to do to include OAT's features into your web pages.

  1. Download a release of OAT from Sourceforge
  2. Unpack the archive to some directory
  3. There are many files and directories included in the distribution. Most of them are applications / demos, which are usually not needed
  4. The only important directory is oat; copy it to your project
  5. Now you need to include OAT within you page:
    1. Specify which features do you want to load:

      <script type="text/javascript">
      var featureList = ["grid","pivot",barchart"];
      <script>

    2. Include loader.js file:

      <script type="text/javascript" src="oat/loader.js"></script>

  6. OAT will take care of dependencies and include all needed files
  7. Don't put anything into <body onload= handler; specify a function called init instead - it will be called automatically when OAT finishes loading

Example

The following example shows how to use OAT to display a date picker.

<html>
<head>
	<script type="text/javascript">
		var featureList=["calendar"];
		function init() {
			var returnedDate = function(date) { alert("You selected "+date); }
			var calendar = new OAT.Calendar();
			
			var showCallback = function(event) {
				calendar.show(event.clientX, event.clientY, returnedDate);
			}
			
			OAT.Event.attach("button","click",showCallback);
		}
	</script>
	<script type="text/javascript" src="oat/loader.js"></script>
	<style type="text/css">
		.calendar {
			border: 1px solid #000;
		}

		.calendar_year, .calendar_month {
			text-align: center;
			border-bottom: 1px solid #aaa;
			padding: 2px 0px;
		}

		.calendar table {
			margin-top: 2px;
		}

		.calendar thead {
			font-weight: bold;
		}

		.calendar thead td {
			padding: 0px 2px;
		}

		.calendar td {
			font-size: 60%;
			text-align: center;
		}

		td.calendar_selected {
			background-color: #faa;
		}

		.calendar_special {
			color: #c55;
		}
	</style>
	<title>OAT Demo</title>
</head>
<body>
	<input type="button" id="button" value="Pick" />
</body>
</html>