Column Chart

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” verticalAlign=”top”
horizontalAlign=”center” backgroundGradientColors=”[0x000000,0x323232]” paddingTop=”0″ viewSourceURL=”srcview/index.html”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
]]></mx:Script>
<mx:Panel title=”ColumnChart Control” layout=”horizontal” color=”0xffffff” borderAlpha=”0.15″ width=”600″ height=”240″
paddingTop=”10″ paddingRight=”5″ paddingBottom=”10″ paddingLeft=”5″ horizontalAlign=”center”>
<mx:ColumnChart id=”column” height=”100%” color=”0×323232″
showDataTips=”true” dataProvider=”{medalsAC}”>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField=”Country”/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField=”Country” yField=”Gold” displayName=”Gold”/>
<mx:ColumnSeries xField=”Country” yField=”Silver” displayName=”Silver”/>
<mx:ColumnSeries xField=”Country” yField=”Bronze” displayName=”Bronze”/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider=”{column}” color=”0×323232″/>
</mx:Panel>
</mx:Application>

Passing a data to a function

Handling a user interaction and passing only data to a function:

<mx:DataGrid id=”dg” width=”500″ height=”150″ dataProvider=”{myAC}”
itemClick=”handleClick(event.currentTarget.selectedItem)”>
<mx:columns>
<mx:DataGridColumn dataField=”name”
headerText=”Contact Name” width=”300″ />
<mx:DataGridColumn dataField=”email” headerText=”E-Mail” width=”200″/>
</mx:columns>
</mx:DataGrid>

When you click an item, your function  is invoked along with a

reference to the item clicked. This lets you access the  various

properties of the object:
public function handleClick(data:Object):void

{
Alert.show(“Name:” + data.name + “,Email:” + data.email);
}

Passing the event to a function

Handling a user interaction by passing the event object to a function:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ListEvent;
import mx.controls.Alert;
public var myAC:ArrayCollection  = new ArrayCollection([
{name:"Jon Hirschi", email:"j_hirschi@domain.com"},
{name:"Frank Krul",  email:"f_krul@domain.com"}]);
public function handleClick(evt:ListEvent):void{
Alert.show(”You clicked on row:” + evt.rowIndex + ” and col:” +
evt.columnIndex + “.” +
“Which is for ” + evt.currentTarget.selectedItem.name);}
]]></mx:Script>
<mx:DataGrid id=”dg” width=”500″ height=”150″ dataProvider=”{myAC}”
itemClick=”handleClick(event)”>
<mx:columns>
<mx:DataGridColumn dataField=”name”
headerText=”Contact Name” width=”300″ />
<mx:DataGridColumn dataField=”email” headerText=”E-Mail” width=”200″/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Horizontal Layout

Automatic layout is a considerable departure from absolute
layout, in which you  explicitly determine the location and
layout of elements within a container.  With automatic layout,
you’re directing the container to position elements for  you.
You can choose between two layout modes: vertical or horizontal—
also known  as the direction. The  container places child objects,
one after another, based on the selected  direction.

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

Form Container

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Form>
<mx:FormHeading label=”Contact Info”/>
<mx:FormItem label=”First Name”>
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label=”Last Name”>
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
</mx:Application>

PopUp Menu Button

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
public function showMsg(msg:String):void
{
mx.controls.Alert.show(‘You just clicked on ‘ + msg);
}
</mx:Script>
<mx:Panel width=”100″ height=”100″>
<mx:PopUpMenuButton id=”menuBtn”
dataProvider=”{['One','Two','Three']}”
click=”showMsg(‘left side’)”
itemClick=”showMsg(‘right side with ‘ + event.label)”/>
</mx:Panel>
</mx:Application>

Separating ActionScript to individual files

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="horizontal">
 <mx:Script source="myFunctions.as"/>
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
  ]]>
 </mx:Script>
 <mx:TextInput id="value1"/>
 <mx:Label text="and"/>
 <mx:TextInput id="value2"/>
 <mx:Button label="Join The Two"
         click="Alert.show(textMerge(value1.text,value2.text))"/>    
</mx:Application>
ActionScript saved separately: myFunctions.as
public function textMerge(input1:String,input2:String):String
{
 var x:String = input1 + input2;
 return x;
}

Application Container

Containers

Containers provide your application a visual structure by providing frames

in which to house your display components. Flex comes with a variety of containers,

and each provides unique characteristics. Their purpose is universal—to help you

lay out your components visually rather than programmatically.

Application container:
Table : The layout property accepts three values.

Value	Description
absolute	Instructs the container to be use absolute positioning mode inwhich you explicitly position each child component
horizontal	Instructs the container to automatically lay out its child components horizontally
vertical	Instructs the container to automatically lay out its child components vertically

Using ComboBox

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
creationComplete=”initHandler();”>
<mx:Script>
<![CDATA[
private var _fruit:String;
private var _fruits:Array = ["Apple", "Banana", "Orange"];
private function initHandler():void{
fruitCB.dataProvider = _fruits;}
[Bindable(event="fruitChanged")]
private function isOrangeChosen():Boolean{
return _fruit == “Orange”;}
public function get fruit():String{
return _fruit;}
public function set fruit( str:String ):void{
_fruit = str;
dispatchEvent( new Event( “fruitChanged” ) );}
]]></mx:Script>
<mx:Label text=”select a fruit:” />
<mx:HBox>
<mx:ComboBox id=”fruitCB”
change=”{fruit = fruitCB.selectedLabel}” />
<mx:Button label=”Eat the orange.”
enabled=”{isOrangeChosen()}” />
</mx:HBox>
</mx:Application>

Using Binding Property

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:Binding source=”nameInput.text” destination=”nameOutput.text” />
<mx:Panel
paddingLeft=”5″ paddingRight=”5″
paddingTop=”5″ paddingBottom=”5″>
<mx:Label text=”Enter name:” />
<mx:TextInput id=”nameInput” maxChars=”20″ />
<mx:HRule width=”100%” />
<mx:Label text=”You’ve typed:” />
<mx:Text id=”nameOutput” />
</mx:Panel>
</mx:Application>