UI.ListModel - a model for your tables

Synopsis

var employees = [{'name': 'John', 'id': 123, 'salary': 1000},
                 {'name': 'Jack', 'id': 234, 'salary': 1100}];
var employeesModel = new UI.ArrayTableModel(employees,
                                            ['name', 'salary'],
                                            ['string', 'number'],
                                            ['Name', 'Salary']);

assert(employeesModel.getHeader(0) == 'Name');
assert(employeesModel.getColType(1) == 'string');
assert(employeesModel.getNumCols() == 2);
assert(employeesModel.getNumRows() == 2);
assert(employeesModel.getNumRows() == 2);
assert(employeesModel.getCell(0, 1) == 1000);
assert(employeesModel.getCell(1, 0) == 'Jack');
assert(employeesModel.objects == employees);

employees.push({'name': 'The new employee', 'id': 1500,
                'salary': 500});
//You must tell the model that the array has changed
employeesModel.changed()

Description

The UI.ListModel 'interface' is used by widgets that shows tablular data, such as the UI.Table widget.

Dependencies

MochiKit.

Overview

A TableModel can be seen as a two dimension matrix, plus a header and a footer. The API is pretty straightforward to implement and is detailed on 'Class UI.TableModel'. The interesting part comes with the provided implementations.

API Reference

Class UI.TableModel

This is an 'abstract' class that defines the table model interface and provides a default implementation for some methods. This default methods are not very efficient, so override it if you can.

Signals

changed:

Fired by a table model when the model is changed. Not actually fired by this class, derived classes must take care of the signaling.

Methods

UI.TableModel.prototype.getNumCols():

Returns the number of columns of this model.

UI.TableModel.prototype.getNumRows():

Returns the number of rows of this model.

UI.TableModel.prototype.getCell(rowIndex, colIndex):

Returns the content for the cell located on the row rowIndex and column colIndex.

UI.TableModel.prototype.getHeader(colIndex):

Returns the content for the header associated to the column colIndex.

UI.TableModel.prototype.getFooter(colIndex):

Returns the content for the footer associated to the column colIndex.

UI.TableModel.prototype.getColType(colIndex):

Returns the data type for the contents of the column colIndex.

UI.TableModel.prototype.hasHeader():

Returns true if the model has a header.

UI.TableModel.prototype.hasFooter():

Returns true if the model has a footer.

UI.TableModel.prototype.getRow(rowIndex):

Returns an array with the contents of the cells for the row rowIndex. The default implementation contructs the array using getCell and getNumCols.

UI.TableModel.prototype.getRows():

Returns a two-dimension array with the cells of the model. The default implementation constructs the array using the getRow and getNumRows.

UI.TableModel.prototype.getHeaders():

Returns an array with all the model headers. The default implementation constructs the array using getHeader and getNumCols.

UI.TableModel.prototype.getFooters():

Returns an array with all the model footers. The default implementation constructs the array using the getFooter and getNumCols.

UI.TableModel.prototype.getColTypes():

Returns an array with the all column types for the model. The default implementation constructs the array using getColType and getNumCols.

Class UI.ArrayTableModel

This is a generic UI.TableModel implementation, backed by an array of objects. See the Synopsis section for an example use.

UI.ArrayTableModel(objects, fields, types, headers=null, footers=null):

Constructs an ArrayTableModel, backed by the objects array of objects.

fields is the initial value for the UI.ArrayTableModel.prototype.fields property. If null, all the fields are used.

types is the initial value for the UI.ArrayTableModel.prototype.types property.

headers is the initial value for the UI.ArrayTableModel.prototype.headers property. If null, the fields names are used.

footers is the initial vlaue for the UI.ArrayTableModel.prototype.footers property.

Properties

UI.ArrayTableModel.prototype.objects:

The array of objects backing the table model.

UI.ArrayTableModel.prototype.fields:

An array of strings, containing the name of the fields of the objects used by the model.

UI.ArrayTableModel.prototype.types:

An array of strings, containing the types of the fields. These types can be:

  • 'string'
  • 'stringCaseInsentive'
  • 'numeric'
  • 'date'
  • 'currency'

UI.ArrayTableModel.prototype.headers, UI.ArrayTableModel.prototype.footers:

Arrays of values for the table headers and footers, if any.

If you change or mutate any of the properties, make sure to invoke the :mochiref:`UI.TableListModel.prototype.changed` method ASAP.

Methods

UI.TableModel.prototype.getNumCols():

Returns the number of columns of this model.

UI.ArrayTableModel.prototype.getNumRows():

Returns the number of rows of this model.

UI.ArrayTableModel.prototype.getCell(rowIndex, colIndex):

Returns the content for the cell located on the row rowIndex and column colIndex.

UI.ArrayTableModel.prototype.getHeader(colIndex):

Returns the content for the header associated to the column colIndex.

UI.ArrayTableModel.prototype.getFooter(colIndex):

Returns the content for the footer associated to the column colIndex.

UI.ArrayTableModel.prototype.getColType(colIndex):

Returns the data type for the contents of the column colIndex.

UI.ArrayTableModel.prototype.hasHeader():

Returns true if the model has a header.

UI.ArrayTableModel.prototype.hasFooter():

Returns true if the model has a footer.

UI.ArrayTableModel.changed():

Notify the model that some property has been changed or mutated.

Class UI.AsyncArrayTableModel

Inherits from UI.ArrayTableModel. Adds AJAX capabilities to array table models, enabling them to retrieve the backing array from a Asyncronous HTTP request that returs a JSON array. Optionally, you can provide a mapping function to traslate the HTTP JSON response to a array of flat objects.

Example use:

var model = new UI.AsyncArrayTableModel(['field1', 'field2'],
                                        ['string', 'numeric'],
                                        ['Header 1', 'Header 2']);

model.retrieveData('my/url?' + queryString(['param1', 'param2'],
                                           ['value1', 'value2']));

UI.AsyncArrayTableModel(fields, [types, headers, footers, mapFunc])

Constructs an asynchronous array table model, where fields, types, headers and footers are the default values for the UI.ArrayTableModel.prototype.fields, UI.ArrayTableModel.prototype.types, UI.ArrayTableModel.prototype.headers and UI.ArrayTableModel.prototype.footers properties.

mapFunc should be a function that takes as input the response given by the server and translate it to a array of objects as expected by this class.

Methods

UI.AsyncArrayTableModel.prototype.retrieveData(url, method='GET').

Retrieves the array using a XMLHTTP request to the specified url. The response must be a JSON array.

By now, the only possible value for method is GET.

Returns a Deferred as returned by loadJSONDoc(url)

Class UI.HTMLTableModel

This class implements a TableModel backed by a HTML <table> element. This implementation never emits the :mochiref:`changed` signal.

Inherits from UI.TableModel.

UI.HTMLTableModel(tableElement, colTypes=null):

Constructs a HTMLTableModel using the tableElement <table> dom element. colTypes is an array of strings specifing the data types for the columns (See UI.TableModel.prototype.getColTypes).

UI.TableModel.prototype.getNumCols():

Returns the number of columns of this model.

UI.TableModel.prototype.getNumRows():

Returns the number of rows of this model.

UI.TableModel.prototype.getCell(rowIndex, colIndex):

Returns the content for the cell located on the row rowIndex and column colIndex.

UI.TableModel.prototype.getHeader(colIndex):

Returns the content for the header associated to the column colIndex.

UI.TableModel.prototype.getFooter(colIndex):

Returns the content for the footer associated to the column colIndex.

UI.TableModel.prototype.getColType(colIndex):

Returns the data type for the contents of the column colIndex, as specified by the colTypes parameters on the constructor. If no colTypes was specified, 'string' is returned.

UI.TableModel.prototype.hasHeader():

Returns true if the <table> wrapped by the model has a <thead> child node.

UI.TableModel.prototype.hasFooter():

Returns true if the <table> wrapped by the model has a <tfoot> child node.

Authors

Copyright

Copyright 2005-2006 Leonardo Soto M. <leo.soto@gmail.com> and Imagemaker IT <http://www.imagemaker.cl>.

This program is licensed under the CDDL v1.0 license, see http://www.sun.com/cddl/cddl.html.