DataGrid Image ItemRenderer --> How to change image source of other rows, not only the selected one

Question

I have an Image in my DataGrid. Its purpose is to play and stop an audio, so I need to change the image source from the "Play" image to the "Stop" image every time I click on it.

I've already accomplished that with the next code:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Audio List" 
                horizontalScrollPolicy="off" verticalScrollPolicy="auto"
                showCloseButton="true" close="closeWindow()">
    <mx:Script>
        <![CDATA[
            import flash.external.ExternalInterface;

            import mx.collections.ArrayCollection;
            import mx.managers.PopUpManager;

            public var dpc:ArrayCollection;

            private function closeWindow(){
                PopUpManager.removePopUp(this);
                ExternalInterface.call("pauseAudio");
            }
        ]]>
    </mx:Script>
    <mx:Rotate id="rotate" />
    <mx:Zoom id="zoom" />
    <mx:VBox width="100%" top="20">
        <mx:Text fontWeight="bold" top="20" left="20">
            <mx:text>Click the play/pause button for listening/pause each audio individually:</mx:text>
        </mx:Text>
        <mx:DataGrid id="gridAudios" top="60" bottom="0" left="0" width="100%" height="100%" doubleClickEnabled="true">
            <mx:columns>
                <mx:DataGridColumn headerText="Name" dataField="audioId"/>
                <mx:DataGridColumn id="btnCol" dataField="url" headerText="" textAlign="center">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox>
                                <mx:Image click="changeImg(data.url)" toolTip="Play"
                                      id="imgPlayStop" useHandCursor="true"/>
                                <mx:Script>
                                    <![CDATA[
                                        import mx.states.State;
                                        import mx.collections.ArrayCollection;

                                        [Embed(source='../assets/play-btn-small.png')]
                                        [Bindable]
                                        public var Play:Class;

                                        [Embed(source='../assets/stop-btn-small.png')]
                                        [Bindable]
                                        public var Stop:Class;

                                        private function init():void
                                        {
                                            imgPlayStop.source = Play

                                            var statePlaying:State = new State();
                                            var stateStopped:State = new State();
                                            statePlaying.name="playing";
                                            stateStopped.name="stopped";

                                            var states:Array = new Array();
                                            states.push(statePlaying);
                                            states.push(stateStopped);

                                            imgPlayStop.states = states;

                                            imgPlayStop.currentState = "stopped";
                                        }

                                        private function changeImg(url:String):void{
                                            if (imgPlayStop.currentState == "stopped"){
                                                imgPlayStop.source = Stop;
                                                imgPlayStop.currentState = "playing";
                                                ExternalInterface.call("playAudio", url);

                                            } else {
                                                imgPlayStop.source = Play;
                                                imgPlayStop.currentState = "stopped";
                                                ExternalInterface.call("pauseAudio");                                               
                                            }
                                        }
                                    ]]>
                                </mx:Script>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
</mx:TitleWindow>

But the thing is that I want to change the image source of the other rows of the DataGridColumn.

For example, if I click in the play image of one row it changes to the stop image, everything OK till here.

If now I click the play image of other row, it also changes to the stop image, but the previous row still remains with the stop image, and I want to be only one stope image active.

In other words, I want to give the impression only one audio is playing. So only one of the rows can be with the "Stop" image while the rest must be with the "Play" image.

So, ¿how can I loop through the DataGridColumn items renderer and change their image source every time I click in on of the items renderer?

score 0 · Answer 1 · answered Jan 19 '15 at 18:58

0

You can save prev imgPlayStop as public static variable in a Model class and use it

public class Model {
  public static var prevImgPlayStop:Image;
}

in your itemRenderer do like this

private function changeImg(url:String):void{
  if (Model.prevImgPlayStop) {
     Model.prevImgPlayStop.currentState = "stopped";
  }
  /*your code*/
  Model.prevImgPlayStop = imgPlayStop;
}

answered Jan 19 '15 at 18:58

Anton

305
3
6

that haven't worked so far...maybe I've understood something wrong. It helps to save the prev status, but I'm still unable to access and change all the DataGridColumn ItemsRenderer image every time I click in one ItemRenderer image. That's my real problem. If you could expand your answer... – daniegarcia254 Jan 20 '15 at 08:29

score 0 · Answer 2 · answered Jan 29 '15 at 21:36

I post the SOLUTION I founded to my problem:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Audio List" 
                horizontalScrollPolicy="off" verticalScrollPolicy="auto" width="510" height="340" 
                showCloseButton="true" close="closeWindow()">
    <mx:Script>
        <![CDATA[
            import flash.external.ExternalInterface;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;
            import mx.controls.Alert;

            [Embed(source='../assets/play-btn-small.png')]
            var Play:Class;
            [Embed(source='../assets/stop-btn-small.png')]
            var Stop:Class;

            [Blindable]
            public var dpc:ArrayCollection;

            private function titlewindow1_initializeHandler(event) 
            {
                ExternalInterface.addCallback('onFinishAudio', onFinishAudio);
                ExternalInterface.addCallback('onStartAudio', onStartAudio);
            }


            private function closeWindow(){
                PopUpManager.removePopUp(this);
                ExternalInterface.call("pauseAudio");

            }

            private function onFinishAudio(audioId:String) {

                for ( var audio:Object in dpc )
                {
                    if (audio.audioId == audioId){
                        audio.status = 'stopped';
                    }
                }
                gridAudios.dataProvider = dpc;
                dpc.refresh();
            }

            private function onStartAudio(audioId:String)
            {
                for ( var audio:Object in dpc )
                {
                    if (audio.audioId != audioId)
                    {
                        if (audio.status == 'playing')
                        {
                            audio.status='stopped';
                        }
                    } else {
                        //Alert.show("Dgsg","Error");
                        audio.status='playing';
                    }
                }
                gridAudios.dataProvider = dpc;
                dpc.refresh();
            }

            public function playAudio(audioURL:String, audioId:String){
                ExternalInterface.call("playAudio", audioURL, id);
            }

            public function pauseAudio(){
                ExternalInterface.call("pauseAudio");   
            }
        ]]>
    </mx:Script>
    <mx:Rotate id="rotate" />
    <mx:Zoom id="zoom" />
    <mx:VBox top="0" bottom="0" left="0" right="0" paddingTop="20" paddingLeft="20">
        <mx:Text fontWeight="bold" height="20">
            <mx:text>Click the play/pause button for listening/pause each audio individually:</mx:text>
        </mx:Text>
    </mx:VBox>
    <mx:DataGrid id="gridAudios" top="50" bottom="20" left="20" right="20" width="100%" doubleClickEnabled="false">
        <mx:columns>
            <mx:DataGridColumn headerText="Name" dataField="audioId"/>
            <mx:DataGridColumn id="btnCol" headerText="" textAlign="center">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:HBox horizontalAlign="center">
                            <mx:Script>
                                <![CDATA[
                                    protected function image1_clickHandler(event:MouseEvent):void
                                    {
                                        if (data.status=='playing'){
                                            outerDocument.pauseAudio(); 
                                            data.status='';
                                        }else{
                                            outerDocument.playAudio(data.url,data.audioId);
                                            data.status='playing';
                                        }

                                    }
                                ]]>
                            </mx:Script>

                            <mx:Image click="image1_clickHandler(event)" 
                                      toolTip="{data.status=='playing' ? 'Stop' : 'Play'}"
                                      useHandCursor="true" source="{data.status=='playing' ? outerDocument.Stop : outerDocument.Play}"/>
                        </mx:HBox>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:TitleWindow>

Where the key to the solution is in the source property of the Image object and in the click handler.

DataGrid Image ItemRenderer --> How to change image source of other rows, not only the selected one

2 Answers2