apache-flex - Flex ItemRenderer は、テキスト入力間のタブ移動の使用を防止します

Question

3 つのパネルのそれぞれに 5 つのテキスト入力を表示するカスタムItemRendererがあります。

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    height="300"
    width="800"
    creationComplete="onCreationComplete()"
>
    <!-- code-behind -->
    <mx:Script source="ChainListRenderer.mxml.as" />

    <mx:Label text="{data.title}" fontSize="25" fontWeight="bold" width="100%" textAlign="center" />
    <mx:HBox>
        <mx:Panel id="triggerPanel" title="Trigger" width="260">
            <mx:VBox id="tpBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
                <mx:TextInput id="trigger1" width="100%" textAlign="left" tabIndex="0" tabEnabled="true" />
                <mx:TextInput id="trigger2" width="100%" textAlign="left" tabIndex="1" tabEnabled="true" />
                <mx:TextInput id="trigger3" width="100%" textAlign="left" tabIndex="2" tabEnabled="true" />
                <mx:TextInput id="trigger4" width="100%" textAlign="left" tabIndex="3" tabEnabled="true" />
                <mx:TextInput id="trigger5" width="100%" textAlign="left" tabIndex="4" tabEnabled="true" />
            </mx:VBox>
        </mx:Panel>
        <mx:Panel id="linkPanel" title="Link" width="260">
            <mx:VBox id="lpBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
                <mx:TextInput id="link1" width="100%" textAlign="left" tabIndex="5" tabEnabled="true" />
                <mx:TextInput id="link2" width="100%" textAlign="left" tabIndex="6" tabEnabled="true" />
                <mx:TextInput id="link3" width="100%" textAlign="left" tabIndex="7" tabEnabled="true" />
                <mx:TextInput id="link4" width="100%" textAlign="left" tabIndex="8" tabEnabled="true" />
                <mx:TextInput id="link5" width="100%" textAlign="left" tabIndex="9" tabEnabled="true" />
            </mx:VBox>
        </mx:Panel>
        <mx:Panel id="answerPanel" title="Answer" width="260">
            <mx:VBox id="apBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
                <mx:TextInput id="answer1" width="100%" textAlign="left" tabIndex="10" tabEnabled="true" />
                <mx:TextInput id="answer2" width="100%" textAlign="left" tabIndex="11" tabEnabled="true" />
                <mx:TextInput id="answer3" width="100%" textAlign="left" tabIndex="12" tabEnabled="true" />
                <mx:TextInput id="answer4" width="100%" textAlign="left" tabIndex="13" tabEnabled="true" />
                <mx:TextInput id="answer5" width="100%" textAlign="left" tabIndex="14" tabEnabled="true" />
            </mx:VBox>
        </mx:Panel>
    </mx:HBox>
</mx:VBox>

残念ながら、ItemRenderer として使用すると、上記の tabIndex 値を使用しても、テキスト入力間のタブ移動は機能しません。このコードを独自の MXML アプリケーションにコピーすると、テキスト入力間のタブ移動が期待どおりに機能します。

このシナリオでタブを復元する方法を知っている人はいますか? このような単純なユーザビリティ要素なしでこのアプリをリリースしなければならないのは残念です.

を実装する必要があるかもしれmx.managers.IFocusManagerComponentませんが、それを行う方法の例が見つからず、FocusManager ドキュメントも役に立ちません。

Answer 1

「ListBase派生」コンポーネントで使用されるitemRenderで同じ問題が発生しました。すべての「ListBase派生」コンポーネントが、ListBaseContentHolder内のすべてのアイテムレンダラーをラップしていることがわかりました。

ListBaseソースから：

/**
 *  An internal display object that parents all of the item renderers,
 *  selection and highlighting indicators and other supporting graphics.
 *  This is roughly equivalent to the <code>contentPane</code> in the 
 *  Container class, and is used for managing scrolling.
 */
protected var listContent:ListBaseContentHolder;

このクラスのtabChildrenプロパティとtabEnabledプロパティは、デフォルトでfalseに設定されています。私が見つけた唯一の回避策は、リストから派生したMyListコンポーネントを作成し、次のようにcreateChildrenメソッド（listContentが初期化される場所）をオーバーライドすることでした。

import flash.display.DisplayObject;
import mx.controls.List;

public class MyList extends List {
    override protected function createChildren():void {
            super.createChildren();
            this.listContent.tabChildren = this.tabChildren
            this.listContent.tabEnabled = this.tabEnabled
        }
    }

次に、「<mx：List/>」コンポーネントの代わりに「<MyListtabChildren= "true" />」を使用すると、ItemRenderのタブ機能が返されました。

それが役に立てば幸い、

Answer 2

データグリッドに rendererIsEditor="true" を指定してカスタム itemRenderer として mx:VBox を使用していましたが、タブ オーダーの問題も発生していました。

私が理解したのは、メインアプリケーションの FocusManager() が正しくタブで移動できるようにするために、itemRenderer が IFocusManagerComponent を実装する必要があるということです。私はそのインターフェースを実装しようとしました:

<?xml version="1.0"?>
<mx:VBox implements="mx.managers.IFocusManagerComponent" ...>
 [the rest of my itemRenderer code]
</mx:VBox>

...そして、実行するのはかなり複雑であることが判明しました...実装するインターフェイス関数がたくさんあります。

しかし、私の場合は幸運でした。itemRenderer には TextInput 要素が 1 つしかなかったので (残りはすべてカスタム コード、バリデーター、フォーマッターでした)、itemRenderer を mx:VBox から mx:TextInput (既に IFocusManagerComponent を実装しています) に変換しました。

<?xml version="1.0"?>
<mx:TextInput ...>
 [the rest of my itemRenderer code]
</mx:TextInput>

出来上がり！タブ オーダーの問題が修正されました。

より複雑な itemRenderers を使用している場合の結論は、クラスに IFocusManagerComponent インターフェイスを完全に実装する必要があるということです。田畑。または、最上位のタグを既にインターフェイスを実装しているものに変更することもできます。たとえば、mx:VBox を次のようにネストできます。

<mx:Container focusIn="FocusManager.setFocus(trigger1)">

...そして、おそらく機能していますか？私よりも複雑なコードを持っている人は、試してみて何が起こるか見てみましょう。

Answer 3

同じ問題が発生しましたが、タブボタンの動作を再実装することで解決しました。成功への手がかりは、単にevent.preventdefault()メソッドを使用することです。使用されるコードは前に示されています。

private function initFocusMap():void {
    focusMap = {
        InNom:benefPersona.InApePat,
        InApePat:benefPersona.InApeMat,
        InApeMat:benefPersona.InFecNacimiento,
        InFecNacimiento:benefPersona.InRFC,
        InRFC:benefPersona.InCURP,
        InCURP:benefPersona.InIdSexo,
        InIdSexo:benefPersona.InIdParentesco,
        InIdParentesco:benefPersona.InPorc,
        InPorc:domBeneficiario.InCalle,
        InCalle:domBeneficiario.InNumExterior,
        InNumExterior:domBeneficiario.InNumInterior,
        InNumInterior:domBeneficiario.InCP,
        InCP:domBeneficiario.InColonia,
        InColonia:domBeneficiario.InIdPais,
        InIdPais:domBeneficiario.InIdEdo,
        InIdEdo:domBeneficiario.InIdCiudad,
        InIdCiudad:benefPersona.InNom                   
    }
}

private function kfcHandler(event:FocusEvent):void {
    var id:String = ""
    if (event.target is AperClsDateField || event.target is AperClsCombo) {
        id = event.target.id;
    } else {
        id = event.target.parent.id;
    }
    if (id != "InIdDelegacionMunic") {
        event.preventDefault();             
        focusManager.setFocus(focusMap[id]);
    }
}

Answer 4

基本的に、フォーカス変更イベントのデフォルトの動作を削除する必要があります。私はあなたがこれをする必要があると思います：

1. yourRenderer.addEventListener(FocusEvent.KEY_FOCUS_CHANGE, onKeyFocusChange);
2. since you want to stop tab key, in the handler, do this: 
        if (event.keyCode == Keyboard.TAB)
            event.preventDefault()
3. in your keyDown handler, catch TAB, then you can manually move your focus.

Answer 5

AdvancedDataGridでitemRendererの1つをタブ化するのと同じ問題が発生していました（ちなみに、Flex SDK 3.5を使用しています）が、この投稿はタブ対応のitemRendererを作成するのに非常に役立ちました。貢献も:)

これを機能させるには、gridとgridColumnのいくつかのプロパティも変更する必要があります。

まず、gridとgridColumnについて説明しましょう。

グリッドの「編集可能」プロパティを「true」に設定すると、各列セルをタブで移動できます（列の「編集可能」プロパティを「false」に設定しなかった場合）。

ステップ1、グリッドの「編集可能」プロパティセットを「true」に設定します

ステップ2、グリッドの列の「編集可能」プロパティも「true」に設定し、「rendererIsEditor」を「true」に設定します

dataFieldを偽のフィールドに設定することが重要です。これは、レンダラーをエディターとして設定しているため、itemRendererで更新したものはすべてdataFieldに割り当てられることを意味します。つまり、dataFieldを「Foo」に設定します。 -comboBoxitemRendererに入力されるプリミティブオブジェクト。選択すると、そのオブジェクトは「Foo」に割り当てられます

ステップ3、グリッドの列の「dataField」プロパティも偽のフィールドに設定します。

それでは、itemRendererでタブ操作を有効にすることを実行しましょう

これは最適化されたバージョンではないことを私は知っていますが、これは最初のパスで機​​能します。

import mx.core.mx_internal;
import mx.managers.IFocusManagerComponent;
use namespace mx_internal;

public class FriendlyItemRendererContainer extends HBox implements IFocusManagerComponent
{

    public function FriendlyItemRendererContainer ()
    {
    super();
    addEventListener(FocusEvent.KEY_FOCUS_CHANGE, keyFocusChangeHandler);       
    }

    private var _listData:DataGridListData;
    //This is required to make it work as itemEditor
    public var text:String;

    private function keyFocusChangeHandler(event:FocusEvent):void
    {
            if (event.keyCode == Keyboard.TAB &&
                ! event.isDefaultPrevented() &&
                findNextChildToFocus(event.shiftKey))
            {

                event.preventDefault();

            }

    }

    private function findNextChildToFocus(shiftKey:Boolean):Boolean
    {
          var myChildrenAry:Array = getChildren();
      var incr:int = shiftKey ? -1 : 1;
      var index:int = shiftKey ? myChildrenAry.length : 0;
      var focusChildIndex:int = 0;
      var found:Boolean = false;

         for (focusChildIndex = 0; focusChildIndex < myChildrenAry.length; ++focusChildIndex)
     {
        if (!(myChildrenAry[focusChildIndex] as UIComponent).visible ||
            (myChildrenAry[focusChildIndex] is Container))
        {
            //If it's an invisible UIComponent or a container then just continue
            continue;
        }

            if (myChildrenAry[focusChildIndex] is TextInput)
        {
                    if (systemManager.stage.focus == (myChildrenAry[focusChildIndex] as TextInput).getTextField())
                    {
                        (myChildrenAry[focusChildIndex] as UIComponent).drawFocus(false);
                        found = true;
                        break;
                    }
        }
        else
        {
                    if (systemManager.stage.focus == myChildrenAry[focusChildIndex])
                    {
                        (myChildrenAry[focusChildIndex] as UIComponent).drawFocus(false);
                        found = true;
                        break;
                    }
       }
         }

         if (!found)
     {
        focusChildIndex = 0;
      }

      while (true)
      {
                focusChildIndex = focusChildIndex + incr;

                if ((focusChildIndex < 0) || (focusChildIndex >= myChildrenAry.length))
                {
                    UIComponentGlobals.nextFocusObject = null;
                    return false;
                }
                else
                if (myChildrenAry[focusChildIndex] is UIComponent)
                {
                (myChildrenAry[focusChildIndex] as UIComponent).setFocus();
                (myChildrenAry[focusChildIndex] as UIComponent).drawFocus(true);

                    break;
                }
        }


        return true;
    }

    override public function setFocus():void
    {
       var myChildrenAry:Array = getChildren();
       if (myChildrenAry.length > 0)
       {
        for (var i:int = 0; i < myChildrenAry.length; ++i)
        {
            if ((myChildrenAry[i] is UIComponent) && (myChildrenAry[i] as UIComponent).visible)
            {
               (myChildrenAry[i] as UIComponent).setFocus();
                   (myChildrenAry[i] as UIComponent).drawFocus(true);
               break;
            }
       }
    }

    }

    public function get listData():BaseListData
    {
            return _listData;
    }

    public function set listData(value:BaseListData):void
    {
            _listData = DataGridListData(value);
    }  
}

itemRendererでの使用方法の例：

<FriendlyItemRendererContainer xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:TextInput/>
<mx:Button label="Boo"/>
<mx:RadioButton/>
<<mx:TextInput/>
<mx:Button label="Baa"/>

</FriendlyItemRendererContainer>

次に、それをgridColumnに配置するだけで、それだけです。

楽しみ。

Answer 6

これは、私が使用していた方法では不可能なようです。カスタム アイテム レンダラーでリストを使用する代わりに、単一アイテム ビュー コンポーネントと個別のリストに切り替えて、すべてのアイテムの概要を表示しました。これで問題を解決できました。

Answer 7

これは、ComboBox itemEditor でダウンする方法です。

http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/

Answer 8

正しい方向に進んでいると思いますが、まだ完全には進んでいません。

カスタム ItemRenderer を使用する Horizo​​ntalList を使用したメイン アプリケーションがあります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:com="ventures.view.component.*"
    layout="absolute"
    backgroundColor="#ffffff"
    preinitialize="onPreInitialize()"
    click="onClick(event)"
>
    <!-- code-behind -->
    <mx:Script source="ConsumptionChain.as" />

    <!-- show chain links -->
    <mx:HorizontalList
        id="ChainList"
        direction="horizontal"
        dataProvider="{chainData}"
        rollOverColor="#ffffff"
        selectionColor="#ffffff"
        horizontalScrollPolicy="off"
        left="20"
        right="20"
        top="20"
        height="300"
        minWidth="802"
        rowHeight="300"
        columnWidth="800"
        tabChildren="false"
        itemRenderer="ventures.view.ItemRenderer.ChainListRenderer"
    />

</mx:Application>

元の質問のコード サンプルを更新して、ItemRenderer MXML 全体 (該当する部分) を含めました。ActionScript の分離コードは次のとおりです。

/*
 * ChainListRenderer.mxml.as -- code-behind for ChainListRenderer.mxml
 */

import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

//used to combine all textboxes in a single array to make looping through them with the TAB key easier
private var allBoxes:Array;

public function expandPanel(e:Event):void {
    trace(e.currentTarget);                
    var state : String = e.currentTarget.parent.parent.id;                
    if (state != this.currentState)
        this.currentState = state;
}

private function onCreationComplete():void{
    //this function will be run on each object via the map function
    function forEach(o:Object, index:int, ar:Array):void{
        o.addEventListener(FocusEvent.FOCUS_IN, expandPanel)
        o.addEventListener(MouseEvent.CLICK, stopBubble);           //don't propagate click events (which return to base state)
        o.addEventListener(KeyboardEvent.KEY_DOWN, customTabbing);  //fix tabbing between text fields
    }

    this.addEventListener(KeyboardEvent.KEY_DOWN, customTabbing);

    //loop over textboxes and add the focusIn event listener
    tpBoxes.getChildren().map(forEach);
    lpBoxes.getChildren().map(forEach);
    apBoxes.getChildren().map(forEach);

    //create an "allBoxes" array that is used by the customTabbing function
    allBoxes = tpBoxes.getChildren();
    function forEachTabbing(o:Object, index:int, ar:Array):void {
        allBoxes.splice(allBoxes.length, 0, o);
    }
    lpBoxes.getChildren().map(forEachTabbing);
    apBoxes.getChildren().map(forEachTabbing);
}

//this function is used to prevent event bubbling
private function stopBubble(e:Event):void {
    e.stopPropagation();
}

//this function re-implements tabbing between text fields, which is broken when inside an itemRenderer
public function customTabbing(e:KeyboardEvent):void {
    trace('keyCode: ' && e.keyCode.toString());
    if (e.keyCode == flash.ui.Keyboard.TAB){
        trace(focusManager.getFocus());
        //loop over array of all text-boxes
        for (var i:int = 0; i < allBoxes.length; i++){
            trace(i.toString());
            //if event (keypress) current target is the current TextInput from the array
            if (e.currentTarget == allBoxes[i]){
                //then focus the NEXT TextInput, and wrap if at last one
                allBoxes[((i+1) % allBoxes.length)].setFocus();
                //break out of the loop
                break;
            }
        }

        //prevent arrow keys from navigating the horizontal list
        e.stopPropagation();
    }
}

基本的に、ここでやろうとしているのは、各テキスト フィールドの key_down イベントで TAB キーをチェックし、それを使用して次の TextInput にフォーカスを移動する (最後の TextInput から最初の TextInput にラップする) ことにより、タブ移動を再実装することです。ただし、これには目的の効果がなく、フォーカスはこの Horizo​​ntalList の外にある次のコントロールに飛び出します。

ここからどこへ行くべきか？

Answer 9

なぜあなたは tabChildren="false" をしているのですか? HorziontalList の子にタブを付けたくありませんか? itemRenderer はリストの子なので....