iconitemrenderer clickable objects?

I am making a mobile application in Flash Builder 4.5 for android and iOS and am using the itemRenderer and iconitemrenderer classes to make a list of options for my app. For some reason, i cannot make them clickable, or define actions to do when each is clicked. Basically, i'm aiming to use FB's "views", and when an item is clicked, to switch to a new view. Here's the code i'm working with:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:ms="libs/MessageBox-digitalRetro">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:actionContent>
        <s:Button id="signin" label="Sign in" click="onSignIn(event)"/>
    </s:actionContent>
        //code for the clicking of the sign in button
    <fx:Script>
        <![CDATA[
            protected function onSignIn(event:Event):void
            {

            }
        ]]>
    </fx:Script>
    <s:List height="100%" width="100%">
        <s:itemRenderer>
            <fx:Component>
                <s:IconItemRenderer height="100" labelField="name" 
                                    iconField="photo" iconHeight="80" 
                                    iconWidth="80" messageFunction="getMessage">
                    <fx:Script>
                        <![CDATA[
                            import spark.components.NavigatorContent;
                                                    //this first method works
                            protected function getMessage(o:Object):String
                            {
                                return o.message;
                            }
                        ]]>
                    </fx:Script>
                </s:IconItemRenderer>
            </fx:Component>
        </s:itemRenderer>
        <s:dataProvider>
            <s:ArrayCollection>
                <fx:Object name="Projects" photo="@Embed('libs/ProjectsIcon2.png')" message="Learn more about what we're working on" clickfn="views/Projects"/>
                <fx:Object name="Locate Office" photo="@Embed('libs/google-maps-icon.png')" message="Find directions to our nearest office" clickfn=""/>
                <fx:Object name="Contact Us" photo="@Embed('libs/gmailicon.png')" message="Let us know your thoughts!" clickfn=""/>
                <fx:Object name="About Us" photo="@Embed('libs/info-icon.png')" message="" clickfn=""/>
            </s:ArrayCollection>
        </s:dataProvider>
            <s:change>
        <![CDATA[
                // NEW!!!
            var ClassReference:Class = getDefinitionByName(event.currentTarget.selectedItem.clickfn) as Class;
            navigator.pushView(ClassReference);
        ]]>
    </s:change>
    </s:List>
</s:View>

EDIT: i added the "change" tag, and it compiles now, but i get an error message:

ReferenceError: Error #1065: Variable Projects is not defined. at global/flash.utils::getDefinitionByName() at views::MainHomeView/___MainHomeView_List1_change()[C:\Users\jlehenbauer\Adobe Flash Builder 4.5\Metters Inc\src\views\MainHomeView.mxml:56] at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:13128] at spark.components::List/commitSelection()[E:\dev\4.5.1\frameworks\proje开发者_Go百科cts\spark\src\spark\components\List.as:1205] at spark.components.supportClasses::ListBase/commitProperties()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\supportClasses\ListBase.as:939] at spark.components::List/commitProperties()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\List.as:1069] at mx.core::UIComponent/validateProperties()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:8209] at mx.managers::LayoutManager/validateProperties()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\LayoutManager.as:597] at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\LayoutManager.as:813] at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1180]

You can simplify the change handler logic in JacobL's answer by doing something like this:

<s:List id="list1" height="100%" width="100%" change="navigator.pushView(list1.selectedItem.nextView)">
    <s:itemRenderer>
        <fx:Component>
            <s:IconItemRenderer labelField="name"/>
        </fx:Component>
    </s:itemRenderer>
    <s:dataProvider>
        <s:ArrayList>
            <s:DataItem name="Projects" message="Learn more about what we're working on" nextView="{views.Projects}" />
            <s:DataItem name="Locate Office" message="Find directions to our nearest office" nextView="{views.Locate}" />
            <s:DataItem name="Contact Us" message="Let us know your thoughts!" nextView="{views.ContactUs}" />
            <s:DataItem name="About Us" message="" nextView="{views.AboutUs}" />
        </s:ArrayList>
    </s:dataProvider>
</s:List>

I am making a mobile application in Flash Builder 4.5 for android and iOS and am using the itemRenderer and iconitemrenderer classes to make a list of options for my app.

Actually,based on the code you've shown in your example you are not using the ItemRenderer class; just the IconItemRenderer class. The syntax you see, like this:

is a syntax used to define properties of the component as children in MXML. It refers to the itemRenderer property of the List component; it does not refer tot he ItemRenderer class.

That said, the error appears to be that you are trying to reference a string clickfn="Projects"as if it were a class. Therefore you get a type conversion error. If you specify the full class path, you may have better luck.

Also, three of your items have no clickFn defined; so they will probably throw similar errors.

You can get ride of the conditionals by doing the suggestion above like so:

<pre>
<s:dataProvider>
<s:ArrayList>
    <s:DataItem name="Projects" message="Learn more about what we're working on"   nextView="{views.Projects}" />
    <s:DataItem name="Locate Office" message="Find directions to our nearest office" nextView="{views.Locate}" />
    <s:DataItem name="Contact Us" message="Let us know your thoughts!" nextView="{views.ContactUs}" />
    <s:DataItem name="About Us" message="" nextView="{views.AboutUs}" />
    </s:ArrayList></s:dataProvider>

<s:change>
navigator.pushView(event.currentTarget.selectedItem.nextView);
</s:change>

Figured it out. here's a solution:

<s:List height="100%" width="100%">
    <s:itemRenderer>
        <fx:Component>
            <s:IconItemRenderer height="100" labelField="name" 
                                iconField="photo" iconHeight="80" 
                                iconWidth="80" messageFunction="getMessage">
                <fx:Script>
                    <![CDATA[
                        import spark.components.NavigatorContent;
                        protected function getMessage(o:Object):String
                        {
                            return o.message;
                        }
                    ]]>
                </fx:Script>
            </s:IconItemRenderer>
        </fx:Component>
    </s:itemRenderer>
    <s:dataProvider>
        <s:ArrayCollection>
            <fx:Object name="Projects" photo="@Embed('libs/ProjectsIcon2.png')" message="Learn more about what we're working on">
            </fx:Object>
            <fx:Object name="Locate Office" photo="@Embed('libs/google-maps-icon.png')" message="Find directions to our nearest office">
            </fx:Object>
            <fx:Object name="Contact Us" photo="@Embed('libs/gmailicon.png')" message="Let us know your thoughts!">
            </fx:Object>
            <fx:Object name="About Us" photo="@Embed('libs/info-icon.png')" message="">
            </fx:Object>
        </s:ArrayCollection>
    </s:dataProvider>
    <s:change>
              //these if statements were the solution i used. rough, but works well
        <![CDATA[
            if(event.currentTarget.selectedItem.name == "Projects"){navigator.pushView(Projects);}
        if(event.currentTarget.selectedItem.name == "Locate Office"){navigator.pushView(Locations);}
        if(event.currentTarget.selectedItem.name == "Contact Us"){navigator.pushView(Contact);}
        if(event.currentTarget.selectedItem.name == "About Us"){navigator.pushView(About);}
        ]]>
    </s:change>
</s:List>