[Flex3]Tabキーを押したときのフォーカスの移動順番の検証

画面上のコンポーネントに対しカーソルが当たっている状態で、Tabキーを押下した際に、 次のコンポーネントにフォーカスを移動させることができます。

VBox、HBox、Canvasコンテナにコンポーネントを配置したときに、Tabキーを押下した場合の遷移をそれぞれ検証してみました。

VBoxの場合

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:VBox height="100%">
  <mx:TextArea text="1"/>
  <mx:TextArea text="2"/>
  <mx:TextArea text="3"/>
  <mx:TextArea text="4"/>
  <mx:TextArea text="5"/>
 </mx:VBox>
</mx:Application>

サンプルのFlash

Vboxコンテナの場合は、上から下へ順に移動することが確認できます。
また、MXML上の配置と画面上の配置が同じためMXMLで配置した順＝Tabキー押下時にフォーカスが移動する順番になるようです。

HBoxの場合

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:HBox width="100%">
  <mx:TextArea text="1"/>
  <mx:TextArea text="2"/>
  <mx:TextArea text="3"/>
  <mx:TextArea text="4"/>
  <mx:TextArea text="5"/>
 </mx:HBox>
</mx:Application>

サンプルのFlash

Hboxコンテナの場合は、左から右へ順に移動することが確認できます。
また、MXML上の配置と画面上の配置が同じためMXMLで配置した順＝Tabキー押下時にフォーカスが移動する順番になるようです。

Canvasの場合

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Canvas width="60" height="60">
  <mx:TextArea x="0" y="0" width="20" height="20" text="1"/>
  <mx:TextArea x="20" y="0" width="20" height="20" text="2"/>
  <mx:TextArea x="40" y="0" width="20" height="20" text="3"/>
  <mx:TextArea x="0" y="20" width="20" height="20" text="4"/>
  <mx:TextArea x="20" y="20" width="20" height="20" text="5"/>
  <mx:TextArea x="40" y="20" width="20" height="20" text="6"/>
  <mx:TextArea x="0" y="40" width="20" height="20" text="7"/>
  <mx:TextArea x="20" y="40" width="20" height="20" text="8"/>
  <mx:TextArea x="40" y="40" width="20" height="20" text="9"/>
 </mx:Canvas>
 <mx:Canvas width="60" height="60">
  <mx:TextArea x="40" y="40" width="20" height="20" text="1"/>
  <mx:TextArea x="20" y="40" width="20" height="20" text="2"/>
  <mx:TextArea x="0" y="40" width="20" height="20" text="3"/>
  <mx:TextArea x="40" y="20" width="20" height="20" text="4"/>
  <mx:TextArea x="20" y="20" width="20" height="20" text="5"/>
  <mx:TextArea x="0" y="20" width="20" height="20" text="6"/>
  <mx:TextArea x="40" y="0" width="20" height="20" text="7"/>
  <mx:TextArea x="20" y="0" width="20" height="20" text="8"/>
  <mx:TextArea x="0" y="0" width="20" height="20" text="9"/>
 </mx:Canvas>
</mx:Application>

サンプルのFlash

１つ目のCanvasは、左上から右下へ移動することが確認でき、２つ目のCanvasは、右下から左上へ移動することが確認できます。

２つ目のCanvasも画面上の見た目のコンポーネント配置は１つ目のCanvasとまったく同じですが、２つ目のCanvasは、MXMLのソースコード上では逆から並べているため、Tabキー移動で左下から右上に移動しています。

上記検証から、Tabキーの移動順序は、デフォルトでは MXMLソースファイル上での記述順で決定されているようです。