You have created a simple form and rather than left to right, you wanted to change the tab sequence a bit, but how to do that?
Source code of the main application file - SimpleTabSequence.mxml<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="creationCompleteEvent(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
/*
When the laste checkbox has been selected, we
will change the tab sequence from top to bottom,
else it will be bottom to top.
*/
protected function rdoChangeHandler(event:Event):void
{
if(chk1.selected)
{
setupSeq();
}else{
setupSeq(false);
}
}
// Upon CreationComplete, setup the tab sequence from
// top to bottom.
protected function creationCompleteEvent(e:FlexEvent):void
{
setupSeq();
}
/*
Most of the work will be done here. It will assign
the tabIndex of all the components and it will also
remove one of the checkbox from the tab sequence
upon selection.
*/
private function setupSeq(isTopdown:Boolean = true):void
{
if(isTopdown)
{
txtTxt0.tabIndex = 1;
txtTxt1.tabIndex = 2;
btn0.tabIndex = 3;
txtTxt2.tabIndex = 4;
btn1.tabIndex = 5;
if(!chk0.selected)
{
chk0.tabIndex = 6;
chk1.tabIndex = 7;
}else{
chk1.tabIndex = 6;
}
}else{
if(!chk0.selected)
{
txtTxt0.tabIndex = 7;
txtTxt1.tabIndex = 6;
btn0.tabIndex = 5;
txtTxt2.tabIndex = 4;
btn1.tabIndex = 3;
chk0.tabIndex = 2;
}else{
txtTxt0.tabIndex = 6;
txtTxt1.tabIndex = 5;
btn0.tabIndex = 4;
txtTxt2.tabIndex = 3;
btn1.tabIndex = 2;
}
chk1.tabIndex = 1;
}
chk0.tabFocusEnabled = !chk0.selected;
lblTxt0.text = "Textfield(" + txtTxt0.tabIndex + ")";
lblTxt1.text = "Textfield(" + txtTxt1.tabIndex + ")";
btn0.label = "Does Nothing(" + btn0.tabIndex + ")";
lblTxt2.text = "Textfield(" + txtTxt2.tabIndex + ")";
btn1.label = "Not going to do anything(" +
btn1.tabIndex + ")";
if(!chk0.selected)
{
chk0.label = "Checking will remove this " +
"from tabbing(" + chk0.tabIndex + ")";
}else{
chk0.label = "Checking will remove this " +
"from tabbing";
}
chk1.label = "Tabbing Sequence Is Top To " +
"Bottom(" + chk1.tabIndex + ")";
}
]]>
</fx:Script>
<!-- Just a list of components -->
<s:VGroup width="100%" height="100%"
verticalAlign="middle" horizontalAlign="center">
<s:VGroup width="300" height="100%"
verticalAlign="middle" horizontalAlign="center">
<s:HGroup width="100%"
horizontalAlign="center"
verticalAlign="middle">
<s:Label id="lblTxt0"/>
<s:TextInput id="txtTxt0"/>
<s:Spacer width="100%"/>
<s:Label id="lblTxt1"
text=""/>
<s:TextInput id="txtTxt1"/>
</s:HGroup>
<s:HGroup width="100%"
horizontalAlign="center">
<s:Button id="btn0" />
</s:HGroup>
<s:HGroup width="100%"
horizontalAlign="center"
verticalAlign="middle">
<s:Label id="lblTxt2"/>
<s:TextInput id="txtTxt2"/>
</s:HGroup>
<s:HGroup width="100%"
horizontalAlign="center">
<s:Button id="btn1"/>
</s:HGroup>
<s:HGroup width="100%"
horizontalAlign="center">
<s:CheckBox id="chk0"
change="rdoChangeHandler(event)" />
</s:HGroup>
<s:HGroup width="100%"
horizontalAlign="center">
<s:CheckBox id="chk1"
selected="true"
change="rdoChangeHandler(event)" />
</s:HGroup>
</s:VGroup>
</s:VGroup>
</s:Application>
* Click here for the demo shown in this post.^ Click here for the source files for the demo.
