JSDC - JavaScript Data Components

datatable (in datatable.js)
- Description:
  The datatable class is responsible for loading and holding data.
- Instantiation:
  var new_datatable = new datatable(datatablename, application);
  
  datatablename - A friendly name of the datatable. Can be null..
  application - An application object. Currently not mandatory but a condition for some functions like the undo/redo-history.
- Properties:
  - count
    The number of rows in the table.
  - name
    The friendly name of the table assigned on creation.
  - columns[]
    Array of datatablecolumn objects. The columns of the table.
  - dataviews[]
    Array of dataview objects.
    These dataviews "subscribes" to and will receive change events when the datatable is updated.
- Methods:
  - populate_from_csv_string(srcdata, rowsep, colsep, noheader);
    Populates the datatable with data from srcdata using rowsep as row separator and colsep as column separator.
    First row are considered column headers(and -names) by default unless noheader is set.
  - populate_from_csv_URL(srcURL, rowsep, colsep, noheader);
    Populates the datatable with data from srcURL(A fully qualified URL) using rowsep as row separator and colsep as column separator.
    First row are considered column headers(and -names) by default unless noheader is set.
  - refresh();
    Refreshes all data in subscribing dataviews(see dataviews[] property).
  - removeat(row_idx);
    Removes the row at row_idx.
  - insertat(row_idx);
    Inserts an empty row at row_idx.
  - updateat(row_idx, col_idx, value);
    Updates the value at the col_idx column and row_idx row.

datatablecolumn (in datatable.js)
- Description:
  The datatablecolumn represents a column in a datatable and holds it's data in it's data array.
- Instantiation:
  var new_column = new datatablecolumn(datatable, column_name);
  where datatable is the datatable to which the columm should be added and column_name is a friendly name of the column.
- Properties:
  - column_name
    The friendly name of the column.
  - data[]
    An array of the data the column holds.

datatable_update_action (in datatable.js)
- Description:
  The datatable_update_action represents an update action.
  It holds the states before and after the action happened.
- Instantiation:
  var new_action = new datatable_update_action(target, row_idx, col_idx, old_data, new_data);
  
  target - the target datatable.
  row_idx - the index of the affected row.
  col_idx - the index of the affected datatablecolumn.
  old_data - The old data.
  new_data - The new data.
- Properties:
  - target
    The target of the action. A datatable.
  - row_idx
    The index of the affected row.
  - col_idx
    The index of the affected datatablecolumn.
  - old_data
    The data, how it was before the action happened.
  - new_data
    The data, how it was after the action happened.

datatable_insert_action (in datatable.js)
- Description:
  The datatable_insert_action represents an insert action.
  It hold the index of the affected row.
- Instantiation:
  var new_action = new datatable_insert_action(target, row_idx);
  
  target - the target datatable.
  row_idx - the index of the inserted row.
- Properties:
  - target
    The target of the action. A datatable.
  - row_idx
    The index of the inserted row.

datatable_remove_action (in datatable.js)
- Description:
  The datatable_remove_action represents an remove action.
  It hold the index of the affected row.
- Instantiation:
  var new_action = new datatable_remove_action(target, row_idx);
  
  target - the target datatable.
  row_idx - the index of the removed row.
- Properties:
  - target
    The target of the action. A datatable.
  - row_idx
    The index of the removed row.

dataview (in dataview.js)
- Description:
  The dataview offers a view of a specified datatable. It features:
  - A query engine so it can create it's own selection based on conditions.
  - A query cache so it doesn't have to make the same query twice.
  - Columns which holds numerous settings for different datatypes and also input validation using validation.js.
  - Many usable events.
  - Master detail relationships with other dataviews.
  - Aggregate calculation.
- Instantiation:
  var new_dataview = new dataview(name, datatable, appobj);
  
  name - a friendly name of the dataview.
  datatable - an object of type datatable. If set on creation, the dataview automatically registers itself there.
  appobj - an object of type application.
- Properties:
  - datatable
    The underlying datatable.
  - curr_row
    The currently selected row.
  - count
    The number of rows in the current selection.
  - name
    The friendly name of the dataview assigned on creation.
  - columns[]
    An array of dataviewcolumn, the columns of the dataview.
  - aware_objects[]
    The data-aware-objects connected to the dataview.
  - selection
    An array of row indexes in the underlying datatable contitutes the selection.
  - application
    The application object supplied on creation.
  - conditions[]
    An array of the currencly applied view_condition objects.
  - query_cache
    Array of query cache item objects. This is the current cache.
  - aggregate_values
    Array of the currently calculated aggregate values.
  - masterdetail
    If set, then this is a detail dataset and this property contains the masterdetail object.
  - detaildataviews
    When a dataview act as a master in a master-detail relationship, the detail dataviews are listed here.
- Methods:
  - getvalue(index);
    Returns the value of the current row of the column specified in index.
    index is the column index.
  - setvalue(index, value);
    Sets the value of the specified column in the current row.
    index is the column index.
    value is the value.
  - refresh();
    Refreshes selection and all data aware objects.
  - gotoRecord(row_idx);
    Sets curr_row to row_idx and updates data aware objects¹.
    row_idx is the destination row index.
  - next();
    Sets curr_row to next row and updates data aware objects¹.
  - previous();
    Sets curr_row to previous row and updates data aware objects¹.
  - first();
    Sets curr_row to first row (0) and updates data aware objects¹.
  - last();
    Sets curr_row to last row (count-1) and updates data aware objects¹.
  - remove(row_idx);
    Removes the row at row_idx from the datatable.
    row_idx - the row index of the row that should be removed.
  - insert(row_idx);
    Inserts a new row at row_idx before the row that is in that spot.
    row_idx - the row index of the row before which the new row should be inserted.
  - automatic_fields();
    Creates corresponding dataviewcolumns for each column in the undelying datatable.

dataviewcolumn (in dataview.js)
- Description:
  The dataviewcolumn represents a column in the dataview(duh), and has many settings that affect the handling, validation, presentation and, where applicable, the editing of a column.
- Instantiation:
  var dviewcolumn = new dataviewcolumn(dataview, column_name, src_idx, displaylength, valueclass, aggregate, datatype);
  
  dataview - the dataview the column will belong to. The column automatically adds itself to this dataview if this is set.
  column_name - a friendly name of the column and the one that is seen in the column heading.
  src_idx - to which datatable column in the underlying datatable the column points.
  displaylength - the number of characters that should be allowed for displaying the value.
  valueclass - the CSS class that should be used when displaying the values.
  headerclass - (if applicable) is the CSS class that should be used when displaying the headers.
  aggregate - an object of type aggregate. If set, aggregates will be calculated for this column according to its settings.
  datatype - the datatype of the column. See below for more info on datatypes.
- Properties:
  - dataview
    The dataview the column will belong to.
  - column_name
    A friendly name of the column and the one that is seen in the column heading.
  - src_idx
    To which datatable column in the underlying datatable the column points.
  - displaylength
    The number of characters that should be allowed for displaying the value.
  - valueclass
    The CSS class that should be used when displaying the values.
  - headerclass
    If applicable, this is the CSS class that should be used when displaying the headers.
  - aggregate
    An object of type aggregate. If set, aggregates will be calculated for this column according to its settings.
  - datatype
    The datatype of the column. This can be either "string", "integer", "decimal", "multiple" or "custom".
    Most importantly, this applies to what input validation vill be made when values are set for this column.
  - editable
    If set to true, the column will be editable in some data aware objects(currently, only the table data aware object supports editing).
  - lookup_values[]
    An array of lookup_value.
    Lookup values allows for more human readable data. For example the table data aware object shows drop-down boxes when editable is set to true(if lookup values are available).
  - visible
    If set to true, the column will be visible in applicable data aware objects. If false, it will not.
  - col_idx
    If the column had the dataview parameter correctly set on creation, col_idx holds the columns index in the dataview in which it resides.
  - multiple_editor
    The multiple_type_editor object that will be used if the datatype is "multiple".
- Methods:
  - getdata(row_idx);
    Returns the value of the row specified in row_idx.
    index is the row index.
  - setdata(row_idx, value, do_not_validate);
    Sets the value of the row specified in row_idx.
    row_idx - the row index.
    value - is the value.
    do_not_validate - if set to true, validation is bypassed and the data set as is.
  - addLookupValue(name, value);
    Adds a lookup value to the lookup_values array.

lookup_value (in dataview.js)
- Description:
  This class has only two fields, one called name and one called value. It is used in the #dataviewcolumn.lookup_values array.
- Instantiation:
  var new_lookup_value = new lookup_value(name, value);
  
  name - The visible name of the lookup item.
  value - The value for which the item should be used.
  
  The other, more correct way, is to use the dataviewcolumn.addlookupvalue - function.
- Properties:
  - name
    The visible name of the lookup item.
  - value
    The value for which the item should be used.

multiple_type_editor (in validation.js)
- Description:
  The multiple_type_editor is the editor used for the "multiple" datatype.
  When the edit button is clicked, this object generates an input window containing editors based on what typesetid this row has.
  There are no examples of this yet, however there will soon be new functionality a www.menialtools.com that will use this datatype(see more below).
- Instantiation:
  dataviewcolumn.multiple_editor = new multiple_type_editor(typesetURL, value_column, typesetid_column);
  
  typesetURL - The URL of the typeset definition file.
  value_column - The column index of the column containing the data.
  typesetid_column - The column index of the column containing the typesetid.
- Properties:
  - typesetURL
    The URL of the typeset definition file. Example of a type definition file can be found at menialtools.com.
    This file will be used in the upcoming Web transcoder functionality and details a little more than what should be expected in the first version of that thing. :-)
  - value_column
    The column index of the column containing the data.
  - typesetid_column
    The column index of the column containing the typesetid.
    Typesetid details what typeset the current row uses.
  - windowclass
    Custom CSS class of the edit window.
  - captionclass
    Custom CSS class of the captions and header.
  - editorclass
    Custom CSS class of of the editors.
  - buttonclass
    Custom CSS class of the editors button(s).

data_aware_object (in dataview.js)
- Description:
  The data_aware_object is the class that handles data aware objects in JSDC. This class is the connection between JSDC and the HTML elements that is used to achieve, for example, a tree view.
  It handles change events from and to the different elements that makes up a data aware object.
  For all kinds of data aware objects one creates an instance of this class.
  TODO: the class should check wether the kind matches the element type.
- Instantiation:
  var new_dao = new data_aware_object(dataview, daobj, kind, idcol_idx, valuecol_idx, onChange, onDoubleClick, onEdit);
  
  dataview - the dataview the object will belong to. The column automatically adds itself to the dataview.data_aware_objects if this is set.
  daobj - the HTML element to use as basis. Must be of matching type. That is: treeview, tableview - <table> and selectview - <select>.
  kind - What kind of data aware object should be created. Possible values: "treeview", "tableview" or "selectview".
  idcol_idx - For the treeview and selectview, here is where the id column is set.
  valuecol_idx - For the treeview and selectview, here is where the value column is set.
  onChange - Triggered if the selected item has changed to another.
  onDoubleClick - Triggered if a data aware object has been double-clicked.
  onEdit - Triggered if a data aware object has been edited(so far though, edit only works in the tableview).
- Properties:
  - dataview
    The dataview the object will belong to. The column automatically adds itself to the dataview.data_aware_objects if the dataview parameter is set on instantiation.
  - daobj
    The HTML element to use as basis. Must be of matching type. That is: treeview, tableview - <table> and selectview - <select>
  - kind
    What kind of data aware object should be created. Possible values: "treeview", "tableview" or "selectview".
  - idcol_idx
    For the treeview and selectview, here is where the id column is set.
  - valuecol_idx
    For the treeview and selectview, here is where the value column is set.
  - onChange
    Triggered if the selected item has changed to another.
  - onDoubleClick
    Triggered if a data aware object has been double-clicked.
  - onEdit
    Triggered if a data aware object has been edited(so far though, edit only works in the tableview).
  - DeleteBtn
    Is set, a delete button (with this caption) appears in the table view.
    This property should (and will) probably move from here to the tableoptions object. Or be renamed if it is to work with the other kinds.
- Methods:
  This class has no methods except internal events.

tableoptions (in dao_table.js)
- Description:
  The data_aware_object-class uses this class to hold tableview specific settings kind = "tableview".
- Instantiation:
  var new_tableoptions = new tableoptions();
  The only time this class is instantiated is by the data_aware_object when it is created with the kind-parameter set to "tableview".
- Properties:
  - header
    If set to true, the table displays table headers.
  - headerClass
    The CSS-class used by the table headers.
  - valueClass
    The CSS-class used by the table values.
  - editClass
    The CSS-class used by the editors.
  - deleteBtnImgURL
    The URL of the image used as a delete button. If omitted, a regular button shows(as of 1.02).
  - onPopulateSelect
    If set, this event(parameters are col_idx, curr_col, curr_input) triggers when populating dropdown editors.

treeoptions (in dao_tree.js)
- Description:
  The data_aware_object-class uses this class to hold tableview specific settings kind = "tableview".
- Instantiation:
  var new_tableoptions = new tableoptions();
  The only time this class is instantiated is by the data_aware_object when it is created with the kind-parameter set to "tableview".
- Properties:
  - dest
    Associated data_aware_object.
  - nodes
    An array of all treenodes.
  - stateClass
    The CSS-class used for state information.
  - captionClass
    The CSS-class used for captions.
  - parentcol_idx
    In what dataviewcolumn is the parent id column.
  - top_parentid
    The top parent id. Default is -1.
  - selectednode
    The selected treenode.
  - selectedelement
    The HTML element of the selected node.
  - selectedcolor
    The textcolor of the selected node(default = "#FFFFFF").
  - selectedbgclr
    The background color of the selected node(default = "#000070").

treenode (in dao_tree.js)
- Description:
  The treenode represent a node in a treeview.
- Instantiation:
  var new_treenode = new treenode(dest, parentnode, row_idx, element);
  
  dest - Associated dataview.
  parentnode - The treenodes parentnode.
  row_idx - The dataview row index of this node.
  element - The HTML element that is used by the node.
- Properties:
  - dataview
    Associated dataview.
  - parentnode
    The treenodes parentnode.
  - element
    The HTML element that is used by the node.
  - childelement
    The HTML element that hold the list of children.
  - childNodes
    An array of the nodes children.
  - cached
    If set to true, this node has already been populated.
  - row_idx
    The dataview row index of this node.
  - node_ref
    The id of this node in the nodes array.
  - state
    1. Node is a leaf(has no children).
    2. Node has children and is collapsed.
    3. Node has children and is expanded.
  - selected
    If set, this node is selected.

masterdetail (in dataview.js)
- Description:
  The masterdetail class is equivalent to a master-detail relationship.
  In JSDC, a master detail relationship is when a (the detail) dataview uses the currently selected value in an other (the master) dataview to only show rows in its own selection that has the same id.
- Instantiation:
  var new_masterdetail = new masterdetail (master, detail,mastercolumn_idx,detailcolumn_idx);
  
  master - The master dataview. If set, this object is added to master.detaildataviews.
  detail - The detail dataview. If set, detail.masterdetail is set to this object.
  mastercolumn_idx - The master id column index(the datatable column index)³.
  detailcolumn_idx - The master id column index(the datatable column index)³.
- Methods:

aggregate (in dataview.js)
- Description:
  An aggregate : "A mass, assemblage, or sum of particulars; something consisting of elements but considered as a whole"(wiktionary).
  In the case of JSDC, and only when data aware object kind is tableview, this means that this class implements the following values for kind:
  
  sum - calculates the sum of all values in the column.
  avg - calculates the average of all values in the column.
  caption - means that the value is set to aggregate.value and is used to, for example to have the text "Total earnings" in a column in a table..
  custom - if set, the customaggregate function is called when data is changing. Is should have the following parameters: (dataview, curr_col)
- Instantiation:
  var new_aggregate = new aggregate(kind, decimal_places, displayclass, customaggregate);
  
  kind - The kind of aggregate(see class description).
  decimal_places - A limit to the number of decimal places in the result(usable with averages).
  displayclass - The CSS class of the result.
  customaggregate - A pointer to a function that is called when data is change and kind is "custom". It should(but doesn't have to) be like this: function_name(dataview, curr_col)
- Methods:

view_condition (in dataview.js)
- Description:
  A view_condition is a condition that the dataviews query engine applies to the data to obtain a selection.
  See the explanation on creating conditions for more information.
- Instantiation:
  var new_view_condition = new view_condition(dataview,condition_name, comparator, value, src_col_idx);
  
  dataview - If set, the condition adds itself to the conditions array of the supplied dataview.
  condition_name - A friendly name of the condition(can be null).
  comparator - The comparator of the condition (see creating conditions.
  customaggregate - A pointer to a function that is called when data is change and kind is "custom". It should(but doesn't have to) be like this: function_name(dataview, curr_col).
- Properties:
  - dataview
    If set on creation, the condition adds itself to the conditions array of the supplied dataview.
  - condition_name
    A friendly name of the condition(can be null).
  - comparator
    The comparator of the condition (see creating condition.
  - value
    The value to compare with.
  - src_col_idx
    The source dataview column index to which the value should be compared.

query_cache_item (in dataview.js)

Description:
The dataviews query cache stores each query result, conditions and makes a checksum to speed up the dataview. A really good place to look if one want to see the cache in action, is the GI calculator. Compare how long it takes to get a result if you make a broad food freetext search(like "e"), search for something else, and the search for exactly the same again.
Instantiation:
var new_query_cache_item = new query_cache_item(conditions, checksum, masterdata, selection);

conditions - The dataview.conditions array to save.
checksum - A checksum returned by calculate_query_checksum(conditions, masterdata).
masterdata - The current value of the master dataview.
selection - The current selection.
Properties:
- conditions
  The stored dataview.conditions array.
- checksum
  A calculate_query_checksum-generated checksum.
- masterdata
  The stored value of the master dataview.
- selection
  The cached selection.

Application management

application (in application.js)
- Description:
  The application class is used to hold application-level options like errorcolor (what color to use when one enters an invalid number, for example).
- Instantiation:
  var new_view_condition = new application(title);
  
  title - The window title caption is set to this value.
- Properties:
  - title
    The window title caption is set to this value.
  - errorcolor
    What color should be used, in general, to show an error was made.
    This is mainly used for input validation.
  - IEOKcolor
    Due to IE:s totally crappy CSS implementation, currently one have to set what color IE should switch back to after an error has been corrected.
    Default is white (#FFFFFF).
  - editors
    A list of editor_object.Not sure how useful this is. This should be considered for deprecation.
- Methods:
  - fulltextview();
    Generates a windowtitle with title + " - " + caption
  - undo(remove);
    remove - if set, the action is removed from the history.
    Undoes last action.
  - redo();
    Redoes the next action.
  - register_action(action);
    Registers an action in the history.
  - begin_history();
    Starts a new history branch and makes it the current one.
  - end_history(action);
    Ends the current history and sets its parent as the current one.

history (in application.js)
- Description:
  The history class holds and array and functionality to support the nested undo/redo history of JSDC.
- Instantiation:
  var new_history = new history(application, parent);
  
  title - An application object.
  parent - A parent history. Is null for the topmost history level.
- Properties:
  - history
    An array of actions or histories.
  - historyposition
    The current position in the history.
- Methods:
  - fulltextview();
    Generates a windowtitle with title + " - " + caption
  - undo(remove);
    remove - if set, the action is removed from the history.
    Undoes last action.
  - redo();
    Redoes the next action.
  - register_action(action);
    Registers an action in the history.

action (in validation.js)

Description:
The action is the superclass(prototype) for all action classes. For internal use only.
Instantiation:
This class should not be instantiated, only its descendants.
Properties:
- target
  The target of the action.
Methods:
- undo();
  Calls target's undo()-function.
- redo();
  Calls target's redo()-function.

Effects

animation (in effects.js)
- Description:
  The animation class uses timers through the javascript setTimeout()-function to facilitate non-blocking DHTML animations.
  It uses CSS(or more specifically, the object.style.cssText-property) to change an objects properties,
  making the object appear moving, fading or whatever else one want the object to do. There is a demonstration of is use here.
- Instantiation:
  var new_animation = new animation(obj, fwdStartCSS, bkwdEndCSS);
  
  obj - The DOM object(like buttons, div-tags, img-tags and others) to be animated.
  
  fwdStartCSS - If one want a animation(when played forward) to start in some specified CSS state, the CSS of that state is set here. More info below.
  
  revEndCSS - This is the opposite of fwdStartCSS. More info below.
- Properties:
  - steps
    The animation steps, consisting of an array of CSS values.
    
    For example, this would make an object (with "position:absolute") move to the right:
    steps[0] = "left:10px", steps[1] = "left:11px", steps[2] = "left:12px" and so on.
  - obj
    The DOM object(like buttons, div-tags, img-tags and others) to be animated.
  - delay
    The delay (in milliseconds) between each frame.
  - IEHandicap
    This setting is needed since Internet Explorer is quite a lot slower than other browsers, particularly at fading(opacity) larger objects. It is a divider, which means that using a value of 2 with a delay setting (see above) of 1000 ms, Internet Explorer will only wait 500 ms. This is set to 1 (no handicap) by default, but will probably have tweaked a little in some cases. Try it!
  - repeat
    Is this is set to true(or anything but null), the animation will repeat indefinitely.
  - fwdStartCSS
    If one want a animation(when played forward) to start in some specified CSS state, the CSS of that state is set here.
    
    A typical example would be a fade where one want visibility:visible to make the object visible(clickable) while fading in.
  - revEndCSS
    This is the opposite of fwdStartCSS.
    
    A similar example would be a fade where one want the animation when run in reverse to end with visibility:hidden to make the object invisible(and not clickable) when faded out.
  - current_step
    The current step of the animation. If set while running, the animation will proceed from that step.
  - running
    Indication whether the animation is running.
  - stats_stepcount
    The number of steps played so far.
  - stats_fps
    The average framerate (frames per second) during the animation.
  - stats_runtime
    Indicates how long the application has been running in seconds.
- Methods:
  - add_step(CSSdata);
    Adds a step to the end of the steps array(see above).
    CSSdata - The CSS text that should be applied in this step.
  - play_fwd();
    Plays(or resumes) the animation forward.
  - play_rev();
    Plays(or resumes) the animation in reverse.
  - pause();
    Pauses the animation.
  - stop();
    Stops and resets the animation.

Input validation and handling

editor_object (in validation.js)
- Description:
  The editor_object object is a wrapper for standalone use of JSDC input validation functionality.
- Instantiation:
  var new_editor_object = new editor_object(element, datatype, onEdit, onError, app_obj);
  
  element - The target element(where data is edited).
  
  datatype - The JSDC datatype of the editor.
  
  onEdit - A function of type onEdit(element). This is called when the editor is edited.
  
  onError - A function of type onError(element, val_result). This is called when input validation fails. Val result is the validation result.
  
  app_obj - An application object(can be null). Used to to fetch the application.IEOkColor.
- Properties:
  - element
    The target element(where data is edited).
  - datatype
    The JSDC datatype of the editor.
  - onEdit
    A function of type onEdit(element). This is called when the editor is edited.
  - onError
    A function of type onError(element, val_result). This is called when input validation fails. Val result is the validation result.
  - app_obj
    An application object(can be null). Used to to fetch the application.IEOkColor.

edit_event_object (in validation.js)
- Description:
  This is a helper object. It pulls, on it's creation, the important data from the supplied event object.
  The point is that it is browser-independent and that it transforms numeric keypad keycodes to the normal kind.
- Instantiation:
  var new_event_object = new edit_event_object(e);
  
  e - An event object.
- Properties:
  - target
    The target element.
  - key
    The pressed key.
  - keycode
    The keycode of the pressed key.
  - value
    The editors value, including the pressed key.
  - innerWidth
    The browser area width. (IE: document.body.clientWidth, FF: window.innerWidth)
  - innerHeight
    The browser area height. (IE: document.body.clientHeight, FF: window.innerHeight)

Helper functions

application.js

MakeParagraph(a_value, a_class)

a_value - A value.
a_class - The CSS class name.

This function wraps the text in a_value with a paragraph : <p class="a_class">a_value</p>
MakeSpanned(a_value, a_class)

a_value - A value.
a_class - The CSS class name.

This function wraps the text in a_value with a paragraph : <span class="a_class">a_value</span>
newRequest();

Generates a XMLHTTPRequest object in a browser-independent way.
MakeRequest(URL, method, query)

URL - A fully qualified URL.
method - GET or POST.
query - The query-part (?*) or post-data of the request.

Makes an XMLHttpRequest and returns a string with the result.
focusandblink(obj,num,color)

obj - A javascript dom object.
num - Number of times to blink.
color - Blink color.

Focuses an obj(ect) (like an input box) and makes it blink "num" times(default=3) in "color" (default=light red).

effects.js

fade_object(obj, from, to, style, steps)

obj - An object. If the object is an animation-object, it is populated, if not, it is animated. See below for more info.
from - From what value should the fading start. 0 is complete transparency and 100 totally opaque.
to - Where the fading should end. 0 is complete transparency and 100 totally opaque.
style - The style of fading, currently only one style(1) is supported. 1/x and other variants are easily implemented. Anyone cares to add a little here?

If obj is a animation, browser-adjusted fading steps are added to it.
If obj is not an animation, an animation is created for the object, populated with fading steps and played(play_fwd()).
This function is demonstrated in this example.
The reason for this function to exist, is to make the fading browser-independent.
The reason it isn't to begin with, is because Internet Explorer has something called alpha filters where opacity is handled instead of a simple "opacity"-property like everyone else.
Also, the filter property has to be "initiated".. The opacity value is also a value between 1 and 100 which also is unique.

add_step_for_each(anim, from, to, callback)

anim - The animation to populate with steps.
from - Starting value.
to - Starting value.
callback - Here you set the callback function that is called once for every step:

This is how it should look and what things it provide:
callback(i, lastval, hasfilter)
i - The current step. This is the iterator.
lastvalue - The last step that was added.
hasfilter - If set, the browser uses filters(the browser is IE). If not, it doesn't(the browser isn't).

This function is like a "for each" for animations. It is actually quite useful since one doesn't have to write all the loop code.
It is demonstrated in this example.
A warning: Remember to try and write browser-independent code here(and everywhere else).
Using Microsoft Internet Explorer-specific code is really stupid(yes, STUPID) and should be avoided at (almost) all costs.
Except for the fact that it is considered extremely amateurish and 1998, one should ask oneself if the current solution really is though-out correctly if one has to resort to browser-specific code.

Explanations/appendices

Creating conditions: To create a condition in a dataview, we need to create a view_condition-object, so we need to not what to put in all those parameters. If we start from the beginning:
1. dataview: the dataview parameter specifies what dataview we want the condition to apply to.
2. condition_name: the friendly name of the condition. This is not required, but hey..
3. comparator: The comparator value could be compare to a simple conditional SQL-statement(SELECT * FROM president):
  - "=" : WHERE fullname = 'george w bush'
  - "<>" : WHERE fullname <> 'bill clinton'
  - "in" : WHERE fullname LIKE '%eorge w bus%'
  - ">" : WHERE presidential_order_id > '42'
  - "<" : WHERE presidential_order_id < '44'
4. value: The value to compare with. For example "42" or "eorge w bus".
5. src_col_idx: The source dataview column index to which the value should be compared.
To create the condition: new view_condition(dataview,condition_name, comparator, value, src_col_idx)
If you want the conditions to be applied and propagated, call dataview.refresh(). Done!

GI/GL calculator walkthrough:
Unfinished and under construction, this walkthrough of the GI/GL calculator applikation at menialtools.com might even so be worthwhile to look at.

Datatypes
Unlike javascript in general, JSDC is typed, sort of. The dataviewcolumn has a datatype-field. This is to enable input validation and automatically showing the appropriate editor.
Also, however hard to believe, it actually makes things easier in the end, because in a database, it's important to know what kind of data there is.
This means that each columns data is defined in one of the following ways:
- string:
  "Michael Donovan" - A string is a series of characters. Basically, this type can contain anything. It's maximum size in most browsers is two 2 gigabytes(2^31 characters non-unicode).
- integer:
  "1" - Integers are numbers without a fractional part. I.e. no decimals.
- decimal:
  "2.323" - Decimals are any number you want. With or without decimals.
- multiple:
  The multiple datatype is a special datatype which can contain multiple values of the datatypes string, integer and decimal.
  What set of type/values a particular row contains is defined in an external file. The dataview must have a column that tells JSDC what typesetid the current row has. To edit this type in a tableview, for example, one needs to create a multiple_type_editor object and JSDC will show an editor(edits are made in realtime).
- custom:
  The custom datatype is basically a string but when in tableview edit mode, it has a "edit"-button, and when the edit button is clicked, it bypasses validation and triggers the onEdit-event. Used when the standard JSDC input or edit methods are insufficient.

Footnotes:

This is not implemented so that an indication of which is the new current row gets visible in the data-aware-objects. Yet.
The reason is that it's hasn't been prioritized is that it's (contrary to what i thought in the beginning) seldom used functionality and that i try to keep down on "fringe" functionality until JSDC has stabilized, and thereby reducing unnecessary rewriting.

BTW. The fixed menu on the right in this document isn't fixed in IE. Anybody know how to fix it? I just can't seem to summon the energy to coax it there.

Currently, the masterdetail class uses the datatable columns directly instead of the dataview.
The idea was that this would be better since one would never need to create dataview columns that was never used, just to hide them.
Should it stay this way? What do you think?

JSDC - Javascript data components