SUMMARY: In yesterday’s installment, I added a button that created a new Task on the server and returned the new TaskID to the client GUI. NOW I finally get to draw it on the screen using jQuery!

Here’s what got added yesterday:

1. Make an “Add Task” button whose click handler points to view.js:dsAddVTask()
2. dsAddVTask() calls Controller.AddVTask().
3. Controller.AddVTask() calls Model.AllocateNewTaskID(), with a callback function (CBF_AddVTask)
4. Model.AllocateNewTaskID() dispatches a NEWTASK command to the server
5. Model.AllocateNewTaskID() receives the new TaskID from the server
6. CBF_AddVTask receives the TaskID from Model.AllocateNewTaskID()

The general idea is that View passes control to the Controller, which then makes the appropriate calls to Model and View to make things happen. You can think of the Controller as a “central manager” between the front end (View) and the back office (Model). Currently, the controller here is very simple, basically acting as a coordinator between Model and View.

Now I have to add more steps to complete the steps that had started above. These are:

• Creating a new VTask (the visual version of a task) HTML element
• Adding it to a Display List
• Refreshing the screen by drawing the Display List

I have a function called View.CreateVTaskFromTaskID() than handles the visual creation side of things:

• Creates a new VTask via VDB.New(task_id), with a default drawing function of Draw.VTask
• Adds the new VTask to the VTaskList (our display) via View.VTaskListAdd(vtask)

View.VTaskListAdd(vtask) is what actually creates a new HTML element and adds it to the end of the #vtasks DIV:

• It creates a jQuery object from the drawFunction saved in the VObject: Draw.VTask(vobj)
• Draw.VTask(vobj) extracts the task_id saved in the vobject and then calls Model.GetVTaskData(task_id)
• • Model.GetVTaskData(task_id) returns the data from Tasks and Actions in a composite vtaskdata object
• • HTML code is returned in string form with the data filled-in.
• Click and Blur event handlers are bound to the new VObject to handle hiding/showing fields
• The jQuery object is appended to the #vtasks DIV.

AND THAT’S THAT! It seems to work.

I also added some code that will initialize a VTaskList display from whatever happens to be in the Tasks table. Whew! Big step!

Next up: SAVING.