Alert Box in Flex


 

Alert Box in Flex

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.

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:

Ads