Page 3 of 4   « previous page   next page »

Adding a Form To Insert Items
Just like you created the TaskItem component, create another one called "EditForm.mxml" that extends the Canvas. In the Design view of this newly created component, add a Textarea with the id "descriptionArea," a ComboBox with the id "priorityList" and a Button. In the Source view, add the priority items to the ComboBox:

<mx:ComboBox id="priorityList">
    <mx:dataProvider>
<mx:ArrayCollection>
<mx:source>
<mx:Object label="High" data="1"/>
<mx:Object label="Medium" data="2"/>
<mx:Object label="Low" data="3"/>
</mx:source>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>

Going back to the main application file (mytodolist.mxml), switch to the design view and drag a new panel and inside drag your EditForm component. At this point, your main application should have a list of tasks and a form to add tasks. But the form doesn't send the new task data to the server yet.

Using Events To Communicate Between Components
The goal is that when the user clicks on the "New item" form button, the task data gets sent to the server (see Figure 6). Likewise, when the user clicks on the button on the task item, the task gets marked as done and this information gets recorded in the server. But both of these buttons and forms aren't in the main application where the RemoteObject tag is declared. That means you need a way to make the different components communicate with each other. Flex 2 has a powerful built-in event architecture that you can use to do exactly that.

First you need to make the form button respond to the click event. You'll implement a function called addItem() that will be invoked when the user clicks on the submit button:

<mx:Button label="Add task" id="addButton" click="addItem()"/>

The function must create a new event called saveItemEvent. Store the new task in the event and dispatch it so that other components that might be listening for this event can act on it.

<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;

public function saveItem():void {
    var saveItemEvent:ItemClickEvent = new ItemClickEvent("saveItem", true);
    //create a new Task object
    var taskData:Task = new Task();

    //set its properties using the data entered in the form
    taskData.description = descriptionArea.text;
    taskData.priority = priorityList.selectedItem.data ;
    saveItemEvent.item = taskData;

    //announce this event
    dispatchEvent(saveItemEvent);
}
]]>
</mx:Script>

Now you must make other components listen to that event. In the main application file, you created a method setUp() that was invoked when the application was completely loaded. In that same method you can specify the main application as a listener to any number of events, including the "saveItem" event your form is dispatching.

addEventListener("addItem",saveTask);
addEventListener("setAsDone",taskDone);

saveTask and taskDone are functions that will be called whenever the application gets notices about the "addItem" and "setAsDone" events.

saveTask simply sends the request to the server by using one of the methods defined in the RemoteObject tag:

private function saveTask(event:ItemClickEvent):void{
    var taskItem:Task = event.item as Task;
    myRemoteObject.save.send(taskItem);
}

Similarly, the setAsDone function sends a save request, but ensures that the task is set as done before sending the Task object:

private function taskDone(event:ItemClickEvent):void{
var taskItem:task = event.item as task;
    taskItem.done = 1;
    myRemoteObject.save.send(taskItem);
}

Page 3 of 4   « previous page   next page »