Styling the Flex Alert control

This is a more complex version of my previous example. This time in addition to making the Alert control’s text non-selectable, we use an embedded font for the Alert title, message, buttons, as well as edit the drop shadow, remove the rounded corners, and remove the button skins.

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/ -->
<mx:Application name="Alert_style_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="showAlert()"
        applicationComplete="init()">
 
    <!-- Used by the ApplicationControlBar control. -->
    <mx:String id="fileName" />
    <mx:String id="fileSize" />
 
    <!-- Used by the Alert control. -->
    <mx:String id="message">The quick brown fox jumped over the lazy dog.
 
The quick brown fox jumped over the lazy dog.</mx:String>
    <mx:String id="title">The quick brown fox jumped over the lazy dog?</mx:String>
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            private var a:Alert;
 
            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                fileName = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                fileSize = (appInfo.bytesTotal / 1024).toFixed(2);
            }
 
            private function showAlert():void {
                Alert.yesLabel = "Accept";
                Alert.noLabel = "Reject";
                Alert.buttonWidth = 120;
 
                a = Alert.show(
                        message,
                        title,
                        Alert.NO | Alert.YES
                    );
                /* Make the Alert form's text non-selectable. */
                a.mx_internal::alertForm.mx_internal::textField.selectable = false;
            }
        ]]>
    </mx:Script>
 
    <mx:Style>
        @font-face{
            src: url("./fonts/base02.ttf");
            fontFamily: "Base02";
        }
 
        Alert {
            titleStyleName: "alertTitle";
            messageStyleName: "alertMessage";
            buttonStyleName: "alertButton";
            dropShadowEnabled: true;
            shadowDistance: 5;
            shadowDirection: right;
            cornerRadius: 0;
            embedFonts: true;
            fontFamily: Base02;
        }
 
        .alertTitle {
            letterSpacing: 0;
            fontSize: 14;
            color: red;
        }
 
        .alertMessage {
            letterSpacing: 0;
            fontSize: 10;
            fontWeight: normal;
            color: black;
        }
 
        .alertButton {
            letterSpacing: 0;
            fontSize: 11;
            cornerRadius: 10;
            fontWeight: normal;
            textRollOverColor: white;
            color: red;
            skin: ClassReference(null);
        }
    </mx:Style>
 
    <!-- Display SWF name and file size. -->
    <mx:ApplicationControlBar id="applicationControlBar" dock="true">
        <mx:Label id="info" text="{fileName} ({fileSize}kb)" />
    </mx:ApplicationControlBar>
 
    <!-- Click to launch Alert control. -->
    <mx:Button label="Launch Alert" click="showAlert();" />
 
</mx:Application>

View source is enabled in the following application.

[Base02]

17 thoughts on “Styling the Flex Alert control

  1. I tried compiling this example and it does work fine except for the button face which still have the rounded borders.

    The same thing happened when i tried another example from this site.

    i’m not sure, but i think it’s the line

    skin: ClassReference(null);

    that does not work.

    any idea?

    I’m using the flex sdk 2.0.1 with hotfix 1.

    I’d like to be able to use the button class without the standard face so i’d really like this to work.

  2. nl,

    I believe the “skin” style is new to Flex 3.

    http://livedocs.adobe.com/flex/201/langref/mx/controls/Button.html#styleSummary (Flex 2.0.1)
    http://livedocs.adobe.com/labs/flex3/langref/mx/controls/Button.html#styleSummary (Flex 3 beta)

    In Flex 2 you may need to set the various skin states (disabledSkin, downSkin, overSkin, upSkin, and the various selected*Skin styles) separately.

    Sorry for the confusion, I primarily do all these entries in Flex 3 and don’t do much backwards compatibility testing (as you probably discovered).

    Peter

  3. Hi, I was wondering if there is a way to change the blur en transparant white effect of the Alert class…

  4. I solved as following:

    a.defaultButton.addEventListener(MouseEvent.CLICK, setClick);
    private function setClick(evt:MouseEvent):void
    {
        // my actions...
    }
    
  5. How and why we can not be able to resize the Alert popup.
    It is set to a certain size and i still couldnt find a way to resize it.
    If you use large typeface everything is overlaping. It is just really anoying.

  6. Ali Tan Ucer,

    Does something like this work for you?

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Script>
            <![CDATA[
                import mx.managers.PopUpManager;
                import mx.controls.Alert;
    
                private var alert:Alert;
    
                private function init():void {
                    alert = new Alert();
                    alert.width = 500;
                    alert.height = 400;
                    alert.text = lorem;
                    PopUpManager.addPopUp(alert, this);
                    PopUpManager.centerPopUp(alert);
                }
            ]]>
        </mx:Script>
    
        <mx:String id="lorem" source="lorem.html" />
    
        <mx:Button click="init();" />
    
    </mx:Application>
    

    Peter

  7. Hey guys,

    I m making a skin for Flex3. I successfully skinned the Panel component using a PNG asset and the “borderSkin” property. It looks just fine, but the Alert component (which uses the Panel component) displays to a smaller size than it should, so the title, message and button(s) just overlap and everything gets messy.

    By progressively removing CSS directives from the Panel {} declarations block, I isolated the one that it’s causing trouble: it is the “borderSkin” definition itself. Merely setting a “borderSkin” on the Panel component makes the children of an Alert component overlap, due to lack of space.

    Any idea as to why?

    Thanks in advance,
    C

  8. Hi .. all anyone can tell me how to accept input from user through AlertBox, i am trying but m not getting the way .. pls help

  9. Hi guys,

    How can I include HTML formatted message in my Alert? I’ve tried to use myAlert.mx_internal::alertForm.mx_internal::textField.htmlText=”text here”; or something like this, but the Alert box doesn´t adapt itself according to the text.

    Any idea?

    Thanks in advance,

    AToyansk

  10. Does anyone has an idea about “ciacob’s” question? (2 question/replies above this post)
    I hav e the same problem.
    Any help?
    ====================
    Following is “ciacob’s” problem for ur reference.

    ciacob May 8, 2009 at 6:14 am
    Hey guys,
    I m making a skin for Flex3. I successfully skinned the Panel component using a PNG asset and the “borderSkin” property. It looks just fine, but the Alert component (which uses the Panel component) displays to a smaller size than it should, so the title, message and button(s) just overlap and everything gets messy.
    By progressively removing CSS directives from the Panel {} declarations block, I isolated the one that it’s causing trouble: it is the “borderSkin” definition itself. Merely setting a “borderSkin” on the Panel component makes the children of an Alert component overlap, due to lack of space.
    Any idea as to why?

    1. @Mark,

      This isn’t exactly the same, but fairly close:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application name="Alert_style_test"
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx"
              creationComplete="showAlert();">
       
          <fx:Script>
              <![CDATA[
                  import mx.controls.Alert;
       
                  private var a:Alert;
       
                  private var message:String = "The quick brown fox jumped over the lazy dog.nnThe quick brown fox jumped over the lazy dog.";
                  private var title:String = "The quick brown fox jumped over the lazy dog?";
       
                  private function showAlert():void {
                      Alert.yesLabel = "Accept";
                      Alert.noLabel = "Reject";
                      Alert.buttonWidth = 120;
       
                      a = Alert.show(
                          message,
                          title,
                          Alert.NO | Alert.YES
                      );
                      /* Make the Alert form's text non-selectable. */
                      a.mx_internal::alertForm.mx_internal::textField.selectable = false;
                  }
              ]]>
          </fx:Script>
       
          <fx:Style>
              @namespace mx "library://ns.adobe.com/flex/mx";
       
              @font-face{
                  src: url("C:/windows/fonts/arial.ttf");
                  fontFamily: "Base02";
                  embedAsCFF: false;
              }
       
              mx|Alert {
                  titleStyleName: "alertTitle";
                  messageStyleName: "alertMessage";
                  buttonStyleName: "alertButton";
                  cornerRadius: 0;
                  fontFamily: Base02;
              }
       
              .alertTitle {
                  fontSize: 14;
                  color: red;
              }
       
              .alertMessage {
                  fontSize: 10;
                  fontWeight: normal;
                  color: black;
              }
       
              .alertButton {
                  fontSize: 11;
                  cornerRadius: 10;
                  fontWeight: normal;
                  textRollOverColor: haloSilver;
                  color: red;
                  skin: ClassReference(null);
                  emphasizedSkin: ClassReference(null);
              }
          </fx:Style>
       
          <!-- Click to launch Alert control. -->
          <s:Button label="Launch Alert" click="showAlert();" />
       
      </s:Application>

      Peter

Comments are closed.