Mastering Alert - Flex

Alert or Message Box [in some languages], is usually a small window containing some message [usually a shorter one], pops up from an application. Yes! stand-alone as well as Web applications have support for these small pop-up windows. The message might be any of the following
  • Information
  • Error
  • Question

The former two categories generally shows some message to the user about the behavior of the application. But the third one, asks a question [usually a yes or no] to the user, and the next activity depends on what the user enters.

We are about to explore the necessary details of the Alert class in ActionScript [Flex]. To import the class use


import mx.controls.Alert;

The class is very simple that it holds few properties, and only one method, show [of course, the constuctor too:)]. To display an alert the show method is used and its parameters are as follows
Message Text - Message to be displayed

  • Title Text - Title of the Alert Control
  • Buttons - Buttons to be placed in the Message Box
  • Parent control - Parent of the Alert [Alerts will be displayed at the centre of the parent]
  • Close Handler - Function to be called when the alert is closed
  • Icon Class - Icon to be used
  • Default Button - The default button to be focussed
  • Module Factory - For changing the fonts and style [Not had much experiment on this:(]

So I would try to explain as much as possible about these parameters each with an individual example [except the module factory maybe:)].

The first two fields are just Strings to be displayed as the Message and Title. Hope those are self-explanatory.


Buttons

The default value is 0x04 [only OK button will be there]. And of course, there are other buttons
  • YES - 0x01
  • NO - 0x02
  • OK - 0x04
  • CANCEL - 0x08

Other buttons can be added in to the box by ORing the button flags. Eg., Alert.YES | Alert.NO | Alert.CANCEL will have the buttons Yes, No and Cancel in the message box.

Below shown are some examples of Alert with various buttons.

First one is a simple message box. The show function assigns default values to the parameters passed, and hence it is not necessary to pass each argument. Thus the simple Alert in Flex would have the following line of code

Alert.show("Hello World", "Hello");




Adding the cancel button to the Alert is so simple

Alert.show("Hello World", "Hello", Alert.OK | Alert.CANCEL);




And an Yes or No Alert has the code 

Alert.show("Would you like to exit the application?", "Confirm", Alert.YES | Alert.NO);



Same way the Cancel button can also be added to the Flex Alert along with the Yes and No buttons

Alert.show("Would you like to exit the application?", "Confirm", Alert.YES | Alert.NO | Alert.CANCEL);



By default Alerts are modal, means, the focus will be on the Alert until some action is specified by the user. To make any Alert in Flex non-modal, use the NONMODAL flag. This flag can be used along with the Buttons. 

Alert.show("Apply this Setting?", "Confirm", Alert.YES | Alert.NO | Alert.CANCEL | Alert.NONMODAL);

Parent
Parent is of class Sprite upon which the Alert centers itself. The simplest value can be "this":)

Alert.show("Would you like to exit the application?", "Confirm", Alert.YES | Alert.NO | Alert.CANCEL, this);

Close Handler
It is just a function to be called if any of the when the Alert is closed. The Alert closes itself, if any of the button is pressed. The event passed to the function is a special type of event called the CloseEvent. To use this event, import the following

import mx.events.CloseEvent;

The CloseEvent holds the key pressed in the Alert in the "detail" property. By default the closeHandler will be null, and if set to a valid function, the function will be triggerd upon exit of the Alert. Say for the above message box we have to decide upon the action based on the User input. There are three possible inputs namely Yes , No or Cancel. The show function looks like


Alert.show("Would you like to exit the application?", "Confirm", Alert.YES | Alert.NO | Alert.CANCEL, this, exit_app);

And the close handler is indeed a function of the below format

public function exit_app(event:CloseEvent):void
{
    if (event.detail == Alert.YES)
    /* do something here */
}

Icon Class
Alert in ActionScipt can include an icon at the left side of the Alert. The icon class can be defined as follows

[Bindable]
[Embed(source = 'setting.png')]
private var icon:Class;

And the same class can be used in the place of icon class parameter, which by default would be null. So, to include an icon, just mention the class in the place of the parameter.

Alert.show("Apply this Setting?", "Confirm", Alert.YES | Alert.NO | Alert.CANCEL, this, exit_app, icon);



Default Button
The button to be focused by default. Useful in many situations. One good example is that some critical Alert displaying some message, asking for Yes or No can be focused by default to NO, because the user might accidentally press Enter. [Code the safer way. Not all users are aware of the things someone use in their application]

Alert.show("Apply this Setting?", "Confirm", Alert.YES | Alert.NO, this, exit_app, null, Alert.NO);




As you can see, by default the NO button is highlighted.

A question might rise now, there are only four buttons are defined by the Alert class, how can some one customize it. Say for example, some one might need a message box asking Abort, Retry or Cancel [a common message dialog seen around]. All kinds of customization are possible in ActionScript. Lets discuss the following few properties of the class

  • okLabel
  • cancelLabel
  • yesLabel
  • noLabel
  • buttonHeight
  • buttonWidth
The first four properties can be used to change the text displayed in the button. OK can be changed to some other string, may be some one's name. Lets try to build the Message dialog with Abort, Retry, Cancel. I am going to use the Yes and No button for Abort and Retry respectively. The code is as follows

Alert.yesLabel = "Abort";
Alert.noLabel = "Retry";
Alert.show("Setting the property failed?", "Set", Alert.YES | Alert.NO | Alert.CANCEL);



The buttonHeight and buttonWidth are, of course, used to change the height and with of the buttons displayed as part of the Alert control in Flex. Useful when the label of the button has a longer text. Without setting the height property of the Alert button, the output text would be cut short as shown.

Alert.yesLabel = "Longer Text Here";
Alert.show("Long text test!", "Long Long", Alert.YES);



The default height is 22 pixels, while the default width is 65 pixels. Now after changing the width,

Alert.buttonWidth = 120;



And with that, ends this post. Hope the reader finds it useful. You might also be interested in the below shown links for the posts.

See also 

2 comments:

  1. In text large you set buttonWidth = 120 but if I don't know how is the large of the button? that is cancel in Italian is cancella, in german is other word and so on... How can I to do for set buttonWidth = NaN and invalidateDisplayList() of the button?
    thanks

    ReplyDelete