3 Replies Latest reply on Nov 26, 2009 6:34 AM by David_F57

    Need help to create a custom control

    jibyalias

      Hi All

       

      I need to create a custom control in flex which is resizable and dragable. The thing is that I dont want extend any other control. It should look like a button and act like a label. It should be movable with the mose and resizable in horizontal way. How can I do this?

       

      I managed to create a button which extends the UIComponent. But the problem how will I make it resizable?

       

      I am new to flex, So any help or small examples would be of great help.

       

      Thanks

       

      Jiby

        • 1. Re: Need help to create a custom control
          David_F57 Level 5

          Hi,

           

          Just as a quick start

           

          http://gumbo.flashhub.net/sizer/  (view source enabled).

           

          this uses a skin to make a titlewindow resizable, its not about the skin as much as giving you a starting point for resizing code.

           

          if you look into the skin you will see these functions

           

          protected function sizer_mouseDownHandler(event:MouseEvent):void

          {

          OldX=event.stageX;

          OldY=event.stageY;

          systemManager.addEventListener(MouseEvent.MOUSE_MOVE,startResize);

          systemManager.addEventListener(MouseEvent.MOUSE_UP,endResize);

          }

           

          protected function endResize(event:MouseEvent):void

          {

          systemManager.removeEventListener(MouseEvent.MOUSE_MOVE,startResize);

          systemManager.removeEventListener(MouseEvent.MOUSE_UP,endResize);

          }

           

          private function startResize(event:MouseEvent): void

          {

          hostComponent.width -= OldX-event.stageX;

          hostComponent.height -= OldY-event.stageY;

          OldX=event.stageX;

          OldY=event.stageY;

          }

          The idea is to have a hit area on your custom component (a corner, or all corners). You capture the mouseposition when you mousedown then in the mouse move eventlistener you update the object size with the difference between current X and Y from initial X and Y.
          Hope this gets you started.
          David

          • 2. Re: Need help to create a custom control
            mewk

            The thing is that I dont want extend any other control.

            That's probably not the best way to go. Wouldn't recommend starting off with just the UIComponent unless you're positive no other control has any of the ui functionality you need (I doubt this).

             

            It should look like a button and act like a label.

            What??!?

             

            Oh, wait. you mean of course the labutton????

             

            Ok, as for ideas, I think David has you started in the right direction. There was a topic of discussion about how to resize a spark container (http://forums.adobe.com/thread/524469?tstart=0) and w/in the last couple o hours there was a discussion about dragging containers.

             

            Putting together David's skin (note: i'm not a big fan of all the code w/in the skin class, but what can you do??) and my previous draggable container, the appended swf/src files is what I've come up with (this is why I love oo and flex -- it took me less time to code this than it took me to find the pic!! ).

             

            The component isn't exactly what you wanted, but there should be enough in there to work off. Best o luck,

             

            - e

             

            [edit -- make sure to use the latest nightly builds or spark.components.titleWindow won't be defined]

            • 3. Re: Need help to create a custom control
              David_F57 Level 5

              @Mewk - I had to use a skin example, just for you , I thought you would have put the resize code into your component that would have been cool.

               

              David.