Flex 4.6 : Make action for button in list

Question

I'm beginner in Flex . my issue when to add button to list , i put the button in the itemrender but the action of navigator.pushView(views.Listde,ProblemsList.selectedItem); make an error "Acess of undefined property navigator .

Code :

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
    <![CDATA[
        import views.ButList;

        protected function button1_clickHandler(event:MouseEvent):void
        {
            // TODO Auto-generated method stub
            navigator.pushView(views.Listde,ProblemsList.selectedItem);
        }

    ]]>
</fx:Script>

<s:Group width="100%" height="100%" styleName="PCS.css">
    <s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
              paddingRight="5" paddingTop="5">
        <s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
            <s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
        </s:HGroup>
        <s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
            <s:BitmapImage source="images/{data.image}"/>
            <s:TextArea editable="false" text="{data.description}"/>
            <s:Label text="{data.price}"/>
            <s:Button label="s" click="button1_clickHandler(event)"/>                   
        </s:VGroup>
    </s:HGroup>
</s:Group>

if any solution to resolve it by list or any component instead of list then i want button to navigate to view with the selected item and the change of the list to navigate to another view with the selected item also , then the change of list work success but the button action cannot defined with the navigator.

Thanks in advance for any help .

Answer 1

Create a custom event with data property and dispatch the event from item renderer or dispatch the list change event from the item renderer when clicking the button.

package myEvents
{
import flash.events.Event;

public class CustomEvent extends Event
{
    public function CustomEvent(type:String, 
        data:Object=null) {
            // Call the constructor of the superclass.
            super(type);

            // Set the new property.
            this.data = data;
    }

    // Define static constant.
    public static const MY_BUTTON_CLICKED:String = "myButtonClicked";

    // Define a public variable to hold the state of the enable property.
    public var data:Object;

    // Override the inherited clone() method.
    override public function clone():Event {
        return new CustomEvent(type, data);
    }
  }
}

MyItemRenderer.mxml

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
    <![CDATA[
        import views.ButList;

        protected function button1_clickHandler(event:MouseEvent):void
        {
            // dispatch a custom
            (this.owner as List).dispatchEvent(new CustomEvent(CustomEvent.MY_BUTTON_CLICKED, data));
            //navigator.pushView(views.Listde,ProblemsList.selectedItem);
        }

    ]]>
</fx:Script>

<s:Group width="100%" height="100%" styleName="PCS.css">
    <s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
              paddingRight="5" paddingTop="5">
        <s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
            <s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
        </s:HGroup>
        <s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
            <s:BitmapImage source="images/{data.image}"/>
            <s:TextArea editable="false" text="{data.description}"/>
            <s:Label text="{data.price}"/>
            <s:Button label="s" click="button1_clickHandler(event)"/>                   
        </s:VGroup>
    </s:HGroup>
</s:Group>

Your view class

<?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="MY View">
<s:layout>
    <s:VerticalLayout paddingTop="10"/>
</s:layout>

<fx:Script>
    <![CDATA[
        import spark.events.IndexChangeEvent;

        private function onListCreationComplete_Handler():void
        {
            myList.addEventListener(CustomEvent.MY_BUTTON_CLICKED, onItemRendererButtonClicked);
        }

        protected function onItemRendererButtonClicked(event:CustomEvent):void {
            var data:Object = event.data;
            navigator.pushView(views.Listde,data);//myList.selectedItem
        }

    ]]>
</fx:Script>

<s:Label text="Select an view"/>
<s:List id="myList"
    width="100%" height="100%"
    labelField="firstName" itemRenderer="MyItemRenderer"
    change="myList_changeHandler(event)" creationComplete="onListCreationComplete_Handler()">
    <s:ArrayCollection>
        <fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/>
        <fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/>
         <fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/>
    </s:ArrayCollection>
</s:List>
</s:View>

I hope this might help u. There are tons of examples out there for list and item renderer for mobile.