Components Life Cycle

I’ve read this post and i want share wit you, very interesting

Adobe Flex 3 Component Life Cycle

View more
presentations
from rjowen.

Comunication between components – Flexcamp Chile 2008

This is my presentation in spanish

regards

Restrict characters into a TextInput

You must use restrict property if you don’t want the user put a special char, like spaces, ‘, <,>, etc.

If you want restrict the space you must use <mx:TextInput id=”txtInput” restrict=”^ ” />

If you want restrict single quote you must use <mx:TextInput id=”txtInput” restrict=”^’” />

If you want restrict double quote you must use <mx:TextInput id=”txtInput” restrict=”^\”" />

If you want restrict single and double quote you must use <mx:TextInput id=”txtInput” restrict=”^’\”" />

If you want restrict < or > you must use <mx:TextInput id=”txtInput” restrict=”^<>” />

 

Summary

If you want restrict some character you must use the restrict property and put into all characters that you don’t want user put into the text, but always beginnig with a ^ character.

 

Regards

 

ripoblet

 

How to sort dates correctly with a datagrid column

When we have datagrid column showing is a date field, but when retrive from database sometimes formated “DD/MM/YYYY HH24:mi” (oracle format), the datagrid column can’t sort correct because it’s trying to sort strings alphabetically and strings dates are not words, are dates. (obviously).

Example Preconditions: Objects in dataprovider have a “DATE” property with a string date, example “11/06/2008 17:45″

 

This time the solution is

1) Transform strings format dates to date format dates

2) Create sort function

3) Set datagrid colum with the property “sortCompareFunction”

 Code

1) Transform function called String2Date

 private function String2Date(date:String):Date{

var day_month:Array = date.split(‘/’); //cut day, month and year with hour 

      var day:int = new Number(day_month[0]);

      var month:int = new Number(day_month[1]);

      var year_hour:String = day_month[2];

     

      var arr:Array = year_hour.split(‘ ‘); //cut year and hours with minutes separated by a space ” “

      var year:int = new Number(arr[0]);

      var hour_minutes:String = arr[1];

                   

      var arr2:Array = hour_minutes.split(‘:’); // cut hour and minutes seperated by “:”

      var hour:int = new Number(arr2[0]);

      var minutes:int = new Number(arr2[1]);

                 

      var date_date:Date = new Date(year, month -1, day, year, minutes, 0, 0);

             

      return date_date;

}

 

2) Compare function called “sortDates”

 

public function sortDates(itemA:Object, itemB:Object):int {

var dateA:Date = String2Date(itemA.FECHA);

      var dateB:Date = String2Date(itemB.FECHA);

      return ObjectUtil.dateCompare(dateA, dateB);

}

3) Finally set datagrid column, o suppose you have a defined column datagrid

 

<mx:DataGridColumn headerText=”Date” dataField=”DATE” sortCompareFunction=”sortDates“/>

 

Now you can sort dates in a datagrid.

 

PD: If you have a simple date string format like “DD/MMM/YYYY” modify String2Date function.

END

 

Regards

 

ripoblet

 

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)

Understand Events in Flex with examples, part 1

Today I begin a comment in examples that show you how manage events.

I separate this comment in 6 parts, this is the first part I talk about three basic concepts event, listener and dispatch in simple words.

Event: Indicate that something happend in somewhere. Is an object that have information about who triggered.

Listener: This is a method that can “listen” or “hear” the event and do something when it happens (handler function)

Dispatch: This is a method that can trigger an event.

Ok, let’s begin

 

Example_01

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
            <mx:Panel x="17.5" y="20"
		width="209" height="142" layout="absolute"
                  click="mx.controls.Alert.show('click event on the panel')"
		title="Panel">
            <mx:Button label="ClickMe"
		x="60.5" y="38"
                  click="mx.controls.Alert.show('click event on the button')"/>
            </mx:Panel>
</mx:Application>

 Save and run the example

Listeners: Panel and button component are listen the click event.   Both cases “Alert” is the handler unction

Dispatch: Flash player will trigger the event when user click on the button or somewhere in the panel.

Event: MouseEvent.CLICK

 

You will see an important effect, bubble.

You must consider that are two components listening the same event and how the button is into the panel flash player propagate the event throgh the all components thar are registered to listen the event.

You are experimented the three phases in a flow event: Capturing, Target and Bubbling.

In the capturing phase, the plash player search every object who want to listen the event triggered recently, then, when find the object that triggered the event (capturing phase), it set some properties about the target and finally propagate (bubbling phase) the event to every object who want do something when “hear” or “listen” the event.

So, take care when two object are listening the same event, because they will do something.

 

In the next sections we will see how can do the same thing, but with actionscript.

 

Regards.

ripoblet