Blog Item

Flex Mobile ComboBox Component

Adobe Flex 4.5 is missing an important and useful component for mobile development. It is really frustrating for any developer to develop complex mobile application without this a combo box component. Although Adobe provided the List component for flex mobile applications that is quit useful and optimized for mobile devices but combo box is not optimized for the mobile devices, so you can’t use it for mobile devices.

Last evening I was working on my Sales Agent application and I feel the pain of a developer while using List instead of Combo box. The reason for not using the list was it requires a good amount of screen area to display the data, so I decided to develop a combo box component that is optimized to use in mobile devices and have the functionality of the Combo box. To download the component library click here

The Mxml Component MobileComboBox is based on the Group Component, which have one TextInput and one List. The List is displayed when user clicked on the combo box icon and on selection of the value it disappears and selected value is displayed in the text box

On Selection of the ComboBox Item a mobileComboChangeEvent is dispatched, users can listen for this event to perform their activity.The Source code for MobileComboBox is displayed here.
On Selection of the ComboBox Item a mobileComboChangeEvent is dispatched, users can listen for this event to perform their activity.

The Source code for MobileComboBox is displayed Here.

 <?xml version=”1.0″ encoding=”utf-8″?>  
 <s:Group xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;  
      xmlns:s=”library://ns.adobe.com/flex/spark”  
      focusOut=”closeUserPopup(event)”>  
   <fx:Metadata>  
     [Event(name=”mobileComboChangeEvent”, type=”com.rbasystems.components.mobile.events.MobileComboEvent”)]  
   </fx:Metadata>  
   <fx:Script>  
     <![CDATA[  
       import mx.collections.ArrayCollection;  
       import mx.core.UIComponent;  
       import spark.events.TextOperationEvent;  
       [Bindable]  
       public var displayComboPopup:MobileComboPopUp=new MobileComboPopUp();  
       [Bindable]  
       public var dataProvider:ArrayCollection=new ArrayCollection();  
       [Bindable]  
       public var labelField:String;  
       [Bindable]  
       public var selectedItem:Object;  
       protected function displayDropDown():void  
       {  
         displayComboPopup.mobileComboRef=this;  
         var obj:UIComponent=this.parent as UIComponent;  
         var positionalPoint:Point=this.localToGlobal(new Point(inputBox.x,inputBox.y));  
         displayComboPopup.x=positionalPoint.x;  
         displayComboPopup.y=positionalPoint.y+inputBox.height;  
         displayComboPopup.width=inputBox.width;  
         displayComboPopup.open(this);  
         displayComboPopup.displayList.dataProvider=dataProvider;  
         if(labelField){  
           displayComboPopup.displayList.labelField=labelField;  
         }  
       }  
       protected function name_changeHandler(event:TextOperationEvent):void  
       {if(this.selectedItem){  
         var obj:Object=this.selectedItem;  
         var lblObj:Object=this.labelField;  
         if(this.labelField){  
           this.inputBox.text=obj.lblObj as String;  
         }else{  
           this.inputBox.text=obj as String;  
         }  
       }    
       }  
       protected function closeUserPopup(event:FocusEvent):void  
       {  
         if(displayComboPopup.isOpen){  
           displayComboPopup.close();  
         }  
       }  
       protected function softKeyboardActivatingHandler(event:SoftKeyboardEvent):void  
       {  
         event.preventDefault();  
       }  
     ]]>  
   </fx:Script>  
   <fx:Declarations>  
     <fx:Component id=”companyComp” className=”MobileComboPopUp”>  
       <s:SkinnablePopUpContainer width=”100%”>  
         <fx:Script>  
           <![CDATA[  
             import com.rbasystems.components.mobile.events.MobileComboEvent;  
             import mx.collections.ArrayCollection;  
             import mx.utils.ObjectUtil;  
             import mx.utils.object_proxy;  
             import spark.events.IndexChangeEvent;  
             [Bindable]  
             internal var mobileComboRef:MobileComboBox;  
             protected function userDisplayClickHandler(event:MouseEvent):void  
             {  
               var obj:Object=displayList.selectedItem;  
               var lblObj:Object=mobileComboRef.labelField;  
               if(mobileComboRef.labelField){  
                 mobileComboRef.inputBox.text=obj.lblObj as String;  
               }else{  
                 mobileComboRef.inputBox.text=obj as String;  
               }  
               close();  
             }  
             protected function displayList_changeHandler(event:IndexChangeEvent):void  
             {  
               var eventMobile:MobileComboEvent=new MobileComboEvent(MobileComboEvent.MobileComboChangeEvent,true);  
               eventMobile.oldIndex=event.oldIndex;  
               eventMobile.newIndex=event.newIndex;  
               eventMobile.selectedItem=displayList.selectedItem;  
               var a:Boolean=mobileComboRef.dispatchEvent(eventMobile);  
               //eventMobile.dispatch();  
             }  
           ]]>  
         </fx:Script>  
         <s:List id=”displayList” width=”100%” change=”displayList_changeHandler(event)”  
             click=”userDisplayClickHandler(event)”  
             selectedItem=”@{mobileComboRef.selectedItem}”>  
         </s:List>  
       </s:SkinnablePopUpContainer>        
     </fx:Component>      
   </fx:Declarations>  
   <s:TextInput id=”inputBox” change=”name_changeHandler(event)”  
          changing=”name_changeHandler(event)”  
          softKeyboardActivating=”softKeyboardActivatingHandler(event)”  
          textAlign=”left” focusRect=”null”/>  
   <s:Image x=”{inputBox.width-12}” y=”0″ width=”40″ height=”{inputBox.height+2}” click=”displayDropDown()”  
        source=”@Embed(‘/assets/drop2.png’)”/>  
 </s:Group>  

Class MobileComboEvent extends the Event Class and contains the list of events dispatched by the MobileCombobox Component. mobileComboChangeEvent event is dispatched when your selection is changed in the combo box. you can listen for this event and get the selected object by accessing the property selectedItem. oldIdex property will give you the last selected index position and newIndex property will return the current selected Index.

 package com.rbasystems.components.mobile.events  
 {  
   import flash.events.Event;  
  public class MobileComboEvent extends Event{  
     public static const MobileComboChangeEvent:String=”mobileComboChangeEvent”;  
     private var _oldIndex:int=-1;  
     private var _newIndex:int=-1;  
     private var _selectedItem:Object;  
     public function MobileComboEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)  
     {  
       super(type, bubbles, cancelable);  
     }  
     public function get selectedItem():Object  
     {  
       return _selectedItem;  
     }  
     public function set selectedItem(value:Object):void  
     {  
       _selectedItem = value;  
     }  
     public function get newIndex():int  
     {  
       return _newIndex;  
     }  
     public function set newIndex(value:int):void  
     {  
       _newIndex = value;  
     }  
     public function get oldIndex():int  
     {  
       return _oldIndex;  
     }  
     public function set oldIndex(value:int):void  
     {  
       _oldIndex = value;  
     }  
   }  
 }