Flex 3 - Change box border colors

I have a question that might seem "basic" but I just cannot figure out how to do it...

I have a box and I'd like to change the borderColor. Till there, nothing special. Just a box.开发者_如何学编程bordercolor = xxxxxx...

BUT, I'd like to have the top and bottom border with one color, and the left and right border with another color... And that's the part where I'm stuck.

Any tips? Suggestions?

Thanks for your help and time! ;)

Regards, BS_C3

@Senz

Hi! Unfortunately, I won't be able to share the code without making it "incomprehensible"...

But this is the idea... We have 2 main components: ArrowButton and Navigator.

ArrowButton is a hbox containing a label and an image (this image is the arrow tip and it changes depeding on the state of the ArrowButton).

Navigator is a hbox containing a series of ArrowButton. An ArrowButton overlaps the arrowButton on its right in order to create the pointed end of the button.

And then you just create a whole bunch of functionnalities around these components.

I hope this helps... Do not hesitate if you have some more questions =)

Regards.

I noticed you are asking about the Flex 3 SDK. Skins are a good approach. They have changed somewhat in Flex 4(for the better IMHO). If you are wanting to use the Flex Drawing API, then just extend the Box class into a custom class that would look something like this:

public class MultiColorBorderBox extends Box
    {
                // You could add getters/setters or constructor parameters to be able to change these values.
            private var topColor:uint   = 0xFF0000;
            private var rightColor:uint = 0x00FF00;
            private var bottomColor:uint = 0x0000FF;
            private var leftColor:uint = 0xFF00FF;
            private var borderWidth:Number = 20;


        public function MultiColorBorderBox()
        {
            super();

        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            // This just ensures you dont have content under your border
            this.setStyle("paddingLeft", borderWidth);
            this.setStyle("paddingRight", borderWidth);
            this.setStyle("paddingTop", borderWidth);
            this.setStyle("paddingBottom", borderWidth);

            var g:Graphics = this.graphics;  // This creates a new Graphics object and sets it to the MultiColorBorderBox graphics object.  Since Box (superclass) descends from a Sprite object, it has a graphics object automatically.

            g.clear();
            g.moveTo(0,0);  // Moves the position to the top left corner
            g.lineStyle(borderWidth, topColor); // Sets the line style with the width and color
            g.lineTo(unscaledWidth, 0); // Draws the top border from top left to top right corners
            g.lineStyle(borderWidth, rightColor); // Changes the line style
            g.lineTo(unscaledWidth, unscaledHeight); // Draws the line from top right to bottom right
            g.lineStyle(borderWidth, bottomColor); //Changes the bottom border style
            g.lineTo(0, unscaledHeight); // Draws the line from bottom right to bottom left
            g.lineStyle(borderWidth, leftColor); // Changes the border color
            g.lineTo(0,0); // Closes the box by drawing from bottom left to top left            

        }

I'm pretty sure you're going to have to create a borderSkin to accomplish this. I believe these are created in an external program, such as Flash Professional; but more info is in the docs.

I don't think that Flex makes any distinction between top/bottom borders and left/right borders. Creating a skin would certainly be the nifty-slick way to do it. A programmatic way might be to use box.graphics to draw your border by hand. I'd start by trying to override the updateDisplayList() function to draw your border...

I finally did a pretty simple thing. I guess I wasn't detailed enough regarding the specifications.

The actual aim was to create a navigator with arrow shaped buttons. Each button had to be highlighted when it was selected. And this http://www.freeimagehosting.net/uploads/bcd0d762d7.jpg is how the navigator looked like.

Each button is actually an HBox containing a Box (with a label) and an Image (for the arrow tip), with a horizontalGap = 0.

I didn't think about adding a glowfilter to the button. So I was trying to just change the colors of the top and bottom part of the Box...

So, the glowfilter in the button worked pretty well.

Sorry for the lack of explanations about the context >_< And thanks for your answers!!

Regards.