Understand Events in Flex with examples, part 3 [working with components]

Typically, flex applications is component based, I’m not talking about flex components framework, like combobox, datagrid, etc, i mean components like a composed with a canvas, a form inside it with controls that manage a specific thing in our application, etc, It could be a fully functionality. And a lot of times we need communicate this component with others around it.

Goal, comunicate components, Let’s do it.

Example_03

Functionality:The user needs operate 2 numbers, the operators are “add” (+) and “less” (-). The operators are inside a component and the main application have 3 text inputs, 2 textinput where user input the numbers to operate and a third with operation result .

We need a a MAIN application and a COMPONENT inside.

OperatorComponent.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
 	width="210" height="74"
  backgroundColor="#80ff80">
 <mx:Metadata>
  [Event(name="doOperation", type="flash.events.Event")]
 </mx:Metadata>
  <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   [Bindable]
   private var operators:ArrayCollection = new ArrayCollection([
             {"operator":"Select..."},
             {"operator":"add"},
             {"operator":"less"}]);
   
    private function closeHandler():void{
    //trigger an event when user select an operator
    dispatchEvent(new Event("doOperation"));
   }
  ]]>
 </mx:Script>
 
<mx:Label x="10" y="10" text="Select operator"/>
 <mx:ComboBox id="comboOperation"
           dataProvider="{operators}"
           labelField="operator"
           x="10" y="36" width="190"
           close="closeHandler()"/>
 
</mx:Canvas>

In OperatorComponent, the component expose the event that can trigger called “doOperation”, it’s means in the application when instance the component it will catch the event and do something, in this case operate the numbers.

This component have a green background and have a combobox inside a canvas, the combobox have a dataprovider called “operators” and display the ”operator” property.

Now the container, the main application.

MainPart3App.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:comp="*"
  layout="absolute" xmlns:local="*">
 
 <mx:Script>
  <![CDATA[
    private function doOperationHandler(evt:Event):void{
    		//Obtain from father component the value of an object inside the son component
		var operator:String = component1.comboOperation.selectedItem.operator;
    		//It's a good practice obtain just one time the value
    
    		if (Number(value1.text) is Number && Number(value2.text)){
     			//Verify the operation
     			if (operator == "add"){
      				result.text = String(Number(value1.text) + Number(value2.text));
     			}
     			else if (operator == "less"){
      				result.text = String(Number(value1.text) - Number(value2.text));
     			}
     			else {
      				result.text="";
     			}
    		}
    		else {
     			result.text="";
    		}
   	}
  ]]>
 </mx:Script>
 <mx:Label x="49" y="59" text="Input the numbers"/>
 <mx:TextInput x="117" y="85" width="53" id="value1"/>
 <mx:TextInput x="117" y="115" width="53" id="value2"/>
 <mx:Label x="49" y="87" text="Value 1"/>
 <mx:Label x="49" y="117" text="Value 2"/>
 <mx:Label x="49" y="164" text="Result"/>
 <mx:TextInput x="117" y="162" width="53" id="result"/>
 
 <!-- set operator components-->
 <comp:OperatorComponent id="component1" x="247" y="85"
    doOperation="doOperationHandler(event);"/>
 
</mx:Application>

First: When we expose events with metadata tags in components, the container above can capture the event, it means a listener for the event. In this case the application execute the function “doOperationHandler” when component trigger the event. In other words, when the combobox inside the component close the list, it dispatch an event called “doOperation” and the main application capture it and execute “doOperationHandler” and show the result.

OK, i hope you understand the example, i part4 will use 2 components, but the new component is into the OperatorComponent.

 

Regards.

ripoblet

 

 

 

Understand Events in Flex with examples, part 2

This example shows how to implement  part 1 example with actionscript. I hope yo see the bubble again.

Example_02

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="onCreationComplete()">
 <mx:Script>
    <![CDATA[
   	import mx.controls.Button;
   	import mx.containers.Panel;
   	import flash.events.MouseEvent;
   	import mx.controls.Alert;
   	private var myButton:Button;
   	private var myPanel:Panel;
   
   	// Handler function creationComplete event
   	private function onCreationComplete():void {
   	 	myPanel=new Panel();
    		myPanel.width=200;
    		myPanel.height=150;
    		myPanel.layout="absolute";
    		myPanel.title="I'm a Panel";
    		addChild(myPanel);
    		myButton = new Button();
    		myButton.label = "Click me";
    		myButton.x=60.5;
    		myButton.y=38;
    		myPanel.addChild (myButton);
    		// Add event click to the button
    		myButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
    		// Add event click to the panel
    		myPanel.addEventListener(MouseEvent.CLICK, panelClickHandler);
    		//myPanel.addEventListener(MouseEvent.CLICK, panelClickHandler, true);
   	}
   
	// The button click handler (the target phase)
   	private function buttonClickHandler(event:MouseEvent) :void{
   		Alert.show ("Event click on the button");
   	}

   	// The panel handler to demo bubbling
   	private function panelClickHandler(event:MouseEvent) :void{
   		Alert.show ("Event click on the panel");
   	}
  ]]>
 </mx:Script>
</mx:Application>
 

Now. The important is know how “say to the button”: listen the click over you, and to the panel too.

(Note: The examples one and two has been based on theriabook examples)