20 Replies Latest reply on Mar 22, 2007 8:58 AM by Gboro54

    box divider???

    Gboro54 Level 1
      Hey you know how you can create an HDividedBox or VDividedBox and you can live drag to resize the panels. I was wondering if there was anyway to change the space inbetween the two panels as the make it more visible to the users instead of just that little strip.

      Thanks
        • 1. Re: box divider???
          Gboro54 Level 1
          livedrag is set to true... This is what i need it to be set on
          • 2. Re: box divider???
            Gboro54 Level 1
            I have got the space filled now and able to do what i want to do. I want to know now if there is a way to get rid of that knob in live drag or atleast change its image to something that i can blend into my strip. Any suggestions are welcomed. I have tried a lot of things. Divder Alpha, and divider skin(though i think this could stil be in an option i need to read up on skins a little more) Thanks for all your help
            • 3. Re: box divider???
              EliteScientist Level 1
              create a class and extend ProgrammaticSkin

              override updateDisplaylist and draw your skin using the graphics object.

              also override measured height and measured with and return the width and height of what you are drawing...
              • 4. Re: box divider???
                Gboro54 Level 1
                something like this???:
                package
                {
                import flash.display.Graphics;
                import mx.skins.Border;
                import mx.skins.ProgrammaticSkin;
                import mx.styles.StyleManager
                //this will attempt to cover up the knob when the live drag featue is activated.
                public class Disaper extends ProgrammaticSkin
                {
                public function Disaper()
                {
                //TODO: implement function
                super();
                }
                override protected function updateDisplaylist (w:Number, h:Number):void
                {
                var g:Graphics= graphics;
                g.clear();
                g.beginFill(0x8000ff,1.0);
                g.drawRect(0, 0, w, h);
                g.endFill();

                }
                }
                }

                then how to i force my DividedBoxes to use that as a skin??? Thanks for all your help.
                • 5. Re: box divider???
                  Gboro54 Level 1
                  I am not quite sure how to override the measuredHeight and measuredWidth method: Here is an update on my code... All i am trying to do is draw a colored rectangle and set it for the skin of a Horizontal divided box or a vertical divided box so i can make that know disaper in live drag. here is what i have:

                  package
                  {
                  import flash.display.Graphics;
                  import mx.skins.Border;
                  import mx.skins.ProgrammaticSkin;
                  import mx.styles.StyleManager
                  //this will attempt to cover up the knob when the live drag featue is activated.
                  public class Disaper extends ProgrammaticSkin
                  {


                  public function Disaper()
                  {
                  //TODO: implement function
                  super();


                  }
                  override protected function updateDisplayList (w:Number, h:Number):void
                  {

                  var g:Graphics= graphics;
                  g.clear();
                  g.beginFill(0x8000ff,1.0);
                  g.drawRect(0, 0, w, h);
                  g.endFill();

                  }
                  override public function get measuredWidth():Number {
                  }

                  override public function get measuredHeight():Number {
                  }

                  }
                  }
                  • 6. Re: box divider???
                    Gboro54 Level 1
                    Thanks for the help BaTMaNX...I got it working perfectly now...
                    • 7. Re: box divider???
                      Gboro54 Level 1
                      I have another question... The disaper at this time(as it is stated above) will make the divider disaper.. Is there a way to change the skin the draw colored bar between as the divider instead of using text boxed...This would make life 100 times eaiser instead of making it disapear and then drawing a textArea behind the divided box.
                      • 8. Re: box divider???
                        Gboro54 Level 1
                        Here is the code that just makes the know disaper... I am not sure what to over right the measuredHeight and measured Width with and if there is anything else i need let me know:

                        package
                        {
                        import flash.display.Graphics;
                        import mx.skins.Border;
                        import mx.skins.ProgrammaticSkin;
                        import mx.styles.StyleManager
                        //this will attempt to cover up the knob when the live drag featue is activated.
                        public class Disaper extends ProgrammaticSkin
                        {


                        public function Disaper()
                        {
                        //TODO: implement function
                        super();
                        //this.width = width;
                        //this.height = height;

                        }
                        override protected function updateDisplayList (w:Number, h:Number):void
                        {
                        super.updateDisplayList(h, w);

                        var g:Graphics=graphics;
                        g.clear();
                        g.beginFill(0x8000ff,1.0);
                        g.drawRect(0, 0, w, h);
                        g.endFill();

                        }
                        override public function get measuredWidth():Number {
                        }

                        override public function get measuredHeight():Number {
                        }

                        }
                        }
                        • 9. Re: box divider???
                          EliteScientist Level 1
                          In your divided box declaration set dividerSkin to your class...

                          for get measured width and measuredHeight, return an integer... which is hte height and width of whatever you were drawing.

                          in your updateDisplayList override, that is where u draw the skin using vectors.

                          if your divided box is horizontal, then you have to draw your skin taking in consideration that it is rotated 90 degrees...
                          • 10. Re: box divider???
                            Gboro54 Level 1
                            So i should not use the drawRect affect of should i??? I was looking to make this a generic for both vertical and horizontal but is that not possible any thing else i missed??
                            • 11. Re: box divider???
                              EliteScientist Level 1
                              try drawing it normally and see if it automatically rotates, it appears that there is code that should rotate it... if not then you'll have to check the direction then draw accordingly...

                              you can use any of the drawing methods in the Graphics class...
                              • 12. Re: box divider???
                                Gboro54 Level 1
                                Writing two seperate skins for a vertical and horizontal is not big deal... I am wondering more how i would pass the height, width and x,y coords in as so the user does not have to input them
                                • 13. box divider???
                                  EliteScientist Level 1
                                  measuredWidth and measuredHeight do not appear to have any immediate affect on the skin, it seems like it lets the container know what to expect.

                                  when I drew my skin to the screen I took the parent's height because the unscaledHeight was not giving me what I wanted....

                                  since it draws the skin from the center I had to start my x at -(parent.height / 2) + 1 so my bar starts at the top... and my y is -2 this is for the horizontal box, for vertical your swap the x and y, height and width...
                                  • 14. Re: box divider???
                                    Gboro54 Level 1
                                    override public function get measuredWidth():Number {
                                    return parent.width ;
                                    }

                                    override public function get measuredHeight():Number {
                                    return parent.height ;
                                    }

                                    then draw my rectangle with the parameters
                                    drawRect((parent.height/2)+1, -2, h, w);
                                    something like that or i am i thinking along the wrong lines still ???
                                    • 15. Re: box divider???
                                      EliteScientist Level 1
                                      try this... don't override measuredWidth and Height...

                                      draw your rect with x starting at (NEGATIVE) -(parent.height/2)+1
                                      instead of h use parent.height

                                      and width to how ever wide you want the bar to be...

                                      inside of measuredWidth you can return the integer as the width that you set the bar to be...

                                      I.E.

                                      drawRect(-(parent.height/2)+1, -2, parent.height, 3);
                                      • 16. Re: box divider???
                                        Gboro54 Level 1
                                        that is pretty much what i want...the only thing in need now is make 3 an input intead of having to type(though that is not so bad). The only other problem that is problaby not fixable is if the hdivider is bigger then the panels significatley the bar is really long but i don't think there is away around that...Thanks for all your help...Sorry to bug you so much but i am just starting to learn this stuff and just figureing stuff out as i got...thanks again and if you have any suggestions for the above let me know..thanks
                                        • 17. Re: box divider???
                                          EliteScientist Level 1
                                          before drawing add this line:

                                          var dividerThickness:Number = getStyle('dividerThickness');

                                          replace that 3 with dividerThickness... and set dividerThickness in your HDividedBox Declaration...
                                          • 18. Re: box divider???
                                            peterent Level 2
                                            quote:

                                            Originally posted by: Gboro54
                                            Hey you know how you can create an HDividedBox or VDividedBox and you can live drag to resize the panels. I was wondering if there was anyway to change the space inbetween the two panels as the make it more visible to the users instead of just that little strip.

                                            Thanks


                                            Honestly, I didn't read all of this thread, so if I'm off base, forgive me.

                                            If you want to change the spacing/size of the divider, use the style dividerAffordance; if you want to change the color use the style dividerColor and/or dividerAlpha.
                                            • 19. Re: box divider???
                                              Gboro54 Level 1
                                              I tried doing that and it really did not work to well...Since you did not read the whole thread what i am trying to do is to have the whole area filled inbetween divided boxes durning live drag instead of having just that little knob...The area is now filed but i have one more problem if you have two vertical divider boxes in a horizonal box the vertical cursors don't resize i tried calling dividerDrag, resize, data change and none have worked any sugestions from anyone???
                                              • 20. Re: box divider???
                                                Gboro54 Level 1
                                                any one have any ideas on the resize the skin as the panels are changed and keep them from just centering and staying the same size???