0

私は Flex の初心者で、カートをシミュレートする小さなアプリケーションをテストしています。(これは、Farata Systems の Yakov Fain による素敵なサンプルに基づいています)。注: アプリケーションのコーディングには Flash Builder 4 のベータ版を使用しています。

ここにスクリーンショットへのリンクがあります: スクリーンショット

(stackoverflow では新しいユーザーがイメージ タグを使用することを許可していないため、ここにスクリーンショットのイメージを挿入できません。)

アプリケーションは非常に簡単です。TextInput コントロールに製品を入力し、[カートに追加] ボタンをクリックして、下部の TextArea で表される「カート」に製品を追加します。

それはうまくいきます。

問題は、ユーザーが「カートに追加」ボタンをクリックしなくてもカートにアイテムを追加し続けられるようにしたいことです。そこで、「カートに追加」クリック イベントによってトリガーされる同じハンドラー関数を呼び出して、TextInput の enter イベントを処理するコードを追加しました。

コンテンツを入力して [カートに追加] ボタンをクリックすると、TextInput コントロールがフォーカスとカーソルを受け取り、再度入力できるようになります。ただし、ボタンをクリックする代わりに Enter キーを押すと、TextInput コントロールはフォーカスされたままになり、カーソル ビームが表示されますが、他の場所をクリックしてコントロールに戻るまでテキストを入力することはできません。

以下に、コードの関連部分を示します。上部に 3 つのコントロール (Label、TextInput、Button) をグループ化するコンポーネントの定義があります。

助言がありますか？

<?xml version="1.0" encoding="utf-8"?>


<fx:Script>
    <![CDATA[           
        protected function newItemHandler():void
        {
            import cart.ItemAddedEvent; 
            var e : ItemAddedEvent = new ItemAddedEvent( "->" + textInputItemDescription.text );    
            textInputItemDescription.text = ""; 
            textInputItemDescription.setFocus();
            textInputItemDescription.setSelection(0,0); 
            dispatchEvent( e ); // Bubble to parent = true
            trace( "I just dispatched AddItemEvent " + e.toString() + "\n Content = " + e.itemDescription );
        }
    ]]>
</fx:Script>

<fx:Metadata>
    [Event(name="ItemAddedEvent",type="cart.ItemAddedEvent",bubbles=true)]
</fx:Metadata>
<mx:Label text="Item description:"/>
<s:TextInput id="textInputItemDescription" enter="newItemHandler() "/>
<s:Button click="newItemHandler()"  label="Add to cart"/>

4

3 に答える 3

1

まずダンの答えに感謝します。試してみましたが、うまくいきませんでした。

ただし、ダンの投稿は正しい方向を示してくれました。

最初に、より適切なコンテキストに配置するために、メインの mxml ファイル (SimpleCart.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/halo" 
               xmlns:ctrl="controls.*"
               xmlns:cart="cart.*"
               minWidth="1024" minHeight="768" >
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Style source="SimpleCart.css"/>
    <ctrl:NewItem id="buttonAddItem" x="9" y="15" width="394" height="27"/>     
    <cart:SmartShoppingCart  x="8" y="47" width="378"/>         
</s:Application>

問題は、Label、TextInput、および Button をグループ化するコンポーネント (NewItem と呼ばれる) がフォーカスを取得できなかったことにあると思いますが、TextInput コントロールはフォーカスを取得しました。

そのため、フォーカスを TextInput コントロールに設定する前に、 this.SetFocus への呼び出しを追加して NewItem コンポーネントにフォーカスを設定するだけです。

NewItem の作業バージョンのソース コードは次のとおりです (変更を見つけるには、//Solution コメントを探します)。

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/halo" >

    <fx:Script>
        <![CDATA[   

            protected function newItemHandler():void
            {
                import cart.ItemAddedEvent; 
                import flash.external.ExternalInterface; 

                var e : ItemAddedEvent = new ItemAddedEvent( "->" + textInputItemDescription.text );    
                textInputItemDescription.text = "";

                // *** Solution begins here                     
                this.setFocus();
                // *** Solution ends here

                textInputItemDescription.setFocus();
                textInputItemDescription.setSelection(0,0); 
                dispatchEvent( e ); // Bubble to parent = true
            }
        ]]>
    </fx:Script>

    <fx:Metadata>
        [Event(name="ItemAddedEvent",type="cart.ItemAddedEvent",bubbles=true)]
    </fx:Metadata>

    <mx:Label text="Item description:"/>
    <s:TextInput id="textInputItemDescription" enter="newItemHandler() "/>
    <s:Button click="newItemHandler()"  label="Add to cart"/>
</s:HGroup>
于 2009-07-27T08:40:33.957 に答える
0

あなたの問題は、カーソルを入力するとHTMLページに戻ることだと思います。そのため、プレーヤーが正しいコントロールの周りにフォーカスの四角形を表示している間、ブラウザーはカーソルのフォーカスを再び取得しています。解決策は、ここで概説されているいくつかの単純な JavaScript を呼び出すことによって、ブラウザが Player コントロールを元に戻すようにすることです。

http://carrythezero.net/blog/2009/01/20/flex-textinput-focus-issues/

于 2009-07-24T16:16:34.583 に答える
0

jfcの答えは私にとってはうまくいきました。このルーチンを呼び出す Mate ListenerInjector を使用して、TextInput にフォーカスを設定しid="answerText"ます。jfcthis.setFocus()によって提案されてTextInputいない場合、フォーカスがあるかのように青いアウトラインが表示されますが、カーソルは表示されず、入力はそこに表示されません。

public function readyForNextAnswer(e:Event) : void {
    this.setFocus()
    answerText.setFocus() // Tried focusManager.setFocus(answerText), too
}
于 2012-09-04T19:18:19.560 に答える