The CurrencyValidator class ensures that a String represents a valid currency expression. It can make sure the input falls within a given range (specified by minValue and maxValue), is non-negative (specified by allowNegative), and does not exceed the specified precision. The CurrencyValidator class correctly validates formatted and unformatted currency expressions, e.g., “$12,345.00″ and “12345″. You can customize the currencySymbol, alignSymbol, thousandsSeparator, and decimalSeparator properties for internationalization.

codings

<?xml version=”1.0″ encoding=”utf-8″?>

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

<mx:Script>
<![CDATA[

import mx.events.ValidationResultEvent;
private var vResult:ValidationResultEvent;

private function Format():void {

vResult = numVal.validate();

if (vResult.type==ValidationResultEvent.VALID) {
var temp:Number=Number(priceUS.text);
formattedUSPrice.text= usdFormatter.format(temp);
}

else {
formattedUSPrice.text="";
}
}
]]>
</mx:Script>

<mx:CurrencyFormatter id=”usdFormatter” precision=”2″
currencySymbol=”$” decimalSeparatorFrom=”.”
decimalSeparatorTo=”.” useNegativeSign=”true”
useThousandsSeparator=”true” alignSymbol=”left”/>

<mx:NumberValidator id=”numVal” source=”{priceUS}” property=”text”
allowNegative=”true” domain=”real”/>

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

<mx:Form>
<mx:FormItem label=”Enter U.S. dollar amount:”>
<mx:TextInput id=”priceUS” text=”" width=”50%”/>
</mx:FormItem>

<mx:FormItem label=”Formatted amount: “>
<mx:TextInput id=”formattedUSPrice” text=”" width=”50%” editable=”false”/>
</mx:FormItem>

<mx:FormItem>
<mx:Button label=”Validate and Format” click=”Format();”/>
</mx:FormItem>
</mx:Form>

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

When the DateChooser control is open, the user can scroll through months and years, and select a date. When a date is selected, the DateChooser control closes, and the text field shows the selected date.

The user can also type the date in the text field if the editable property of the DateField control is set to true.

codings

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

<mx:Script>
<![CDATA[

// Event handler for the DateField change event.
private function dateChanged(date:Date):void {
if (date == null)
selection.text = "Date selected: ";
else
selection.text = "Date selected: " + date.getFullYear().toString() +
'/' + (date.getMonth()+1).toString() + '/' + date.getDate();
}
]]>
</mx:Script>

<mx:DateFormatter id=”df”/>

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

<mx:Label width=”100%” color=”blue”
text=”Select a date in the DateField control. Select it again to clear it.”/>

<mx:Label text=”Basic DateField:”/>
<mx:DateField id=”dateField1″ yearNavigationEnabled=”true”
change=”dateChanged(DateField(event.target).selectedDate)” />
<mx:Label id=”selection” color=”blue” text=”Date selected:” />

<mx:Label text=”Disable dates before June 1, 2006.”/>
<mx:DateField id=”dateField2″ yearNavigationEnabled=”true”
disabledRanges=”{[ {rangeEnd: new Date(2006, 5, 1)} ]}” />
<mx:Label color=”blue” text=”Date selected: {df.format(dateField2.selectedDate)}”/>

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

The DateChooser control displays the name of a month, the year, and a grid of the days of the month, with columns labeled for the day of the week. The user can select a date, a range of dates, or multiple dates. The control contains forward and back arrow buttons for changing the month and year. You can let users select multiple dates, disable the selection of certain dates, and limit the display to a range of dates.

coding:

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

<mx:Script>
<![CDATA[

private function displayDate(date:Date):void {
if (date == null)
selection.text = "Date selected: ";
else
selection.text = "Date selected: " + date.getFullYear().toString() +
'/' + (date.getMonth()+1).toString() + '/' + date.getDate();
}
]]>
</mx:Script>

<mx:DateFormatter id=”df”/>

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

<mx:Label width=”100%” color=”blue”
text=”Select a date in the DateChooser control. Select it again to clear it.”/>

<mx:HBox horizontalGap=”25″>
<mx:VBox>
<mx:Label text=”Simple DateChooser control.”/>
<mx:DateChooser id=”dateChooser1″ yearNavigationEnabled=”true”
change=”displayDate(DateChooser(event.target).selectedDate)”/>
<mx:Label id=”selection”  color=”blue” text=”Date selected:”/>
</mx:VBox>

<mx:VBox>
<mx:Label text=”Disable dates before June 1, 2006.”/>
<mx:DateChooser id=”dateChooser2″ yearNavigationEnabled=”true”
disabledRanges=”{[ {rangeEnd: new Date(2006, 5, 1)} ]}”/>
<mx:Label  color=”blue” text=”Date selected: {df.format(dateChooser2.selectedDate)}”/>
</mx:VBox>
</mx:HBox>

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

Repeater components are useful for repeating a small set of simple user interface components, such as RadioButton controls and other controls typically used in Form containers. Repetition is generally controlled by an array of dynamic data, such as an Array object returned from a web service, but you can use static arrays to emulate simple for loops.

Although Repeater components look like containers in your code, they are not containers and have none of the automatic layout functionality of containers. Their sole purpose is to specify a series of subcomponents to include in your application one or more times based on the contents of a specified data provider. To align items that a repeater generates or perform any other layout task, place the Repeater component and its contents inside a container and apply the layout to that container.

Flex also supports HorizontalList, TileList, and List controls that provide better performance when you are displaying large amounts of data. Unlike the Repeater component, which instantiates all objects that are repeated, the HorizontalList, TileList, and List controls instantiate only objects visible in the list. If your data extends past a single screen or the visible space within any of its containers, you should use one of the list controls.

The HorizontalList control is a list control that displays data horizontally, much like the HBox container. The HorizontalList control always displays items from left to right. For more information, see HorizontalList control.

The TileList control is a list control that displays data in a tile layout, much like the Tile container. The TileList control provides a direction

property that determines if the next item is down or to the right.

Coding:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[

import mx.controls.Alert;

[Bindable]
private var dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

]]>
</mx:Script>

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

<mx:Text width=”100%” color=”blue”
text=”Use the Repeater class to create 9 Button controls in a 3 by 3 Tile container.”/>

<mx:Tile direction=”horizontal” borderStyle=”inset”
horizontalGap=”10″ verticalGap=”15″
paddingLeft=”10″ paddingTop=”10″ paddingBottom=”10″ paddingRight=”10″>

<mx:Repeater id=”rp” dataProvider=”{dp}”>
<mx:Button height=”49″ width=”50″
label=”{String(rp.currentItem)}”
click=”Alert.show(String(event.currentTarget.getRepeaterItem()) + ‘ pressed’)”/>
</mx:Repeater>
</mx:Tile>

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

A ViewStack navigator container is made up of a collection of child containers that are stacked on top of each other, with only one container visible, or active, at a time. The ViewStack container does not define a built-in mechanism for users to switch the currently active container; you must use a LinkBar, TabBar, ButtonBar, or ToggleButtonBar control or build the logic yourself in ActionScript to let users change the currently active child. For example, you can define a set of Button controls that switch among the child containers.

coding:

<?xml version=”1.0″?>

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

<mx:VBox>

<mx:HBox borderStyle=”solid”>

<mx:Button id=”searchButton”
label=”Search Screen”
click=”myViewStack.selectedChild=search;”/>

<mx:Button id=”cInfoButton”
label=”Customer Info Screen”
click=”myViewStack.selectedChild=custInfo;”/>

<mx:Button id=”aInfoButton”
label=”Account Info Screen”
click=”myViewStack.selectedChild=accountInfo;”/>
</mx:HBox>

<mx:ViewStack id=”myViewStack”
borderStyle=”solid” width=”100%”>

<mx:Canvas id=”search” label=”Search”>
<mx:Label text=”Search Screen”/>
</mx:Canvas>

<mx:Canvas id=”custInfo” label=”Customer Info”>
<mx:Label text=”Customer Info”/>
</mx:Canvas>

<mx:Canvas id=”accountInfo” label=”Account Info”>
<mx:Label text=”Account Info”/>
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
</mx:Application>

The Sequence effect plays multiple child effects one after the other, in the order in which they are added.

Starting a composite effect in ActionScript is usually a five-step process:

1. Create instances of the effect objects to be composited together; for example:

   myFadeEffect = new mx.effects.Fade(target);

2. Set properties, such as duration, on the individual effect objects.
3. Create an instance of the Sequence effect object; for example:

   mySequenceEffect = new mx.effects.Sequence();

4. Call the addChild() method for each of the effect objects; for example:

   mySequenceEffect.addChild(myFadeEffect);

5. Invoke the Sequence effect’s play() method; for example:

   mySequenceEffect.play()

<?xml version=”1.0″ encoding=”utf-8″?>

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

<mx:Script>
<![CDATA[
import mx.effects.easing.*;
]]>
</mx:Script>

<mx:Sequence id=”movePauseMove”>
<mx:Move xBy=”150″ duration=”2000″ easingFunction=”Bounce.easeOut”/>
<mx:Pause duration=”2000″/>
<mx:Move xBy=”-150″ duration=”2000″ easingFunction=”Bounce.easeIn”/>
</mx:Sequence>

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

<mx:Text width=”100%” color=”blue”
text=”Click the phone image to start the Sequence effect. The effect pauses for 2 seconds between moves.”/>

<mx:Image
source=”@Embed(source=’assets/Nokia_6630.png’)”
mouseDownEffect=”{movePauseMove}”/>

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

While a TabBar control is similar to a TabNavigator container, it does not have any children. For example, you use the tabs of a TabNavigator container to select its visible child container. You can use a TabBar control to set the visible contents of a single container to make that container’s children visible or invisible based on the selected tab.

Creating a TabBar control
You use the tag to define aTabBar control in MXML. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

You specify the data for the TabBar control by using the and child tags of the tag. The tag lets you specify data in several different ways. In the simplest case for creating a TabBar control, you use the , , and tags to specify the text for each tab.

Coding

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var STATE_ARRAY:ArrayCollection = new ArrayCollection([
{label:"Alabama", data:"Montgomery"},
{label:"Alaska", data:"Juneau"},
{label:"Arkansas", data:"LittleRock"}
]);
]]>
</mx:Script>

<mx:TabBar >
<mx:dataProvider>
{STATE_ARRAY}
</mx:dataProvider>
</mx:TabBar>
</mx:Application>

codings:

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

<mx:Script>
<![CDATA[
[Bindable]
public var selectedItem:Object;
]]>
</mx:Script>

<mx:Model id=”mystates”>
<states>
<state label=”Alabama” data=”AL”/>
<state label=”Alaska” data=”AK”/>
<state label=”Arizona” data=”AZ”/>
<state label=”Arkansas” data=”AR”/>
<state label=”California” data=”CA”/>
<state label=”Colorado” data=”CO”/>
<state label=”Connecticut” data=”CT”/>
</states>
</mx:Model>

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

<mx:Label text=”Select a state to see its abbreviation.”/>

<mx:List id=”source” width=”100%” color=”blue”
dataProvider=”{mystates.state}”
change=”this.selectedItem=List(event.target).selectedItem”/>

<mx:VBox width=”100%”>
<mx:Label text=”Selected State: {selectedItem.label}”/>
<mx:Label text=”State abbreviation: {selectedItem.data}”/>
</mx:VBox>

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

Flex defines an Application container that serves as the default container for any content that you add to your application. Flex creates this container from the <mx:Application> tag, which must be the first tag in an MXML application file. The Application object is the default scope for any ActionScript code in the file, and the <mx:Application> tag defines the initial size of the application.

Although you may find it convenient to use the Application container as the only container in your application, usually you explicitly define at least one more container before you add any controls to your application. Often, you use a Panel container as the first container after the <mx:Application>tag.

Codings

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundGradientColors=”[0xCCCCCC, 0x66CCFF]“
backgroundColor=”0xCCCCCC”
horizontalAlign=”center” verticalAlign=”center”
applicationComplete=”appComplete();”>

<mx:Script>
<![CDATA[
private function appComplete():void {
myTA.text+="Application creation complete" + "\n";
}

private function panelCreationComplete():void {
myTA.text+="Panel creation complete" + "\n";
}

private function textAreaCreationComplete():void {
myTA.text+="\n" + "TextArea creation complete" + "\n";
}
]]>
</mx:Script>

<mx:ApplicationControlBar dock=”true”>
<mx:Button label=”Set Solid Fill”
click=”this.setStyle(‘backgroundGradientColors’, [0xCCCCCC, 0xCCCCCC]);”/>
<mx:Button label=”Set Gradient Fill”
click=”this.setStyle(‘backgroundGradientColors’, [0xCCCCCC, 0x66CCFF]);”/>
</mx:ApplicationControlBar>

<mx:Panel title=”Application Container Example” backgroundColor=”0x9CB0BA”
width=”75%” height=”75%”
creationComplete=”panelCreationComplete();”>

<mx:TextArea id=”myTA” height=”100%” width=”100%”
text=”Event order: “
creationComplete=”textAreaCreationComplete();”/>

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

The Slider class is the base class for the Flex slider controls. The slider controls let users select a value by moving a slider thumb between the end points of the slider track. The current value of the slider is determined by the relative location of the thumb between the end points of the slider, corresponding to the slider’s minimum and maximum values. The Slider class is subclassed by HSlider and VSlider.

coding:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:HBox>
<mx:VBox>
<mx:HSlider
tickInterval=”2″
labels=”['min', 'max']” height=”150″/>
<mx:HSlider />
<mx:HSlider
maximum=”100″
snapInterval=”5″
tickInterval=”25″
labels=”[0,25,50,75,100]“/>

</mx:VBox>

<mx:VSlider
tickInterval=”2″
labels=”['min', 'max']“/>
</mx:HBox>
</mx:Application>