< Jewel Components list

Jewel Alert


Available since version 0.9.4

Class Extends Implements
org.apache.royale.jewel.Alert org.apache.royale.jewel.Group org.apache.royale.core.IPopUp

Note: This component is currently only available in JavaScript.


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.

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.


PROPERTY Type Description
title String The title of the Alert.
message String The message to display in the Alert body.
flags uint The buttons to display on the Alert as bit-mask values. Possible values are: YES, NO, OK, and CANCEL.


Method Parameters Description
show message(String), title(String), flags(uint), parent(Object) Shows the Alert non modal anchored to the given parent object, which is usually a root component such as *, as a UIView or body if null.
close buttonFlag:uint = 0x000004 Closes the dialog element.

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";
        status.text="You answered No";

Relevant Beads

The Alert component uses the following beads:

Bead Type Implementation Description
IBeadModel org.apache.royale.jewel.beads.models.AlertModel The data model for the Alert.
IBeadView org.apache.royale.jewel.beads.views.AlertView The bead used to create the elements of the Alert.
IBeadController org.apache.royale.jewel.beads.controllers.AlertController The bead used to handle input events.
IBeadLayout org.apache.royale.jewel.beads.layouts.NullLayout(*) The bead used to position the elements of the Alert.

(*) NullLayout is used temporarily.