How to return a view to a selected index. flex (flash builder )

Question

I have an ArrayCollection that shows up on the main screen of my app. I previously had my code to push a view upon a selected index. Now that I have implemented my Search Bar for this array collection. The selected index does not match the search index . Ex. selected index == 0 used to be the A1c Calculator, if some one searchs the BMI calculator it then becomes the A1c because it is now in the selected index == 0.

How do I approach this by always pulling A1c when A1c is selected and so on and so forth, no matter what index it is. here is the code .

            '<?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 mx.collections.ArrayCollection;
                        import mx.collections.ArrayList;
                        import mx.events.IndexChangedEvent;
                        import mx.utils.object_proxy;

                        import spark.collections.Sort;
                        import spark.collections.SortField;
                        import spark.components.Image;
                        import spark.components.ViewMenu;
                        import spark.events.IndexChangeEvent;



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

                            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);
                            }

                        }


                    //Below This Line is the code for the Filter Feature
                    private function filterList():void{
                        calcListCollection.filterFunction=searchList;
                        calcListCollection.refresh();

                    }
                    private function searchList(item:Object):Boolean{
                        var isMatch:Boolean = false
                            if(item.name.toLowerCase().search(search.text.toLowerCase())!=-1){
                                isMatch = true
                            }
                            return isMatch;
                    }
                    private function clearSearch():void{
                        calcListCollection.filterFunction=null;
                        calcListCollection.refresh();
                        search.text=""; 

                    }




                    ]]>
                </fx:Script>
                <s:HGroup width="100%" height="43">
                    <s:TextInput id="search" width="100%" prompt="Search iCalculate" textAlign="center" change="filterList()"/>

                </s:HGroup>

                <s:List id="calcList" alternatingItemColors="[#e5e4e4,#ffffff]"
                        width="100%"
                        height="98%"
                        labelField="name"
                        change="calcList_changeHandler(event)">
                    <s:dataProvider>

                        <s:ArrayCollection id="calcListCollection">  
                            <fx:Object name="A1c Calculator" />
                            <fx:Object name="BMI Calculator" />
                            <fx:Object name="GPA Calculator" />
                            <fx:Object name="Tip Calculator" />

                        </s:ArrayCollection>
                    </s:dataProvider>
                </s:List>

                <s:Label width="100%" click="navigator.pushView(views.CompanyDetail)" color="#1021C7"

'

Thank you in advance.

Ryan

Answer 1

I think the reason is: you cann't use selectedIndex to identify a view.

So you can add a "viewId" property to your ArrayList's Object:

<fx:Object viewId="A1c" name="A1c Calculator"/>

and your list change event handler can use "viewId" to identify a view:

 if (calcList.selectedItem.viewId == "A1c")//A1c Calculator
 {
   navigator.pushView(views.A1CCalculator);
 }