How to Push a View Based on a selected Array Collection? (Flash Builder 4.6 , Flex)

Question

I have an application that has an Array Collection of calculator names. Upon selection I would like to push the actual view of the calculator for that item.

Here is my code could someone help me write a function that will allow me to do this ?

<?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
title="iCalculate"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="creationCompleted(event)"
width="100%" height="100%">

       <s:layout>   
    <s:VerticalLayout paddingTop="10"/>
   </s:layout>
<fx:Script>
    <![CDATA[
        import com.Watts.collections.filter.Evaluator;
        import com.Watts.demo.Album;

        import mx.collections.ArrayCollection;
        import mx.events.CollectionEvent;
        import mx.events.FlexEvent;
        import mx.rpc.http.Operation;

        import spark.components.Image;
        import spark.components.ViewMenu;
        import spark.components.gridClasses.GridColumn;
        import spark.events.IndexChangeEvent;
        import spark.events.TextOperationEvent;

// Everything Below this line holds information specifically relating to Beta 2

// Below this line is the coding for the search bar or filter bar 
        private var _collection:ArrayCollection;
        private var _evaluator:Evaluator = new Evaluator();

        private function creationCompleted(event:FlexEvent):void
        {
            _collection = Album.collection;
            _collection.filterFunction = filterCollection;

            _evaluator.synonyms["four"] = new ArrayCollection(["4"]);

            grid.dataProvider = _collection;
        }

        private function filterChanged(event:Event):void
        {
            update();


        }

        private function update():void
        {
            _evaluator.prepare(filter.text);
            _collection.refresh();

            formula.text = (_evaluator.tree) ?                              _evaluator.tree.toString() : "";

        }

        private function filterCollection(data:Object):Boolean
        {
            var labels:ArrayCollection = new ArrayCollection();
            for (var i:int; i < grid.columns.length; i++)
            {
                labels.addItem((grid.columns.getItemAt(i) as GridColumn).itemToLabel(data));
            }   
            return _evaluator.evaluate(labels);
        }

    ]]>
</fx:Script>


    <s:VGroup left="5" right="-9" top="5" bottom="5" width="100%" height="100%" textAlign="center">
    <s:TextInput id="filter" width="100%" change="filterChanged(event)"/>
    <s:DataGrid id="grid" width="100%" height="100%" textAlign="left">
    </s:DataGrid>
    <s:Label id="formula" />
    </s:VGroup>
    <s:Label id="lblWattsMessage" click="navigator.pushView(views.CompanyDetail)" color="#1021C7"
         fontFamily="_typewriter" fontSize="12" text="Powered by WATTS Professionals"
         textAlign="center" verticalAlign="middle"/>



</s:View>

Answer 1

Here is the code that I used to fix this issue. Inside the flex application there is a navigator.pushView component that can be used. The issue I had was that I did not assign view ID's to each of the calculators. This must be done in the ArrayCollection container.

navigator.pushview(ViewID)