Flex Mobile - Highlight Selected Row in Item Renderer - apache-flex

Question

I am building an ItemRenderer in order to display a list of jobs that a company may want to carry out on a building. A user then may click on a job to select it and use add/edit/delete buttons on the parent view.
How would I highlight the selected HGroup in my s:ItemRenderer to allow a user to see which job is currently selected?
<s:Scroller width="100%" height="70%">
<s:DataGroup width="100%" height="100%"
horizontalCenter="0" verticalCenter="0"
dataProvider="{Session.EXISTING_JOBS}"
>
<s:layout >
<s:VerticalLayout />
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer verticalCenter="0" horizontalCenter="0" width="100%">
<fx:Script>
<![CDATA[
protected function jobSelect_clickHandler(event:MouseEvent):void
{
// highlight the HGroup here
if(this.selected == true){
jobRow.setStyle('contentBackgroundColor',0x000000);
} else {
jobRow.setStyle('contentBackgroundColor',0xFFFFFF);
}
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
</s:states>
<s:HGroup id="jobRow"
width="100%" height="50"
verticalAlign="middle"
click="jobSelect_clickHandler(event)" >
<s:Label text="{data.id}"
width="15%" height="50"
verticalAlign="middle"
verticalCenter="0"/>
<s:Label text="{data.company}"
width="35%" height="50"
verticalAlign="middle"
verticalCenter="0"/>
<s:Label text="{data.building}"
width="35%" height="50"
verticalAlign="middle"
verticalCenter="0"/>
<s:Label text="{data.assets}"
width="15%" height="50"
verticalAlign="middle"
verticalCenter="0"/>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:Scroller>

Answer 1

Assuming that you're using the itemRenderer in a list; the List class already does this by default. You can change the value by setting the selectionColor style.
If you really want to change values on the HGroup, you can use the style contentBackgroundColor. You can tell whether your current renderer is the selected item or not by accessing the selected property of the itemRenderer instance.
protected function selectJob_clickHandler(event:MouseEvent):void
{
// highlight the HGroup here
if(this.selected == true){
hgroupID.setStyle('contentBackgroundColor',0x000000);
} else {
hgroupID.setStyle('contentBackgroundColor',0xFFFFFF);
}
}
Don't forget to add an ID to the HGroup:
<s:HGroup id="hgroupID"
width="100%" height="50"
verticalAlign="middle"
click="selectJob_clickHandler(event)" >