EventFlow Phases

Definition:

You can instruct any container or control to listen for events dispatched by another container or control. When Adobe ® Flash ® Player dispatches an Eventobject.That EventObject makes a roundtrip journey from the root of the display list to the target node. The targetnode is the node in the display list where the event occurred.

The eventflow is conceptually divided into 3 parts:

• The capturing phase
• The targeting phase
• The bubbling phase

Example:

<?xml version=”1.0″?> <!– events/ShowEventPriorities.mxml –> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”initApp()”>

<mx:Script>

<![CDATA[ private function returnResult(e:Event):void

{

ta1.text += "returnResult() method called last (priority 1)\n";

}

private function verifyInputData(e:Event):void

{

ta1.text += "verifyInputData() method called first (priority 3)\n";

}

private function saveInputData(e:Event):void

{

ta1.text += "saveInputData() method called second (priority 2)\n";

}

private function initApp():void

{

b1.addEventListener(MouseEvent.CLICK, returnResult, false, 1); b1.addEventListener(MouseEvent.CLICK, saveInputData, false, 2); b1.addEventListener(MouseEvent.CLICK, verifyInputData, false,3);

} ]]>

</mx:Script>

<mx:Button label=”Click Me”/>

<mx:TextArea height=”200″ width=”300″/>

</mx:Application>

Thanks with Regards,

Pandimalar A

Events

Definition:

•Events can be generated by user devices,such as the mouse & Keyboard.

• Any user interaction with your application can generate events.

Thanks with Regards,

Pandimalar A

Toggle ButtonBar Control

Definition:

It defines a horizontal or vertical group of buttons, that maintain their selected or deselected state. Only one button in the ToggleButtonBar control can be in the selected state. You can use the ButtonBar control to define a group of push buttons.

ToggleButtonBar control has the following default characteristics:

Preferred Size

Control resizing rules

selectedIndex

Padding

Source Code:

<?xml version=”1.0″?>
<!– Simple example to demonstrate the ToggleButtonBar control. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>

<mx:Script>
<![CDATA[

import mx.events.ItemClickEvent;

// Event handler function to print a message
// describing the selected Button control.
private function clickHandler(event:ItemClickEvent):void {
myTA.text="Selected button index: " + String(event.index) +
"\n" + "Selected button label: " + event.label;
}
]]>
</mx:Script>

<mx:Panel title=”ToggleButtonBar Control Example” height=”75%” width=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Label width=”100%” color=”blue”
text=”Select a button in the ToggleButtonBar control.”/>

<mx:TextArea id=”myTA” width=”100%” height=”100%”/>

<mx:ToggleButtonBar itemClick=”clickHandler(event);”>
<mx:dataProvider>
<mx:Array>
<mx:String>Flash</mx:String>
<mx:String>Director</mx:String>
<mx:String>Dreamweaver</mx:String>
<mx:String>ColdFusion</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:Panel>
</mx:Application>

Thanks with Regards,

Pandimalar A

Spacer Control

Definition:

nIt lays out children within a parent container.

nThe Spacer control does not draw anything .nIt allocates space for itself.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:ControlBar width=”250″>
<mx:Label text=”Quantity”/>
<mx:NumericStepper/>
<!– Use Spacer to push Button control to the right. –>
<mx:Spacer width=”300%”/>
<mx:Button label=”Add to Cart”/>
</mx:ControlBar>
</mx:Application>

Thanks with Regards,

Pandimalar A

Richtexteditor Control

Definition:

Users can enter, edit, and format text.

Users can apply text formatting and URL links by using subcontrols.

Source Code:

<?xml version=”1.0″?>
<!– textcontrols/RichTextEditorControlWithFormattedText.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<!– The HTML text string used to populate the RichTextEditor control’s
TextArea subcontrol. The text is on a single line. –>
<mx:Script>

<![CDATA[
[Bindable]
public var htmlData:String=”<textformat leading=’2′><p align=’center’><b><font size=’20′>HTML Formatted Text</font></b></p></textformat><br><textformat leading=’2′><p align=’left’>

<font face=’_sans’ size=’12′ color=’#000000′>This paragraph contains<b>bold</b>, <i>italic</i>, <u>underlined</u>, and <b><i><u>bold italic underlined </u></i></b>text.</font></p></textformat><br><p><u><font face=’arial’ size=’14′ color=’#ff0000′>This a red underlined 14-point arial font with no alignment set.</font></u></p><p align=’right’><font face=’verdana’ size=’12′ color=’#006666′><b>This a teal bold 12-pt.’ Verdana font with alignment set to right.</b></font></p><br><li>This is bulleted text.</li><li><font face=’arial’ size=’12′ color=’#0000ff’><u> <a href=’http://www.adobe.com’>This is a bulleted link with underline and blue color set.</a></u></font></li>”;
]]>

</mx:Script>

<!– The RichTextEditor control. To reference a subcontrol prefix its ID with the RichTextEditor control ID. –>
<mx:RichTextEditor id=”rte1″  backgroundColor=”#ccffcc”
width=”500″  headerColors=”[#88bb88, #bbeebb]“
footerColors=”[#bbeebb, #88bb88]“
title=”Rich Text Editor”  htmlText=”{htmlData}”
initialize=”rte1.textArea.setStyle(‘backgroundColor’, ‘0xeeffee’)”
/>
</mx:Application>

Thanks with Regards,

Pandimalar A

PlotChart Control

Definition:

It represents data with two values for each data point.

One value determines the position of the data point along the horizontal axis.

And one value determines its position along the vertical axis.

The PlotChart control expects its series property to contain an Array of PlotSeries objects.

Source code:

<?xml version=”1.0″?>
<!– Simple example to demonstrate the PlotChart control. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 } ]);
]]>
</mx:Script>

<mx:Panel title=”PlotChart Control Example” height=”100%” width=”100%”>

<mx:PlotChart id=”plot” height=”100%” width=”100%”
paddingLeft=”5″ paddingRight=”5″
showDataTips=”true” dataProvider=”{expensesAC}”>

<mx:series>
<mx:PlotSeries xField=”Expenses” yField=”Profit” displayName=”Expenses/Profit”/>
<mx:PlotSeries xField=”Amount” yField=”Expenses” displayName=”Amount/Expenses”/>
<mx:PlotSeries xField=”Profit” yField=”Amount” displayName=”Profit/Amount”/>
</mx:series>
</mx:PlotChart>

<mx:Legend dataProvider=”{plot}”/>

</mx:Panel>
</mx:Application>

Thanks with Regards,

Pandimalar A

Menubar Control

Definition:

Defines a horizontal, top-level menu bar that contains one or more menus.

Clicking on a top-level menu item opens a pop-up submenu that is an instance of the Menu control.

The top-level menu bar of the MenuBar control is generally always visible.

Source Code:

<?xml version=”1.0″?>
<!– Simple example to demonstrate the MenuBar control. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”initCollections();” >

<mx:Script>
<![CDATA[

import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;

[Bindable]
public var menuBarCollection:XMLListCollection;

private var menubarXML:XMLList =
<>
<menuitem label=”Menu1″ data=”top”>
<menuitem label=”MenuItem 1-A” data=”1A”/>
<menuitem label=”MenuItem 1-B” data=”1B”/>
</menuitem>
<menuitem label=”Menu2″ data=”top”>
<menuitem label=”MenuItem 2-A” type=”check”  data=”2A”/>
<menuitem type=”separator”/>
<menuitem label=”MenuItem 2-B” >
<menuitem label=”SubMenuItem 3-A” type=”radio”
groupName=”one” data=”3A”/>
<menuitem label=”SubMenuItem 3-B” type=”radio”
groupName=”one” data=”3B”/>
</menuitem>
</menuitem>
</>;

// Event handler to initialize the MenuBar control.
private function initCollections():void {
menuBarCollection = new XMLListCollection(menubarXML);
}

// Event handler for the MenuBar control’s itemClick event.
private function menuHandler(event:MenuEvent):void  {
// Don’t open the Alert for a menu bar item that
// opens a popup submenu.
if (event.item.@data != “top”) {
Alert.show(“Label: ” + event.item.@label + “\n” +
“Data: ” + event.item.@data, “Clicked menu item”);
}
}
]]>
</mx:Script>

<mx:Panel title=”MenuBar Control Example” height=”75%” width=”75%”
paddingTop=”10″ paddingLeft=”10″>

<mx:Label width=”100%” color=”blue”
text=”Select a menu item.”/>

<mx:MenuBar labelField=”@label” itemClick=”menuHandler(event);”
dataProvider=”{menuBarCollection}” />

</mx:Panel>
</mx:Application>

Thanks with Regards,

Pandimalar A

CheckBox Control

Definition:

The CheckBox control is a commonly used graphical control .

It can have one of two disabled states, checked or unchecked.

Flex clips the label of a CheckBox control to fit the boundaries of the control.

It changes the control from one state to another.

The <mx:CheckBox> tag to define a CheckBox control in MXML.

Source Code:

<?xml version=”1.0″?>
<!– controls\checkbox\CBSelected.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:VBox>
<mx:CheckBox width=”100″ label=”Employee?” selected=”true”/>
<mx:CheckBox width=”120″ label=” emp.name?” selected=”false”/>
</mx:VBox>
</mx:Application>

Thanks with Regards,

Pandimalar A

Viewstack Navigator Container

Definition:

nCollection of child containers stacked on the top of each other.

nWhen a different child container is selected, it seems to replace the old one.

n However, the old child container still exists it is just invisible.

n

n It does not provide a user interface for selecting which child container is currently visible .

Source code:

<?xml version=”1.0″?>
<!– Simple example to demonstrate the ViewStack layout container. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Panel title=”ViewStack Container Example” height=”95%” width=”95%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Text width=”100%” color=”blue”
text=”Use the Button controls to change panels of the ViewStack container.”/>

<mx:HBox borderStyle=”solid” width=”100%”
paddingTop=”5″ paddingLeft=”5″ paddingRight=”5″ paddingBottom=”5″>

<mx:Button id=”searchButton” label=”Search Panel”
click=”myViewStack.selectedChild=search;”/>
<mx:Button id=”cInfoButton” label=”Customer Info Panel”
click=”myViewStack.selectedChild=custInfo;”/>
<mx:Button id=”aInfoButton” label=”Account Panel”
click=”myViewStack.selectedChild=accountInfo;”/>
</mx:HBox>

<!– Define the ViewStack and the three child containers and have it
resize up to the size of the container for the buttons. –>
<mx:ViewStack id=”myViewStack” borderStyle=”solid” width=”100%” height=”80%”>

<mx:Canvas id=”search” backgroundColor=”#FFFFCC” label=”Search” width=”100%” height=”100%”>
<mx:Label text=”Search Screen” color=”#000000″/>
</mx:Canvas>

<mx:Canvas id=”custInfo” backgroundColor=”#CCFFFF” label=”Customer Info” width=”100%” height=”100%”>
<mx:Label text=”Customer Info” color=”#000000″/>
</mx:Canvas>

<mx:Canvas id=”accountInfo” backgroundColor=”#FFCCFF” label=”Account Info” width=”100%” height=”100%”>
<mx:Label text=”Account Info” color=”#000000″/>
</mx:Canvas>
</mx:ViewStack>

</mx:Panel>
</mx:Application>

Thanks with Regards,

Pandimalar A

TabNavigator Container

Definition:

nA TabNavigator container creates and manages a set of tabs, which you use to navigate among its children.

n

nThe children of a TabNavigator container are other containers.

nCreates one tab for each child .

n

n It is a child class of the ViewStack container and inherits much of its functionality.

The <mx:TabNavigator> tag to define a TabNavigator container.

Only one child of the TabNavigator container is visible at a time.

Users can make any child the selected child by selecting its associated tab or by using keyboard navigation controls.

Source Code:

<?xml version=”1.0″?>
<!– containers\navigators\TNSimple.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:TabNavigator borderStyle=”solid” >

<mx:VBox label=”Accounts”
width=”300″
height=”150″>
<!– Accounts view goes here. –>
</mx:VBox>

<mx:VBox label=”Stocks”
width=”300″
height=”150″>
<!– Stocks view goes here. –>
</mx:VBox>

<mx:VBox label=”Futures”
width=”300″
height=”150″>
<!– Futures view goes here. –>
</mx:VBox>

</mx:TabNavigator>
</mx:Application>

Thanks with Regards,

Pandimalar A