Step 6. Add Modification Actions to Flex UI

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 changes1). 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>
1) Note that the DataGrid above is editable which allows in place modification of the values
clearwiki/20.cleardatabuilder/08.tutorial/03.cdb_with_mybatis/06.enable_flex_updates.txt · Last modified: 2011/07/08 16:19 (external edit)
Back to top
CC Attribution-Noncommercial-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0