5 Replies Latest reply on Apr 23, 2010 2:54 PM by Peter deHaan

    Alert background blur effect

    hidarikani Level 2

      When an alert is displayed all background elements are blurred and not clickable.

      How do I reproduce this effect when displaying a custom component? For example a fatal error message.

        • 1. Re: Alert background blur effect
          David_F57 Level 5

          hi,

           

          All you need to do is apply a blur effect to the application -

           

          for instance -

           

          if (error == true)

          {

            this.filters = [new BlurFilter()]; 

            showmessagebox() ;  <=== your custom alert

          }

           

           

          then on custom alert close  --   this.filters = null;

           

           

          David

          1 person found this helpful
          • 2. Re: Alert background blur effect
            hidarikani Level 2

            The alert is always in the center of the window.

            But my app's layout is set to vertical.

            How do I display my custom component in the center and above all controls, without changing the app's layout to absolute?

            • 3. Re: Alert background blur effect
              David_F57 Level 5

              hi,

               

              you can do this with post layout transform, i'll post an example later tonight.

               

              David.

              • 4. Re: Alert background blur effect
                hidarikani Level 2

                I'll post an example later tonight.

                That would be nice

                • 5. Re: Alert background blur effect
                  Peter deHaan Level 4

                  I think I'm confused. Instead of an Alert, you want to display a custom component instead?

                  You should be able to display your custom component using the PopUpManager class and if you want the blurred background, set modal=true.

                   

                  The following example shows a basic usage in Flex 4, but it should be mostly the same logic in Flex 3. I also included a little CheckBox so you can toggle modal=true and modal=false (that third arg in the PopUpManager.createPopUp() call), to see the difference.

                   

                  <?xml version="1.0" encoding="utf-8"?> 
                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                 xmlns:s="library://ns.adobe.com/flex/spark" 
                                 xmlns:mx="library://ns.adobe.com/flex/mx"> 
                      <s:layout>
                          <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
                      </s:layout>
                      <s:controlBarContent>
                          <s:CheckBox id="chckBx" label="Do you want it modal?" selected="true" />
                          <s:Button label="Launch" click="init();" />
                      </s:controlBarContent>
                      <fx:Script>
                          <![CDATA[
                              import mx.core.IFlexDisplayObject;
                              import mx.managers.PopUpManager;
                              
                              private function init():void {
                                  var myCustomPopUp:IFlexDisplayObject = PopUpManager.createPopUp(this, CustomComponent, chckBx.selected);
                                  PopUpManager.centerPopUp(myCustomPopUp);
                              }
                          ]]>
                      </fx:Script>
                      
                      <s:Button label="red" chromeColor="red" width="100%" height="20%" />
                      <s:Button label="orange" chromeColor="haloOrange" width="100%" height="20%" />
                      <s:Button label="yellow" chromeColor="yellow" width="100%" height="20%" />
                      <s:Button label="green" chromeColor="haloGreen" width="100%" height="20%" />
                      <s:Button label="blue" chromeColor="haloBlue" width="100%" height="20%" />
                      
                  </s:Application>
                  

                   

                   

                  And my simple custom component, CustomComponent.mxml, is as follows:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           title="Spark TitleWindow title"
                           width="400" height="300"
                           close="titlewindow1_closeHandler(event);">
                      
                      <fx:Script>
                          <![CDATA[
                              import mx.events.CloseEvent;
                              import mx.managers.PopUpManager;
                              
                              protected function titlewindow1_closeHandler(evt:CloseEvent):void {
                                  PopUpManager.removePopUp(evt.currentTarget as TitleWindow);
                              }
                          ]]>
                      </fx:Script>
                      
                      <s:Label text="FATAL ALERT!"
                               horizontalCenter="0" verticalCenter="0" />
                      
                  </s:TitleWindow>
                  

                   

                   

                  Peter