Monday, 14. January 2008 8:23
So we’ve created our basic application in part three. You can see it here.
Adding and deleting is fine, but what about editing? I don’t want to simply add people, I want to be able to change them too. We’re going to need a few more variables and another function.
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var peopleColl:ArrayCollection = new ArrayCollection();
[Bindable]
private var buttonTitle:String = "Add Person";
private var workflowState:String = "adding";
private function submitPerson():void
{
if (workflowState == "adding")
{
addPerson();
}
}
private function addPerson():void
{
var obj:Object = new Object();
obj.firstName = firstName.text;
obj.lastName = lastName.text;
peopleColl.addItem(obj);
}
private function peopleLabelFunction(item:Object):String
{
return item.firstName + " " + item.lastName;
}
private function deletePerson():void
{
if (people.selectedItem != null)
{
peopleColl.removeItemAt(people.selectedIndex);
}
}
]]>
</mx:Script>
We’ve added a buttonTitle and made it bindable, a workflowState variable so we know at what stage the application it at and a submitPerson() function that makes a comparison on the workflowState and triggers the addPerson() function if we are adding. Now we’ll change the add person button.
<mx:Button label="{buttonTitle}" click="submitPerson()"/>
So what have we done here? As far as functionality – nada. It’ll still work the same, but now we are using data bindings for the button title too. Whoopy do. Well actually it is.
However first things first I’ve actually been bad and not added some simple functionality to the form. Once we’ve added a person we need to clear the text fields
I’ll assume now you are familiar enough with the code I can simply show you the bits I’m adding or changing.
private function addPerson():void
{
var obj:Object = new Object();
obj.firstName = firstName.text;
obj.lastName = lastName.text;
peopleColl.addItem(obj);
firstName.text = "";
lastName.text = "";
}
That’s a bit better.
Now for the editing functionality. First lets add some more binding. When the list is selected we want to populate the text fields with the selected item.
<mx:Form>
<mx:FormItem label="First Name">
<mx:TextInput id="firstName" text="{people.selectedItem.firstName}"/>
</mx:FormItem>
<mx:FormItem label="Last Name">
<mx:TextInput id="lastName" text ="{people.selectedItem.lastName}"/>
</mx:FormItem>
<mx:Button label="{buttonTitle}" click="submitPerson()"/>
</mx:Form>
Now we’ve bound the text field properties to the items in the list. When the list is selected though we want to set the form to be an edit rather than add form. We’ll do that with this function.
private function doEdit():void
{
workflowState = "editing";
buttonTitle = "Edit Person";
}
This simply changes the buttonTitle, which if you remember is bound to the form button. And it sets the workflow state to editing. This means we can write the next part of our submit person function.
private function submitPerson():void
{
if (workflowState == "adding")
{
addPerson();
}
else if (workflowState == "editing")
{
editPerson();
}
else
{
//Err something really odd is happening here.
}
}
And the actual edit function.
private function editPerson():void
{
var obj:Object = peopleColl.getItemAt(people.selectedIndex);
obj.firstName = firstName.text;
obj.lastName = lastName.text;
peopleColl[people.selectedIndex] = obj;
people.selectedIndices = new Array();
workflowState = "adding";
buttonTitle = "Add Person";
}
So what’s happening here? First lets get the object from the array. Then change it’s properties of firstName and lastName to the text fields. Then put it back into the array where we got it from, effectively overwriting the item in the array. As the textFields are bound to the selected item of the people list we need to deselect the list, or we are going to be stuck in edit mode as the text fields will keep displaying the selected item. We cannot do firstName.text = “” as this would overwrite the binding we had set up and stop the app working as expected. If you set the selectedIndices of a list to a new Array this effectively deselects the list.
We are done editing so we set the workflow state to adding and the buttonTitle back to Add Person.
The final tweaks we need to make are in the delete function as you need to select the list before you can delete the person from it. This would then leave the application in edit mode and would stop it working as expected.
private function deletePerson():void
{
if (people.selectedItem != null)
{
peopleColl.removeItemAt(people.selectedIndex);
workflowState = "adding";
buttonTitle = "Add Person";
}
}
And finally, finally, lets put the validation code on to make sure that people at least enter something into the form.
private function addPerson():void
{
if (firstName.text != "" || lastName.text != "")
{
var obj:Object = new Object();
obj.firstName = firstName.text;
obj.lastName = lastName.text;
peopleColl.addItem(obj);
firstName.text = "";
lastName.text = "";
}
else
{
mx.controls.Alert.show("At least enter something, doofus.","No Details Submitted");
}
}
You can see the finished app here.
Download the code from this link -> Simple Contact Form Complete MXML . The code is commented, so should be quite easy to read through.
