ContactPanel.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
   xmlns:mx="http://www.adobe.com/2006/mxml"
   initialize="initComp()"> 

    <mx:Script>
    <![CDATA[
       import mx.validators.ValidationResult;  
 	   import mx.controls.Alert;
	   import mx.collections.ArrayCollection;

	   import flash.net.*;
		
	   import com.adobe.cairngorm.control.CairngormEventDispatcher;     
	   import com.af.cep.commands.events.*;   
	   import com.af.cep.model.AddContact;
	   import com.af.cep.vo.ContactVO;
	   import com.af.cep.model.ModelLocator;

	   [Bindable]
	   public var model : ModelLocator = ModelLocator.getInstance();
		
       [Bindable]
	   public var addcontact : AddContact;
	   
	   [Bindable]
       public var contacts : ArrayCollection;  
         
       private function initComp():void {       	
       		
       		//Cheat to do the datagrid updates
       		model.contactDG = dgContact;
	
       		// Get a list of contacts from the database.
       		//var event : GetContactsEvent = new GetContactsEvent();
  			//CairngormEventDispatcher.getInstance().dispatchEvent( event );
  			
  			var contact:ContactVO = new ContactVO;
  			contact.name = "Chris Giametta";
  			contact.email = "chris.giametta@myemail.com";
  			contact.objectIdentifier = 0;
  			model.contacts.addItem(contact);
  			
  			contact = new ContactVO;
  			contact.name = "Kristi Giametta";
  			contact.email = "kristi.giametta@myemail.com";
  			contact.objectIdentifier = 1;
  			model.contacts.addItem(contact);
  			
  			contact = new ContactVO;
  			contact.name = "Kaitlyn Giametta";
  			contact.email = "kaitybug.giametta@myemail.com";
  			contact.objectIdentifier = 1;
  			model.contacts.addItem(contact);
  			
  			contact = new ContactVO;
  			contact.name = "Cole Giametta";
  			contact.email = "cole.giametta@myemail.com";
  			contact.objectIdentifier = 1;
  			model.contacts.addItem(contact);
       }
       
       public function selectContact():void {
       		if(dgContact.selectedItem != null)
       		{
       			fullName.text = dgContact.selectedItem.name;
       			emailAddress.text = dgContact.selectedItem.email;	
       		}
       }
       
	   public function addContact() : void {
	   		// bind to the addcontact model
	   		addcontact = model.addcontact;
			var contactVO : ContactVO = new ContactVO();
			contactVO.name = fullName.text;
			contactVO.email = emailAddress.text;
			
			// Bind the new contact to the contactVO model object
			model.addcontact.contactVO = contactVO;
			
  			var event : AddContactEvent = new AddContactEvent( contactVO );
  			CairngormEventDispatcher.getInstance().dispatchEvent( event );
  			
  			clearFormItems();
	   }
	   
	   public function deleteContact():void {   		
	   		if(dgContact.selectedItem != null)
       		{
		   		var contactVO : ContactVO = new ContactVO();
		   		
		   		contactVO = ContactVO(dgContact.selectedItem);
		   		
		   		var event : DeleteContactEvent = new DeleteContactEvent( contactVO );
	  			CairngormEventDispatcher.getInstance().dispatchEvent( event );
	
	  			clearFormItems();
       		}
	   }
	   
	   public function updateContact():void {   		
	   		if(dgContact.selectedItem != null)
       		{
		   		// bind to the addcontact model
		   		addcontact = model.addcontact;
				var contactVO : ContactVO = new ContactVO();
				contactVO.name = fullName.text;
				contactVO.email = emailAddress.text;
				contactVO.objectIdentifier = dgContact.selectedItem.objectIdentifier;
				
	  			var event : UpdateContactEvent = new UpdateContactEvent( contactVO );
	  			CairngormEventDispatcher.getInstance().dispatchEvent( event );
	  			
	  			model.contact = contactVO;
	  			clearFormItems();
       		}
	   }
	   
	   public function clearFormItems():void {
	   		fullName.text = "";
	   		emailAddress.text = "";
	   }

	   public function navigateToAF(event:MouseEvent):void {
        	var u:URLRequest = new URLRequest("http://www.appfoundation.com");
        	navigateToURL(u,"_blank");
       }
    ]]>
    </mx:Script>
    
    <mx:Binding source="model.contacts" destination="dgContact.dataProvider" />
    
    <mx:Panel styleName="CustomPanelBlueGrey">
		<mx:Panel height="100%" styleName="CustomPanelBlueGreen">
			<mx:VBox height="100%">			
				<mx:ApplicationControlBar x="2" y="2" paddingTop="0" paddingLeft="3" horizontalGap="0"
					width="100%" height="22" styleName="ApplicationControlBarBlack" cornerRadius="4">
					<mx:Image source="assets/images/icon_halfArrowYellow.png"/>
					<mx:Label text="MY CONTACTS" fontWeight="bold" color="white" fontSize="13" />
				</mx:ApplicationControlBar>
				<mx:HBox height="100%" styleName="greyFill">    
			    <mx:VBox>			    
				    <mx:Form id="addcontactForm" width="100%">				    
					    <mx:HBox width="100%" horizontalAlign="left">
						    <mx:Text text="Maintain Contacts:" fontSize="12"/>
					    </mx:HBox>
					    
				        <mx:FormItem label="Name: " width="100%">
				            <mx:TextInput id="fullName" width="100%" color="black"/>
				        </mx:FormItem>
				        
				        <mx:FormItem label="Email: " width="100%">
				            <mx:TextInput id="emailAddress" width="100%" color="black"/>
				        </mx:FormItem> 
			 
				        <mx:HBox width="100%" horizontalAlign="right">
					        <mx:Button label="Add Contact" enabled="{ !addcontact.isPending }" click="addContact()" />   
					        <mx:Button label="Update Contact" enabled="{ !addcontact.isPending }" click="updateContact()" />
					        <mx:Button label="Delete Contact" enabled="{ !addcontact.isPending }" click="deleteContact()" />
				    	</mx:HBox>				    	
				    </mx:Form>				 
				</mx:VBox>
			 
			    <mx:VRule height="100%" strokeColor="#DDDDDD"/>   
					 
			    <mx:VBox paddingTop="15" paddingLeft="15" paddingRight="15" paddingBottom="15">
			     
					<mx:Text text="Contact List:" fontSize="12"/>
			    
			    	<mx:DataGrid id="dgContact" height="243" color="white"
			    		styleName="greyFill" change="selectContact()" click="selectContact()">
				    	<mx:columns>
				    		<mx:DataGridColumn headerText="Name" dataField="name"/>
				    		<mx:DataGridColumn headerText="Email" dataField="email"/>
				    	</mx:columns>		    	
			        </mx:DataGrid>
			    </mx:VBox>			 
			  </mx:HBox>  
        	</mx:VBox>
		</mx:Panel>
		<mx:HBox width="100%" >		
			<mx:Image source="assets/images/icon_appFoundationSmall.png" click="navigateToAF(event)"
				alpha=".75" rollOverEffect="alphaFadeIn" rollOutEffect="alphaFadeOut"
				toolTip="AppFoundation"/>
		</mx:HBox>
	</mx:Panel>
	
	<!-- Effects -->	
    <mx:Fade id="alphaFadeOut" duration="350" alphaFrom="1.0" alphaTo="0.75"/>
    <mx:Fade id="alphaFadeIn"  duration="350" alphaFrom="0.75" alphaTo="1.0"/>
</mx:Canvas>