How to add a Search Bar to a Flash Builder Mobile app for Android?

Question

I am trying to add a Search / Filter feature to my android application. I will provide a screen shot and a copy of the coding so that you may see exactly what I am trying to get at here. I am not sure what is the best approach to go about this.

`<?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="iCalculate">



<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:layout>  
    <s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
    <![CDATA[
        import spark.components.Image;
        import spark.components.ViewMenu;
        import spark.events.IndexChangeEvent;

        protected function calcList_changeHandler(event:IndexChangeEvent):void
        {
            // This method contains the selection assignments for the Calculator Views

            if(calcList.selectedIndex == 0)//A1c Calculator
            {
                navigator.pushView(views.A1CCalculator);
            }
            else if (calcList.selectedIndex ==1)//BMI Calculator
            {
                navigator.pushView(views.BMI_Calculator);
            }
            else if (calcList.selectedIndex ==2)//GPA Calculator
            {
                navigator.pushView(views.GPA_Calculator);
            }
            else if (calcList.selectedIndex ==3)//TIP Calculator
            {
                navigator.pushView(views.TipCalculator);
            }
        }

    ]]>
</fx:Script>

<s:Label color="#1021C7" text="Welcome to iCalculate (4)" textAlign="center"
         verticalAlign="middle" click="navigator.pushView(views.CompanyDetail)"/>
<s:List id="calcList" alternatingItemColors="[#e5e4e4,#ffffff]"
        width="100%"
        height="90%"
        labelField="name"
        change="calcList_changeHandler(event)">
    <s:ArrayCollection> 
        <fx:Object name="A1c Calculator" />
        <fx:Object name="BMI Calculator" />
        <fx:Object name="GPA Calculator" />
        <fx:Object name="Tip Calculator" />

    </s:ArrayCollection>
</s:List>
<s:Label color="#1021C7" fontFamily="_typewriter" fontSize="10"
         text="Powered by WATTS Professionals"/>
</s:View>

Thanks in advance for your help.

Ryan

Answer 1

Based on what you've shown in the image, I have no idea why you can't just add another "Row" to your current layout. Conceptually like this:

<s:Label color="#1021C7" text="Welcome to iCalculate (4)" textAlign="center"
         verticalAlign="middle" click="navigator.pushView(views.CompanyDetail)"/>
    <s:HGroup>
     <s:TextInput id="searchInput"/> 
     <s:Button label="Search"/>
    </s:HGroup>
<s:List id="calcList" alternatingItemColors="[#e5e4e4,#ffffff]"
        width="100%"
        height="90%"
        labelField="name"
        change="calcList_changeHandler(event)">
....