• Topic
  • Discussion
  • OATWikiWeb.OATDOCbasicoperation(Last) -- Owiki? , 2016-08-19 14:58:49 Edit owiki 2016-08-19 14:58:49

    OAT Basic Operations

    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.


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

        <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);
        <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;
        <title>OAT Demo</title>
        <input type="button" id="button" value="Pick" />

    Referenced by...