Now that Java back-end is capable to InsertItems, DeleteItems and UpdateItems, update the Flex application to contain the buttons “Add” and “Remove” buttons, along with “Fill” for data retrieval and “Commit” for saving changes¹⁾. Whenever you need to retrieve data, call the DataCollection's method fill(), and to send the changes to the server for persistence, call the DataCollection function sync(). Run Flex application after making these changes and see if you can perform all crud operations with the data.

<?xml version="1.0" encoding="UTF-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:collections="clear.samples.collections.*"
	pageTitle="MyBatisOnSpring" minHeight="480"
	creationComplete="companies.fill()">
	<fx:Declarations>
		<collections:CompanyCollection id="companies"/>
	</fx:Declarations>
	<s:Panel width="100%" height="100%">
		<s:DataGrid id="dg" dataProvider="{companies}" editable="true"  width="100%" height="100%" >
			<s:typicalItem>
				<fx:Object   company="Computer Associates" />
			</s:typicalItem>
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="id" headerText="Id" editable="false" width="90"/>
					<s:GridColumn dataField="companyName" headerText="Company" editable="true" />
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>
		<s:controlBarContent>
			<s:HGroup  verticalAlign="middle">			
				<s:Button click="companies.fill()" label="Fill"/>
				<s:Button label="Remove" click="onRemove(dg.selectedIndex)" enabled="{dg.selectedIndex != -1}"/>
				<s:Button label="Add" click="onAdd(Math.max(0,dg.selectedIndex+1)); "/>
				<s:Label text="Deleted: {companies.deletedCount}"/>
				<s:Label text="Modified: {companies.modifiedCount}"/>
				<s:Button click="companies.sync(true)"
						  enabled="{companies.commitRequired}" label="Commit"/>
			</s:HGroup>	
		</s:controlBarContent>
	</s:Panel>
    <fx:Script><![CDATA[
		import clear.samples.dto.CompanyDTO;	
    [Bindable]
	public var dto:CompanyDTO;
		private function onAdd(position:int):void	{
			var item:CompanyDTO = new CompanyDTO();	
			companies.addItemAt(item, position);
			dg.selectedIndex = position;
 
		}	
		private function onRemove(position:int):void {
			companies.removeItemAt(position);
			dg.selectedIndex = (companies.length > position) ? position:(position-1);
 
		}
	]]></fx:Script>
</s:Application>