Adobe Flex 3 ヘルプ

Enter キーに応答するアイテムエディタの作成

リストコントロールでデフォルトのアイテムエディタを使用している場合は、セルの値を編集した後で Enter キーを押すと、そのコントロールの中でフォーカスを次のセルに移動できます。コンポーネント 1 つのみで構成したシンプルなアイテムエディタを作成し、そのコンポーネントに IFocusable インターフェイスを実装すると、そのアイテムエディタも Enter キーによる操作に応答します。IFocusable インターフェイスを実装しているコンポーネントは、AccordionButtonButtonBarComboBaseDateChooserDateFieldListBaseMenuBarNumericStepperTabNavigatorTextArea および TextInput です。

次の例では、VBox コンテナを最上位のコンポーネントとして、その子コンポーネントに CheckBox コントロールを持つ、複雑なアイテムレンダラーを定義します。

<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\myComponents\EditorDGCheckBox.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
     backgroundColor="yellow">

    <mx:Script>
        <![CDATA[
            // Define a property for returning the new value to the cell.
            public var cbSelected:Boolean;            
        ]]>
    </mx:Script>
   
    <mx:CheckBox id="followUpCB" label="Follow up needed" 
        height="100%" width="100%" 
        selected="{data.FollowUp}" 
        click="cbSelected=followUpCB.selected" 
        updateComplete="cbSelected=followUpCB.selected;"/>
</mx:VBox>

このアイテムエディタを開くと、CheckBox コントロールでフォーカスを取得してその値を編集できますが、親の VBox コンテナは IFocusManagerComponent インターフェイスを実装していないので、Enter キーを押してもフォーカスは次のセルに移動しません。次の例に示すように、IFocusManagerComponent インターフェイスを実装するようにこの例を変更できます。

<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\myComponents\EditorDGCheckBoxFocusable.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
     backgroundColor="yellow" 
     implements="mx.managers.IFocusManagerComponent" >

    <mx:Script>
        <![CDATA[
            // Define a property for returning the new value to the cell.
            public var cbSelected:Boolean;
            
            // Implement the drawFocus() method for the VBox.
            override public function drawFocus(isFocused:Boolean):void {
                // This method can be empty, or you can use it 
                // to make a visual change to the component.
            }
        ]]>
    </mx:Script>
   
    <mx:CheckBox id="followUpCB" 
        label="Follow up needed" 
        height="100%" width="100%" 
        selected="{data.FollowUp}" 
        click="cbSelected=followUpCB.selected" 
        updateComplete="cbSelected=followUpCB.selected;"/>
</mx:VBox>

IFocusManagerComponent インターフェイスにはプロパティとメソッドがいくつか定義されていますが、UIComponent クラスは、これらすべての実装を定義または継承します。ただし、drawFocus() メソッドだけは例外です。したがって、Enter キーの操作に応答するアイテムエディタにするには、例外であるこのメソッドを実装するだけですみます。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート