< Jewel Components list

Jewel Alert

Reference

Available since version 0.9.4

^{Note: This component is currently only available in JavaScript.}

Overview

The Alert component displays a message and one or more buttons in a window that pops up over all other controls and views. It uses the AlertView beads to display a modal dialog with a title and a variety of buttons configured through the flag property of its show static function. The user cannot use the rest of the interface without first engaging with the modal dialog.

Alert uses the HTML dialog element, which currently has very limited cross-browser support. To ensure support across all modern browsers, we use the dialogPolyfill externs.

Example of use

Alert is not designed to be instantiated the way the majority of components are. Instead, use the static method show to display the component, as in the following snippet:

Alert.show('This alert shows a label text and the default OK button.', 'Alert Example');

When you use Alert.show(), Royale generates a modal dialog and adds it, centered in front of the application and on top of all displayed visual elements.

Click the following button to see an example of Alert:

To close the window, click one of the buttons on the bottom controlBar, or programmatically call the Alert.close() method on the instance.

Relevant Properties and Methods

Check the reference of org.apache.royale.jewel.Alert for a more detailed list of properties and methods.

Properties

Methods

Relevant Events

The Alert component uses the CloseEvent.CLOSE event when the user removes it from the application. You can attach callback listeners to the CloseEvent.CLOSE as follows:

var alert:Alert = Alert.show("Do you want to save your changes?", "Save Changes", Alert.OK | Alert.NO);
alert.addEventListener(CloseEvent.CLOSE, alertClickHandler);

Then check event.detail to know what button was clicked inside the dialog.

// Event handler callback function for CloseEvent event 
private function alertClickHandler(event:CloseEvent):void {
    if (event.detail == Alert.YES)
        status.text="You answered Yes";
    else
        status.text="You answered No";
}

Relevant Beads

The Alert component uses the following beads:

^{(*) NullLayout is used temporarily.}