Setting tab stops on RichText control in Flex 4

You can also set tabs in a RichText control by setting the text property and using \t, as seen in the following example:

"1.0" encoding="utf-8"?>  name="Spark_RichText_tabStops_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"         xmlns:s="library://ns.adobe.com/flex/spark"         xmlns:mx="library://ns.adobe.com/flex/halo">       >         >              label="direction:">                  id="dropDownList" requireSelection="true">                     >                          source="[ltr,rtl]" />                     >                 >             >         >     >        title="Spark RichText tabStops/tab test"             horizontalCenter="0" verticalCenter="0">          x="100" />          x="200" />          x="300" />            id="richTxt"                 text="Col 1{'\t'}Col 2{'\t'}Col 3{'\t'}Col 4"                 direction="{dropDownList.selectedItem}"                 tabStops="100 200 300"                 paragraphSpaceAfter="20"                 width="400" />     >   >

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

"1.0" encoding="utf-8"?>  name="Spark_RichText_tabStops_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"         xmlns:s="library://ns.adobe.com/flex/spark"         xmlns:mx="library://ns.adobe.com/flex/halo"         initialize="init();">       >         [CDATA[             import flashx.textLayout.formats.Direction;             import mx.collections.ArrayList;             import mx.containers.Form;             import mx.containers.FormItem;             import mx.controls.VRule;             import mx.core.FlexGlobals;             import spark.components.DropDownList;             import spark.components.Panel;             import spark.events.IndexChangeEvent;             import spark.primitives.RichText;               private var dropDownList:DropDownList;             private var pnl:Panel;             private var richTxt:RichText;               private function init():void {                 dropDownList = new DropDownList();                 dropDownList.dataProvider = new ArrayList([Direction.LTR, Direction.RTL]);                 dropDownList.requireSelection = true;                 dropDownList.addEventListener(IndexChangeEvent.CHANGE, dropDownList_change);                   var formItem:FormItem = new FormItem();                 formItem.label = "direction:";                 formItem.addElement(dropDownList);                   var form:Form = new Form();                 form.addElement(formItem);                   Application(FlexGlobals.topLevelApplication).controlBarContent = [form];                   richTxt = new RichText();                 richTxt.text = "Col 1\tCol 2\tCol 3\tCol 4";                 richTxt.setStyle("tabStops", "100 200 300");                 richTxt.setStyle("paragraphSpaceAfter", 20);                 richTxt.width = 400;                   var vRule1:VRule = new VRule();                 vRule1.x = 100;                   var vRule2:VRule = new VRule();                 vRule2.x = 200;                   var vRule3:VRule = new VRule();                 vRule3.x = 300;                   pnl = new Panel();                 pnl.title = "Spark RichText tabStops/tab test";                 pnl.horizontalCenter = 0;                 pnl.verticalCenter = 0;                 pnl.addElement(vRule1);                 pnl.addElement(vRule2);                 pnl.addElement(vRule3);                 pnl.addElement(richTxt);                 addElement(pnl);             }               protected function dropDownList_change(evt:IndexChangeEvent):void {                 richTxt.setStyle("direction", dropDownList.selectedItem);             }         ]]>     >   >

The following example shows how you can use tab stops on a Spark RichText primitive in Flex 4 by setting the tabStops style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, .

"1.0" encoding="utf-8"?>  name="Spark_RichText_tabStops_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"          xmlns:s="library://ns.adobe.com/flex/spark"          xmlns:mx="library://ns.adobe.com/flex/halo">     >         >              label="direction:">                  id="dropDownList" requireSelection="true">                     >                          source="[ltr,rtl]" />                     >                 >             >         >     >        title="Spark RichText tabStops/tab test"             horizontalCenter="0" verticalCenter="0">          x="100" />          x="200" />          x="300" />            id="richTxt"                 direction="{dropDownList.selectedItem}"                 tabStops="100 200 300"                 paragraphSpaceAfter="20"                 width="400">             >                  direction="ltr" fontWeight="bold">0px/>100px/>200px/>300px>                 >Col 1/>Col 2/>Col 3/>Col 4>             >         >     >   >