Understanding sunflower Gantt's 5-using data components)

In the previous article Article When talking about sfdata design, we have briefly mentioned the functions to be implemented by the data component. In fact, the data component is a plug-in of sfdata, this plug-in can call all sfdata methods and events to complete some additional functions and data logic. For example, we have used the data component function to implement the following logic:

1. sfdatacalculatetimecomponent checks the start and end times of the parent task when the start and end times of the task change. This ensures that the start and end times of each summary task are consistent with the start and end times of all its subtasks. 2. sfdataoutlinecomponent fully implements the outline level (outlinelevel and outlinenumber) of tasks. When a task is added, moved, or deleted, the outline level of all tasks changes. sfdataidcomponent fully implements the task id function. When a task is added, moved, or deleted, the ID is always used as the sequence number of the task. sfdatalogging allows you to update logs of data and record all data changes so that they can be sent to the database for storage.

in fact, this is only a simple application of data components. Relying on the powerful functions provided by sfdata, it can actually perfectly implement many custom functions, such as data summary, automatic Setting of some attributes. Before the data component mechanism was created, we used taskpropertyread to implement a function: a task is not an outline, and the task takes more than 10 days, this feature is marked with a special style (highlighted in red). Although this feature was previously implemented, there is an obvious problem: If a task starts for only nine days, it was changed to 11 days later. At this time, the task should have been marked red, however, the time change does not cause a refresh of the list display (the list does not know whether to refresh the display), so the problem may occur. If we use the data component, we can set the task style according to the task attributes when the taskregister event occurs, then, in aftertaskupdate, You can reset the task style based on the new task attributes, so that you can fully implement the required functions. Before providing this example, let's look at the interfaces that the data component needs to implement (because the data component can get the sfdata object during initialization, so the attributes and methods of sfdata and related object classes can be used):

Method Name	Return Value	Description
Initialize (data)	Null	Initialize this data component
Remove ()	Null	Disable this data component
Depose ()	Null	Destroy this data component

As you can see, the interface to be implemented is very simple (especially after reading a long column interface list of the data adapter ), in fact, the most important thing is to process the data object in the initialize method and capture some events to control the data. Let's take a look at an example of implementing the data adapter. This example implements the functions described above.

Function myautoclassnamecomponent (timespan) {This. timespan = timespan? Timespan: 10*24*60*60*1000} myautoclassnamecomponent. prototype = new sfdatacomponent (); // inherit sfdatacomponentmyautoclassnamecomponent here. prototype. initialize = function (data) {// bind event this. listeners = [sfevent. BIND (data, "taskregister", this, this. ontaskregister), sfevent. BIND (data, "aftertaskupdate", this, this. ontaskupdate),];} myautoclassnamecomponent. prototype. setclassname = function (task) {// This function sets the classname attribute of the task, only Condition. Otherwise, leave it blank (set to default) var name = ""; if (! Task. getproperty ("summary") & task. getproperty ("finish "). valueof ()-task. getproperty ("START "). valueof ()> This. timespan) {name = "taskimportant";} task. setproperty ("classname", name);} myautoclassnamecomponent. prototype. ontaskregister = function (task) {// set the value this during Task initialization. setclassname (task);} myautoclassnamecomponent. prototype. ontaskupdate = function (task, name, value, beforevalue) {// reset the value if (name = "s Ummary "| Name =" finish "| Name =" start ") {This. setclassname (task) ;}} myautoclassnamecomponent. prototype. remove = function () {var listenr; while (listenr = This. listener. pop () {sfevent. removelistener (this. listener)} Although there are not many interfaces to be implemented, it does not seem easy to implement a data component, because you must have a good understanding of the attributes you need to operate on, you also have some knowledge about the sfdata mechanism, but once you understand it, You can implement a lot of complicated logic, sunflower Gantt Chart can be perfectly integrated with applications.