OATDOCbasicoperation
Basic operation
This short document describes what you need to do to include OAT's features into your web pages.
- Download the latest release of OAT from Sourceforge.
- Unpack the archive to some directory. There are many files and directories included in the distribution. Most of them are applications and/or demos, which are usually not needed
- The only important directory is oat; copy it to your project
- Now you need to include OAT within your page:
- Specify which features you want to load:
<script type="text/javascript"> var featureList = ["grid","pivot",barchart"]; <script>
- Include loader.js file:
<script type="text/javascript" src="oat/loader.js"></script>
- OAT will take care of internal dependencies and include all needed files.
- Don't put anything into the<body onload=...handler; specify a function calledinitinstead - 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>
