6 Replies Latest reply on Feb 13, 2008 9:03 AM by Rothrock

    Custom Button Class

    Rothrock Level 5
      I'm experimenting with creating a simple custom button class. I will have a movieclip in the library set to export as an instance of this class. The class will handle the onRollOver, onRollOut, etc. Of course I will want to have some code in my FLA that will do specific things onPress/onRelease and so on.

      I've got it up and working fairly well. In my class I'm using the EventDispatcher to dispatch the various events. And this is the part where it becomes much more cumbersome than the traditional button. To catch the events dispatch I have to addEventListener for each button and for each event I want to listen to. Is that correct. So for example, if I have a cancel button and a submit button I will have to do this:

      var listener:Object = new Object();
      listener.submit=function(event){ // some submit code here};
      listener.cancel=function(event){ // some cancel here};

      submitButton.addEventListener("release",listener.submit);
      cancelButton.addEventListener("release",listener.cancel);

      hmmmm, looking at it and it doesn't seem too bad. but of course if I wanted to do other things for the other events it would start getting a bit much. So I guess I'm asking if this is a route others have gone down and found the trade off worth it? Or is there a better way?

        • 1. Re: Custom Button Class
          Greg Dove Level 4
          I'm not sure if this will be helpful because I don't always follow 'best practice' .... but anyhow:
          I did something just recently where I wanted to dispatch events from a static class that maintained a collection of 'watcher' items (similar in concept to object.watch but a little more lazy... they only check for property value changes infrequently ...the frequency is based on a priority setting). The actual source of the 'event' is the watcher check, but instead of dispatching events with the names of the properties that had a change I marshalled them through the static class as of event type 'watcher' with the specific information relating to the source of the event included as additional properties in the event object. This means I set up a listener for one source instead of several different watcher items. Whether this is good coding or not I don't know... but it seemed sensible at the time lol.

          I think the way you're doing it is fine. I wonder if it might be helpful to have a static class with button roles defined and have a role property on the buttons. If the role is defined then it could dispatch an event that is based on the button's role. E.g.
          submitButton.role = ButtonRoles.SUBMIT (constant value for "submit", perhaps have a range of other common ones like "ok", "cancel" etc)

          inside the button class (e.g. onRelease excerpt):
          var evtType = (this.role!=null)? this.role:"release"; //defaults to release event if the button has no role
          dispatchEvent({type:evtType ,target:this});

          Again I'm not sure if this is good coding but I think I would find the resulting code easier to read..

          submitButton.role=ButtonRoles.SUBMIT;
          cancelButton.role=ButtonRoles.CANCEL;
          submitButton.addEventListener(ButtonRoles.SUBMIT,listener);
          cancelButton.addEventListener(ButtonRoles.CANCEL,listener);
          • 2. Re: Custom Button Class
            Level 7
            Hi Rothrock, I think what you have is pretty good, but I'm not sure you need
            EventDispatcher, especially if you think it's making things cumbersome. I
            use a custom button class in many of my projects - it extends MovieClip.
            It's got mouse handlers that do whatever (change color in my case) and a
            setText method so I can have unique labels. Then I just add onRelease
            handlers to them like normal. For instance, if I have a Save button I'd do
            something like so:

            btnSave.setText("Save");
            btnSave.onRelease = function(){//do stuff};

            That's what I do anyway.

            --
            Dave -
            Head Developer
            http://www.blurredistinction.com
            Adobe Community Expert
            http://www.adobe.com/communities/experts/


            • 3. Re: Custom Button Class
              Rothrock Level 5
              GWD - Thanks. What I have is similar to what you have suggested, but I need to keep it pretty generic. These buttons will be used by several different people in all sorts of places that I can't even guess.

              Dave - That had been one of my first thoughts too. But if I use the event handlers in my FLA like that, the class's event is over-ridden/masked and doesn't occur. Doesn't that happen to you? Or do you just compensate for it in the "//do stuff" part?

              The more I'm thinking about it, it seems that really I'm just adding one more line (the creation of the listener object) and typing:

              submitButton.addEventListener("release",listener.submit);

              instead of

              submitButton.onRelease=submitRelease;

              Thanks for the input. If anybody's got more...

              • 4. Re: Custom Button Class
                Rothrock Level 5
                I also just realized that if you squint a bit, this looks just like the code to do the samething in AS3. So it is kinda a sneaky way to get the project I'm working with ready for that in a couple of years!
                • 5. Re: Custom Button Class
                  Damon Edwards Level 3
                  "I also just realized that if you squint a bit,"

                  If I squint and look at it, it looks like little tiny mountains :)
                  • 6. Re: Custom Button Class
                    Rothrock Level 5
                    ;)

                    Realizing that it looked like the AS3 syntax and that in AS3 you don't have to bother with creating a listener object and then attaching all your methods/functions to that object...

                    It got me to thinking. Well isn't the clip/maintimeline as good an object as any? So is there any reason I can't do this:

                    function submit(event:Object){
                    trace("submitted");
                    }

                    myButton.addEventListener("release",submit);

                    It seems to work. Is there any drawback? It just seems so much cleaner.