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\projects\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: