The GI/GL calculator at www.menialtools.com inner workings.
1. We start by looking at the GI_calculator.php - file.
After including the appropriate .js-files(datatable.js,dataview.js, application.js and GI_calculator.js) in the beginning, it alls starts in the onload() event.
There, the page_init()-function is called.
page_init() initialises variables that points to the different html-elements that are later used in the application.
When that is done, it calls the calculator_init()-function in GI_calculator.js, and that's where it starts to get interesting.
2. It starts by doing something that's actually not necessary to do. It creates an instance of the application object:
This object is supposed to przovided easy access to application-level functionality like progress bars, changing title in different ways....In the current version, the object is only able to change the application title.. Hey, it's a beta, not everything is implemented yet. :-)
However, the application.js file itself needs to be included for datatable.js to work since the MakeRequest()-function resides there.
3. It creates an instance of the datatable object, GIdatatable, and calls it's "populate_from_csv_URL()"-method.
This object, unlike the application object, is crucial for the application to work since this is the object that will read(GI_data.csv) and hold the actual data that constitutes the "database".
By calling it's populate_from_csv_URL('GI_data.csv', '\n', '|') it populates the datatable with the data from the .csv file, using the first rows data as column names. The two last parameters are the row- and columnseparators.
4. It creates an instance of the dataview object, treedv. The dataview is, amongst other things, the query engine of JSDC and probably the one you'll be using the most.
The second parameter, the datatable reference, tells the dataview to register at the datatable as a "client" dataview.
This means that the dataview now will be refreshed when the underlying datatable changes.
If we, for example, would have several dataviews registered at the same datatable, and a dataview inserts data into the table, all other dataviews must be made aware of this.
5. Since the treedv dataview, like it's name suggests, is a view of data(datatable) we need to define what should be in that view.
First we define which columns we need:
"id" - The primarykey of the current food item at column index 0 in the datatable.
"parentid" - The parentid of the item(remember we're about to display a tree-structure) at column index 1 in the datatable.
"name" - The name(seen later as the caption in the tree) of the item.
"GI" - The glycemic index value. This is here just to satisfy the conditions below.
Then we define the row we need, which in this case means declaring one condition, treecond.
A condition has five parameters:
dataview - The condition automatically add itself to the dataview described.
name - A name of the condition.
comparator - Can be "=", "!=", "<", ">" or "IN" .
value - The value to compare with.
column index - The dataview column to compare the data to.
****That's as far as i have gotten so far with this document. This document is work in progress..****.