a complete nusoap and flex example. part 2: the flex application

May 30th, 2010 § 10

…Continued from Part 1

This is the second part of the NuSOAP and FLEX example. Click on the first part for details on the soap server.

This is the final application:

Using the WebService component we define the WSDL of our service and the supported operations. Each of the operations has an event listener for a ResultEvent.

<mx:WebService wsdl="http://discorganized.com/demos/nusoapflex/index.php?wsdl" id="ws">
	<mx:operation name="searchAddressBook" result="onSearchResult(event)" />
	<mx:operation name="updateContact" result="onUpdateResult(event)" />
	<mx:operation name="deleteContact" result="onDeleteResult(event)" />
	<mx:operation name="insertContact" result="onInsertResult(event)" />
</mx:WebService>

Using the applicationComplete property of the mx:Application we can define a function to run as soon as the application has been created. As there is no real error handling in this application I have set a listener for a FaultEvent directly on the web service so whichever operation fails we get a trace in the console with the fault description.

public function init():void {
	trace("init");
	ws.searchAddressBook("");
	ws.addEventListener(FaultEvent.FAULT,onFault);
}
private function onFault(evt:FaultEvent):void {
	trace ("oh noes!!" + evt.fault);
}

Also in the init() function we invoke the searchAddressbook method of the webservice, with an empty query string, so that we get the full contact list. The result event from that method is handled by the onSearchResult function. We have already set up a variable named “contacts” to store our contacts. Since we want to bind that variable to the datagrid, the variable must be defined as bindable using the [Bindable] keyword.

By settings the dataProvider property of our datagrid to the contacts variable, the datagrid is populated.

private function onSearchResult(evt:ResultEvent):void {
	contacts=evt.result;
	dataGrid.dataProvider=contacts;
	buttonSearch.enabled=true;
	CursorManager.removeBusyCursor();
}

Next we have our edit form:

<mx:Form x="0" y="0" width="388" height="224" defaultButton="{buttonUpdate}">
	<mx:FormItem label="Id">
		<mx:TextInput id="idTextInput" text="{dataGrid.selectedItem.id}" editable="true" enabled="false" valueCommit="checkEdit(event)"/>
	</mx:FormItem>
	<mx:FormItem label="First_name">
		<mx:TextInput id="first_nameTextInput" text="{dataGrid.selectedItem.first_name}"/>
	</mx:FormItem>
	<mx:FormItem label="Last_name">
		<mx:TextInput id="last_nameTextInput" text="{dataGrid.selectedItem.last_name}"/>
	</mx:FormItem>
	<mx:FormItem label="Email">
		<mx:TextInput id="emailTextInput" text="{dataGrid.selectedItem.email}"/>
	</mx:FormItem>
	<mx:FormItem label="Phone_number">
		<mx:TextInput id="phone_numberTextInput" text="{dataGrid.selectedItem.phone_number}"/>
	</mx:FormItem>
	<mx:Button label="Update Contact" id="buttonUpdate" click="edit_clickHandler(event)" enabled="false"/>
	<mx:Button label="Delete Contact" id="buttonDelete" click="delete_clickHandler(event)" enabled="false"/>
</mx:Form>

The form fields are binded to the selected item of the datagrid so whenever a a row is clicked, the form is filled.

<mx:Form x="0" y="0" width="388" height="224" defaultButton="{buttonUpdate}">
	<mx:FormItem label="Id">
		<mx:TextInput id="idTextInput" text="{dataGrid.selectedItem.id}" editable="true" enabled="false" valueCommit="checkEdit(event)"/>
	</mx:FormItem>
	<mx:FormItem label="First_name">
		<mx:TextInput id="first_nameTextInput" text="{dataGrid.selectedItem.first_name}"/>
	</mx:FormItem>
	<mx:FormItem label="Last_name">
		<mx:TextInput id="last_nameTextInput" text="{dataGrid.selectedItem.last_name}"/>
	</mx:FormItem>
	<mx:FormItem label="Email">
		<mx:TextInput id="emailTextInput" text="{dataGrid.selectedItem.email}"/>
	</mx:FormItem>
	<mx:FormItem label="Phone_number">
		<mx:TextInput id="phone_numberTextInput" text="{dataGrid.selectedItem.phone_number}"/>
	</mx:FormItem>
	<mx:Button label="Update Contact" id="buttonUpdate" click="edit_clickHandler(event)" enabled="false"/>
	<mx:Button label="Delete Contact" id="buttonDelete" click="delete_clickHandler(event)" enabled="false"/>
</mx:Form>

Using this form we can update and delete a record using the appropriate web service methods. Here are the click handlers of the two buttons:

protected function edit_clickHandler(evt:MouseEvent):void {
	CursorManager.setBusyCursor();
	evt.target.enabled=false;
	var contact:Object = new Object();
	contact.id = parseInt(idTextInput.text);
	contact.first_name = encodeUTF8(first_nameTextInput.text);
	contact.last_name = encodeUTF8(last_nameTextInput.text);
	contact.email = encodeUTF8(emailTextInput.text);
	contact.phone_number = encodeUTF8(phone_numberTextInput.text);
	ws.updateContact(contact);
}
protected function delete_clickHandler(evt:MouseEvent):void	{
	CursorManager.setBusyCursor();
	evt.target.enabled=false;
	var contact:Object = new Object();
	contact.id = parseInt(idTextInput.text);
	ws.deleteContact(contact);
}

We create a contact object with the form values before invoking the updateContact method. Note that it uses the encodeUTF8 from a previous post to take care of the utf8 mess between Actionscript and PHP. The delete function is pretty much the same but here we only need the contact id.

The insert form does not need to be binded to any data and insert handler function is similar to the edit one.

<mx:Form x="0" y="0" width="388" height="198" defaultButton="{buttonAdd}">
	<mx:FormItem label="First_name">
		<mx:TextInput id="first_nameTextInputAdd" text="" change="checkAdd(event)"/>
	</mx:FormItem>
	<mx:FormItem label="Last_name">
		<mx:TextInput id="last_nameTextInputAdd" text=""/>
	</mx:FormItem>
	<mx:FormItem label="Email">
		<mx:TextInput id="emailTextInputAdd" text=""/>
	</mx:FormItem>
	<mx:FormItem label="Phone_number">
		<mx:TextInput id="phone_numberTextInputAdd" text=""/>
	</mx:FormItem>
	<mx:Button label="Insert Contact" id="buttonAdd" click="insert_clickHandler(event)" enabled="false"/>
</mx:Form>

Here is the complete code for the FLEX application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  applicationComplete="init()" width="494" height="602">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.managers.CursorManager;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			[bindable]
			private var contacts:Object = new Object();

			public function init():void {
				trace("init");
				ws.searchAddressBook("");
				ws.addEventListener(FaultEvent.FAULT,onFault);

			}
			private function onSearchResult(evt:ResultEvent):void {
				contacts=evt.result;
				dataGrid.dataProvider=contacts;
				buttonSearch.enabled=true;
				CursorManager.removeBusyCursor();
			}
			private function onDeleteResult(evt:ResultEvent):void {
				ws.searchAddressBook("");
				buttonDelete.enabled=true;
				CursorManager.removeBusyCursor();
			}
			private function onUpdateResult(evt:ResultEvent):void {
				ws.searchAddressBook("");
				buttonUpdate.enabled=true;
				CursorManager.removeBusyCursor();
			}
			private function onInsertResult(evt:ResultEvent):void {
				ws.searchAddressBook("");
				buttonAdd.enabled=true;
				CursorManager.removeBusyCursor();

			}
			private function onFault(evt:FaultEvent):void {
				trace ("oh noes!!" + evt.fault);
			}
			protected function edit_clickHandler(evt:MouseEvent):void {
				CursorManager.setBusyCursor();
				evt.target.enabled=false;
				var contact:Object = new Object();
				contact.id = parseInt(idTextInput.text);
				contact.first_name = encodeUTF8(first_nameTextInput.text);
				contact.last_name = encodeUTF8(last_nameTextInput.text);
				contact.email = encodeUTF8(emailTextInput.text);
				contact.phone_number = encodeUTF8(phone_numberTextInput.text);
				ws.updateContact(contact);
			}
			protected function delete_clickHandler(evt:MouseEvent):void	{
				CursorManager.setBusyCursor();
				evt.target.enabled=false;
				var contact:Object = new Object();
				contact.id = parseInt(idTextInput.text);
				ws.deleteContact(contact);
			}
			protected function insert_clickHandler(evt:MouseEvent):void {
				CursorManager.setBusyCursor();
				evt.target.enabled=false;
				var contact:Object = new Object();
				contact.id = 0;
				contact.first_name = encodeUTF8(first_nameTextInputAdd.text);
				contact.last_name = encodeUTF8(last_nameTextInputAdd.text);
				contact.email = encodeUTF8(emailTextInputAdd.text);
				contact.phone_number = encodeUTF8(phone_numberTextInputAdd.text);
				ws.insertContact(contact);
			}
			protected function checkEdit(evt:Event):void {
				if (idTextInput.text=="") buttonUpdate.enabled=buttonDelete.enabled=false;
				else buttonUpdate.enabled=buttonDelete.enabled=true;
			}
			protected function checkAdd(evt:Event):void {
				(evt.target.text=="") ?  buttonAdd.enabled=false : buttonAdd.enabled=true ;
			}

			protected function doSearch(evt:MouseEvent):void {
				CursorManager.setBusyCursor();
				evt.target.enabled=false;
				ws.searchAddressBook(searchBox.text);
			}
			public static function encodeUTF8 (text:String):String {

				var a:uint, n:uint, A:uint;
				var utf:String;
				utf = "";
				A = text.length;

				for (a = 0; a < A; a++) {
					n = text.charCodeAt (a);
					if (n < 128) {
						utf += String.fromCharCode (n);
					} else if ((n > 127) && (n < 2048)) {
						utf += String.fromCharCode ((n >> 6) | 192);
						utf += String.fromCharCode ((n & 63) | 128);
					} else {
						utf += String.fromCharCode ((n >> 12) | 224);
						utf += String.fromCharCode (((n >> 6) & 63) | 128);
						utf += String.fromCharCode ((n & 63) | 128);
					}
				}
				return utf;
			}
		]]>
	</mx:Script>
	<mx:WebService wsdl="http://discorganized.com/demos/nusoapflex/index.php?wsdl" id="ws">
		<mx:operation name="searchAddressBook" result="onSearchResult(event)" />
		<mx:operation name="updateContact" result="onUpdateResult(event)" />
		<mx:operation name="deleteContact" result="onDeleteResult(event)" />
		<mx:operation name="insertContact" result="onInsertResult(event)" />
	</mx:WebService>
	<mx:HBox x="238" y="10" width="240" height="23">
		<mx:TextInput id="searchBox" />
		<mx:Button id="buttonSearch" label="Search" click="doSearch(event)"/>
	</mx:HBox>
	<mx:DataGrid x="10" y="41" width="468" height="283" id="dataGrid">
		<mx:columns>
			<mx:DataGridColumn headerText="id" dataField="id" width="20"/>
			<mx:DataGridColumn headerText="first_name" dataField="first_name" width="100"/>
			<mx:DataGridColumn headerText="last_name" dataField="last_name" width="100"/>
			<mx:DataGridColumn headerText="email" dataField="email"/>
			<mx:DataGridColumn headerText="phone_number" dataField="phone_number"/>
		</mx:columns>
	</mx:DataGrid>

	<mx:TabNavigator x="10" y="332" width="469" height="267">
		<mx:Canvas label="Edit" width="100%" height="100%">
			<mx:Form x="0" y="0" width="388" height="224" defaultButton="{buttonUpdate}">
				<mx:FormItem label="Id">
					<mx:TextInput id="idTextInput" text="{dataGrid.selectedItem.id}" editable="true" enabled="false" valueCommit="checkEdit(event)"/>
				</mx:FormItem>
				<mx:FormItem label="First_name">
					<mx:TextInput id="first_nameTextInput" text="{dataGrid.selectedItem.first_name}"/>
				</mx:FormItem>
				<mx:FormItem label="Last_name">
					<mx:TextInput id="last_nameTextInput" text="{dataGrid.selectedItem.last_name}"/>
				</mx:FormItem>
				<mx:FormItem label="Email">
					<mx:TextInput id="emailTextInput" text="{dataGrid.selectedItem.email}"/>
				</mx:FormItem>
				<mx:FormItem label="Phone_number">
					<mx:TextInput id="phone_numberTextInput" text="{dataGrid.selectedItem.phone_number}"/>
				</mx:FormItem>
				<mx:Button label="Update Contact" id="buttonUpdate" click="edit_clickHandler(event)" enabled="false"/>
				<mx:Button label="Delete Contact" id="buttonDelete" click="delete_clickHandler(event)" enabled="false"/>
			</mx:Form>
		</mx:Canvas>
		<mx:Canvas label="Insert" width="100%" height="100%">
			<mx:Form x="0" y="0" width="388" height="198" defaultButton="{buttonAdd}">
				<mx:FormItem label="First_name">
					<mx:TextInput id="first_nameTextInputAdd" text="" change="checkAdd(event)"/>
				</mx:FormItem>
				<mx:FormItem label="Last_name">
					<mx:TextInput id="last_nameTextInputAdd" text=""/>
				</mx:FormItem>
				<mx:FormItem label="Email">
					<mx:TextInput id="emailTextInputAdd" text=""/>
				</mx:FormItem>
				<mx:FormItem label="Phone_number">
					<mx:TextInput id="phone_numberTextInputAdd" text=""/>
				</mx:FormItem>
				<mx:Button label="Insert Contact" id="buttonAdd" click="insert_clickHandler(event)" enabled="false"/>
			</mx:Form>
		</mx:Canvas>

	</mx:TabNavigator>

</mx:Application>

Check out the NuSOAP web service output, grab the files and take a look at the final application.

Tagged: , , ,

§ 10 Responses to “a complete nusoap and flex example. part 2: the flex application”

  • [...] post got long so I split it in two. This first part here describes the soap server and part two the flex [...]

  • Kees Kees says:

    I do not completely understand the search function… how are the non-corresponding values “deleted”?

    • alex alex says:

      Hi, it’s the SQL query that does the selection using the LIKE operator. With an empty search string all the records are returned.

      check the first part of this example for the Contact class code.

  • Dpk Dpk says:

    Hi . great article regarding soapwebservice.. Alex can you tell me if i have android client how i send complex Contact array for insert purpose. im very thanksful to you in this regards

  • Thamanna Thamanna says:

    Steps to reproduce:1. TextInput ctaeres dynamicallytextInputBox = new MyTextInput; textInputBox.restrict = “0-9.”;textInputBox.maxChars = 24;amountValidator = new NumberValidator ;amountValidator.source = textInputBox;amountValidator.property = “text”;amountValidator.allowNegative = false;amountValidator.domain = “real”;amountValidator.precision = 4;amountValidator.required = false;amountValidator.maxValue = 999999999999.9999;amountValidator.trigger = textInputBox;amountValidator.triggerEvent = Event.CHANGE;amountValidator.addEventListener ValidationResultEvent.VALID, amountValid ;amountValidator.addEventListener ValidationResultEvent.INVALID, amountInvalid ; private function amountValid event:ValidationResultEvent :void valid = true; fieldsValidated = true; private function amountInvalid event:ValidationResultEvent :void valid = false; fieldsValidated = true; 2. As mention in the creation, when we exceed the limit, it shows error my red color border, and the same time if you delete them by DEL key when it come to the given acceptable limit, automatically become to green soon.3. Leave from the field and change values of another textinput(this is just a textinput, this is a form there are some more form elemets), then come back to value exceeded textfield by SHIFT+TABS and remove the additional entered numbers, when you come to green soon your value is accepted.4.Now again enter more values and now you are in the warn zone, then leave from the field and do the few changes in other form elements.5. Then come back to the value exceeded text filed by MOUSE CLICK, and start delete from DEL, even though you removed additional values, still fields shows that you are in warn zone. Actual Results: Even when remove additional numbers,still field is Red Expected Results: if remove additional numbers, field should come its normal status. Picture of this issue can be viewed at

  • Ho ho, who woulda thunk it, right?

  • Always the best content from these prodigious writers.

  • Bradleyol Bradleyol says:

    Zithromax Antibiotic z pak – Quality Medication metabolism of cephalexin cephalosporin antibiotic

  • hugo ruiz hugo ruiz says:

    NUSOAP

    can create a request html form dynamically ?,

    like a method typeToForm in
    class nusoap_xmlschema extends nusoap_base

    one example like that would be very useful

    Regars!

  • Asegodef Asegodef says:

    domperidone for motility problems chinakari39.tumblr.com relactation with breast pump

  • § Leave a Reply

What's this?

You are currently reading a complete nusoap and flex example. part 2: the flex application at Discorganized.

meta

Partly powered by CleverPlugins.com