1

I'm trying to create the following component:

enter image description here

Just for information, the blank space will contain a text control, and I'm creating a component that represents the black corner with the (i) icon and the "promotion" text.
The part I'm having issues with is this component representing the black corner with the diagonal text. The text has to be able to hold 2 lines. And the black corner has to be able to adjust to the text's size. What's more, the text has a rotation...

I'm having some doubts on how to do this:

  • Should I have different controls for each text line?
  • Should I draw the text in the shape (after doing the rotation) or should I just overlap both components? [When I talk about drawing the text in the shape, I mean in the same way as asked in this question]
  • Is there any way to get the proper size of the triangle shape without doing some extravagant calculations?

And... do you have any "easier" ways to do this ?

A big thanks for any help you can provide :) I'm a little bit lost with this little component :)

Regards.
BS_C3

Edit 1:

  • The triangle may have 2 sizes: 1 size that will fit 1 line, and another size to fit 2 lines of text.
  • The text will be sent as a single string, so it will have to be automatically divided in two lines if needed
  • I was thinking of using graphics to draw the triangle shape and then use a mask to create the rounded corner --> This is because the same component will be used in other places of the application without the rounded corner
Community
  • 1
  • 1
BS_C3
  • 385
  • 1
  • 6
  • 23
  • What are the rules for how the text should "adjust it's size" I think the only real issue here is determining a solid set of rules and laying them out with whomever mandated the creation of this component. You need to have something constrained or user controlled in order to solve the problem. For example say this comment were in the control, is it meant to evenly divide this whole text block across two lines (in terms of characters or line width or proportional based on the triangle dimensions, is the triangle ever allowed to change size or dimensions?) Need more constraints. – shaunhusain Mar 30 '11 at 17:25
  • Hi shaunhusain. There are indeed a couple of rules. The triangle shape will have 2 different dimensions: when it has 1 line of text and when it has 2 lines of text. The text will be sent by the back office as a single string, that will have to be automatically divided evenly in the whole text block if it does not fit in one single line (it will just be troncated if it does not fit in two lines). – BS_C3 Mar 31 '11 at 08:26

2 Answers2

0

Flex is pretty good at updating group components to whatever size thier contents become, updating dynamically on the fly..

for what your suggesting, I'd probably create the "Promotion" group in the corner as a rectangle, rotate it and fit it to the corner like you want, then using a copy of the rounded rect you use as the maing component background, i'd make a mask to cut the "Promotion" component so you don't see the overlap.

loogie
  • 151
  • 1
  • 4
  • Hi Loogie, thanks for your answer. I didn't think of using a rounded rectangle as the main component for the corner. And even if I did, I still wouldn't know how to position the mask... >. – BS_C3 Mar 31 '11 at 08:21
0

Well, I finally wrote the class and this is the result:

public class Corner extends Canvas
{
    private var infoIcon:Image;
    private var text:Text;
    private var triangle:Shape;
    private var bgColor:uint;

    public function Corner()
    {
        super();

        infoIcon = new Image;

        text = new Text;
        text.rotation = -45;
        text.width = 75;
        text.maxHeight = 30;
        text.setStyle('color', '0xffffff');
        text.setStyle('textAlign', 'center');
        text.y = 53;

        this.addChild(infoIcon);
        this.addChild(text);

        triangle = new Shape;
    }

    public function build(bgColor:uint = 0x61113D):void{
        this.bgColor = bgColor;

        // info icon data

        // set text     
        text.addEventListener(FlexEvent.UPDATE_COMPLETE, textHandler);
        text.text = 'blabla';
        text.validateNow();
    }

    /**
     * 
     */
    private function textHandler(e:FlexEvent):void{
        switch(e.type){
            case FlexEvent.UPDATE_COMPLETE:
                text.removeEventListener(FlexEvent.UPDATE_COMPLETE, textHandler);
                drawTriangle();
                break;
        }
    }

    /**
     * 
     */
    private function drawTriangle():void{
        var h:int = 80;
        // check if the text has 1 or 2 lines
        if(text.height > 20)
            h = 95;

        // remove the triangle shape if it exists
        if(this.rawChildren.contains(triangle))
            this.rawChildren.removeChild(triangle);

        // draw triangle
        triangle = new Shape; 
        triangle.graphics.moveTo(0, 0);
        triangle.graphics.beginFill(bgColor);
        triangle.graphics.lineTo(h, 0);
        triangle.graphics.lineTo(0, h);
        triangle.graphics.lineTo(0, 0);
        triangle.graphics.endFill();

        this.rawChildren.addChildAt(triangle,0);

        dispatchEvent(new MyEvent(MyEvent.CORNER_UPDATED));
    }

    ...

}
BS_C3
  • 385
  • 1
  • 6
  • 23