In this exercise, you will create a data source object that represents a "to-do" note and bind the elements of the noteArea gadget to this object. All changes made to the data source object will be automatically reflected in bound boxes.

To complete the exercise, follow these steps:

Step 1: Create a new data source object named NoteItem

To get started, you must first define a data source object that represents a "to-do" note, as well as the functions needed to manage data within the object.

To do so, create a new JavaScript file named NoteItem.js and add code to:

You can create these functions on your own. Or, to save time, you can use the NoteItem.js exercise file, which is located in the ToDoList/common directory.

The contents of the NoteItem.js file are shown here:

function NoteItem() {}

NoteItem.prototype.title = "";
NoteItem.prototype.date = "";
NoteItem.prototype.image = "";
NoteItem.prototype.description = "";
NoteItem.prototype.listeners = [];

NoteItem.prototype.setTitle = function (title)
{
  this.title = title;
  this.notifyPropertyChange("title");
}

NoteItem.prototype.setDate = function (date)
{
  this.date = date;
  this.notifyPropertyChange("date");
}

NoteItem.prototype.setImage = function (image)
{
  this.image = image;
  this.notifyPropertyChange("image");
}

NoteItem.prototype.setDescription = function (description)
{
  this.description = description;
  this.notifyPropertyChange("description");
}


NoteItem.prototype.addObjectListener = function (object)
{
  this.listeners.push(object);
}

NoteItem.prototype.implementsProtocol = function (protocol)
{
    return (protocol == "EEObjectSource");
}

NoteItem.prototype.removeObjectListener = function (object)
{
  for (i = 0; i < this.listeners.length; i++)
  {
    if (this.listeners[i] == object)
    {
      this.listeners[i] = null;
      this.listeners.splice(i, 1);
      break;
    }
  }
}

NoteItem.prototype.notifyPropertyChange = function (property)
{
  if (this.listeners != null)
  {
    for (i = 0; i < this.listeners.length; i++)
    {
      if (this.listeners[i] != null)
      {
        this.listeners[i].onPropertyChanged(this, property);
      }
    }
  }
}

Step 2: Instantiate the NoteItem object and add it to the DOM of the scene

Next, in the noteArea gadget's onInitialized function, you must instantiate the NoteItem object and then use the addDOMObject method to add the NoteItem object to the DOM of the scene. (By adding the NoteItem object to the DOM of the scene, it is made available to all JavaScript and .box files that make up the application.)

Open the noteAreaGadgets.js file and add the code shown below in bold to complete this step:

component.prototype.onInitialized = function()
{ 
  this.todoItem = new NoteItem();
  this.scene.addDOMObject("todoItem", this.todoItem);
}

Step 3: Change the code that modifies noteArea parts to use the data source object

Now that you've created the data source object and instantiated it in the application, you need to change the JavaScript functions that manipulate the "to-do" item data to use the data object's methods.

Step 4: Bind the parts of the noteArea gadget to the data source object

To bind the parts of the noteArea gadget to the NoteItem data source object, use this procedure:

Step 5: Testing your application

Now when you run your application, the "to-do" list items that you create and view are bound to the NoteItem data source object. When the data source object is modified, the changes will automatically be reflected in the noteArea gadget.