How to create components

We can create components by extending any UI Component.
component.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute" xmlns:custom="components.*" width="100"
	height="100">

        <custom:ComboBoxComponent/>

</mx:Application>

ComboBoxComponent.as

package components
{
	import mx.controls.ComboBox;

	public class ComboBoxComponent extends ComboBox
	{
		public function ComboBoxComponent()
		{
			dataProvider = ["hello","hi"];
		}

	}
}

Adding and removing elements from the list in Flex

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>
		<![CDATA[		

		import mx.effects.DefaultListEffect;
		import mx.collections.ArrayCollection;

		[Bindable]
		private var myDP:ArrayCollection =
			new ArrayCollection(['A','B','C','D','E','F','G','H']);

		private var zcount:int = 0;

		private function deleteItem():void {

			// As each item is removed, the index of the other items changes.
			// So first get the items to delete,
			// then determine their indices as you remove them.

			private var toRemove:Array = [];

			for (var i:int = 0; i < list0.selectedItems.length; i++)
			{
				toRemove.push(list0.selectedItems[i]);
			}

			for (i = 0; i < toRemove.length; i++)
			{
				myDP.removeItemAt(myDP.getItemIndex(toRemove[i]));
			}
		}
		private function addItem():void {

			// Always add the new item after the 3rd item
			//or after the last item if the length < 3.

			myDP.addItemAt("Z"+zcount++,Math.min(3,myDP.length));

		}

		]]>
	</mx:Script>

<!-- Define an instance of the DefaultListEffect effect,
		& set its fadeOutDuration & color properties. -->

<mx:DefaultListEffect id="myDLE" fadeOutDuration="1000" color="0x0000ff"/>

<mx:Panel title="DefaultListEffect Example" width="75%" height="75%" paddingTop="10"
			paddingLeft="10" paddingRight="10" paddingBottom="10">

	<mx:List id="list0" width="150" dataProvider="{myDP}" variableRowHeight="true"
				fontSize="18" allowMultipleSelection="true"
				itemsChangeEffect="{myDLE}"/>

	<mx:Button label="Delete item" click="deleteItem();"/>

	<mx:Button label="Add item" click="addItem();"/>

</mx:Panel>

</mx:Application>

Read more at:

http://www.igorcosta.com/flex3/doc/mx/effects/DefaultListEffect.html

Event Listeners for Checkbox & buttons

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function initApp():void {
				// event listener for a checkbox
				cb1.addEventListener(MouseEvent.CLICK, handleCheckBoxChange);
				// event listener for a Button
				b1.addEventListener(MouseEvent.CLICK, logAction);
			}
			public function handleCheckBoxChange(e:Event):void {
				if (cb1.selected) {
					b1.addEventListener(MouseEvent.CLICK, logAction);
					ta1.text += "added log listener" + "\n";
				}
				else {
					b1.removeEventListener(MouseEvent.CLICK, logAction);
					ta1.text += "removed log listener" + "\n";
				}
			}
			public function performAction(e:Event):void {
				Alert.show("You performed the action");
			}
			public function logAction(e:Event):void {
				ta1.text += "Action performed: " + e.type + "\n";
		}
	]]>
	</mx:Script>
	<mx:Button label="Perform Action" id="b1" click="performAction(event)"/>
	<mx:CheckBox id="cb1" label="Log?" selected="true"/>
	<mx:TextArea id="ta1" height="200" width="300"/>
</mx:Application>

Panel with rounded corners

roundCornerPanel.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                           backgroundColor="white">
	<mx: Panel title="Panel with rounded corners" cornerRadius="10" width="160"
                          height="100">
		<mx:Text text="Hello World" />
	</mx: Panel>
	<mx: Panel title="Panel without rounded corners" cornerRadius="10" width="160"
                          height="100">
		<mx:Text text="Hello World" />
		<mx:ControlBar/>
	</mx: Panel>
</mx:Application>

Adding & removing elements from a List Control

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
           
            [Bindable]
            public var myAC:ArrayCollection = new ArrayCollection(["One", "Two", "Three", "Four"]);         
            [Bindable]
            public var myAC2:ArrayCollection = new ArrayCollection(["Ek", "Do", "Teen", "Char"]);
        ]]>   
    </mx:Script>
    <mx:List id=”lis” dataProvider=”{myAC}”/>
    <mx:Button
        label=”Add Element”
        click=”myAC.addItem(’new element’);”/>
    <mx:Button
        label=”Remove Element”
        click=”myAC.removeItemAt(lis.selectedIndex);”/>
   <mx:Button
        label=”Change ArrayCollection”
        click=”myAC=myAC2″/>
</mx:Application>

Button with image & label

<?xml version=”1.0″?>
<!– controls\button\ButtonSkin.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
<mx:Button label=”Image Button”
    toggle=”true”
    color=”0xFFFFAA”
    textRollOverColor=”0xAAAA55″
    textSelectedColor=”0xFFFF00″
    icon=”@Embed(source=’07_days.jpg’)”
    width=”136″ height=”41″/>
</mx:Application>

Adding Buttons in Panel

Adding buttons in Panel’s Footer

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   private function show():void{
    Alert.show("Hello! How Are you?")
   }
  ]]>
 </mx:Script>
 <mx:Panel width=”250″ height=”200″ layout=”absolute” title=”hi”>
  <mx:ControlBar>
   <mx:Button label=”Hello” click=”show()”/>
  </mx:ControlBar>
 </mx:Panel> 
</mx:Application>

Adding buttons in Panel’s Header

// Main.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns=”*” layout=”horizontal”>
  <MinMaxPanel id=”topPanel” title=”Special” width=”300″ height=”200″maxHeight=”{height-50}” maxWidth=”{width-300}” />
</mx:Application>

// MinMaxButtons.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns=”*” creationComplete=”initComp()” >
  <mx:Metadata>
    [DefaultProperty("subComponents")]
    [Event("minimized")]
    [Event("maximized")]
    [Event("normalized")]
  </mx:Metadata>
  <mx:states>
    <mx:State name=”minimized”>
      <mx:SetProperty name=”height” value=”30″/>
    </mx:State>
    <mx:State name=”maximized”>
      <mx:SetProperty name=”width” value=”{maxWidth}”/>
      <mx:SetProperty name=”height” value=”{maxHeight}”/>
    </mx:State>
  </mx:states>
  <mx:transitions>
    <mx:Transition fromState=”*” toState=”*”>
      <mx:Resize target=”{this}” />
    </mx:Transition>
  </mx:transitions>
  <mx:Script>
  <![CDATA[
    private var _myChildren:Array;
    public function set subComponents(a:Array) : void
    {
      _myChildren = a;
    }
    public function get subComponents() : Array
    {
      return _myChildren;
    }
    private function addSubComponents() : void
    {
      if( _myChildren == null ) {
        return;
      }
      for(var i:int=0; i < _myChildren.length; i++) {
        panel.addChild( _myChildren[i] );
      }
    }
    private var _myControlChildren:Array;
    public function set controlComponents(a:Array) : void
    {
      _myControlChildren = a;
    }
    public function get controlComponents() : Array
    {
      return _myControlChildren;
    }
    private function addControls() : void
    {
      if( _myControlChildren == null ){
        return;
      }
      for(var i:int=0; i < _myControlChildren.length; i++) {
        controlBar.addChild( _myControlChildren[i] );
      }
    }
    public function minimize(fireEvent:Boolean=true) : void
    {
      if( currentState == ‘minimized’ ) {
        currentState = ”;
        if( fireEvent ){
          dispatchEvent( new Event(”normalized”) );
        }
      }
      else {
        currentState = ‘minimized’;
        if( fireEvent ){
          dispatchEvent( new Event(”minimized”) );
        }
      }
    }
    public function maximize(fireEvent:Boolean=true) : void
    {
      if( currentState == ‘maximized’ ) {
        currentState = ”;
        if( fireEvent ){
          dispatchEvent( new Event(”normalized”) );
        }
      }
      else {
        currentState = ‘maximized’;
        if( fireEvent ){
          dispatchEvent( new Event(”minimized”) );
        }
      }
    }
    [Bindable]
    public var showMinimize:Boolean = true;
    [Bindable]
    public var showMaximize:Boolean = true;
    private function initComp() : void
    {
      if( !showMinimize ){
        minButton.width=0;
      }
      if( !showMaximize ){
        maxButton.width=0;
      }
    }
    private var _title:String;
    public function set title(t:String) : void
    {
      _title = t;
    }
    [Bindable]
    public function get title() : String
    {
      return _title;
    }
  ]]>
  </mx:Script>
  <mx:Panel id=”panel” title=”{title}” layout=”absolute” left=”0″ top=”0″ bottom=”0″ right=”0″   creationComplete=”addSubComponents(); addControls()”>
    <mx:ControlBar id=”controlBar”/>
  </mx:Panel>
  <mx:HBox top=”2″ right=”0″>
    <mx:LinkButton top=”2″ right=”40″ id=”minButton” icon=”@Embed(’minimize_icon.gif’)” visible=”{showMinimize}”
click=”minimize()”/>
    <mx:LinkButton top=”2″ right=”5″ id=”maxButton” icon=”@Embed(’maximize_icon.gif’)” visible=”{showMaximize}”
click=”maximize()”/>
  </mx:HBox>
</mx:Canvas>

Insert Logo in Panel

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
  <mx:Canvas width=”50%” height=”50%” >
    <mx:HBox width=”100%” horizontalAlign=”left”>
      <mx:Image source=”logOut.jpg”/>
    </mx:HBox>
    <mx:Panel width=”100%” height=”100%” borderThickness=”5″/>
  </mx:Canvas>
</mx:Application>

Datagrid Component

The default behavior of editing a cell in a Flex DataGrid is such that if you hit the enter key its moves to the next cell down, and tab moves to the next cell to the right.If you want it so that when you hit tab or enter, that it just commits that current cell and stays on that row in uneditted mode you’ll want to combine callLater() and the itemEditEnd event.

<mx:Script>
  private function maintainFocus():void
  {
      dg.editedItemPosition = null;
  }
</mx:Script>

<mx:DataGrid editable=”true” sortableColumns=”false”  id=”dg” itemEditEnd=”callLater(maintainFocus)” id=”dg”>
…
…
</mx:DatgaGrid>

Flex components

Flex applications are composed of components.

There are 2 basic categories of flex framework components:

• Visual

1. containers -> that can contain other components. At a minimum, application itself is a containeras you can place other components within it. ex: VBox, HBox,Gris, tiles and all sorts of layout configurations.
2. user nterface controls -> ex: Buttons,text inputs, lists, datagrids

• Non-Visual

1. data components: to create data structures such as arrays and collections, and for making remote procedure calls with protocols such as SOAP for web services or AMF for remoting.
2. utility components: to achieve functionality. ex: repeater

You can set properties of these components in different ways:

• tag attribute

          <?xml version=”1.0″ encoding=”utf-8″?>
          <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
          </mx:Application>

• nested tags

         <?xml version=”1.0″ encoding=”utf-8″?>
         <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
                   <mx:Button x=”166″ y=”56″>
                            <mx:label Click Me>
                            </mx:label>
                   </mx:Button> 
         </mx:Application>

• AS

         <?xml version=”1.0″ encoding=”utf-8″?>
         <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
                   <mx:Button x=”166″ y=”56″ id=”btn”/>
                            <mx:Script>
                                      <![CDATA[
                                                btn.label="Click Me"
                                      ]]>
                            </mx:Script>
         </mx:Application>