6 Replies Latest reply on May 16, 2011 5:34 AM by Nishant Jha28

    Select different style for each border of a rectangle

    JeffSop

      Hi,

       

      I just wanted to have a Rectangle (or some other component) which one must have different style for each of its borders.

      For example I want the top and the right border with a thickness of 2 and others with a thickness of 0 (so we can only see those two borders).

       

      How can I do it ?

      I tried with stroke (but stroke is for all borders, we can't specify which style for which border).

       

      Thanks,

       

      Jeff

        • 1. Re: Select different style for each border of a rectangle
          CleanCoder

          The only method I am aware of is to use 2 paths and 2 filles to create the effect. The second path/fill punches out a hole in the first path/fill leaving only the edges of the first path/fill visible. Check out the source code for UIComponent and look at the "drawRoundRect" function. Notice how it takes a "hole" object as its last argument. By setting the "dimensions" of the hole object you can create the different border sizes you require.

          • 2. Re: Select different style for each border of a rectangle
            Nishant Jha28

            I think you need it in a Container...

            Use HBox or VBox.

            you have to provide the following

            borderStyle ="Solid", borderColor, borderThickness and borderSides.

             

            If i want top and bottom border,

            borderSides: top, bottom in css or

            borderSides="top, bottom" in mxml

             

            In case you want just rects you would have to use graphics.lineTo() and moveTo() in updateDisplayList and draw the lines

            • 3. Re: Select different style for each border of a rectangle
              CleanCoder Level 2

              Cant say I agree with using a Container (an old MX Container at that), especially just to create a rectangle with different sides.

              • 4. Re: Select different style for each border of a rectangle
                Nishant Jha28 Level 2

                Well it is not clear what he is looking for just rect or a component with specific border. I havnt used flex 4 so i am not sure how to get it working for that

                , but i am sure it will work on the same lines.

                 

                I have also given another option to create a it using lineTo() and moveTo().But this should only be used if this rect is not going to be used as a container.

                 

                I think i should elaborate...

                Create a custom component using UIComponent. In updateDisplayList() after super.updateDisplayList() call a method say drawRect(). In this drawRect() use lineTo() and moveTo() to draw the rectangle. you would have to use the component's height and width to draw the rect.

                 

                Let me know if you need more clearification...

                • 5. Re: Select different style for each border of a rectangle
                  JeffSop Level 1

                  Thanks for your answers.

                   

                  For now, I have done it using lines.

                  In fact I'm using it in an itemRenderer of a DataGrid, so for each cell in the grid, I have to draw or not borders.

                   

                  My only problem now is about performance because with this solution (even before drawing the borders), performance of the grid is not up to the mark, for example, change of selection is not real time (along with mouse cursor movement).

                   

                  I have just started learning Flex, so maybe there are some best practices...

                   

                  Jeff

                  • 6. Re: Select different style for each border of a rectangle
                    Nishant Jha28 Level 2

                    When it come to ItemRenderers avoid using containers. They are bulky.

                     

                    Go with te updateDisplyList approach that is right way to go for the same.

                     

                    If you wish to reuse this component better create a string property/style that takes the sides as input.