Skip to content
August 13, 2008 / Shrikant Patil

Flex Multi Column Text Container

Flex has a lots of text related built-in components, like Text, Label, TextArea etc. Every text component in flex display the text in one column. So i thought to create a component which support for multi columns to display the specified text.

My Component MultiColumnText extends the HBox container to display the columned text in horizontal layout. The component first check for the Column Delimeter i.e |*| in the text. Means you need to specify the column delimeter (|*|) in you text to mention the column break. Assume that you have three paragraphs of text and want to display each paragraph in seprate column, then you need to put the Column Delimeter i.e |*| at the end of each paragraphs. The component looks for thease Column Delimeters and splits the whole text into set of array, and put those sets of text into seprate column of component using Text component.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute" xmlns:com="com.*" creationComplete="init()">

		private function init():void{
			my.ColumnText = "As per HTML designer.|*| The trick HTML designer uses is|*|orizontal and vertical directions.";
	<com:MultiColumnText id="my" width="50%" height="100%" ColumnGap="80"/>

Here is the component source code:

The MultiColumnText provides a container in which
specified text fits within given number of coulmn Breaks
in the text.
package com
import mx.containers.HBox;
import mx.controls.Text;
* The MultiColumnText container gives a way of creating
* multi columned text specified by the columnbreak delimeter.
* it need to specify the column break delimeter ‘|*|’ in the
* text, where it needs to make a column break
* @mxml


public class MultiColumnText extends HBox
// Variables
private var text:String;
private var gap:int;
private var gapChanged:Boolean = false;
private var textChanged:Boolean = false;

// Constructor
public function MultiColumnText()

* A setter method to set the text with column break delimeter(|*|)
public function set ColumnText(txt:String):void{
textChanged = true;
text = txt;

public function get ColumnText():String{
return text;
* A setter method to set the gap between the columns
public function set ColumnGap(g:int):void{
gap = g;
gapChanged = true;

public function get ColumnGap():int{
return gap;

* @private
override protected function commitProperties():void{
var temp:String = new String();
var columnArray:Array = new Array();
columnArray = text.split(“|*|”);
for(var i:int=0; i


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: