Search This Blog

2009-11-23

Flex Tutorials 12-Valiation Control in Adobe Flex

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
global {
fontSize:12;
}
.valid{
color:#000000;
}
.invalid{
color:#FF0000;
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
private function calculate():void {
var evValidAmt:ValidationResultEvent = amountV.validate();
var evValidPct:ValidationResultEvent = percentV.validate();
if (evValidAmt.type == ValidationResultEvent.VALID && evValidPct.type == ValidationResultEvent.VALID){
var result:Number = Number(amountInput.text) * (Number(percentInput.text) / 100);
resultLabel.text = result.toString();
resultLabel.setStyle("styleName","valid");
}else{
resultLabel.text="There are Form errors";
resultLabel.setStyle("styleName", "invalid");
}
}
]]>
</mx:Script>

<mx:NumberValidator id="amountV"
source="{amountInput}" property="text"
triggerEvent=""
minValue="1"
requiredFieldError="Amount is required"/>

<mx:NumberValidator id="percentV"
source="{percentInput}" property="text"
triggerEvent=""
requiredFieldError="Enter a percentage"
maxValue="100" exceedsMaxError="Percentage can't exceed 100%"
domain="int" integerError="Enter percent as a whole number"/>

<mx:Panel title="Tip Calculator">

<mx:Form>
<mx:FormItem label="Bill amount:">
<mx:TextInput id="amountInput" width="60"/>
</mx:FormItem>
<mx:FormItem label="Percent tip:">
<mx:TextInput id="percentInput" width="60"/>
</mx:FormItem>
</mx:Form>

<mx:ControlBar>
<mx:Image source="@Embed('assets/calculator.gif')" width="30" height="30" />
<mx:VBox>
<mx:Button id="submitButton"
label="Calculate"
click="calculate()"/>
<mx:Label id="resultLabel"/>
</mx:VBox>
</mx:ControlBar>

</mx:Panel>

</mx:Application>
Output :

No comments: