masputih.com: Flex+PHP Simple Calculator

16 June 2008 in Demo, Flex | permalink

Flex+PHP Simple Calculator

Berikut ini demo komunikasi antara Flex dan server ( php ). Aplikasi yang saya buat adalah kalkulator super sederhana dengan memanfaatkan komponen HTTPService.

Dari Flex manual :

You use the <mx:HTTPService> tag to represent an HTTPService object in an MXML file. When you call the HTTPService object's send() method, it makes an HTTP request to the specified URL, and an HTTP response is returned.

Ini demonya : Simple Calc

MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" height="204" width="395"
	applicationComplete="init()" >
	
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			private const DEFAULT_URL:String = "http://php.masputih-labs.com/services/calculator.php";
			private const OPERATIONS:Array = [
				{label:"+", operation:"SUM"},
				{label:"-", operation:"SUB"},
				{label:"X", operation:"MUL"},
				{label:"/", operation:"DIV"},
			];
			
			[Bindable]
			private var _operations:ArrayCollection = new ArrayCollection(OPERATIONS);

// FLEX EVENTS 
			private function init():void{
				//ambil parameter serviceURL dari flashvars
				httpService.url = Application.application.parameters.serviceURL || DEFAULT_URL;
			}
// ----------------------------------------
			
			private function buttonListener(e:MouseEvent):void{
				var data:Object = {};
				
				if(checkDivisionByZero()) {
					Alert.show("Pembagian dengan nol","Error");
				}else{
					data.firstNum = firstNum.text;
					data.secondNum = secondNum.text;
					data.operation = operationCB.selectedItem.operation;
					
					httpService.send(data);
				}
			}
			
			private function checkDivisionByZero():Boolean{
				if(secondNum.text == '0' && operationCB.selectedItem.operation == "DIV"){
					return true;
				};
				return false;
			}
			
			private function resultHandler(e:ResultEvent):void{
				var res:Object = e.result;
				resultTxt.text = res.toString();
			}
			
			private function faultHandler(e:FaultEvent):void{
				Alert.show(e.fault.toString(),"Error");
			}
			
			
		]]>
	</mx:Script>
	
	<mx:HTTPService id="httpService"
		useProxy="false"
		showBusyCursor="true"
		method="POST"
		resultFormat="text" 
		result="resultHandler(event)"
		fault="faultHandler(event)" />
		
		
	<mx:VBox>
		<mx:HBox>
			<mx:TextInput id="firstNum"  width="45" text="1"/>
			<mx:ComboBox id="operationCB" dataProvider="{_operations}" />
			<mx:TextInput id="secondNum"  width="45" text="1"/>
		</mx:HBox>
		<mx:Button id="calcButton" label="Hitung!" click="buttonListener(event)" />
		<mx:HRule  width="100%"/>
		<mx:HBox>
			<mx:Label text="Hasil : "  fontWeight="bold"/>
			<mx:TextInput id="resultTxt" editable="false"  width="45"/>
		</mx:HBox>
	</mx:VBox>
	
</mx:Application>

masputih.com

Flex+PHP Simple Calculator

MXML

calculator.php

HTML SWFObject + flashvars

Possibly related articles:

Looking for something ?

Categories

Friends

Books I Read

Resources