flex4 multiple img load generic function

Question

I am relatively new to the Flex 4 platform (only two three months under my belt). I will cut it short and get to the point

<mx:TabNavigator....
<s:NavigatorContent...
<s:BorderContainer width="522" 
          height="138" 
          id="fstCont4" 
          backgroundAlpha="0" 
          dropShadowVisible="true" 
          x="568.25" y="177.1">
    <s:layout>
     <s:HorizontalLayout gap="0" verticalAlign="middle"/>
    </s:layout>
    <s:Label text="Lahore PIE" 
       rotation="-90"  
       fontWeight="normal" 
       fontFamily="Arial" 
       fontSize="18" 
       verticalAlign="middle" 
       textAlign="center" 
       fontStyle="normal"/>
    <mx:Image id="lhrPIE" 
        width="506" 
        height="138"/>
    <s:Button height="25" width="25" rotation="90" click="lhrPIE_Refresh_clickHandler(event)"/>
   </s:BorderContainer>

</s:NavigatorContent>
</mx:TabNavigator>

I have a contentCreationComplete event on NavigatorContent... and once that is fired i load some img's into the mx Image component. I have many of these BorderContainer inside the NavigatorContent container and hence a lot of images are loaded in ContentCreation function.

I have also added a button component to the BorderContainer component so that the users can manually reload a specific img from the many BorderContainer + img combos. The click event as mentioned just loads the img into the img block. Problem is i donot want to write event handlers for all the buttons.

how can i make a generic function..

i have a feeling that it would be something like

protected function imgRefresh_clickHandler(event:MouseEvent):void { this.lhrPIE.load("...."); }

How can i make this function generic and reference the img block of each Container generically without referencing the ID ( which are off course unique thought the app for each img block)

Answer 1

If you plan on having a different button in each BorderContainer, and the order of the content is identical and fixed in each container (ie. Image is always the second item), then you could use the index to trigger a load on the corresponding Image:

imgRefresh_clickHandler(event:MouseEvent):void
{
    (event.target.parent.getChildAt(1) as Image).load();
}

where the 1 corresponds to the index at which the Image component is. This code assumes that the source property on the image has already been set.

Answer 2

Well done it in this way.. .hope is helps someone ...

        private var imgPattren:RegExp = /......$/;
        private var imgLoc:Array = new Array("img1.png","img2.png");



       protected function imgRefresh_clickHandler(event:MouseEvent):void
        {
                             switch(String(imgPattren.exec(String(event.currentTarget))))
                            {
                            case 'isbTW1':
                                event.currentTarget.load(imgLoc[0]);
                                break;
                            case 'isbPIE':
                                event.currentTarget.load(imgLoc[0]);
                                break;
        }
        }

How ever i still face an isssue. when my image fails to load i get an "image missing icon". and my Click hit area is reduced to that little icon instead of the original image. i may add the click handler to the Bordercontainer and use the method suggested by @merv