Vertical Label in Macromedia Flex

27 Apr 2005

Someone on Flexcoders asked, if it's possible to show vertical label or text like this:

S
H
O
P
P
I
N
G

I wrote a simple MXML VerticalLabel component. Yet another example which shows the power of MXML components.



1)VerticalLabelExample.mxml

<mx:Application width="800" height="600" xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:local="*">
<local:VerticalLabel fontSize="15" text="SHOPPING"/>
</mx:Application>

2)VerticalLabel.mxml

<mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Script>
import mx.controls.Label;
import mx.controls.TextInput;
import mx.controls.Text;
var text:String;
var textField;
function createChildren():Void
{
var n = text.length;
textField = createChild(Label,"textField");
textField.styleName = this;
for(var i=0;i<n;i++)
{
textField.text+= text.charAt(i) + "\r";
}
}
</mx:Script>
</mx:VBox>