Home Tutorial Flex Flex-components Alert Box in Flex

 
 

Share on Google+Share on Google+
Alert Box in Flex
Posted on: January 20, 2010 at 12:00 AM
Advertisement
In the present tutorial we will see how to display simple text using Alert Box. An Alert Box is modal, which means it retains the focus until we close it or click on any button.

Flex Alert Box Components

Adobe Flex provides many types of components, in this tutorial we will study visual component.

1. Alert Box: In the present tutorial we will see how to display simple text using Alert Box. An Alert Box is modal, which means it retains the focus until we close it or click on any button.
2. Whenever we need to use Alert box in our application, we have to import mx.controls.Alert class. An Alert Box contains a title, a message, an image and one or more than button. In general we use show() method to display something. We can create this component or any related function (as shown below) inside the ActionScript section. The Alert control closes when press the ESC key or any button present on it.


Flex Alertbox Component Example 1:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
<mx:Panel x="250" y="202" width="344" height="158" title="Testing of Alert Button" horizontalAlign="center" verticalAlign="middle">
<mx:Button label="Click" click="Alert.show('This is a text')"/>
</mx:Panel>
</mx:Application>

Output:


After clicking the button, an alert message as follows will be shown on the screen.



Example 2:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.controls.Alert;


private function ClickEvent():void{
Alert.show("Are you above 18?","Save Changes",3,this,ClickHandler);
}

private function ClickHandler(event:CloseEvent):void{
if(event.detail==Alert.YES){
ans.text="You answered yes";
}
else
ans.text="You answered no";
}
]]>
</mx:Script>
<mx:Panel x="250" y="202" width="344" height="158" title="Testing of Alert Button" horizontalAlign="center" verticalAlign="middle">
<mx:Button label="Click" click="ClickEvent()"/>
<mx:Label id="ans"/>
</mx:Panel>
</mx:Application>


Output:



After clicking the button, an alert message as follows will be shown on the screen.



If we click Yes button, output will be You are adult on the Panel and if we click No button the output will be You are juvenile.

Example 3:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.controls.Alert;


private function ClickEvent():void{
Alert.buttonWidth=100;
Alert.yesLabel="JavaFx";
Alert.noLabel="Silverlight";
Alert.cancelLabel="Adobe Flex";

Alert.show("Select an Application","Selection of RIA", 1|2|8,this);
}
]]>
</mx:Script>
<mx:Panel x="250" y="202" width="344" height="158" title="Testing of Alert Button" horizontalAlign="center" verticalAlign="middle">
<mx:Button label="Click" click="ClickEvent()"/>
<mx:Label id="ans"/>
</mx:Panel>
</mx:Application>

Output:

Advertisement

Related Tags for Alert Box in Flex:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: January 20, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com