Using the Jewel Alert Control

Using the Jewel Alert Control

Using the Jewel Alert Control 736 547 Carlos Rovira

The following code shows the basic method for displaying an Alert dialog in a Royale application. It uses the new Jewel UI set that supports themes and is available in the 0.9.4 release or later.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version="1.0" encoding="UTF-8"?>
<j:Application xmlns:fx="//ns.adobe.com/mxml/2009"
              xmlns:j="library://ns.apache.org/royale/jewel">
   
    <fx:Script>
        <![CDATA[
           import org.apache.royale.jewel.Alert;
           import org.apache.royale.events.CloseEvent;

          private function clickHandler(event:MouseEvent):void {
              var alert:Alert = Alert.show("Do you want to save your changes?", "Save Changes", Alert.YES | Alert.NO);
              alert.addEventListener(CloseEvent.CLOSE, alertClickHandler);
          }
     
          private function alertClickHandler(event:CloseEvent):void {
              if (event.detail == Alert.YES)
                  button.text="You answered Yes";
              else
                  button.text="You answered No";
          }
       ]]>
    </fx:Script>

    <j:initialView>
        <j:View>
            <j:Button id="button" text="Click Me" emphasis="primary" click="clickHandler(event)"/>
        </j:View>
    </j:initialView>
   
</j:Application>

In this example, the Jewel button adds a click handler that will be in charge of showing the Alert control. When the user clicks the button the Alert.show() static method is called. You can add a custom message, a custom title and choose which buttons will be created for that instance of the Alert.
Finally, the Alert instance adds an event listener to manage the alert response when the dialog is closed. In this example we’re changing the label of the button according to the button the user clicks in the Alert.

The result of this code snippet is the following:

(We’re using an iframe to host the compiled results of this example. To see the example in a separate window click this link.)

Full project with source code can be found here:

Join Us!

You can be part of Apache Royale and start using and contributing to this project. We need your skills to make this great technology reach the next step. You can start by joining us in our mailing list.