13 Replies Latest reply: Sep 6, 2011 9:52 AM by brinaldi RSS

    Combobox for flex 4.5 mobile

    mikmiki Community Member

      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.

        • 1. Re: Combobox for flex 4.5 mobile
          mikmiki Community Member

          just trying to jump the message up. anyone with experience with it?

          • 2. Re: Combobox for flex 4.5 mobile
            kokorito Community Member

            can you use a list in a popup window?

            • 3. Re: Combobox for flex 4.5 mobile
              mikmiki Community Member

              don't know where to start from. shoudl i extend combobox? why isn't it

              allowed in mobile? any good sample for it?

              • 4. Re: Combobox for flex 4.5 mobile
                kokorito Community Member

                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.

                • 5. Re: Combobox for flex 4.5 mobile
                  JeffryHouser Community Member

                  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.

                  • 6. Re: Combobox for flex 4.5 mobile
                    JeffryHouser Community Member

                    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.

                    • 7. Re: Combobox for flex 4.5 mobile
                      kokorito Community Member

                      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(event)">
                          <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):void
                                  {
                                      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>

                      • 8. Re: Combobox for flex 4.5 mobile
                        kokorito Community Member

                        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?

                        • 9. Re: Combobox for flex 4.5 mobile
                          JeffryHouser Community Member

                          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.

                          • 10. Re: Combobox for flex 4.5 mobile
                            kokorito Community Member

                            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

                            • 11. Re: Combobox for flex 4.5 mobile
                              JeffryHouser Community Member

                              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.

                              • 13. Re: Combobox for flex 4.5 mobile
                                brinaldi Adobe Employee

                                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.