Ellipse Tutorial

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 
 49 
 50 
 51 
 52 
 53 
 54 
 55 
 56 
 57 
 58 
 59 
 60 
 61 
 62 
 63 
 64 
 65 
 66 
 67 
 68 
 69 
 70 
 71 
 72 
 73 
 74 
 75 
 76 
 77 
 78 
 79 

/**
 * The DataTable JWT component is based on a MVC (Model/View/Controller) pattern. 
 * The AbstractDataTableModel pseudo-interface (Javascript not really supports
 * interface concept) is used to produce a model.
 * 
 * This interface specifies the contrat (a set of methods) that the JWT DataTable
 * component will use to obtain the data from a model. To simulate interface concept, all the
 * methods of the AbstractDataTableModel throws an AbstractException
 * if there are invoked. You must override each methods of this interface to produce a correct
 * model.
 * 
 * CAUTION: the methods of this interface can be invoked frequently. Your overriding methods 
 * should be quick. Otherwise the rendering of the DataTable component can be slow.
 * 
 * @since 0.3.6
 * @author Alexia Ramaioli & Dominique Liard
 */
var AbstractDataTableModel = Object.extendClass({
    
    /**
     * Returns the number of rows that the model have, and that the DataTable
     * component must display.
     * @return The number of rows.
     */
    getRowCount : function() {
        throw new AbstractException();
    },

    /**
     * Returns the number of columns that the model have, and that the DataTable
     * component must display.
     * @return The number of columns.
     */
    getColumnCount :    function() {
        throw new AbstractException();
    },
    
    /**
     * Returns the name for the column of the specified columnIndex. The name of a column is
     * displayed in the header of the DataTable component.
     * @param columnIndex The index of the column for which obtain the name. This index is zero based.
     * @return The name for the specified column.
     */
    getColumnName : function( columnIndex ) {
        throw new AbstractException();
    },

    /**
     * Returns the editable state for a particular cell of this data model.
     * @param rowIndex      The index of the row for which obtain the state. This index is zero based.
     * @param columnIndex   The index of the column for which obtain the state. This index is zero based.
     * @return The editable state for the specified cell.
     */
    isCellEditable : function( rowIndex, columnIndex ) {
        throw new AbstractException();
    },
    
    /**
     * Returns the value for a particular cell of this data model. The associated DataTable
     * component will show this value for the considered cell.
     * @param rowIndex      The index of the row for which obtain the value. This index is zero based.
     * @param columnIndex   The index of the column for which obtain the value. This index is zero based.
     * @return The value for the specified cell.
     */
    getValueAt : function( rowIndex, columnIndex ) {
        throw new AbstractException();
    },

    /**
     * This method permit to set the value of a particular cell of this data model.
     * @param rowIndex      The index of the row for which set the value. This index is zero based.
     * @param columnIndex   The index of the column for which set the value. This index is zero based.
     * @param cellValue     The new value for the specified cell.
     */
    setValueAt : function( rowIndex, columnIndex, cellValue) {
        throw new AbstractException();
    }

});

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 
 49 
 50 
 51 

importPackage( "corelib/services/web/javascript/jwt/tables/AbstractDataTableModel.js" );

var TestDataTableModel = AbstractDataTableModel.extendClass({    

    initialize: function(name) {
        this._titles =
            new Array( "Planets",  "Type",    "Aphelion", "Perihelion","Orbital Period", "Satellites" );
        
        this._values= new Array(
            new Array( "Sun",      "Star",          " ",   " ",    " ",      " "  ),
            new Array( "Mercury",  "Planet",        "0.466 au", "0.307 au",  "87.97 d",     "0" ),
            new Array( "Venus",    "Planet",        "0.728 au", "0.718 au",  "224.70 d",    "0" ),
            new Array( "Earth",    "Planet",        "1.016 au", "0.983 au",  "365.25 d",    "1" ),
            new Array( "Mars",     "Planet",        "1.665 au", "1.381 au",  "686.96 d",    "2" ),
            new Array( "Ceres",    "Dwarf planet",  "2.987 au", "2.544 au",  "1679.82 d",   "13" ),
            new Array( "Jupiter",  "Planet",        "5.46 au",  "4.65 au",   "4335,35 d",   "63" ),
            new Array( "Saturn",   "Planet",        "10.05 au", "9.02 au",   "10747 d",     "61" ),
            new Array( "Uranus",   "Planet",        "20.08 au", "18.37 au",  "30799 d",     "27" ),
            new Array( "Neptune",  "Planet",        "30.32 au", "29.81 au",  "60224 d",     "13" ),
            new Array( "Pluto",    "Dwarf planet",  "49.31 au", "29.66 au",  "90613 d",     "3" ),
            new Array( "Haumea",   "Dwarf planet",  "51.54 au", "35.02 au",  "104009 d",    "2" ),
            new Array( "Makemake", "Dwarf planet",  "52.57 au", "38.71 au",  "112000 d",    "0" ),
            new Array( "Eris",     "Dwarf planet",  "97.56 au", "37.77 au",  "203450 d",    "1" )
        );
    },

    getValueAt: function(row, column) { 
        return this._values[row][column];        
    },
    
    setValueAt: function(row, column, value) { 
        this._values[row][column]= value;        
    },
    
    getRowCount: function() { 
        return this._values.length;
    },
    
    getColumnCount: function() { 
        return this._titles.length;
    },
    
    getColumnName: function(column) { 
        return this._titles[column];
    },
    
    isCellEditable: function(row, column) { 
        return false
    }
    
});

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 

<html>
    <head>
        <title>DataTable Sample</title>
        <script language="Javascript" src="corelib/services/web/javascript/Core.js"></script>
        <link rel="stylesheet" type="text/css" href="corelib/services/web/javascript/jwt/Jwt.css" />
        <style>
            #forDataTable .JwtDataTable {
                width: 90%;
                height: 150px;
            }
        </style>        
        <script language="Javascript"><!-- 
            importPackage( "corelib/services/web/javascript/jwt/tables/DataTable.js" );
            importPackage( "DataTableSamples.js" );            // For load your DataTableModel
            
            var model = new TestDataTableModel();
            var dataTable = new DataTable( model );

            addEventHandler(window, "onload", function (event) {    
                dataTable.injectInDocument(document.getElementById("forDataTable"));
            });                            
        //--></script>
        
    </head>
    <body>
        <h1 id="title">DataTable Sample</h1> <br/>

        <p style="color: red; font-weight: bold; font-size: 10pt;">
            Click the right mouse button to view the HTML/Javascript source code. <br/>
            Tables columns are resizable. DataTableModel is defined in a specific file.
        </p> <br/>

        <div align="center">
            <div id="forDataTable"></div>
        </div>
    </body>
</html>