Index | OAT homepage | OpenLink Software

OATDOCbasicoperation

OATDOCbasicoperation
_ _ _ _ Basic operation
_ _ _ _ Example

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>