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

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.