Skip navigation
Currently Being Moderated

Combobox for flex 4.5 mobile

Jul 15, 2011 1:41 PM

I understand that there is no combobox control for mobile.

1. why can't i use the spark combobox? i've added it to the window and it looks ok in android.

2. how can i develope my own? are there any samples of creating a custom combobox in spark?

3. can my combobox have a look like the drop down in iphone? how can i skin it for andorid and for iphone.

a lot of questions....the lack of a combobox\dropdown is quite wierd for flex in mobile.

 
Replies
  • Currently Being Moderated
    Jul 17, 2011 7:20 AM   in reply to mikmiki

    can you use a list in a popup window?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2011 7:47 AM   in reply to mikmiki

    just make a new component based on a skinnable popup window

    in the window place a list control

     

    in the main application put a textinput and set the focusIn, or click, event to open the popup window and pass an arraylist to it to populate the list

    picking an item in the list closes the pop up and passes the value back to the text box with a custom event

     

    its almost the same as a combobox, is optimised for mobile, easy to skin.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2011 8:01 AM   in reply to mikmiki

    If it works, go for it.  In my experience, it doesn't work, though.

     

    I rewrote the Flextras AutoComplete component, which extends the Flex ComboBox to work on Mobile devices.  I had issues w/ the ComboBox relying on mouse down / mouse up events which did not carry over very well to touch events.  I, in essence, rewrote the components to use click events instead of the mouse up / mouse down events.

     

    Also, you'll probably have to create a custom skin.  Using the default skin, can you scroll in the drop down--or interact with it in any way?  Is the down arrow big enough to be clicked?  In my experience, the answer to both of these question is no.

     

    I, personally, question how useful the 'traditional' Flex Drop Down List component is on a phone device.  I only did our AutoComplete conversion b/c customer kept asking.  They may make more sense on a tablet w/ bigger screen though.  Right now I'm working on a custom skin to our Mobile DropDownList that works more like a native mobile drop down, where the drop down pop up shows over the whole app; not below the prompt area.

     

    Both our Mobile DropDownList and Mobile AutoComplete are part of the Flextras Mobile Component Set.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2011 8:12 AM   in reply to kokorito

    I think what you describe is closer to a DropDownList than a ComboBox.  Part of the reason to use the Flex Spark ComboBox is the ability to directly "scroll to items" as you type.  It doesn't seem practical to do that w/ regards to a PopUp.  However, the "PopUp" approach is definitely more common--and I feel appropriate--in a Mobile App.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2011 8:24 AM   in reply to mikmiki

    The custom event

     

    package events
    {
        import flash.events.Event;
       
        public class ComboEvent extends Event
        {
            public static const COMBO_CLOSED:String = "combo_closed";
            public var picked:Object;
           
            public function ComboEvent(type:String, picked:Object)
            {
                super(type);
                this.picked = picked;
            }
        }
    }

     

     

    The pop up

     

    <?xml version="1.0" encoding="utf-8"?>
    <s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                               xmlns:s="library://ns.adobe.com/flex/spark"
                               width="300" height="500"
                               creationComplete="skinnablepopupcontainer1_creationCompleteHandler(ev ent)">
        <fx:Script>
            <![CDATA[
                import events.ComboEvent;
               
                import mx.collections.ArrayList;
                import mx.events.FlexEvent;
                import mx.managers.PopUpManager;
                import spark.events.IndexChangeEvent;
               
                [Bindable]
                public var dp:ArrayList;
               
                protected function skinnablepopupcontainer1_creationCompleteHandler(event:FlexEvent):voi d
                {
                    PopUpManager.centerPopUp(this);
                }
               
                protected function list_changeHandler(event:IndexChangeEvent):void
                {
                    dispatchEvent(new ComboEvent(ComboEvent.COMBO_CLOSED,list.selectedItem));
                        this.close();
                }
               
               
            ]]>
        </fx:Script>
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
       
       
        <s:List id="list" width="100%" height="100%" dataProvider="{dp}" change="list_changeHandler(event)"/>
       
    </s:SkinnablePopUpContainer>

     

     

    The view

     

    <?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" xmlns:components="components.*">
       
       
        <fx:Script>
            <![CDATA[
                import events.ComboEvent;
               
                import mx.collections.ArrayList;
                import mx.events.FlexEvent;
               
                protected var dp:ArrayList;
               
               
                protected function combobox1_creationCompleteHandler(event:FlexEvent):void
                {
                   
                }
               
                protected function comboInput_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    dp = new ArrayList(new Array(1,2,3,4,5));
                    comboPopUp.dp = dp;
                    comboPopUp.addEventListener(ComboEvent.COMBO_CLOSED,comboHandler);
                    comboPopUp.open(this,true);
                }
               
                protected function comboHandler(event:ComboEvent):void
                {
                    comboInput.text = event.picked.toString();
                }
               
            ]]>
        </fx:Script>
       
       
       
        <fx:Declarations>
            <components:ComboPopUp id="comboPopUp"/>
        </fx:Declarations>
       
       
        <s:TextInput id="comboInput" click="comboInput_clickHandler(event)"/>
           
       
    </s:View>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2011 8:32 AM   in reply to JeffryHouser

    Jeffry

     

    couldnt the pop up simply be non modal

    typing in the textInput use the textInput event to filter the dataprovider and refresh the popup list?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2011 8:41 AM   in reply to kokorito

    If you could get the layout and position correct, then yes.

     

    I percieve it would be difficult--at least in Flex--to get the positioning right of a pop up so that it doesn't cover the input and is not covered by a soft keyboard.

     

    I assume that is why these sort of inputs are not used in mobile apps.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2011 9:14 AM   in reply to JeffryHouser

    thats true,

    maybe put another textinput inside the pop up

     

    but yeah the keyboard is going to take up half the screen so it would have to be a short list

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2011 9:26 AM   in reply to kokorito

    It's definitely a viable approach.

     

    I've considered that as a custom skin for the the Flextras Mobile AutoComplete.  I'm just not convinced the utility of such an approach, especially on a small screen.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2011 8:46 PM   in reply to mikmiki
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2011 9:52 AM   in reply to mikmiki

    In addition to the options listed above you could consider checking out the e-skimo library that is freely available at http://e-skimo.com/ and includes a UniqueChoiceList and MulipleChoiceList that would probably suit your requirements for a combobox.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points