5 Replies Latest reply on Dec 14, 2006 2:52 AM by Newsgroup_User

    extending UIComponent

    Level 7
      hi there,
      i´m trying to write a class extending the UIComponent class and firing
      "change" events using the dispatchEvent method.
      all works fine, but only if i have any other Component in the library,
      e.g. the Alert or Window component. if i delete this other component, my
      own class doesn´t fire events anymore.
      i´m sure it´s just a small thing i´m missing.

      thanx
      perry
        • 1. Re: extending UIComponent
          MotionMaker Level 1
          You need to be sure you have the EventDispatcher initialized probably in the constructor
          /*------------------------------------------------------------------------
          Initialize event dispatcher.
          ------------------------------------------------------------------------*/
          EventDispatcher.initialize(this);

          You add the requist functions to the class:
          /*------------------------------------------------------------------------
          Event listener interface
          ------------------------------------------------------------------------*/
          public var addEventListener:Function;
          public var removeEventListener:Function;
          public var dispatchEvent:Function;
          3. Import required classes:
          import mx.utils.Delegate;
          import mx.events.EventDispatcher;


          In addition to that you need to be sure the code using your class properly registers and also imports Delegate if you use Delegate in the addEventListener
          eg: theInstance.addEventListener( "onTheEventName", Delegate.create( this, this.theEventHandlerFunction ) );
          • 2. Re: extending UIComponent
            Level 7
            thanks for your answer.
            unfortunately things still don´t work.

            so here´s my updated code:
            ========================================

            [IconFile("SliderUI.png")]

            import mx.utils.Delegate;
            import mx.core.UIComponent;
            import mx.events.EventDispatcher;
            import mx.core.ext.UIObjectExtensions;

            [Event ("change")]
            class com.wildner.SliderUI extends UIComponent{

            static var symbolName = "SliderUI";
            static var symbolOwner = com.wildner.SliderUI;
            static var className = "SliderUI";


            [Inspectable(name="Default Value",variable="startwert",
            defaultValue="0", type="Number")]
            private var startwert:Number;
            private var wert:Number;

            private var scale:MovieClip;
            private var dragger:MovieClip;
            private var anzeige:TextField;

            private var isChanging:Boolean;

            public var dispatchEvent:Function;
            public var addEventListener:Function;
            public var removeEventListener:Function;

            public function Slider(){
            super.init();
            init();
            EventDispatcher.initialize(this);
            }


            private function init(){
            isChanging = false;
            scale = this.createEmptyMovieClip("scale",1);
            scale.lineStyle(1,0x000000);
            scale.moveTo(0,5);
            scale.lineTo(100,5);
            scale.moveTo(50,0);
            scale.lineTo(50,5);

            dragger = this.createEmptyMovieClip("dragger",2);
            dragger.lineStyle(1,0xFF0000);
            dragger.moveTo(-5,0);
            dragger.beginFill(0xFF0000);
            dragger.lineTo(0,5);
            dragger.lineTo(5,0);
            dragger.lineTo(-5,0);
            dragger.endFill();
            dragger.onPress = Delegate.create(this, d_press);
            dragger.onRelease = Delegate.create(this, d_release);
            dragger.onReleaseOutside = Delegate.create(this, d_release);
            dragger.onEnterFrame = Delegate.create(this, d_enterFrame);

            anzeige = this.createTextField("anzeige",3,74,-16,30,20);
            anzeige.align="right";
            anzeige.selectable=false;

            var tfm:TextFormat = new TextFormat();
            tfm.align = "right";
            anzeige.setNewTextFormat(tfm);

            this.setValue(startwert);
            }

            private function d_press(){
            dragger.startDrag(false,0,0,100,0);
            isChanging =true;
            }

            private function d_release(){
            dragger.stopDrag();
            isChanging = false;
            }

            function d_enterFrame(){
            if(isChanging){
            wert = Math.round(dragger._x);
            anzeige.text = String(wert);
            this.dispatchEvent({type:"change"});
            };
            }

            public function onLoad(){
            this.dispatchEvent({type:"change"});
            }

            public function getValue(){
            return wert;
            }

            public function setValue(v){
            wert = v;
            dragger._x = wert;
            anzeige.text = String(wert);
            this.dispatchEvent({type:"change",target:this});
            }
            }

            ===================================================

            a mc in my library is connected to my AS2 class and dropped onto stage
            manually

            using:

            on(change){trace(this);}

            only gets triggered if i have a "real" UIComponent in the library (e.g.
            Alert).

            still confused.

            perry


            MotionMaker schrieb:
            > You need to be sure you have the EventDispatcher initialized probably in the
            > constructor
            > /*------------------------------------------------------------------------
            > Initialize event dispatcher.
            > ------------------------------------------------------------------------*/
            > EventDispatcher.initialize(this);
            >
            > You add the requist functions to the class:
            > /*------------------------------------------------------------------------
            > Event listener interface
            > ------------------------------------------------------------------------*/
            > public var addEventListener:Function;
            > public var removeEventListener:Function;
            > public var dispatchEvent:Function;
            > 3. Import required classes:
            > import mx.utils.Delegate;
            > import mx.events.EventDispatcher;
            >
            >
            > In addition to that you need to be sure the code using your class properly
            > registers and also imports Delegate if you use Delegate in the addEventListener
            > eg: theInstance.addEventListener( "onTheEventName", Delegate.create( this,
            > this.theEventHandlerFunction ) );
            >
            • 3. Re: extending UIComponent
              Level 7
              thanks for your answer.
              unfortunately things still don?t work.

              so here?s my updated code:
              ========================================

              [IconFile("SliderUI.png")]

              import mx.utils.Delegate;
              import mx.core.UIComponent;
              import mx.events.EventDispatcher;
              import mx.core.ext.UIObjectExtensions;

              [Event ("change")]
              class com.wildner.SliderUI extends UIComponent{

              static var symbolName = "SliderUI";
              static var symbolOwner = com.wildner.SliderUI;
              static var className = "SliderUI";


              [Inspectable(name="Default Value",variable="startwert",
              defaultValue="0", type="Number")]
              private var startwert:Number;
              private var wert:Number;

              private var scale:MovieClip;
              private var dragger:MovieClip;
              private var anzeige:TextField;

              private var isChanging:Boolean;

              public var dispatchEvent:Function;
              public var addEventListener:Function;
              public var removeEventListener:Function;

              public function Slider(){
              super.init();
              init();
              EventDispatcher.initialize(this);
              }


              private function init(){
              isChanging = false;
              scale = this.createEmptyMovieClip("scale",1);
              scale.lineStyle(1,0x000000);
              scale.moveTo(0,5);
              scale.lineTo(100,5);
              scale.moveTo(50,0);
              scale.lineTo(50,5);

              dragger = this.createEmptyMovieClip("dragger",2);
              dragger.lineStyle(1,0xFF0000);
              dragger.moveTo(-5,0);
              dragger.beginFill(0xFF0000);
              dragger.lineTo(0,5);
              dragger.lineTo(5,0);
              dragger.lineTo(-5,0);
              dragger.endFill();
              dragger.onPress = Delegate.create(this, d_press);
              dragger.onRelease = Delegate.create(this, d_release);
              dragger.onReleaseOutside = Delegate.create(this, d_release);
              dragger.onEnterFrame = Delegate.create(this, d_enterFrame);

              anzeige = this.createTextField("anzeige",3,74,-16,30,20);
              anzeige.align="right";
              anzeige.selectable=false;

              var tfm:TextFormat = new TextFormat();
              tfm.align = "right";
              anzeige.setNewTextFormat(tfm);

              this.setValue(startwert);
              }

              private function d_press(){
              dragger.startDrag(false,0,0,100,0);
              isChanging =true;
              }

              private function d_release(){
              dragger.stopDrag();
              isChanging = false;
              }

              function d_enterFrame(){
              if(isChanging){
              wert = Math.round(dragger._x);
              anzeige.text = String(wert);
              this.dispatchEvent({type:"change"});
              };
              }

              public function onLoad(){
              this.dispatchEvent({type:"change"});
              }

              public function getValue(){
              return wert;
              }

              public function setValue(v){
              wert = v;
              dragger._x = wert;
              anzeige.text = String(wert);
              this.dispatchEvent({type:"change",target:this});
              }
              }

              ===================================================

              a mc in my library is connected to my AS2 class and dropped onto stage
              manually

              using:

              on(change){trace(this);}

              only gets triggered if i have a "real" UIComponent in the library (e.g.
              Alert).

              still confused.

              perry


              • 4. Re: extending UIComponent
                Level 7
                thanks for your answer.
                unfortunately things still don´t work.

                so here´s my updated code:
                ========================================

                [IconFile("SliderUI.png")]

                import mx.utils.Delegate;
                import mx.core.UIComponent;
                import mx.events.EventDispatcher;
                import mx.core.ext.UIObjectExtensions;

                [Event ("change")]
                class com.wildner.SliderUI extends UIComponent{

                static var symbolName = "SliderUI";
                static var symbolOwner = com.wildner.SliderUI;
                static var className = "SliderUI";


                [Inspectable(name="Default Value",variable="startwert",
                defaultValue="0", type="Number")]
                private var startwert:Number;
                private var wert:Number;

                private var scale:MovieClip;
                private var dragger:MovieClip;
                private var anzeige:TextField;

                private var isChanging:Boolean;

                public var dispatchEvent:Function;
                public var addEventListener:Function;
                public var removeEventListener:Function;

                public function Slider(){
                super.init();
                init();
                EventDispatcher.initialize(this);
                }


                private function init(){
                isChanging = false;
                scale = this.createEmptyMovieClip("scale",1);
                scale.lineStyle(1,0x000000);
                scale.moveTo(0,5);
                scale.lineTo(100,5);
                scale.moveTo(50,0);
                scale.lineTo(50,5);

                dragger = this.createEmptyMovieClip("dragger",2);
                dragger.lineStyle(1,0xFF0000);
                dragger.moveTo(-5,0);
                dragger.beginFill(0xFF0000);
                dragger.lineTo(0,5);
                dragger.lineTo(5,0);
                dragger.lineTo(-5,0);
                dragger.endFill();
                dragger.onPress = Delegate.create(this, d_press);
                dragger.onRelease = Delegate.create(this, d_release);
                dragger.onReleaseOutside = Delegate.create(this, d_release);
                dragger.onEnterFrame = Delegate.create(this, d_enterFrame);

                anzeige = this.createTextField("anzeige",3,74,-16,30,20);
                anzeige.align="right";
                anzeige.selectable=false;

                var tfm:TextFormat = new TextFormat();
                tfm.align = "right";
                anzeige.setNewTextFormat(tfm);

                this.setValue(startwert);
                }

                private function d_press(){
                dragger.startDrag(false,0,0,100,0);
                isChanging =true;
                }

                private function d_release(){
                dragger.stopDrag();
                isChanging = false;
                }

                function d_enterFrame(){
                if(isChanging){
                wert = Math.round(dragger._x);
                anzeige.text = String(wert);
                this.dispatchEvent({type:"change"});
                };
                }

                public function onLoad(){
                this.dispatchEvent({type:"change"});
                }

                public function getValue(){
                return wert;
                }

                public function setValue(v){
                wert = v;
                dragger._x = wert;
                anzeige.text = String(wert);
                this.dispatchEvent({type:"change",target:this});
                }
                }

                ===================================================

                a mc in my library is connected to my AS2 class and dropped onto stage
                manually

                using:

                on(change){trace(this);}

                only gets triggered if i have a "real" UIComponent in the library (e.g.
                Alert).

                still confused.

                perry


                MotionMaker schrieb:
                > You need to be sure you have the EventDispatcher initialized probably
                in the
                > constructor
                >
                /*------------------------------------------------------------------------
                > Initialize event dispatcher.
                >
                ------------------------------------------------------------------------*/
                > EventDispatcher.initialize(this);
                >
                > You add the requist functions to the class:
                >
                /*------------------------------------------------------------------------
                > Event listener interface
                >
                ------------------------------------------------------------------------*/
                > public var addEventListener:Function;
                > public var removeEventListener:Function;
                > public var dispatchEvent:Function;
                > 3. Import required classes:
                > import mx.utils.Delegate;
                > import mx.events.EventDispatcher;
                >
                >
                > In addition to that you need to be sure the code using your class
                properly
                > registers and also imports Delegate if you use Delegate in the
                addEventListener
                > eg: theInstance.addEventListener( "onTheEventName", Delegate.create(
                this,
                > this.theEventHandlerFunction ) );
                >
                • 5. Re: extending UIComponent
                  Level 7
                  well, i figured it out:

                  EventDispatcher.initialize(this);

                  has to be in the init() method, not in the constructor.
                  that does the trick.

                  wasn´t aware that init() is a predefined method.





                  Perry schrieb:
                  > thanks for your answer.
                  > unfortunately things still don´t work.
                  >
                  > so here´s my updated code:
                  > ========================================
                  >
                  > [IconFile("SliderUI.png")]
                  >
                  > import mx.utils.Delegate;
                  > import mx.core.UIComponent;
                  > import mx.events.EventDispatcher;
                  > import mx.core.ext.UIObjectExtensions;
                  >
                  > [Event ("change")]
                  > class com.wildner.SliderUI extends UIComponent{
                  >
                  > static var symbolName = "SliderUI";
                  > static var symbolOwner = com.wildner.SliderUI;
                  > static var className = "SliderUI";
                  >
                  >
                  > [Inspectable(name="Default Value",variable="startwert",
                  > defaultValue="0", type="Number")]
                  > private var startwert:Number;
                  > private var wert:Number;
                  >
                  > private var scale:MovieClip;
                  > private var dragger:MovieClip;
                  > private var anzeige:TextField;
                  >
                  > private var isChanging:Boolean;
                  >
                  > public var dispatchEvent:Function;
                  > public var addEventListener:Function;
                  > public var removeEventListener:Function;
                  >
                  > public function Slider(){
                  > super.init();
                  > init();
                  > EventDispatcher.initialize(this);
                  > }
                  >
                  >
                  > private function init(){
                  > isChanging = false;
                  > scale = this.createEmptyMovieClip("scale",1);
                  > scale.lineStyle(1,0x000000);
                  > scale.moveTo(0,5);
                  > scale.lineTo(100,5);
                  > scale.moveTo(50,0);
                  > scale.lineTo(50,5);
                  >
                  > dragger = this.createEmptyMovieClip("dragger",2);
                  > dragger.lineStyle(1,0xFF0000);
                  > dragger.moveTo(-5,0);
                  > dragger.beginFill(0xFF0000);
                  > dragger.lineTo(0,5);
                  > dragger.lineTo(5,0);
                  > dragger.lineTo(-5,0);
                  > dragger.endFill();
                  > dragger.onPress = Delegate.create(this, d_press);
                  > dragger.onRelease = Delegate.create(this, d_release);
                  > dragger.onReleaseOutside = Delegate.create(this, d_release);
                  > dragger.onEnterFrame = Delegate.create(this, d_enterFrame);
                  >
                  > anzeige = this.createTextField("anzeige",3,74,-16,30,20);
                  > anzeige.align="right";
                  > anzeige.selectable=false;
                  >
                  > var tfm:TextFormat = new TextFormat();
                  > tfm.align = "right";
                  > anzeige.setNewTextFormat(tfm);
                  >
                  > this.setValue(startwert);
                  > }
                  >
                  > private function d_press(){
                  > dragger.startDrag(false,0,0,100,0);
                  > isChanging =true;
                  > }
                  >
                  > private function d_release(){
                  > dragger.stopDrag();
                  > isChanging = false;
                  > }
                  >
                  > function d_enterFrame(){
                  > if(isChanging){
                  > wert = Math.round(dragger._x);
                  > anzeige.text = String(wert);
                  > this.dispatchEvent({type:"change"});
                  > };
                  > }
                  >
                  > public function onLoad(){
                  > this.dispatchEvent({type:"change"});
                  > }
                  >
                  > public function getValue(){
                  > return wert;
                  > }
                  >
                  > public function setValue(v){
                  > wert = v;
                  > dragger._x = wert;
                  > anzeige.text = String(wert);
                  > this.dispatchEvent({type:"change",target:this});
                  > }
                  > }
                  >
                  > ===================================================
                  >
                  > a mc in my library is connected to my AS2 class and dropped onto stage
                  > manually
                  >
                  > using:
                  >
                  > on(change){trace(this);}
                  >
                  > only gets triggered if i have a "real" UIComponent in the library (e.g.
                  > Alert).
                  >
                  > still confused.
                  >
                  > perry
                  >
                  >
                  > MotionMaker schrieb:
                  > > You need to be sure you have the EventDispatcher initialized probably
                  > in the
                  > > constructor
                  > >
                  > /*------------------------------------------------------------------------
                  > > Initialize event dispatcher.
                  > >
                  > ------------------------------------------------------------------------*/
                  > > EventDispatcher.initialize(this);
                  > >
                  > > You add the requist functions to the class:
                  > >
                  > /*------------------------------------------------------------------------
                  > > Event listener interface
                  > >
                  > ------------------------------------------------------------------------*/
                  > > public var addEventListener:Function;
                  > > public var removeEventListener:Function;
                  > > public var dispatchEvent:Function;
                  > > 3. Import required classes:
                  > > import mx.utils.Delegate;
                  > > import mx.events.EventDispatcher;
                  > >
                  > >
                  > > In addition to that you need to be sure the code using your class
                  > properly
                  > > registers and also imports Delegate if you use Delegate in the
                  > addEventListener
                  > > eg: theInstance.addEventListener( "onTheEventName", Delegate.create(
                  > this,
                  > > this.theEventHandlerFunction ) );
                  > >