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.

1. Download the latest release of OAT from Sourceforge .
2. 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
3. The only important directory is oat; copy it to your project
4. Now you need to include OAT within your page:
5. Specify which features you want to load:

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

1. Include loader.js file:

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

1. OAT will take care of internal dependencies and include all needed files.
2. Don't put anything into the `<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>

Copyright (C) 2005-2008 OpenLink Software