Managing several components with the same set of button

Question

Hi everybody,
I would like to have in my application a set of videos gathered in one row. Under the videos there are control buttons located. This part is quite simple.
I would also like the buttons to control the selected video. And this is where the problems begin. Initially, the buttons will manage the first video in a row. However, after selecting another video, the should manage the selected one. I have some dificculties with implementing a function that would override the CLICK attribute of the buttons after selecting a desired video. I am not sure if this is the best approach but don't have other ideas. What is a possible way to do it?
This is a part of the code:
<?xml version="1.0"?>
<!-- Simple example to demonstrate the ViewStack layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private function activateControls(event:MouseEvent):void
                if (event.currentTarget.id == "video2")
                    play_button.click = "video2.play()";     // This does not work
        ]]>
    </mx:Script>
    <mx:Canvas width="629" height="236" id="panel_t">
        <mx:VideoDisplay click="activateControls(event);" x="10" y="40" width="198" height="133" source="video/video.flv" id="video1"/>
        <mx:VideoDisplay click="activateControls(event);" x="216" y="40" width="198" height="133" source="video/video.flv" id="video2"/>
        <mx:VideoDisplay click="activateControls(event);" x="422" y="40" width="198" height="133" source="video/video.flv" id="video3"/>
    </mx:Canvas>
    <mx:Canvas width="629" height="40" id="panel_b">
        <mx:Button label="PLAY" height="40" id="play_button" click="video1.play()"/>
        <mx:Button label="PAUSE" height="40" id="pause_button" click="video1.pause()" x="65" y="0" />
        <mx:Button label="STOP" height="40" id="stop_button" click="video1.stop()" x="138" y="0" />
    </mx:Canvas>
</mx:Application>
Thanks,
flexynewbie

Answer 1

You're going about it the wrong way.
A button component doesn't have a "click" property, it dispatches a "click" event.
So what you need to do is assign an event handler to the button click event, just like you did for the VideoDisplay instances.
What you can do is store a reference to the selected VideoDisplay (which is why I mention in your previous thread you don't need the id at all) and use that when a button is clicked.
private var selectedVideo:VideoDisplay = video1;
private function activateControls(event:MouseEvent):void {
     selectedVideo = event.currentTarget as VideoDisplay;
private function playClickHandler(event:MouseEvent):void {
     selectedVideo.play();
private function pauseClickHandler(event:MouseEvent):void {
     selectedVideo.pause();
etc..
<mx:Button id="play_button" height="40" label="PLAY" click="playClickHandler(event);>
<mx:Button id="pause_button" height="40" label="PAUSE" click="pauseClickHandler(event);" />
<mx:Button id="stop_button" height="40" label="STOP" click="stopClickHandler(event);" />
Alternativly, you could use the selectedVideo in mxml, but that's usually not a good idea.
<mx:Button id="play_button" height="40" label="PLAY" click="selectedVideo.play();>
For instance, in this case, you probably want to stop all other videos before playing the selected one, or some other stuff may need to be done. That can easily be done in the button click event handler.
As a sidenote, you should look into using a different container than Canvas, for easier auto-layout.
A VBox might be better suited for displaying the VideoDisplay instances. No need for all the x, y positioning. Same goes for the Buttons, use an HBox container there.
Control the gaps and padding with verticalGap, horizontalGap, paddingLeft, paddingRight, paddingTop, paddingBottom of the containers, all of which can be set through CSS.