0

I have been trying out the Callout control in Flex 4.6 to use in a mobile app instead of a combo. The scenario is that you have a TextInput that has a prompt to the user to "Select ..." and when you touch it (iPad) it receives focus and a Callout is populated to allow you to pick from a list.

This works fine when running on a Mac but when I deploy to iPad the focusIn event only seems to fire if the TextInput control has editing turned on. This defeats the purpose since the soft keyboard pops up and also the control is editable when I really just want it to be selected from a list.

The code for the TextInput control is;

<s:TextInput id="txtLocation" x="171" y="149" 
            enabled="false" editable="false" 
            height="38" fontSize="16" 
            prompt="Select ..." 
            focusEnabled="true"
            focusIn="depotCallout.open(this.txtLocation,true)"/>

This code is also in a sample app by Holly Schinsky demonstrating how to use the callout. Any ideas would be appreciated.

DesCullen
  • 1
  • 2

1 Answers1

1

Ok I was a little opinionated, not being a professional coder, but I found the answer.

        <?xml version="1.0" encoding="utf-8"?>
    <!-- mobile_keyboard/views/UseNextLikeTab.mxml -->
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" title="Change Focus">
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>

        <s:layout>
            <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10"/>
        </s:layout>

        <fx:Script>
            <![CDATA[
                private function changeField(ti:TextInput):void {
                    // Before changing focus to a new control, set the stage's focus to null:
                    stage.focus = null;

                    // Set focus on the TextInput that was passed in:
                    ti.setFocus();
                }
            ]]>
        </fx:Script>

        <s:HGroup>
            <s:Label text="1:" paddingTop="15"/>
            <s:TextInput id="ti1" prompt="First Name"
                         width="80%"
                         returnKeyLabel="next" 
                         enter="changeField(ti2)"/>     
        </s:HGroup>
        <s:HGroup>
            <s:Label text="2:" paddingTop="15"/>
            <s:TextInput id="ti2" prompt="Middle Initial" 
                         width="80%"
                         returnKeyLabel="next" 
                         enter="changeField(ti3)"/>
        </s:HGroup>
        <s:HGroup>
            <s:Label text="3:" paddingTop="15"/>
            <s:TextInput id="ti3" prompt="Last Name" 
                         width="80%"
                         returnKeyLabel="next" 
                         enter="changeField(ti1)"/>
        </s:HGroup>

    </s:View>

I found the code on this page: Adobe fex 4.6

Daan
  • 11
  • 3