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
<br />
<mx:Script><br />
<![CDATA[<br />
import mx.core.UIComponent;</p>
<p> private static const ARROW_WIDTH:Number = 20;<br />
private static const ARROW_HEIGHT:Number = 20;</p>
<p> private function drawArrow(component:UIComponent):void<br />
{<br />
var arrow:UIComponent = new UIComponent();<br />
var arrowGraphics:Graphics = arrow.graphics;</p>
<p> arrowGraphics.lineStyle(0,0,0);<br />
arrowGraphics.beginFill(component.getStyle("borderColor") , 1); </p>
<p> // draw arrow<br />
arrowGraphics.moveTo(component.x+((component.width - ARROW_WIDTH)/2), component.y + component.height);<br />
arrowGraphics.lineTo(component.x+(component.width /2), component.y + component.height + ARROW_HEIGHT);<br />
arrowGraphics.lineTo(component.x+((component.width + ARROW_WIDTH)/2), component.y + component.height);<br />
arrowGraphics.lineTo(component.x+((component.width - ARROW_WIDTH)/2), component.y + component.height);<br />
arrowGraphics.endFill();</p>
<p> this.addChild(arrow);<br />
}</p>
<p> ]]><br />
</mx:Script></p>
<p><mx:Canvas id="canvas" width="100" height="100"<br />
borderColor="#FFFFFF" x="100" y="100" initialize="drawArrow(canvas)"<br />
borderThickness="5" backgroundColor="white"></p>
<p> <mx:Text<br />
color="black"<br />
fontWeight="bold"<br />
selectable="false"<br />
fontSize="15"<br />
paddingLeft="25" paddingTop="25"><br />
<mx:htmlText><br />
<![CDATA[Hello<br/>World]]><br />
</mx:htmlText><br />
</mx:Text></p>
<p></mx:Canvas><br />
Here’s a Little trick that shows you how to generate an image thumbnail during runtime from a VideoDisplay component, you can than create a server side proxy to save the image as a file or just use it as it is. Enjoy.
<mx:Script>
<![CDATA[
import mx.events.VideoEvent;
private function playheadUpdateHandler(event:VideoEvent):void {
var bmData:BitmapData = new BitmapData(100, 100);
bmData.draw(event.target as DisplayObject);
var bm:Bitmap = new Bitmap(bmData);
img.source = bm;
}
]]>
</mx:Script>
<mx:Canvas>
<mx:VideoDisplay id="videoDisplay"
source="someFlvVideo.flv"
playheadUpdate="playheadUpdateHandler(event); event.target.stop();"
visible="false" width="100" height="100" />
<mx:Image id="img" />
</mx:Canvas>
If you ever tried to remove the border from text input components such as TextInput or DateField you will find that whatever you do you cannot remove a line that look like a border from your top border. Anything you try such as:
dropShadowColor : “0xFFFFFF”;
dropShadowEnabled : “false”;
border-thickness-bottom : 0;
border-thickness-top : 0;
border-thickness-left : 0;
border-thickness-right : 0;
Or directly on the component such as;
borderColor=”white” borderThickness=”0″
You just can’t get the fu#$%$ borders off! The reason is that flex assign a border skin: borderSkin=”mx.skins.halo.HaloBorder” which will always going to leave a line on the top corner.
The solution is actually simple; create a skin and don’t draw anything leaving the skin borders empty, that will remove the borders, shadows etc;
package com.skins
{
import mx.skins.Border;
public class TextInputBorderlessSkin extends Border
{
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
}
}
}
Now you can assign the skin in your CSS to your component text input;
.BorderlessTextInput {
border-skin: ClassReference(”com.skins.TextInputBorderlessSkin”);
}
Play around with skins in Flex, you’ll have a lot of fun!
