3 Replies Latest reply on Jan 10, 2012 7:53 PM by rajesh_android

    Wanna create native message like android in flex 4.5.1  and fb 4.5 : is it possible?

    rajesh_android

      Hello ,

       

      Im new to flex and flash builder. I want to create toasts like android's native are. But when I do it with popups in flex, my parent screen is inaccessible while that popup is open. While this is not case with androids toasts.

      Is it possible to create such toasts where I can access my screen while toast is being displayed on screen.

       

      Thanks for reading!

        • 1. Re: Wanna create native message like android in flex 4.5.1  and fb 4.5 : is it possible?
          rajesh_android Level 1

          Hello Reader,

          Finally I could create a toast like android in my flex application. I would like to share the code with you.

           

          It is done like

           

          1. Create a package

          2. Override BorderContainer component in it . Like

           

          package skins

          {

              import flash.events.TimerEvent;

              import flash.utils.Timer;

             

              import skins.toastSkin;

             

              import spark.components.BorderContainer;

             

              import spark.components.Label;

              import spark.components.View;

              import spark.layouts.VerticalLayout;

              import spark.effects.Animate;

              import spark.effects.animation.MotionPath;

              import spark.effects.animation.SimpleMotionPath;

              import mx.events.EffectEvent;

             

             

              public class nativetoast extends BorderContainer

              {

                  /**

                   *  CONSTRUCTER

                   */

                  public function nativetoast(context:View, textToDisplay:String, timeOut:Number = 3000, width:Number = 200, height:Number = 30, color:String = '#000000', x:Number = NaN, y:Number = NaN):void

                  {

                      super();

                     

                      // TIMER TO 'REMOVE' TOAST AFTER THE SPECIFIED 'TIMEOUT'

                      var timer:Timer = new Timer(timeOut, 1);

                      timer.addEventListener(TimerEvent.TIMER_COMPLETE, function(event:TimerEvent):void{

                          context.removeElementAt(context.numElements - 1);

                                         

                      });

                      timer.start();

                     

                      createUI(textToDisplay, color, width, height);

                     

                      // TOAST POSITION

                      positionToast(context);

                  }

                 

                 

                  /**

                   *  CREATE TOAST UI COMPONENTS

                   */

                  private function createUI(textToDisplay:String, color:String, width:Number, height:Number):void

                  {

                      selfProperties(color, width, height);

                     

                      addText(textToDisplay);

                  }

                 

                  /**

                   * ASSIGNING ATTRIBUTES TO THE BASE CONTAINER

                   */

                  private function selfProperties(color:String, width:Number, height:Number):void

                  {

                      this.width=width;

                      this.height=height;

                      this.setStyle('backgroundAlpha','0.75');

                      this.setStyle('backgroundColor',color);

                      this.setStyle('borderColor','#565252');

                      this.setStyle('borderWeight','2');

                      this.setStyle('cornerRadius','7');

                     

                     

                      var vl:VerticalLayout = new VerticalLayout();

                      vl.horizontalAlign = "center";

                      vl.verticalAlign = "middle";

                      this.layout = vl;

                  }

                 

                  /**

                   *  CREATE LABEL

                   */

                  private function addText(textToDisplay:String):void

                  {

                      var lbl:Label = new Label();

                      lbl.setStyle('color','#EDEDED');

                      lbl.setStyle('fontSize','10');

                      lbl.setStyle('fontWeight','bold');

                      lbl.text = textToDisplay;

                      lbl.setStyle('textAlign', 'center');

                      lbl.width = this.width;

                     

                      this.addElement(lbl);

                  }

                 

                  /**

                   *  POSITIONING THE TOAST

                   */

                  private function positionToast(context:View):void

                  {

                      this.x = (context.width / 2) - (this.width / 2);

                      this.y = (context.height * 3 / 4) - (this.height / 2);

                     

                      // IF PREVIOUSLY ADDED COMPONENT IS A TOAST, RE-ORDER TO MANAGE TIMER

                      if(context.getElementAt(context.numElements - 1) is nativetoast)

                          context.addElementAt(this, context.numElements - 1);

                      else

                          context.addElement(this);

                  }

                 

              }

          }

           

          3. Now whereever you want this stuff to be displayed, just call

           

          new nativetoast( this, "Your Message Here " , 2000);

           

          Thanks for reading ! Enjoy Coding!@@!

          • 2. Re: Wanna create native message like android in flex 4.5.1  and fb 4.5 : is it possible?
            Jay.kishan

            Hey Dude!

             

                           As I see Toast Notification in Android Site(http://developer.android.com/guide/topics/ui/notifiers/toasts.html)You Can ues ToolTip Attribute of the specific component to View Toast Notification. See Exmple At http://livedocs.adobe.com/flex/3/html/help.html?content=tooltips_3.html

            • 3. Re: Wanna create native message like android in flex 4.5.1  and fb 4.5 : is it possible?
              rajesh_android Level 1

              Hello Jay,

              Thanks for your kind interest in this post. Toast is something like an alert or popup so we cannot relate it with tooltip. On the other hand i dont think android, being a touchscren device, supports tooltips. I will still work on it as i find it interesting.

              Thanks.