Sometimes you need to add an arrow or other graphics elements into an existing Flex components. Here’s an example that shows you how to add an arrow to your component.

Add an arrow graphic to an existing Flex compoenent

<mx:Script>
    <![CDATA[
        import mx.core.UIComponent;
       private static const ARROW_WIDTH:Number = 20;
       private static const ARROW_HEIGHT:Number = 20;

       private function drawArrow(component:UIComponent):void
       {
            var arrow:UIComponent = new UIComponent();
            var arrowGraphics:Graphics = arrow.graphics;
            arrowGraphics.lineStyle(0,0,0);
            arrowGraphics.beginFill(component.getStyle("borderColor") , 1);

            // draw arrow
            arrowGraphics.moveTo(component.x+((component.width - ARROW_WIDTH)/2), component.y + component.height);
            arrowGraphics.lineTo(component.x+(component.width /2), component.y + component.height + ARROW_HEIGHT);
            arrowGraphics.lineTo(component.x+((component.width + ARROW_WIDTH)/2), component.y + component.height);
            arrowGraphics.lineTo(component.x+((component.width - ARROW_WIDTH)/2), component.y + component.height);
            arrowGraphics.endFill();
           this.addChild(arrow);
       }
   ]]>
</mx:Script>

<mx:Canvas id="canvas" width="100" height="100"
    borderColor="#FFFFFF" x="100" y="100" initialize="drawArrow(canvas)"
    borderThickness="5" backgroundColor="white">

    <mx:Text
        color="black"
        fontWeight="bold"
        selectable="false"
        fontSize="15"
        paddingLeft="25" paddingTop="25">
        <mx:htmlText>
            <![CDATA[Hello<br/>World]]>
        </mx:htmlText>
    </mx:Text>
</mx:Canvas>