My favorites | Sign in
Project Logo
                
Search
for
Updated Apr 17, 2007 by ted.husted
DataFormWalkThrough  
DataForm - Developer's Walkthrough (Issue 4)

augment On script processing, before an instance of the class can be created, the class is augmented by the EventProvider, so that events can be subscribed and fired by name.
construct Constructor is passed a HTML Element, ColumnSet, DataSource, and an optional configuration object.
identify A unique index (nIndex) and name for the instance (sName) is created by taking the value of a counter (nCount) and prepending "instance". At the completion of the construction, the counter is incremented at class-scope.
configure The configuration object, if any, is read. Any properties set on the configuration object are set to the new object. Declared properties, like summary and caption, can be set, and an arbitrary property can be set too. A common configuration item is a related DataTable instance (!oDataTable).
validate The DataSource and ColumnSet objects are verified to be instances of the appropriate object types. An invalid datasource is ignored. An invalid ColumnSet causes the constructor to return (undefined). If the container element is not a div element, the constructor returns (undefined). In the debug version, validation errors are logged.
adopt If a valid DataTable instance is passed via the configuration object, its RecordSet is shared. Otherwise, an empty RecordSet is created. In the debug version, the RecordSet status is logged.
enhance markup Markup enhancement is not supported by this version of DataForm.
initialize (initForm) When enhanced markup is not available, the form element is appended to the container ("div") passed to the constructor. A table is created within the form. If the summary or caption were set via the configuration object, corresponding elements are created within the table, through the Document Object Model. Two table body elements are added, one for messages and another to present RecordSet properties. The final table element within the form is a set of the usual buttons: Submit, Reset, and Cancel. References to the elements are stored as properties, for later use. For example, the table body element is saved as the "elBody" property. (Saving references to DOM elements as object properties is a key pattern.)
initialize (!initHead) The head row is generated by creating a tr element, th element, and td element from the column set for each "column". The th element is the field label, and the td element holds the input control. The input control is given the same name as the column, and a reference to each input element is added to the fields array in columnset "tree" order. If any of the validation ColumnSet properties are present, like !formClassName or !formMinLength, the corresponding control property or CSS classname is set.
initialize (messages) Since the body text has not been acquired, the constructor calls "showEmptyMessage" to present a "loading data" messsage.
acquire data The constructor passes the datasource a request for the initialRequest data along with the onDataReturnPopulateForm callback function. Meanwhile ...
create events To enable state-change listeners, custom events are raised for checkboxClickEvent and checkboxClickEvent. Other custom events raised include tableInitEvent, tableFocusEvent, dataReturnEvent, and cellFormatEvent, along with populateEvent, updateEvent, insertEvent, deleteEvent, cancelEvent, and resetEvent.
return The constructer increments the _nCount property for the class, and raises the tableInitEvent. Since this is a constructor, the system returns the "this" DataForm instance, and the method ends.
request Meanwhile, the DataSource request will obtain the raw data from a static array, a function or the connnection manager, parse out the fields indicated by the column set, and invoke the callback method, namely onDataReturnPopulateForm.
callback Back in the DataForm instance, onDataReturnPopulateForm, invokes a hook method, doBeforeLoadData, and then calls the RecordSet populateForm method to fetch the data from the DataSource response.
populate form With the new data in place, the populateForm method is called to generate the body of the table from the RecordSet. The set of input fields is stored as an object property. The method loops through the field, setting the value of each, and raises populateEvent before returning.
validate input When called, isInvalidInput loops through the input fields looking for one of the magic validation CSS styles. If a magic style is found, the value is validated according to the styles specified. If any field fails, the set of error messages is presented, and the method returns true. If validation succeeds, or no fields utilizing a magic style is found, this method returns false.
on submit If isInvalidInput returns true, the onSubmit handler exists quietly. If validation succeeds (or wasn't utilized), this handler creates a copy of the original record and harvests values from the input controls. The old and new values are compared, to see if anything changed. The onSubmit handler raises an updateEvent with the new and old values, and the isChanged advice. The debug version also logs the updateEvent. If a DataTable is attached to the form, the table is refreshed so that it will present any changed values.
on cancel The cancel handler raises a cancelEvent that bundles the original record values.
on reset The reset handler restores the original values from the RecordSet.
on switch To avoid unsaved changes, the isRecordChanged method will check whether new data has been input to the form. If this method returns true, a client page may wish to raise an "are you sure?" prompt.


Sign in to add a comment
Hosted by Google Code