How to select an object in a flex HGroup?

Question

I have a button to create a image object every time its clicked and add that image object in to the Hgroup. The Hgroup could contain a few image objects. And another button to rotate the object.

What I want to do :

1. To be able to select a object.
2. So that selected object can be rotated 90 degrees about a point each time the rotate button is clicked.
3. Also want to limit the number of items added in the container/Hgroup.(Must be with the border)
4. Which is the best container(list, border container, Hgroup) that I can use for the above purpose ?

Currently what my codes can do : 1. Add image object to HGroup on each button click 2. I can only rotate the first item in the HGroup.

I am very new to flex. I have no idea how to go about doing this. Pls can someone help me out with a example. U can run my codes to get the idea of what I am trying to do.

Pls help me.. Thanks :)

This is the entire code I Have currently (U can run it in your computer if u wish) :

    <fx:Declarations>   
    <s:Rotate id="rotAnim" angleBy="90" duration="1000" target="{myImage}"
              autoCenterTransform="true" />
</fx:Declarations>
<fx:Script>
    <![CDATA[
        import spark.components.Image;

        private function generateImage():Image{
            var image:Image = new Image();
            [Embed(source='assets/test_Image.png')]             
            var myImg1:Class;
            image.source = myImg1;
            image.scaleX = 0.5; 
            image.scaleY = 0.5;             
            return image;
        }
        private function addImageToContainer(event:MouseEvent):void{
            var image1:Image = new Image();             
            image1 = generateImage();               
            holdingArea.addElement(image1);         
        }

        [Bindable]
        private var myImage:Image;          
        private function rotateImage():void {
            myImage = holdingArea.getElementAt(0) as Image;
            if (rotAnim.isPlaying) return;
            rotAnim.play();
        }

    ]]>
</fx:Script>
<s:BorderContainer x="216" y="53" width="319" height="367">

    <s:BorderContainer x="10" y="10" width="297" height="298" >
        <s:HGroup id="holdingArea" x="4" y="5" width="287" height="285">
        </s:HGroup>
    </s:BorderContainer>

    <s:Button x="23" y="324" label="Add Image Object" click="addImageToContainer(event)"/>
    <s:Button x="149" y="324" label="Rotate" click="rotateImage()"/>    

</s:BorderContainer>

Answer 1

Here's an example of how you could achieve this with a List component.
First create a model object that is going to be the presentation model for your image's state.

public class MyImage {

    [Bindable]
    public var source:Class;

    [Bindable]
    public var rotation:Number = 0;

}

Now create your a List with a custom ItemRenderer. Note that I used List instead of DataGroup (as I suggested in the comments) because you need to know which item was selected.

<s:List id="imageList" dataProvider="{dp}" 
        x="216" y="53" width="319" height="367">

    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer width="20" height="20">
                <s:Image source="{data.source}" rotation="{data.rotation}"
                         horizontalCenter="0" verticalCenter="0" 
                         scaleX=".5" scaleY=".5"/>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>

    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
</s:List>

<s:Button x="23" y="324" label="Add Image Object" click="addImage()"/>
<s:Button x="149" y="324" label="Rotate" click="rotateImage()"/>

The data property in the ItemRenderer is going to be filled with instances of MyImage and as you can see we bind to its source and rotation properties.
Note that I used an inline definition of the ItemRenderer here for brevity, but I suggest you move it into a separate class in a real world situation. I also left out the effect for clarity.
The HorizontalLayout will tell the list to display its items horizontally instead of the default vertical layout.

Now create the dataProvider for the List (it was already bound in the previous code, see {dp}):

[Bindable]
public var dp:IList = new ArrayCollection();

and add some items to it when the Button is clicked:

[Embed(source='assets/CalendarIcon.png')] var myImg1:Class;

private function addImage():void {
    var image:MyImage = new MyImage();
    image.source = myImg1;
    dp.addItem(image);
}

The List will automatically create a new ItemRenderer to reflect this new item in the dataProvider.

And now lets rotate it by clicking on the second Button:

private function rotateImage():void {
    if (imageList.selectedItem) imageList.selectedItem.rotation += 90;
}

You update the rotation of the selected MyImage instance. The Binding will do the rest of the work and rotate the actual Image in the ItemRenderer.