This article gives an introduction to the Alert Control in Flex. You can get to know here how to pass a message or a title or even an icon to the Alert Control that you want to display when the user interacts with your application.
We will now move on to the next topic – Alert box in Flex.
Please note that I have used the words Control, Box and Dialog interchangeably and therefore do not mean otherwise until and unless specified.
We are aware of the Alerts in JavaScript – which looks like in the image below
Alert box in JavaScript
This Alert Box is available in Flex. Just like any other Alert Control in JavaScript, the Alert in Flex is a pop-up dialog box which can contain a message, a title, buttons(Ok/Canel/Yes/No) and an icon. And also, when the Alert dialog pops-up, the rest of the application will be inaccessible and out of focus.
the Alert Dialog can be closed either by pressing the “Esc” key or by clicking on a button in the Dialog box.
To use the Alert control, we need to import a class that will define the Alert Box. We need to import mx.controls.Alert and then call the show() method to display the Alert Box.
The following is a small example on how a Alert Box looks like in Flex 3:
The code for the above example is as follows:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="610" height="200">
<mx:Button label="Click Here" fontSize="15" fontFamily="Arial" click="showAlert(event)"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function showAlert(event:Event):void{
Alert.show("This is an Alert Control!", "DeveloperWall");
}
]]>
</mx:Script>
</mx:Application>As we can see from the above code, what we have is a button called “Click Here” for which we have an event called “click”. On clicking the button, the event is passed to a function showAlert() which calles the show() method from the Alert class to display the Alert Dialog Box.
Please go through my previous articles, for a better understanding of Registering Events.
Alert Control Syntax:
The syntax for the show() method is as follows
Alert.show("message", "title", flags, parent, clickListener, iconClass, defaultButton)Here is a short brief on the parameters of Alert.show():
message: We can write here in quotes the message we want to display in the Alert Box.
title: We can put here in quotes the title for the Alert Box.
flags: We can specify here the buttons we want to be displayed in the Alert Box.
Examples are:
mx.controls.Alert.OK (OK button)
mx.controls.Alert.YES (Yes button)
mx.controls.Alert.NO (No button)
mx.controls.Alert.CANCEL (Cancel button)
Each option is a bit value and can be combined with other options by using the pipe ‘|’ operator. The default value is mx.controls.Alert.OK.
parent: The parent object of the Alert control.
clickListener: This specifies the listener for click events from the buttons.
iconClass: Specifies an icon to display to the left of the message text in the dialog box.
defaultButton: We can set a default button for the Alert Box we create by using one of the valid values for the flags argument. This can help when the user doesn’t use a mouse to get through the Alert Box, but instead uses the “Enter” key on the keyboard. By giving this value, we can set what button is to be considered as default.
Let us now see the above listed values for the Alert.show() method in action.
Lets write a program where, say, I want to enter some Text in a TextInput and on the click of a button should be able to “publish” the text to a Text component. When I click on the button, an Alert box will pop-up asking me for a confirmation and the program should be able to publish or cancel the publishing based on what I click on the Alert Box Control.
So, here goes:
1. The MXML:
First, we will use the necessary components for this program – the TextInput, the Button and the Text components. I have coded them as follows
<mx:TextInput id="myText" x="10" y="129" click="myText.text=''"/>
<mx:Text id="myOutput" x="310" y="10" text="Publish Text Here" width="280" height="280" />
<mx:Button id="myButton" x="178" y="129" label="Publish Text" click="myShowAlert(event)"/>I have used the id’s “myText”, “myOutput” and “myButton” for the TextInput, Text and Button resspectively.
The click event for “myText” makes sure that the TextInput area is cleared every time you are ready to input some text.
“myOuput” has some text by default, which will be replaced when the user publishes the text.
the Button, “myButton” has a click event which calls the myShowAlert() function. Let us move on to see what the myShowAlert() has got.
2. The Script Block:
The code in the script tag is as follows
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
[Embed(source="../assets/wordpress.png")]
private var someIcon:Class;
public function myShowAlert(event:Event):void{
Alert.show("Are you sure you want to Publish the text?", "Please Confirm", Alert.YES | Alert.NO | Alert.CANCEL, this, listenToAlert, someIcon, Alert.YES);
}
public function listenToAlert(someEvent:CloseEvent):void{
if(someEvent.detail==Alert.YES)
{
myOutput.text=myText.text;
}
else if(someEvent.detail==Alert.NO)
{
myOutput.text="You clicked on NO. Text not publised.";
}
else if(someEvent.detail==Alert.CANCEL)
{
myOutput.text="You selected CANCEL. Text not published.";
}
}
]]>
</mx:Script>3. The function which calls the Alert
Let us take a closer look at the myShowAlert() function
public function myShowAlert(event:Event):void{
Alert.show("Are you sure you want to Publish the text?", "Please Confirm", Alert.YES | Alert.NO | Alert.CANCEL, this, listenToAlert, someIcon, Alert.YES);
}An event is passed to the function myShowAlert() when the button “Publish Text” is clicked. This function contains the Alert.show() method where the following are its values:
- Message displayed: “
"Are you sure you want to Publish the text?"“ - Title: “
"Please Confirm"“ - Buttons displayed: “
Alert.YES | Alert.NO | Alert.CANCEL“ - Parent: “
this“ - Close Event: “
listenToAlert“ - Icon Displayed: “
someIcon“ - Default Button: “
Alert.YES“
The above list of values should be pretty self explanatory.
4. The CloseEvent
Now, we have a close event in the the Alert.show() method for which we have to import the CloseEvent class as “import mx.events.CloseEvent”.
The listener “listenToAlert” will be invoked when a button is clicked on the Alert Box. The code for “listenToAlert” is defined as
public function listenToAlert(someEvent:CloseEvent):void{
if(someEvent.detail==Alert.YES)
{
myOutput.text=myText.text;
}
else if(someEvent.detail==Alert.NO)
{
myOutput.text="You clicked on NO. Text not publised.";
}
else if(someEvent.detail==Alert.CANCEL)
{
myOutput.text="You selected CANCEL. Text not published.";
}
}As per the above code, “someEvent” is the event passed from the Buttons in the Alert Box and “someEvent.detail” will give us the Button clicked. Therefore, we can compare to see which Button is clicked and can perform necessary set of actions depending on the Button clicked.
5. The IconClass
We then have the IconClass which is defined as
[Embed(source="../assets/wordpress.png")]
private var someIcon:Class;We have used some DataBinding here. We have used an image (I have taken a random image) which I have binded to the Class variable I have declared. We can now use the variable/class “someIcon” to directly refer to the IconClass in the Alert.show() method.
6. The Default Button
Just in case the user doesn’t use the mouse to click on the Alert Buttons, but instead uses the “Enter” key on the keyboard, we can set a default button to be considered. Here we have set it as the ‘YES’ button. So, when the Alert pops-up, try pressing the “Enter” Key – the application will take it as a ‘YES’
So, that should be it. The entire application code will look like this
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="300">
<mx:TextInput id="myText" x="10" y="129" click="myText.text=''"/>
<mx:Text id="myOutput" x="310" y="10" text="Publish Text Here" width="280" height="280" />
<mx:Button id="myButton" x="178" y="129" label="Publish Text" click="myShowAlert(event)"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
[Embed(source="../assets/wordpress.png")]
private var someIcon:Class;
public function myShowAlert(event:Event):void{
Alert.show("Are you sure you want to Publish the text?", "Please Confirm", Alert.YES | Alert.NO | Alert.CANCEL, this, listenToAlert, someIcon, Alert.YES);
}
public function listenToAlert(someEvent:CloseEvent):void{
if(someEvent.detail==Alert.YES)
{
myOutput.text=myText.text;
}
else if(someEvent.detail==Alert.NO)
{
myOutput.text="You clicked on NO. Text not publised.";
}
else if(someEvent.detail==Alert.CANCEL)
{
myOutput.text="You selected CANCEL. Text not published.";
}
}
]]>
</mx:Script>
</mx:Application>
And the output for the above code is
Try giving some input and clicking on the button.
Hope you enjoyed this post. Do you have any feedback/questions? Please post it in the comments below.
Related posts:
- Examples on Registering Events in Flex We can register Event Handlers and Listeners in more than...
- Events in Flex What are Events and Listeners? Events are what make an...
- The Flex Builder IDE for beginners The Flex software is built on the widely used Eclipse...
- ActionScripting in Flex It is important to know that Flex is not here...
Related posts brought to you by Yet Another Related Posts Plugin.
5 Responses
This was really helpful…thnx
Thanks so much for the tutorials! Please keep it up.
Thank you
Rather interesting. Has few times re-read for this purpose to remember. Thanks for interesting article. Waiting for trackback
Thank you very much for that great article