When managing many states, you can group states into stateGroups to simplify things. In each container of an application you can have only 1 state value at a time, "currentState", using stateGroups lets you utilize "N" states at the same time. In the demo below, look at the state for "addCheckBoxandButton", this state includes 2 states.

{syntax mxml}<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark"> 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<s:states> 
		<s:State name="default"/> 
		<s:State name="addCheckBox" stateGroups="Group1"/> 
		<s:State name="addTextInput"/> 
		<s:State name="addCheckBoxandButton" stateGroups="Group1"/> 
	</s:states>
	
	<s:HGroup>
		<!-- Included in the addCheckBox and addCheckBoxandButton view states. --> 
		<s:CheckBox id="myCB" label="Checkbox" 
					includeIn="Group1"/>
		
		<!-- Included in the addTextInput view state. --> 
		<s:TextInput id="myTI" 
					 includeIn="addTextInput"/>    
		
		<!-- Included in the addCheckBoxandButton view state. --> 
		<s:Button id="myB" 
				  includeIn="addCheckBoxandButton"/>
		
		<!-- Exclude from addTextInput view state. --> 
		<s:TextArea text="Exclude from addTextInput" 
					excludeFrom="addTextInput"/>             
	</s:HGroup>
	
	<s:HGroup>
		<s:Button label="Add CheckBox" 
				  click="currentState='addCheckBox'"/> 
		<s:Button label="Add Textinput" 
				  click="currentState='addTextInput'"/>    
		<s:Button label="Add Group 1" 
				  click="currentState='addCheckBoxandButton'"/> 
		<s:Button label="Default" 
				  click="currentState='default'"/>
	</s:HGroup> 
</s:Application>{/syntax}
  
The other thing to notice here is the use of the attribute "excludeFrom" and "includeIn". These attributes make it easy to add and remove components from any part of an application. These add a real depth to Flex as very little code is required.

All told these State features really shine when Flash Catalyst is applied. These features of the framework make code generated by Catalyst very easy to understand and change from a developer perspective. Truth be told, I was very concerned about the readability of Catalyst output but the framework additions to Flex really make this seamless.

{COMMENTS}

When managing many states, you can group states into stateGroups to simplify things. In each container of an application you can have only 1 state value at a time, "currentState", using stateGroups lets you utilize "N" states at the same time. In the demo below, look at the state for "addCheckBoxandButton", this state includes 2 states.

{syntax mxml}<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark"> 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<s:states> 
		<s:State name="default"/> 
		<s:State name="addCheckBox" stateGroups="Group1"/> 
		<s:State name="addTextInput"/> 
		<s:State name="addCheckBoxandButton" stateGroups="Group1"/> 
	</s:states>
	
	<s:HGroup>
		<!-- Included in the addCheckBox and addCheckBoxandButton view states. --> 
		<s:CheckBox id="myCB" label="Checkbox" 
					includeIn="Group1"/>
		
		<!-- Included in the addTextInput view state. --> 
		<s:TextInput id="myTI" 
					 includeIn="addTextInput"/>    
		
		<!-- Included in the addCheckBoxandButton view state. --> 
		<s:Button id="myB" 
				  includeIn="addCheckBoxandButton"/>
		
		<!-- Exclude from addTextInput view state. --> 
		<s:TextArea text="Exclude from addTextInput" 
					excludeFrom="addTextInput"/>             
	</s:HGroup>
	
	<s:HGroup>
		<s:Button label="Add CheckBox" 
				  click="currentState='addCheckBox'"/> 
		<s:Button label="Add Textinput" 
				  click="currentState='addTextInput'"/>    
		<s:Button label="Add Group 1" 
				  click="currentState='addCheckBoxandButton'"/> 
		<s:Button label="Default" 
				  click="currentState='default'"/>
	</s:HGroup> 
</s:Application>{/syntax}
  
The other thing to notice here is the use of the attribute "excludeFrom" and "includeIn". These attributes make it easy to add and remove components from any part of an application. These add a real depth to Flex as very little code is required.

All told these State features really shine when Flash Catalyst is applied. These features of the framework make code generated by Catalyst very easy to understand and change from a developer perspective. Truth be toldtold, I was very concerned about the readability of Catalyst output but the framework additions to Flex really smooth make this seamless.

When managing many states, you can group states into stateGroups to simplify things. Since atIn each container of an application you can have only 1 state value at a time, "currentState", using stateGroups lets you use 2utilize "N" states at the same time. In the demo below, look at the state for "addCheckBoxandButton", this state includes 2 states.

{syntax mxml}<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark"> 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<s:states> 
		<s:State name="default"/> 
		<s:State name="addCheckBox" stateGroups="Group1"/> 
		<s:State name="addTextInput"/> 
		<s:State name="addCheckBoxandButton" stateGroups="Group1"/> 
	</s:states>
	
	<s:HGroup>
		<!-- Included in the addCheckBox and addCheckBoxandButton view states. --> 
		<s:CheckBox id="myCB" label="Checkbox" 
					includeIn="Group1"/>
		
		<!-- Included in the addTextInput view state. --> 
		<s:TextInput id="myTI" 
					 includeIn="addTextInput"/>    
		
		<!-- Included in the addCheckBoxandButton view state. --> 
		<s:Button id="myB" 
				  includeIn="addCheckBoxandButton"/>
		
		<!-- Exclude from addTextInput view state. --> 
		<s:TextArea text="Exclude from addTextInput" 
					excludeFrom="addTextInput"/>             
	</s:HGroup>
	
	<s:HGroup>
		<s:Button label="Add CheckBox" 
				  click="currentState='addCheckBox'"/> 
		<s:Button label="Add Textinput" 
				  click="currentState='addTextInput'"/>    
		<s:Button label="Add Group 1" 
				  click="currentState='addCheckBoxandButton'"/> 
		<s:Button label="Default" 
				  click="currentState='default'"/>
	</s:HGroup> 
</s:Application>{/syntax}
  
The other thing to notice here is the use of the attribute "excludeFrom" and "includeIn". These attributes make it easy to add and remove components from any part of an application. These add a real depth to Flex as very little code is required.

All told these State features really shine when Flash Catalyst is applied. These features of the framework make code generated by Catalyst very easy to understand and change from a developer perspective. Truth be told I was very concerned about the readability of Catalyst output but the framework additions to Flex really smooth make this seamless.

When managing many states, you can group states into stateGroups to simplify things. Since at each container of an application you can have only 1 state value at a time, "currentState", using stateGroups lets you use 2 states at the same time. In the demo below, look at the state for "addCheckBoxandButton", this state includes 2 states.

{syntax mxml}<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark"> 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<s:states> 
		<s:State name="default"/> 
		<s:State name="addCheckBox" stateGroups="Group1"/> 
		<s:State name="addTextInput"/> 
		<s:State name="addCheckBoxandButton" stateGroups="Group1"/> 
	</s:states>
	
	<s:HGroup>
		<!-- Included in the addCheckBox and addCheckBoxandButton view states. --> 
		<s:CheckBox id="myCB" label="Checkbox" 
					includeIn="Group1"/>
		
		<!-- Included in the addTextInput view state. --> 
		<s:TextInput id="myTI" 
					 includeIn="addTextInput"/>    
		
		<!-- Included in the addCheckBoxandButton view state. --> 
		<s:Button id="myB" 
				  includeIn="addCheckBoxandButton"/>
		
		<!-- Exclude from addTextInput view state. --> 
		<s:TextArea text="Exclude from addTextInput" 
					excludeFrom="addTextInput"/>             
	</s:HGroup>
	
	<s:HGroup>
		<s:Button label="Add CheckBox" 
				  click="currentState='addCheckBox'"/> 
		<s:Button label="Add Textinput" 
				  click="currentState='addTextInput'"/>    
		<s:Button label="Add Group 1" 
				  click="currentState='addCheckBoxandButton'"/> 
		<s:Button label="Default" 
				  click="currentState='default'"/>
	</s:HGroup> 
</s:Application>{/syntax}
  
The other thing to notice here is the use of the attribute "excludeFrom" and "includeIn". These attributes make it easy to add and remove components from any part of an application. These add a real depth to Flex as very little code is required.

All told these State features really shine when Flash Catalyst is applied. These features of the framework make code generated by Catalyst very easy to understand and change from a developer perspective. Truth be told I was very concerned about the readability of Catalyst output but the framework additions to Flex really smooth make this seamless.

When managing many states, you can group states into stateGroups to simplify things. Since at each container of an application you can have only 1 state value at a time, "currentState", using stateGroups lets you use 2 states at the same time.

{syntax mxml}<?xml version="1.0"?>
<!-- states\StatesSimpleGroups.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark"> 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<s:states> 
		<s:State name="default"/> 
		<s:State name="addCheckBox" stateGroups="Group1"/> 
		<s:State name="addTextInput"/> 
		<s:State name="addCheckBoxandButton" stateGroups="Group1"/> 
	</s:states>
	
	<s:HGroup>
		<!-- Included in the addCheckBox and addCheckBoxandButton view states. --> 
		<s:CheckBox id="myCB" label="Checkbox" 
					includeIn="Group1"/>
		
		<!-- Included in the addTextInput view state. --> 
		<s:TextInput id="myTI" 
					 includeIn="addTextInput"/>    
		
		<!-- Included in the addCheckBoxandButton view state. --> 
		<s:Button id="myB" 
				  includeIn="addCheckBoxandButton"/>
		
		<!-- Exclude from addTextInput view state. --> 
		<s:TextArea text="Exclude from addTextInput" 
					excludeFrom="addTextInput"/>             
	</s:HGroup>
	
	<s:HGroup>
		<s:Button label="Add CheckBox" 
				  click="currentState='addCheckBox'"/> 
		<s:Button label="Add Textinput" 
				  click="currentState='addTextInput'"/>    
		<s:Button label="Add Group 1" 
				  click="currentState='addCheckBoxandButton'"/> 
		<s:Button label="Default" 
				  click="currentState='default'"/>
	</s:HGroup> 
</s:Application>{/syntax}
  

testWhen managing many states, you can group states into stateGroups to simplify things. Since at each container of an application you can have only 1 state value at a time, "currentState", using stateGroups lets you use 2 states at the same time.

{syntax mxml}<?xml version="1.0"?>
<!-- states\StatesSimpleGroups.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark"> 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<s:states> 
		<s:State name="default"/> 
		<s:State name="addCheckBox" stateGroups="Group1"/> 
		<s:State name="addTextInput"/> 
		<s:State name="addCheckBoxandButton" stateGroups="Group1"/> 
	</s:states>
	
	<s:HGroup>
		<!-- Included in the addCheckBox and addCheckBoxandButton view states. --> 
		<s:CheckBox id="myCB" label="Checkbox" 
					includeIn="Group1"/>
		
		<!-- Included in the addTextInput view state. --> 
		<s:TextInput id="myTI" 
					 includeIn="addTextInput"/>    
		
		<!-- Included in the addCheckBoxandButton view state. --> 
		<s:Button id="myB" 
				  includeIn="addCheckBoxandButton"/>
		
		<!-- Exclude from addTextInput view state. --> 
		<s:TextArea text="Exclude from addTextInput" 
					excludeFrom="addTextInput"/>             
	</s:HGroup>
	
	<s:HGroup>
		<s:Button label="Add CheckBox" 
				  click="currentState='addCheckBox'"/> 
		<s:Button label="Add Textinput" 
				  click="currentState='addTextInput'"/>    
		<s:Button label="Add Group 1" 
				  click="currentState='addCheckBoxandButton'"/> 
		<s:Button label="Default" 
				  click="currentState='default'"/>
	</s:HGroup> 
</s:Application>{/syntax}
  

VŠp
.LÑa..WŠp 20091207-1433-13.bakXzÊXŠpÈ
meta.datˆÚætest

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].



!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.visible=!showLabel.visible"/>
	
	<s:Label
		id="showLabel"
		text="Learning Flex 4 from Scratch!"
		visible="false"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}




!!'''Outline:'''
*[What is Flex?]
*[Languages of Flex]
*[The Foundation of Flex - spark.components.Application]
*[MXML Namespaces]
*[spark.components.Application Events]
*[Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties]
*[States]
*stateGroups,*[stateGroups, includeIn, excludeFromexcludeFrom]
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???



!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learn Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

RŠp
.LÑa..SŠp 20091207-1432-23.bakÖPÊTŠpÈ
meta.datx‘ætest

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].



!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.visible=!showLabel.visible"/>
	
	<s:Label
		id="showLabel"
		text="Learning Flex 4 from Scratch!"
		visible="false"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}




!!'''Outline:'''
*[What is Flex?]
*[Languages of Flex]
*[The Foundation of Flex - spark.components.Application]
*[MXML Namespace]Namespaces]
*[spark.components.Application Events]
*[Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties]
*[States]
*stateGroups, includeIn, excludeFrom
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???



!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learn Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].



!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.visible=!showLabel.visible"/>
	
	<s:Label
		id="showLabel"
		text="Learning Flex 4 from Scratch!"
		visible="false"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}




!!'''Outline:'''
*[What is Flex?|What is Flex?]
*[Languages of Flex (MXML & ActionScript 3)|Languages of Flex]
*[The Foundation of Flex - spark.components.Application|The Foundation of Flex - spark.components.Application]
*[MXML Namespaces|MXML Namespaces]Namespace]
*[spark.components.Application Events|spark.components.Application Events]
*[Element Creation|Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt|addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties|Element Properties]
*[States]
*stateGroups, includeIn, excludeFrom
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???



!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learn Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].



!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.visible=!showLabel.visible"/>
	
	<s:Label
		id="showLabel"
		text="Learning Flex 4 from Scratch!"
		visible="false"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}




!!'''Outline:'''
*[What is Flex?|What is Flex?]
*[Languages of Flex (MXML & ActionScript 3)|Languages of Flex]
*[The Foundation of Flex - spark.components.Application|The Foundation of Flex - spark.components.Application]
*[MXML Namespaces|MXML Namespaces]
*[spark.components.Application Events|spark.components.Application Events]
*[Element Creation|Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt|addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties|Element Properties]
*[States|States]
*[stateGroups,*[States]
*stateGroups, includeIn, excludeFrom]excludeFrom
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???



!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learn Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].



!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.visible=!showLabel.visible"/>
	
	<s:Label
		id="showLabel"
		text="Learning Flex 4 from Scratch!"
		visible="false"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}




!!'''Outline:'''
*[What is Flex?|What is Flex?]
*[Languages of Flex (MXML & ActionScript 3)|Languages of Flex]
*[The Foundation of Flex - spark.components.Application|The Foundation of Flex - spark.components.Application]
*[MXML Namespaces|MXML Namespaces]
*[spark.components.Application Events|spark.components.Application Events]
*[Element Creation|Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt|addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties|Element Properties]
*[States|States]
*[stateGroups, includeIn, excludeFrom]
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???



!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learn Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].



!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.visible=!showLabel.visible"/>
	
	<s:Label
		id="showLabel"
		text="Learning Flex 4 from Scratch!"
		visible="false"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}




!!'''Outline:'''
*[What is Flex?|What is Flex?]
*[Languages of Flex (MXML & ActionScript 3)|Languages of Flex]
*[The Foundation of Flex - spark.components.Application|The Foundation of Flex - spark.components.Application]
*[MXML Namespaces|MXML Namespaces]
*[spark.components.Application Events|spark.components.Application Events]
*[Element Creation|Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt|addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties|Element Properties]
*[States|States]
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???



!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learning'''Learn Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

Element properties are very important in Flex MXML and ActionScript. In MXML they are set as attribute strings and child elements but at compile time are converted to typed values. 

Attribute string properties can support boolean values ("true" or "false"), numeric values ( "1", "2.5", "#FF0000"), string values ("Duhhhh"), bindings ( "{ foo.text }" ... more on this later )

Here is an example:
{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:Label  
			fontSize="30"
			text="I am label with attribute properties!"/>
		
	</s:VGroup>
		
</s:Application>{/syntax}

With MXML elements you can specify values with much more complex structure. In this example we set values into a Spark DropDownList using the <s:ArrayCollection> and <fx:String> elements.

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:DropDownList> 
			<s:dataProvider>
				<s:ArrayCollection>
					<fx:String>AK</fx:String>
					<fx:String>AL</fx:String>
					<fx:String>AR</fx:String>
				</s:ArrayCollection>
			</s:dataProvider>
		</s:DropDownList>
		
	</s:VGroup>
		
</s:Application>{/syntax}

The nested element model also supports inline graphics in Flex 4. Just as you can specify data for the dataProvider property, you can add graphics inline into an application. Here is a brief graphics example of Flex 4 using MXML nested elements. Look at the <s:Rect> element with nested stroke and fill:

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Group>
		<s:Rect 
			x="0" y="0" 
			radiusX="4" 
			radiusY="4" 
			height="100%" 
			width="100%">
			<s:stroke>
				<s:LinearGradientStroke 
					weight="1" 
					scaleMode="normal"/>
			</s:stroke>
			<s:fill>
				<s:LinearGradient>
					<s:entries>
						<mx:GradientEntry						<s:GradientEntry 
							color="0x999999"/>
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>        
		
		<s:Button 
			label="Button 1" 
			left="10"
			top="13"
			bottom="10"/>
		
		<s:Button 
			label="Button 2"
			left="110" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 3"
			left="210" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 4"
			left="310" 
			top="13" 
			right="10" 
			bottom="10"/>
		
	</s:Group>
</s:Application>{/syntax}

In ActionScript, you can set element values directly as typed values. Make sure to use correct types when setting values by ActionScript mismatched types will give you errors at compilation and at runtime. In the following example a spark Button component is created and attributes are set using ActionScript:

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
 	applicationComplete="onApplicationComplete( event )">
	
	<fx:Script>
		<![CDATA[
			
			//import 
			import mx.events.FlexEvent;
			import spark.components.Button;

			protected function onApplicationComplete( event:FlexEvent ):void
			{
				//create new Button instance
				var bu:Button = new Button();

				//set some properties
				bu.left=25;
				bu.right=25;
				bu.top=25;
				bu.bottom=25;
				bu.label = "Huge dynamic s:Button positioned 25px from all sides of s:Application!";
				
				//add into the Application
				this.addElement( bu );
			}

		]]>
	</fx:Script>
	
</s:Application>{/syntax}


 {COMMENTS}

The States feature has changed wildly in Flex 4 and is my favorite feature of the release.

'''What is a State?'''
In Flex, a state is a series of property values associated with a state name. When the state is set, all the values within the state are applied in bulk. States are a very handy way to organize your application as changing from different views within your application is typically managed by changing many properties all at once. By using the states feature you only need to set the value of '''currentState''' to the state name you define.

Here is a simple States example. In the example I define 3 states named "One" "Two" "Three" and navigate between them with 3 buttons:

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>			click="this.currentState='One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>			click="this.currentState='Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>			click="this.currentState='Three'"/>
		
	</s:HGroup>
	
</s:Application>{/syntax}

'''Wow, that was boring!''' 

The prior example worked perfectly but we didn't set any state property values so it wasn't that exciting. In Flex 4 the syntax for State property values changed. Before Flex 4, all state properties were set within the <s:State> component but now you can additionally set state values on the components they affect. This makes understanding the effect of state changes much easier to see and work with. Since states affect properties, the new syntax extends the existing dot notation property syntax like so:

{syntax mxml}<s:Label 
	text.One = "One" 
	text.Two = "Two" 
	text.Three = "Three" />{/syntax}

Notice that the 'text' value has a different value for each state. Whenever the state changes, the value of the "text" property will change if a property is specified for the state change. If we were to set "currentState='foo'", since there isn't a property value designated, the value would remain depending on which state had fired prior.

'''''HINT: In FB4 states have code hinting if you define the <s:states> tag first!'''''

Here is the above example complete:
{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>			click="this.currentState='One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>			click="this.currentState='Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>			click="this.currentState='Three'"/>
		
	</s:HGroup>
	
	<s:Label
		text.One = "One" 
		text.Two = "Two" 
		text.Three = "Three"
		horizontalCenter="0"
		top="50"
		fontSize="40"
		/>
	
</s:Application>{/syntax}

Enough of this simple stuff, lets get crazy with States! Lets add a Panel, set its title value and resize it using States. Also note that the state buttons are disabled when a state is selected! That is a ton of logic that you didn't need to write and is just the tip of the iceberg in using States.

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:Panel
	 	resizeEffect="Resize"
		title.One="One"
		title.Two="Two"
		title.Three="Three"
		width.One="800"
		width.Two="200"
		width.Three="400"
		height.One="400"
		height.Two="600"
		height.Three="200"
		horizontalCenter="0"
		verticalCenter="0"
		>
		
		<s:Label
			text.One="One" 
			text.Two="Two" 
			text.Three="Three"
			horizontalCenter="0"
			verticalCenter="0"
			fontSize="40"
			/>

	</s:Panel>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One"
			enabled.One="false"
			click="this.currentState = 'One'"/>			click="this.currentState='One'"/>
		
		<s:Button 
			label="Two" 
			enabled.Two="false"
			click="this.currentState = 'Two'"/>			click="this.currentState='Two'"/>
		
		<s:Button 
			label="Three"
			enabled.Three="false" 
			click="this.currentState = 'Three'"/>			click="this.currentState='Three'"/>
		
	</s:HGroup>
	
</s:Application>{/syntax}

What I really like is just how readable this code is and how you can make changes to States code easily. Not only is this great for in app State use but States are an essential part of skinning in Flex. <s:Button> has 4 states and simply implementing different graphics per state will dramatically alter the look and feel.

In Flash Catalyst, states are used extensively and the code they generate is a powerful way to learn both Flex Skinning and using States within application development.

"States in Flex 4 are ninja quality magic!" - Ted :)

 {COMMENTS}

Element properties are very important in Flex MXML and ActionScript. In MXML they are set as attribute strings and child elements but at compile time are converted to typed values. 

Attribute string properties can support boolean values ("true" or "false"), numeric values ( "1", "2.5", "#FF0000"), string values ("Duhhhh"), bindings ( "{ foo.text }" ... more on this later )

Here is an example:
{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:Label  
			fontSize="30"
			text="I am label with attribute properties!"/>
		
	</s:VGroup>
		
</s:Application>{/syntax}

With MXML elements you can specify values with much more complex structure. In this example we set values into a Spark DropDownList using the <s:ArrayCollection> and <fx:String> elements.

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:DropDownList> 
			<s:dataProvider>
				<s:ArrayCollection>
					<fx:String>AK</fx:String>
					<fx:String>AL</fx:String>
					<fx:String>AR</fx:String>
				</s:ArrayCollection>
			</s:dataProvider>
		</s:DropDownList>
		
	</s:VGroup>
		
</s:Application>{/syntax}

The nested element model also supports inline graphics in Flex 4. Just as you can specify data for the dataProvider property, you can add graphics inline into an application. Here is a brief graphics example of Flex 4 using MXML nested elements. Look at the <s:Rect> element with nested stroke and fill:

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Group>
		<s:Rect 
			x="0" y="0" 
			radiusX="4" 
			radiusY="4" 
			height="100%" 
			width="100%">
			<s:stroke>
				<s:LinearGradientStroke 
					weight="1" 
					scaleMode="normal"/>
			</s:stroke>
			<s:fill>
				<s:LinearGradient>
					<s:entries>
						<mx:GradientEntry 
							color="0x999999"/>
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>        
		
		<s:Button 
			label="Button 1" 
			left="10"
			top="13"
			bottom="10"/>
		
		<s:Button 
			label="Button 2"
			left="110" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 3"
			left="210" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 4"
			left="310" 
			top="13" 
			right="10" 
			bottom="10"/>
		
	</s:Group>
</s:Application>{/syntax}

In ActionScript, you can set element values directly as typed values. Make sure to use correct types when setting values by ActionScript mismatched types will give you errors at compilation and at runtime. In the following example a spark Button component is created and attributes are set using ActionScript:

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
 	applicationComplete="onApplicationComplete( event )">
	
	<fx:Script>
		<![CDATA[
			
			//import 
			import mx.events.FlexEvent;
			import spark.components.Button;

			protected function onApplicationComplete( event:FlexEvent ):void
			{
				//create new Button instance
				var bu:Button = new Button();

				//set some properties
				bu.left=25;
				bu.right=25;
				bu.top=25;
				bu.bottom=25;
				bu.label = "Huge dynamic s:Button positioned 25px from all sides of s:Application!";
				
				//add into <s:Application>the Application
				this.addElement( bu );
			}

		]]>
	</fx:Script>
	
</s:Application>{/syntax}


 {COMMENTS}

Element properties are very important in Flex MXML and ActionScript. In MXML they are set as attribute strings and child elements but at compile time are converted to typed values. 

Attribute string properties can support boolean values ("true" or "false"), numeric values ( "1", "2.5", "#FF0000"), string values ("Duhhhh"), bindings ( "{ foo.text }" ... more on this later )

Here is an example:
{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:Label  
			fontSize="30"
			text="I am label with attribute properties!"/>
		
	</s:VGroup>
		
</s:Application>{/syntax}

With MXML elements you can specify values with much more complex structure. In this example we set values into a Spark DropDownList using the <s:ArrayCollection> and <fx:String> elements.

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:DropDownList> 
			<s:dataProvider>
				<s:ArrayCollection>
					<fx:String>AK</fx:String>
					<fx:String>AL</fx:String>
					<fx:String>AR</fx:String>
				</s:ArrayCollection>
			</s:dataProvider>
		</s:DropDownList>
		
	</s:VGroup>
		
</s:Application>{/syntax}

The nested element model also supports inline graphics in Flex 4. Just as you can specify data for the dataProvider property, you can add graphics inline into an application. Here is a brief graphics example of Flex 4 using MXML nested elements. Look at the <s:Rect> element with nested stroke and fill:

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Group>
		<s:Rect 
			x="0" y="0" 
			radiusX="4" 
			radiusY="4" 
			height="100%" 
			width="100%">
			<s:stroke>
				<s:LinearGradientStroke 
					weight="1" 
					scaleMode="normal"/>
			</s:stroke>
			<s:fill>
				<s:LinearGradient>
					<s:entries>
						<mx:GradientEntry 
							color="0x999999"/>
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>        
		
		<s:Button 
			label="Button 1" 
			left="10"
			top="13"
			bottom="10"/>
		
		<s:Button 
			label="Button 2"
			left="110" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 3"
			left="210" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 4"
			left="310" 
			top="13" 
			right="10" 
			bottom="10"/>
		
	</s:Group>
</s:Application>{/syntax}

In ActionScript, you can set element values directly as typed values. Make sure to use correct types when setting values by ActionScript mismatched types will give you errors at compilation and at runtime. In the following example a spark Button component is created and attributes are set using ActionScript:

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
 	applicationComplete="onApplicationComplete( event )">
	
	<fx:Script>
		<![CDATA[
			
			//import 
			import mx.events.FlexEvent;
			import spark.components.Button;

			protected function onApplicationComplete( event:FlexEvent ):void
			{
				//create new Button instance
				var bu:Button = new Button();

				//set some properties
				bu.left=25;
				bu.right=25;
				bu.top=25;
				bu.bottom=25;
				bu.label = "Huge dynamic s:Button positioned 25px from all sides of s:Application!";
				
				//add into <s:Application>
				this.addElement( bu );
			}

		]]>
	</fx:Script>
	
</s:Application>{/syntax}


 {COMMENTS}

In Flex 4 to add or remove elements from containers, you need to use the element API: 

*addElement - Add an element into a container
*addElementAt - Add a element into a container at a certain depth location
*removeElement - Remove an element from a container
*removeElementAt - Remove an element from a container at a certain depth location

In Flex 3 and before, the low level addChild method was used to add or remove components from containers but in Flex 4 this is not the case. To add/remove a new element into an MXML component, you use it's "id" attribute and one of the above methods.

This simple example uses addElement and removeElementAt to give you an idea about how they work. The example adds a dynamically created button into a VGroup container using addElement and then allows you to remove the 2nd item using removeElementAt( 2 ).


{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">

	<fx:Script>
		<![CDATA[
			import spark.components.Button;
			import flash.utils.getTimer;
			
			protected function addElementClick( event:MouseEvent ):void
			{

				//create a new button into temp variable 'bu'				
				var bu:Button = new Button();

				//set the label property
				bu.label = "Added with addElement! " + getTimer();

				//add the button into myGroup using the addElement method!
				myGroup.addElement( bu );
			}

			protected function removeElementClick( event:MouseEvent ):void
			{

				//if there are more than 2 elements in the group
				if( myGroup.numChildren > 2 ){

					//remove the 2nd item in myGroup
					myGroup.removeElementAt( 2 );

				}

			}

		]]>
	</fx:Script>

	
	<s:VGroup 
		id="myGroup" 
		horizontalCenter="0" 
		horizontalAlign="center">
		
		<s:Button 
			label="addElement" 
			click="addElementClick( event )"/>
		
		<s:Button 
			label="removeElement" 
			click="removeElementClick( event )"/>
		
	</s:VGroup>
	
</s:Application>{/syntax}

 {COMMENTS}

<s:Application> ( spark.components.Application Class ) is the foundation of Flex 4. This single class contains a ton of logic from which you can build just about any type of software application. If you were building a house, <s:Application> would provide the concrete slab, electrical hookups, plumbing hookups, gas lines, meters all ready to go including any all the required construction permits. In this strange construction analogy, <s:Application> is also ideal if you were building a skyscraper, a small shed, or anything in between. The components and libraries within Flex are all dependent on <s:Application>, without the logic <s:Application> provides many things just wouldn't work. 

'''Example:'''
{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Label
		text="Learning Flex 4 from Scratch!"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}


'''Wait a second! What is up with the "s:" in <s:Application>?'''

That is the Spark namespace. In Flex 4 there are 2 component sets, Spark and '--Halo--' "MX" and these were divided into separate MXML namespaces to prevent confusion, avoid collision, and enable compatibility between versions of Flex. I will be focusing on Spark in this series although you can use "MX" components within a Spark application given component compatibility. 



Below are a few of the core features that <s:Application> provides:

'''Preloader''' - This shows download progress as your app loads and is customizable.

'''Framework Caching''' - This caches a signed version of the Flex Framework in Flash Player as a SWZ. This can optionally make your output SWF files very small. 

'''Component Instantiation''' - <s:Application> creates all application component instances on demand.

'''Layout and Resizing''' - <s:Application> lays out and resizes all components via LayoutManager.

'''Drag & Drop''' - <s:Application> handles drag and drop interactions via DragManager.

'''Focus''' - <s:Application> handles focus for keyboard and mouse events via FocusManager

'''ToolTips and Popups''' - Any component that appears above others or needs modality is managed via PopUpManager or ToolTopManager in <s:Application>.

'''History''' - <s:Application> tracks history so that the browser back button has context via HistoryManager and BrowserManager.

'''Cursor''' - <s:Application> managed the cursor to show data loading via, you guessed it, CursorManager

'''System''' - <s:Application> also provides some deep voodoo that I do not understand in SystemManager. ( I think only Ely and Alex know what this really does! )

Managers can be found [here|http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/mx/managers/package-detail.html].

Atop all this goodness, <s:Application> also provides the infrastructure for States.[States]. States are my favorite Flex 4 feature and if you think you know States, hold onto your hat. States have been re-written in Flex 4 and are darn close to Ninja quality magic. Where I avoided States before, I now encourage you to dive in deep!

 {COMMENTS}

<s:Application> ( spark.components.Application Class ) is the foundation of Flex 4. This single class contains a ton of logic from which you can build just about any type of software application. If you were building a house, <s:Application> would provide the concrete slab, electrical hookups, plumbing hookups, gas lines, meters all ready to go including any all the required construction permits. In this strange construction analogy, <s:Application> is also ideal if you were building a skyscraper, a small shed, or anything in between. The components and libraries within Flex are all dependent on <s:Application>, without the logic <s:Application> provides many things just wouldn't work. 

'''Example:'''
{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Label
		text="Learning Flex 4 from Scratch!"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}


'''Wait a second! What is up with the "s:" in <s:Application>?'''

That is the Spark namespace. In Flex 4 there are 2 component sets, Spark and '--Halo--' "MX" and these were divided into separate MXML namespaces to prevent confusion, avoid collision, and enable compatibility between versions of Flex. I will be focusing on Spark in this series although you can use "MX" components within a Spark application given component compatibility. 



Below are a few of the core features that <s:Application> provides:

'''Preloader''' - This shows download progress as your app loads and is customizable.

'''Framework Caching''' - This caches a signed version of the Flex Framework in Flash Player as a SWZ. This can optionally make your output SWF files very small. 

'''Component Instantiation''' - <s:Application> creates all application component instances on demand.

'''Layout and Resizing''' - <s:Application> lays out and resizes all components via LayoutManager.

'''Drag & Drop''' - <s:Application> handles drag and drop interactions via DragManager.

'''Focus''' - <s:Application> handles focus for keyboard and mouse events via FocusManager

'''ToolTips and Popups''' - Any component that appears above others or needs modality is managed via PopUpManager or ToolTopManager in <s:Application>.

'''History''' - <s:Application> tracks history so that the browser back button has context via HistoryManager and BrowserManager.

'''Cursor''' - <s:Application> managed the cursor to show data loading via, you guessed it, CursorManager

'''System''' - <s:Application> also provides some deep voodoo that I do not understand in SystemManager. ( I think only Ely and Alex know what this really does! )

Managers can be found [here|http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/mx/managers/package-detail.html].

Atop all this goodness, <s:Application> also provides the infrastructure for States. States are my favorite Flex 4 feature and if you think you know States, hold onto your hat. States have been re-written in Flex 4 and are darn close to Ninja quality magic. Where I avoided States before, I now encourage you to dive in deep!

 {COMMENTS}

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].



!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.visible=!showLabel.visible"/>
	
	<s:Label
		id="showLabel"
		text="Learning Flex 4 from Scratch!"
		visible="false"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}




!!'''Outline:'''
*[What is Flex?|What is Flex?]
*[Languages of Flex (MXML & ActionScript 3)|Languages of Flex]
*[The Foundation of Flex - spark.components.Application|The Foundation of Flex - spark.components.Application]
*[MXML Namespaces|MXML Namespaces]
*[spark.components.Application Events|spark.components.Application Events]
*[Element Creation|Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt|addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties|Element Properties]
*[States|States]
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???



!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learning Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

Flex has 2 languages, MXML and ActionScript 3. 

MXML is a dialect of XML designed for component layout, instantiationinstantiation, and, new to Flex 4, graphics. Flex 4 adds a new dialect of MXML called FXG (Flash XML Graphics). FXG allows you to draw with declarative markup and is used extensively for skinning and other mayhem. Just think about FXG as new graphics tags and you are set.

ActionScript 3 is based on ECMAScript but adds support for Classes and Namespaces. If you have worked with a Class based language (Java, C#) or a dynamic language (Python, JavaScript), you will find ActionScript easy to work with. 

 {COMMENTS}

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].



!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.visible=!showLabel.visible"/>
	
	<s:Label
		id="showLabel"
		text="Learning Flex 4 from Scratch!"
		visible="false"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}




!!'''Outline:'''
*[What is Flex?|What is Flex?]
*[Languages of Flex (MXML & ActionScript 3)|Languages of Flex]
*[The Foundation of Flex - spark.components.Application|The Foundation of Flex - spark.components.Application]
*[MXML Namespaces|MXML Namespaces]
*[spark.components.Application Events|spark.components.Application Events]
*[Element Creation|Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt|addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties|Element Properties]
*[States|States]
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???



!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learning Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].


!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.text='Learning Flex 4 from Scratch!'"/>		click="showLabel.visible=!showLabel.visible"/>
	
	<s:Label
		id="showLabel"
		text="Learning Flex 4 from Scratch!"
		visible="false"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}



!!'''Outline:'''
*[What is Flex?|What is Flex?]
*[Languages of Flex (MXML & ActionScript 3)|Languages of Flex]
*[The Foundation of Flex - spark.components.Application|The Foundation of Flex - spark.components.Application]
*[MXML Namespaces|MXML Namespaces]
*[spark.components.Application Events|spark.components.Application Events]
*[Element Creation|Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt|addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties|Element Properties]
*[States|States]
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???




!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learning Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

Welcome to '''Learn Fx4 from Scratch''', this wiki will attempt to cover Flex 4 from beginning to end from a developer perspective. 

!!'''I assume you...'''
* ... know nothing about Flex.
* ... have programming experience.
* ... know XML, we will be seeing lots of it.
* ... have downloaded and installed [Flash Builder 4 Beta 2|http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4].

!!'''Hello World:'''

{syntax mxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Click Me!"
		height="100" width="200"
		fontSize="20"
		horizontalCenter="0" top="50"
		click="showLabel.text='Learning Flex 4 from Scratch!'"/>
	
	<s:Label
		id="showLabel"
		fontSize="40"
		horizontalCenter="0"
		verticalCenter="0"/>

</s:Application>{/syntax}


!!'''Outline:'''
*[What is Flex?|What is Flex?]
*[Languages of Flex (MXML & ActionScript 3)|Languages of Flex]
*[The Foundation of Flex - spark.components.Application|The Foundation of Flex - spark.components.Application]
*[MXML Namespaces|MXML Namespaces]
*[spark.components.Application Events|spark.components.Application Events]
*[Element Creation|Element Creation]
*[addElement, addElementAt, removeElement, removeElementAt|addElement, addElementAt, removeElement, removeElementAt]
*[Element Properties|Element Properties]
*[States|States]
*ID Attribute
*MXML is AS3!
*<fx:Script/>
*Using Components
*Containers and Layout
*Graphics & FXG
*Spark Skinning
*Custom Components
*Data, Data, Data
*???




!!'''Why?'''
Somehow after a year working as Community Manager at Adobe, I found myself needing to learn Flex all over again '''from Scratch'''. To help me learn Flex 4, I decided to create this wiki in parallel as I learn. As I publish new pages in the wiki, I am learning too. Hopefully many will find the end result valuable. 

I hope you enjoy '''Learning Flex 4 from Scratch'''!

Cheers,

'''ted ;)'''

The States feature has changed wildly in Flex 4 and is my favorite feature of the release.

'''What is a State?'''
In Flex, a state is a series of property values associated with a state name. When the state is set, all the values within the state are applied in bulk. States are a very handy way to organize your application as changing from different views within your application is typically managed by changing many properties all at once. By using the states feature you only need to set the value of '''currentState''' to the state name you define.

Here is a simple States example. In the example I define 3 states named "One" "Two" "Three" and navigate between them with 3 buttons:

{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
</s:Application>{/syntax}

'''Wow, that was boring!''' 

The prior example worked perfectly but we didn't set any state property values so it wasn't that exciting. In Flex 4 the syntax for State property values changed. Before Flex 4, all state properties were set within the <s:State> component but now you can additionally set state values on the components they affect. This makes understanding the effect of state changes much easier to see and work with. Since states affect properties, the new syntax extends the existing dot notation property syntax like so:

{syntax xml}<s:Labelmxml}<s:Label 
	text.One = "One" 
	text.Two = "Two" 
	text.Three = "Three" />{/syntax}

Notice that the 'text' value has a different value for each state. Whenever the state changes, the value of the "text" property will change if a property is specified for the state change. If we were to set "currentState='foo'", since there isn't a property value designated, the value would remain depending on which state had fired prior.

'''''HINT: In FB4 states have code hinting if you define the <s:states> tag first!'''''

Here is the above example complete:
{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
	<s:Label
		text.One = "One" 
		text.Two = "Two" 
		text.Three = "Three"
		horizontalCenter="0"
		top="50"
		fontSize="40"
		/>
	
</s:Application>{/syntax}

Enough of this simple stuff, lets get crazy with States! Lets add a Panel, set its title value and resize it using States. Also note that the state buttons are disabled when a state is selected! That is a ton of logic that you didn't need to write and is just the tip of the iceberg in using States.

{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:Panel
	 	resizeEffect="Resize"
		title.One="One"
		title.Two="Two"
		title.Three="Three"
		width.One="800"
		width.Two="200"
		width.Three="400"
		height.One="400"
		height.Two="600"
		height.Three="200"
		horizontalCenter="0"
		verticalCenter="0"
		>
		
		<s:Label
			text.One="One" 
			text.Two="Two" 
			text.Three="Three"
			horizontalCenter="0"
			verticalCenter="0"
			fontSize="40"
			/>

	</s:Panel>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One"
			enabled.One="false"
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			enabled.Two="false"
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three"
			enabled.Three="false" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
</s:Application>{/syntax}

What I really like is just how readable this code is and how you can make changes to States code easily. Not only is this great for in app State use but States are an essential part of skinning in Flex. <s:Button> has 4 states and simply implementing different graphics per state will dramatically alter the look and feel.

In Flash Catalyst, states are used extensively and the code they generate is a powerful way to learn both Flex Skinning and using States within application development.

"States in Flex 4 are ninja quality magic!" - Ted :)

 {COMMENTS}

Element properties are very important in Flex MXML and ActionScript. In MXML they are set as attribute strings and child elements but at compile time are converted to typed values. 

Attribute string properties can support boolean values ("true" or "false"), numeric values ( "1", "2.5", "#FF0000"), string values ("Duhhhh"), bindings ( "{ foo.text }" ... more on this later )

Here is an example:
{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:Label  
			fontSize="30"
			text="I am label with attribute properties!"/>
		
	</s:VGroup>
		
</s:Application>{/syntax}

With MXML elements you can specify values with much more complex structure. In this example we set values into a Spark DropDownList using the <s:ArrayCollection> and <fx:String> elements.

{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:DropDownList> 
			<s:dataProvider>
				<s:ArrayCollection>
					<fx:String>AK</fx:String>
					<fx:String>AL</fx:String>
					<fx:String>AR</fx:String>
				</s:ArrayCollection>
			</s:dataProvider>
		</s:DropDownList>
		
	</s:VGroup>
		
</s:Application>{/syntax}

The nested element model also supports inline graphics in Flex 4. Just as you can specify data for the dataProvider property, you can add graphics inline into an application. Here is a brief graphics example of Flex 4 using MXML nested elements. Look at the <s:Rect> element with nested stroke and fill:

{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Group>
		<s:Rect 
			x="0" y="0" 
			radiusX="4" 
			radiusY="4" 
			height="100%" 
			width="100%">
			<s:stroke>
				<s:LinearGradientStroke 
					weight="1" 
					scaleMode="normal"/>
			</s:stroke>
			<s:fill>
				<s:LinearGradient>
					<s:entries>
						<mx:GradientEntry 
							color="0x999999"/>
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>        
		
		<s:Button 
			label="Button 1" 
			left="10"
			top="13"
			bottom="10"/>
		
		<s:Button 
			label="Button 2"
			left="110" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 3"
			left="210" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 4"
			left="310" 
			top="13" 
			right="10" 
			bottom="10"/>
		
	</s:Group>
</s:Application>{/syntax}

In ActionScript, you can set element values directly as typed values. Make sure to use correct types when setting values by ActionScript mismatched types will give you errors at compilation and at runtime. In the following example a spark Button component is created and attributes are set using ActionScript:

{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
 	applicationComplete="onApplicationComplete( event )">
	
	<fx:Script>
		<![CDATA[
			
			//import 
			import mx.events.FlexEvent;
			import spark.components.Button;

			protected function onApplicationComplete( event:FlexEvent ):void
			{
				//create new Button instance
				var bu:Button = new Button();
				bu.left=25;
				bu.right=25;
				bu.top=25;
				bu.bottom=25;
				bu.label = "Huge dynamic s:Button positioned 25px from all sides of s:Application!";
				
				//add into <s:Application>
				this.addElement( bu );
			}

		]]>
	</fx:Script>
	
</s:Application>{/syntax}


 {COMMENTS}

In Flex 4 to add or remove elements from containers, you need to use the element API: 

*addElement - Add an element into a container
*addElementAt - Add a element into a container at a certain depth location
*removeElement - Remove an element from a container
*removeElementAt - Remove an element from a container at a certain depth location

In Flex 3 and before, the low level addChild method was used to add or remove components from containers but in Flex 4 this is not the case. To add/remove a new element into an MXML component, you use it's "id" attribute and one of the above methods.

This simple example uses addElement and removeElementAt to give you an idea about how they work. The example adds a dynamically created button into a VGroup container using addElement and then allows you to remove the 2nd item using removeElementAt( 2 ).


{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">

	<fx:Script>
		<![CDATA[
			import spark.components.Button;
			import flash.utils.getTimer;
			
			protected function addElementClick( event:MouseEvent ):void
			{
				var bu:Button = new Button();
				bu.label = "Added with addElement! " + getTimer();
				myGroup.addElement( bu );
			}

			protected function removeElementClick( event:MouseEvent ):void
			{
				if( myGroup.numChildren > 2 ){
					myGroup.removeElementAt( 2 );
				}
			}

		]]>
	</fx:Script>

	
	<s:VGroup 
		id="myGroup" 
		horizontalCenter="0" 
		horizontalAlign="center">
		
		<s:Button 
			label="addElement" 
			click="addElementClick( event )"/>
		
		<s:Button 
			label="removeElement" 
			click="removeElementClick( event )"/>
		
	</s:VGroup>
	
</s:Application>{/syntax}

 {COMMENTS}

In Flex there are 2 ways to create elements, MXML and ActionScript.

In MXML simply adding a tag will create an instance and add it into the <s:Application> all at once. Here is an example of creating a Spark Button in MXML:


{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button
		left="25"
		right="25"
		top="25"
		bottom="25"
		label="Huge s:Button positioned 25px from all sides of s:Application!"/>
	
</s:Application>{/syntax}

MXML handles creating the <s:button> instance, setting properties declared as attributes (left, top, label, etc), and adding it into the <s:Application> instance.

Sometimes you want to create component instances in ActionScript. To do this you need to import spark.components.Button, create an instance using '''new''', set some properties, and use the addElement method to add the button into <s:Application>. Here is the example:


{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
 	applicationComplete="onApplicationComplete( event )">
	
	<fx:Script>
		<![CDATA[
			
			//import 
			import mx.events.FlexEvent;
			import spark.components.Button;

			protected function onApplicationComplete( event:FlexEvent ):void
			{
				//create new Button instance
				var bu:Button = new Button();
				bu.left=25;
				bu.right=25;
				bu.top=25;
				bu.bottom=25;
				bu.label = "Huge s:Button positioned 25px from all sides of s:Application!";
				
				//add into <s:Application>
				this.addElement( bu );
			}

		]]>
	</fx:Script>
	
</s:Application>{/syntax}

The above two applications are identical in their output but the later example adds the Button dynamically. There are use cases where each technique is valuable to know and understand. Sometimes MXML is easier and sometime AS is easier. Actually in a later section I will show you how to leverage the best of both because MXML and ActionScript are very closely related, if not identical. 

 {COMMENTS}

When an application starts, there are a series of events in <s:Application> that you can listen for. Listening for events in MXML is simple as you just add attributes to MXML like so:


{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
       xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       preinitialize="trace('preinitialize')"
       initialize="trace('initialize')" 
       creationComplete="trace('creationComplete')" 
       applicationComplete="trace('applicationComplete')">

</s:Application>{/syntax}

When an xml attribute is an event, the code between quotes is ActionScript. So the above code will trace when run in debug (Press the green bug in Flash Builder and trace will send text to the Console! Simple and effective tracing). The events in this example are important as they occur in a certain order:

'''preinitialize''' - This happens just before child components are initialized and created
'''initialize''' - This happens after child components are initialized.
'''creationComplete''' - This happens after child components are created.
'''applicationComplete''' - This happens last and marks the start of your application running.

 {COMMENTS}

At the start of every MXML document, there are a few xml namespaces defined, where it says "xmlns:" below. 

{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
      xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark">

</s:Application>{/syntax}

Here are the important parts:
xmlns:fx = "http://ns.adobe.com/mxml/2009"

The "fx" above maps all component to "http://ns.adobe.com/mxml/2009" so if you see: <fx:Script> or <fx:Declarations> these tags are defined for import here "http://ns.adobe.com/mxml/2009". 

Flex comes with some predefined namespaces:

Core Flex: http://ns.adobe.com/mxml/2009
Spark Components: library://ns.adobe.com/flex/spark
Halo "MX" Components: library://ns.adobe.com/flex/halo

Namespaces are quite flexible and you can define them how you want, this even works:

{syntax xml}<?xmlmxml}<?xml version="1.0" encoding="utf-8"?>
<sparkrocks:Application 
        xmlns:flexrocks="http://ns.adobe.com/mxml/2009" 
        xmlns:sparkrocks="library://ns.adobe.com/flex/spark">

       <sparkrocks:Button 
              label="Hello World"/>

</sparkrocks:Application>{/syntax}


When we get to custom components we will revisit XML Namespaces in Flex 4 as they are key to importing custom code.

 {COMMENTS}

The States feature has changed wildly in Flex 4 and is my favorite feature of the release.

'''What is a State?'''
In Flex, a state is a series of property values associated with a state name. When the state is set, all the values within the state are applied in bulk. States are a very handy way to organize your application as changing from different views within your application is typically managed by changing many properties all at once. By using the states feature you only need to set the value of '''currentState''' to the state name you define.

Here is a simple States example. In the example I define 3 states named "One" "Two" "Three" and navigate between them with 3 buttons:

{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
</s:Application>{/syntax}

'''Wow, that was boring!''' 

The prior example worked perfectly but we didn't set any state property values so it wasn't that exciting. In Flex 4 the syntax for State property values changed. Before Flex 4, all state properties were set within the <s:State> component but now you can additionally set state values on the components they affect. This makes understanding the effect of state changes much easier to see and work with. Since states affect properties, the new syntax extends the existing dot notation property syntax like so:

{syntax xml}<s:Label 
	text.One = "One" 
	text.Two = "Two" 
	text.Three = "Three" />{/syntax}

Notice that the 'text' value has a different value for each state. Whenever the state changes, the value of the "text" property will change if a property is specified for the state change. If we were to set "currentState='foo'", since there isn't a property value designated, the value would remain depending on which state had fired prior.

'''''HINT: In FB4 states have code hinting if you define the <s:states> tag first!'''''

Here is the above example complete:
{/syntax}<?xml{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
	<s:Label
		text.One = "One" 
		text.Two = "Two" 
		text.Three = "Three"
		horizontalCenter="0"
		top="50"
		fontSize="40"
		/>
	
</s:Application>{/syntax}

Enough of this simple stuff, lets get crazy with States! Lets add a Panel, set its title value and resize it using States. Also note that the state buttons are disabled when a state is selected! That is a ton of logic that you didn't need to write and is just the tip of the iceberg in using States.

{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:Panel
	 	resizeEffect="Resize"
		title.One="One"
		title.Two="Two"
		title.Three="Three"
		width.One="800"
		width.Two="200"
		width.Three="400"
		height.One="400"
		height.Two="600"
		height.Three="200"
		horizontalCenter="0"
		verticalCenter="0"
		>
		
		<s:Label
			text.One="One" 
			text.Two="Two" 
			text.Three="Three"
			horizontalCenter="0"
			verticalCenter="0"
			fontSize="40"
			/>

	</s:Panel>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One"
			enabled.One="false"
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			enabled.Two="false"
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three"
			enabled.Three="false" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
</s:Application>{/syntax}

What I really like is just how readable this code is and how you can make changes to States code easily. Not only is this great for in app State use but States are an essential part of skinning in Flex. <s:Button> has 4 states and simply implementing different graphics per state will dramatically alter the look and feel.

In Flash Catalyst, states are used extensively and the code they generate is a powerful way to learn both Flex Skinning and using States within application development.

"States in Flex 4 are ninja quality magic!" - Ted :)

 {COMMENTS}

The States feature has changed wildly in Flex 4 and is my favorite feature of the release.

'''What is a State?'''
In Flex, a state is a series of property values associated with a state name. When the state is set, all the values within the state are applied in bulk. States are a very handy way to organize your application as changing from different views within your application is typically managed by changing many properties all at once. By using the states feature you only need to set the value of '''currentState''' to the state name you define.

Here is a simple States example. In the example I define 3 states named "One" "Two" "Three" and navigate between them with 3 buttons:

{{<?xml{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
</s:Application>}}</s:Application>{/syntax}

'''Wow, that was boring!''' 

The prior example worked perfectly but we didn't set any state property values so it wasn't that exciting. In Flex 4 the syntax for State property values changed. Before Flex 4, all state properties were set within the <s:State> component but now you can additionally set state values on the components they affect. This makes understanding the effect of state changes much easier to see and work with. Since states affect properties, the new syntax extends the existing dot notation property syntax like so:

{{<s:Label{syntax xml}<s:Label 
	text.One = "One" 
	text.Two = "Two" 
	text.Three = "Three" />}}/>{/syntax}

Notice that the 'text' value has a different value for each state. Whenever the state changes, the value of the "text" property will change if a property is specified for the state change. If we were to set "currentState='foo'", since there isn't a property value designated, the value would remain depending on which state had fired prior.

'''''HINT: In FB4 states have code hinting if you define the <s:states> tag first!'''''

Here is the above example complete:
{{<?xml{/syntax}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
	<s:Label
		text.One = "One" 
		text.Two = "Two" 
		text.Three = "Three"
		horizontalCenter="0"
		top="50"
		fontSize="40"
		/>
	
</s:Application>
}}</s:Application>{/syntax}

Enough of this simple stuff, lets get crazy with States! Lets add a Panel, set its title value and resize it using States. Also note that the state buttons are disabled when a state is selected! That is a ton of logic that you didn't need to write and is just the tip of the iceberg in using States.

{{<?xml{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:Panel
	 	resizeEffect="Resize"
		title.One="One"
		title.Two="Two"
		title.Three="Three"
		width.One="800"
		width.Two="200"
		width.Three="400"
		height.One="400"
		height.Two="600"
		height.Three="200"
		horizontalCenter="0"
		verticalCenter="0"
		>
		
		<s:Label
			text.One="One" 
			text.Two="Two" 
			text.Three="Three"
			horizontalCenter="0"
			verticalCenter="0"
			fontSize="40"
			/>

	</s:Panel>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One"
			enabled.One="false"
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			enabled.Two="false"
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three"
			enabled.Three="false" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
</s:Application>
}}</s:Application>{/syntax}

What I really like is just how readable this code is and how you can make changes to States code easily. Not only is this great for in app State use but States are an essential part of skinning in Flex. <s:Button> has 4 states and simply implementing different graphics per state will dramatically alter the look and feel.

In Flash Catalyst, states are used extensively and the code they generate is a powerful way to learn both Flex Skinning and using States within application development.

"States in Flex 4 are ninja quality magic!" - Ted :)

 {COMMENTS}

Element properties are very important in Flex MXML and ActionScript. In MXML they are set as attribute strings and child elements but at compile time are converted to typed values. 

Attribute string properties can support boolean values ("true" or "false"), numeric values ( "1", "2.5", "#FF0000"), string values ("Duhhhh"), bindings ( "{ foo.text }" ... more on this later )

Here is an example:
{{<?xml{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:Label  
			fontSize="30"
			text="I am label with attribute properties!"/>
		
	</s:VGroup>
		
</s:Application>}}</s:Application>{/syntax}

With MXML elements you can specify values with much more complex structure. In this example we set values into a Spark DropDownList using the <s:ArrayCollection> and <fx:String> elements.

{{<?xml{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:DropDownList> 
			<s:dataProvider>
				<s:ArrayCollection>
					<fx:String>AK</fx:String>
					<fx:String>AL</fx:String>
					<fx:String>AR</fx:String>
				</s:ArrayCollection>
			</s:dataProvider>
		</s:DropDownList>
		
	</s:VGroup>
		
</s:Application>}}</s:Application>{/syntax}

The nested element model also supports inline graphics in Flex 4. Just as you can specify data for the dataProvider property, you can add graphics inline into an application. Here is a brief graphics example of Flex 4 using MXML nested elements. Look at the <s:Rect> element with nested stroke and fill:

{{<?xml{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Group>
		<s:Rect 
			x="0" y="0" 
			radiusX="4" 
			radiusY="4" 
			height="100%" 
			width="100%">
			<s:stroke>
				<s:LinearGradientStroke 
					weight="1" 
					scaleMode="normal"/>
			</s:stroke>
			<s:fill>
				<s:LinearGradient>
					<s:entries>
						<mx:GradientEntry 
							color="0x999999"/>
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>        
		
		<s:Button 
			label="Button 1" 
			left="10"
			top="13"
			bottom="10"/>
		
		<s:Button 
			label="Button 2"
			left="110" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 3"
			left="210" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 4"
			left="310" 
			top="13" 
			right="10" 
			bottom="10"/>
		
	</s:Group>
</s:Application>}}</s:Application>{/syntax}

In ActionScript, you can set element values directly as typed values. Make sure to use correct types when setting values by ActionScript mismatched types will give you errors at compilation and at runtime. In the following example a spark Button component is created and attributes are set using ActionScript:

{{<?xml{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
 	applicationComplete="onApplicationComplete( event )">
	
	<fx:Script>
		<![CDATA[
			
			//import 
			import mx.events.FlexEvent;
			import spark.components.Button;

			protected function onApplicationComplete( event:FlexEvent ):void
			{
				//create new Button instance
				var bu:Button = new Button();
				bu.left=25;
				bu.right=25;
				bu.top=25;
				bu.bottom=25;
				bu.label = "Huge dynamic s:Button positioned 25px from all sides of s:Application!";
				
				//add into <s:Application>
				this.addElement( bu );
			}

		]]>
	</fx:Script>
	
</s:Application>}}</s:Application>{/syntax}


 {COMMENTS}

In Flex 4 to add or remove elements from containers, you need to use the element API: 

*addElement - Add an element into a container
*addElementAt - Add a element into a container at a certain depth location
*removeElement - Remove an element from a container
*removeElementAt - Remove an element from a container at a certain depth location

In Flex 3 and before, the low level addChild method was used to add or remove components from containers but in Flex 4 this is not the case. To add/remove a new element into an MXML component, you use it's "id" attribute and one of the above methods.

This simple example uses addElement and removeElementAt to give you an idea about how they work. The example adds a dynamically created button into a VGroup container using addElement and then allows you to remove the 2nd item using removeElementAt( 2 ).


{{<?xml{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">

	<fx:Script>
		<![CDATA[
			import spark.components.Button;
			import flash.utils.getTimer;
			
			protected function addElementClick( event:MouseEvent ):void
			{
				var bu:Button = new Button();
				bu.label = "Added with addElement! " + getTimer();
				myGroup.addElement( bu );
			}

			protected function removeElementClick( event:MouseEvent ):void
			{
				if( myGroup.numChildren > 2 ){
					myGroup.removeElementAt( 2 );
				}
			}

		]]>
	</fx:Script>

	
	<s:VGroup 
		id="myGroup" 
		horizontalCenter="0" 
		horizontalAlign="center">
		
		<s:Button 
			label="addElement" 
			click="addElementClick( event )"/>
		
		<s:Button 
			label="removeElement" 
			click="removeElementClick( event )"/>
		
	</s:VGroup>
	
</s:Application>}}</s:Application>{/syntax}

 {COMMENTS}

In Flex there are 2 ways to create elements, MXML and ActionScript.

In MXML simply adding a tag will create an instance and add it into the <s:Application> all at once. Here is an example of creating a Spark Button in MXML:

{{<?xml
{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button
		left="25"
		right="25"
		top="25"
		bottom="25"
		label="Huge s:Button positioned 25px from all sides of s:Application!"/>
	
</s:Application>}}</s:Application>{/syntax}

MXML handles creating the <s:button> instance, setting properties declared as attributes (left, top, label, etc), and adding it into the <s:Application> instance.

Sometimes you want to create component instances in ActionScript. To do this you need to import spark.components.Button, create an instance using '''new''', set some properties, and use the addElement method to add the button into <s:Application>. Here is the example:

{{<?xml
{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
 	applicationComplete="onApplicationComplete( event )">
	
	<fx:Script>
		<![CDATA[
			
			//import 
			import mx.events.FlexEvent;
			import spark.components.Button;

			protected function onApplicationComplete( event:FlexEvent ):void
			{
				//create new Button instance
				var bu:Button = new Button();
				bu.left=25;
				bu.right=25;
				bu.top=25;
				bu.bottom=25;
				bu.label = "Huge s:Button positioned 25px from all sides of s:Application!";
				
				//add into <s:Application>
				this.addElement( bu );
			}

		]]>
	</fx:Script>
	
</s:Application>}}</s:Application>{/syntax}

The above two applications are identical in their output but the later example adds the Button dynamically. There are use cases where each technique is valuable to know and understand. Sometimes MXML is easier and sometime AS is easier. Actually in a later section I will show you how to leverage the best of both because MXML and ActionScript are very closely related, if not identical. 

 {COMMENTS}

When an application starts, there are a series of events in <s:Application> that you can listen for. Listening for events in MXML is simple as you just add attributes to MXML like so:

{{<?xml
{syntax xml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
       xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       preinitialize="trace('preinitialize')"
       initialize="trace('initialize')" 
       creationComplete="trace('creationComplete')" 
       applicationComplete="trace('applicationComplete')">

</s:Application>
}}</s:Application>{/syntax}

When an xml attribute is an event, the code between quotes is ActionScript. So the above code will trace when run in debug (Press the green bug in Flash Builder and trace will send text to the Console! Simple and effective tracing). The events in this example are important as they occur in a certain order:

'''preinitialize''' - This happens just before child components are initialized and created
'''initialize''' - This happens after child components are initialized.
'''creationComplete''' - This happens after child components are created.
'''applicationComplete''' - This happens last and marks the start of your application running.

 {COMMENTS}

At the start of every MXML document, there are a few xml namespaces defined, where it says "xmlns:" below. 

{syntax xml}
<?xmlxml}<?xml version="1.0" encoding="utf-8"?>
<s:Application 
      xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark">

</s:Application>
{/syntax}</s:Application>{/syntax}

Here are the important parts:
xmlns:fx = "http://ns.adobe.com/mxml/2009"

The "fx" above maps all component to "http://ns.adobe.com/mxml/2009" so if you see: <fx:Script> or <fx:Declarations> these tags are defined for import here "http://ns.adobe.com/mxml/2009". 

Flex comes with some predefined namespaces:

Core Flex: http://ns.adobe.com/mxml/2009
Spark Components: library://ns.adobe.com/flex/spark
Halo "MX" Components: library://ns.adobe.com/flex/halo

Namespaces are quite flexible and you can define them how you want, this even works:

{syntax xml}
<?xmlxml}<?xml version="1.0" encoding="utf-8"?>
<sparkrocks:Application 
        xmlns:flexrocks="http://ns.adobe.com/mxml/2009" 
        xmlns:sparkrocks="library://ns.adobe.com/flex/spark">

       <sparkrocks:Button 
              label="Hello World"/>

</sparkrocks:Application>
{/syntax}</sparkrocks:Application>{/syntax}


When we get to custom components we will revisit XML Namespaces in Flex 4 as they are key to importing custom code.

 {COMMENTS}

At the start of every MXML document, there are a few xml namespaces defined, where it says "xmlns:" below. 

{{<?xml{syntax xml}
<?xml version="1.0" encoding="utf-8"?>
<s:Application 
      xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark">

</s:Application>}}</s:Application>
{/syntax}

Here are the important parts:
xmlns:fx = "http://ns.adobe.com/mxml/2009"

The "fx" above maps all component to "http://ns.adobe.com/mxml/2009" so if you see: <fx:Script> or <fx:Declarations> these tags are defined for import here "http://ns.adobe.com/mxml/2009". 

Flex comes with some predefined namespaces:

Core Flex: http://ns.adobe.com/mxml/2009
Spark Components: library://ns.adobe.com/flex/spark
Halo "MX" Components: library://ns.adobe.com/flex/halo

Namespaces are quite flexible and you can define them how you want, this even works:

{{<?xml{syntax xml}
<?xml version="1.0" encoding="utf-8"?>
<sparkrocks:Application 
        xmlns:flexrocks="http://ns.adobe.com/mxml/2009" 
        xmlns:sparkrocks="library://ns.adobe.com/flex/spark">

       <sparkrocks:Button 
              label="Hello World"/>

</sparkrocks:Application>}}</sparkrocks:Application>
{/syntax}


When we get to custom components we will revisit XML Namespaces in Flex 4 as they are key to importing custom code.

 {COMMENTS}

Flex is a framework ( components & code ) and SDK ( compilers & debuggers ) to help you create applications. Flex provides a reusable library of components and code to allow you to focus on application experience vs reinventing the wheel. The output of the Flex SDK is a SWF file that runs in Flash Player within the browser or an AIR file that runs in the AIR Runtime on the desktop.

 {COMMENTS}{COMMENTS}

The States feature has changed wildly in Flex 4 and is my favorite feature of the release.

'''What is a State?'''
In Flex, a state is a series of property values associated with a state name. When the state is set, all the values within the state are applied in bulk. States are a very handy way to organize your application as changing from different views within your application is typically managed by changing many properties all at once. By using the states feature you only need to set the value of '''currentState''' to the state name you define.

Here is a simple States example. In the example I define 3 states named "One" "Two" "Three" and navigate between them with 3 buttons:

{{<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
</s:Application>}}

'''Wow, that was boring!''' 

The prior example worked perfectly but we didn't set any state property values so it wasn't that exciting. In Flex 4 the syntax for State property values changed. Before Flex 4, all state properties were set within the <s:State> component but now you can additionally set state values on the components they affect. This makes understanding the effect of state changes much easier to see and work with. Since states affect properties, the new syntax extends the existing dot notation property syntax like so:

{{<s:Label 
	text.One = "One" 
	text.Two = "Two" 
	text.Three = "Three" />}}

Notice that the 'text' value has a different value for each state. Whenever the state changes, the value of the "text" property will change if a property is specified for the state change. If we were to set "currentState='foo'", since there isn't a property value designated, the value would remain depending on which state had fired prior.

'''''HINT: In FB4 states have code hinting if you define the <s:states> tag first!'''''

Here is the above example complete:
{{<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One" 
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
	<s:Label
		text.One = "One" 
		text.Two = "Two" 
		text.Three = "Three"
		horizontalCenter="0"
		top="50"
		fontSize="40"
		/>
	
</s:Application>
}}

Enough of this simple stuff, lets get crazy with States! Lets add a Panel, set its title value and resize it using States. Also note that the state buttons are disabled when a state is selected! That is a ton of logic that you didn't need to write and is just the tip of the iceberg in using States.

{{<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:states>
		<s:State name="One"/>
		<s:State name="Two"/>
		<s:State name="Three"/>
	</s:states>
	
	<s:Panel
	 	resizeEffect="Resize"
		title.One="One"
		title.Two="Two"
		title.Three="Three"
		width.One="800"
		width.Two="200"
		width.Three="400"
		height.One="400"
		height.Two="600"
		height.Three="200"
		horizontalCenter="0"
		verticalCenter="0"
		>
		
		<s:Label
			text.One="One" 
			text.Two="Two" 
			text.Three="Three"
			horizontalCenter="0"
			verticalCenter="0"
			fontSize="40"
			/>

	</s:Panel>
	
	<s:HGroup 
		horizontalCenter="0">
		
		<s:Button 
			label="One"
			enabled.One="false"
			click="this.currentState = 'One'"/>
		
		<s:Button 
			label="Two" 
			enabled.Two="false"
			click="this.currentState = 'Two'"/>
		
		<s:Button 
			label="Three"
			enabled.Three="false" 
			click="this.currentState = 'Three'"/>
		
	</s:HGroup>
	
</s:Application>
}}

What I really like is just how readable this code is and how you can make changes to States code easily. Not only is this great for in app State use but States are an essential part of skinning in Flex. <s:Button> has 4 states and simply implementing different graphics per state will dramatically alter the look and feel.

In Flash Catalyst, states are used extensively and the code they generate is a powerful way to learn both Flex Skinning and using States within application development.

"States in Flex 4 are ninja quality magic!" - Ted :)

 {COMMENTS}

Element properties are very important in Flex MXML and ActionScript. In MXML they are set as attribute strings and child elements but at compile time are converted to typed values. 

Attribute string properties can support boolean values ("true" or "false"), numeric values ( "1", "2.5", "#FF0000"), string values ("Duhhhh"), bindings ( "{ foo.text }" ... more on this later )

Here is an example:
{{<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:Label  
			fontSize="30"
			text="I am label with attribute properties!"/>
		
	</s:VGroup>
		
</s:Application>}}

With MXML elements you can specify values with much more complex structure. In this example we set values into a Spark DropDownList using the <s:ArrayCollection> and <fx:String> elements.

{{<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:VGroup 
		horizontalCenter="0"
		top="30">
		
		<s:DropDownList> 
			<s:dataProvider>
				<s:ArrayCollection>
					<fx:String>AK</fx:String>
					<fx:String>AL</fx:String>
					<fx:String>AR</fx:String>
				</s:ArrayCollection>
			</s:dataProvider>
		</s:DropDownList>
		
	</s:VGroup>
		
</s:Application>}}

The nested element model also supports inline graphics in Flex 4. Just as you can specify data for the dataProvider property, you can add graphics inline into an application. Here is a brief graphics example of Flex 4 using MXML nested elements. Look at the <s:Rect> element with nested stroke and fill:

{{<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Group>
		<s:Rect 
			x="0" y="0" 
			radiusX="4" 
			radiusY="4" 
			height="100%" 
			width="100%">
			<s:stroke>
				<s:LinearGradientStroke 
					weight="1" 
					scaleMode="normal"/>
			</s:stroke>
			<s:fill>
				<s:LinearGradient>
					<s:entries>
						<mx:GradientEntry 
							color="0x999999"/>
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>        
		
		<s:Button 
			label="Button 1" 
			left="10"
			top="13"
			bottom="10"/>
		
		<s:Button 
			label="Button 2"
			left="110" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 3"
			left="210" 
			top="13" 
			bottom="10"/>
		
		<s:Button 
			label="Button 4"
			left="310" 
			top="13" 
			right="10" 
			bottom="10"/>
		
	</s:Group>
</s:Application>}}

In ActionScript, you can set element values directly as typed values. Make sure to use correct types when setting values by ActionScript mismatched types will give you errors at compilation and at runtime. In the following example a spark Button component is created and attributes are set using ActionScript:

{{<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
 	applicationComplete="onApplicationComplete( event )">
	
	<fx:Script>
		<![CDATA[
			
			//import 
			import mx.events.FlexEvent;
			import spark.components.Button;

			protected function onApplicationComplete( event:FlexEvent ):void
			{
				//create new Button instance
				var bu:Button = new Button();
				bu.left=25;
				bu.right=25;
				bu.top=25;
				bu.bottom=25;
				bu.label = "Huge dynamic s:Button positioned 25px from all sides of s:Application!";
				
				//add into <s:Application>
				this.addElement( bu );
			}

		]]>
	</fx:Script>
	
</s:Application>}}


 {COMMENTS}

In Flex 4 to add or remove elements from containers, you need to use the element API: 

*addElement - Add an element into a container
*addElementAt - Add a element into a container at a certain depth location
*removeElement - Remove an element from a container
*removeElementAt - Remove an element from a container at a certain depth location

In Flex 3 and before, the low level addChild method was used to add or remove components from containers but in Flex 4 this is not the case. To add/remove a new element into an MXML component, you use it's "id" attribute and one of the above methods.

This simple example uses addElement and removeElementAt to give you an idea about how they work. The example adds a dynamically created button into a VGroup container using addElement and then allows you to remove the 2nd item using removeElementAt( 2 ).


{{<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">

	<fx:Script>
		<![CDATA[
			import spark.components.Button;
			import flash.utils.getTimer;
			
			protected function addElementClick( event:MouseEvent ):void
			{
				var bu:Button = new Button();
				bu.label = "Added with addElement! " + getTimer();
				myGroup.addElement( bu );
			}

			protected function removeElementClick( event:MouseEvent ):void
			{
				if( myGroup.numChildren > 2 ){
					myGroup.removeElementAt( 2 );
				}
			}

		]]>
	</fx:Script>

	
	<s:VGroup 
		id="myGroup" 
		horizontalCenter="0" 
		horizontalAlign="center">
		
		<s:Button 
			label="addElement" 
			click="addElementClick( event )"/>
		
		<s:Button 
			label="removeElement" 
			click="removeElementClick( event )"/>
		
	</s:VGroup>
	
</s:Application>}}

 {COMMENTS}

In Flex there are 2 ways to create elements, MXML and ActionScript.

In MXML simply adding a tag will create an instance and add it into the <s:Application> all at once. Here is an example of creating a Spark Button in MXML:

{{<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button
		left="25"
		right="25"
		top="25"
		bottom="25"
		label="Huge s:Button positioned 25px from all sides of s:Application!"/>
	
</s:Application>}}

MXML handles creating the <s:button> instance, setting properties declared as attributes (left, top, label, etc), and adding it into the <s:Application> instance.

Sometimes you want to create component instances in ActionScript. To do this you need to import spark.components.Button, create an instance using '''new''', set some properties, and use the addElement method to add the button into <s:Application>. Here is the example:

{{<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
 	applicationComplete="onApplicationComplete( event )">
	
	<fx:Script>
		<![CDATA[
			
			//import 
			import mx.events.FlexEvent;
			import spark.components.Button;

			protected function onApplicationComplete( event:FlexEvent ):void
			{
				//create new Button instance
				var bu:Button = new Button();
				bu.left=25;
				bu.right=25;
				bu.top=25;
				bu.bottom=25;
				bu.label = "Huge s:Button positioned 25px from all sides of s:Application!";
				
				//add into <s:Application>
				this.addElement( bu );
			}

		]]>
	</fx:Script>
	
</s:Application>}}

The above two applications are identical in their output but the later example adds the Button dynamically. There are use cases where each technique is valuable to know and understand. Sometimes MXML is easier and sometime AS is easier. Actually in a later section I will show you how to leverage the best of both because MXML and ActionScript are very closely related, if not identical. 

 {COMMENTS}