Flex 4中实现图形的显示和多选框的选择

首先对mxml进行编辑，如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" >
	<fx:Script>
		<![CDATA[
			import com.f4ia.components.itemRenderers.Listing10_4;
		]]>
	</fx:Script>
		<s:SkinnableDataContainer itemRenderer="com.f4ia.components.itemRenderers.Listing10_4"> 
			
			<s:layout>
				<s:HorizontalLayout/>
			</s:layout>
			
			<mx:ArrayCollection>
				<fx:Object imgSource="assets/1.png" labelText="操作系统"/>  
				<fx:Object imgSource="assets/2.png" labelText="计算机软件"/>  
				<fx:Object imgSource="assets/3.png" labelText="网络管理"/>  
				<fx:Object imgSource="assets/4.png" labelText="数据结构"/>  
			</mx:ArrayCollection>
			
		</s:SkinnableDataContainer>
	
	
</s:Application>

然后编辑项渲染器：

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" mouSEOver="moveIn()" mouSEOut="moveOut()" >	
    <fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
        .bg{
		  background-color:#CCCCCC;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			
			public function moveIn():void{
			   choose.visible=true;
			   bg.styleName="bg";
			}
			
			public function moveOut():void{
				if(choose.selected==true){
					choose.visible=true;
					bg.styleName="bg";
				}else{
					choose.visible=false;
					bg.styleName="";
				}
			}
		]]>
	</fx:Script>
	<mx:VBox id="bg">
		<s:Label id="myLabel" paddingBottom="3"	 paddingTop="20" paddingLeft="25"  text="{ data.labelText }" />
		<s:Group>
			<mx:Image id="img" source="{ data.imgSource }"/>
		</s:Group>
		<s:CheckBox label="" id="choose" visible="false"/>
	</mx:VBox>
	
</s:ItemRenderer>

最后运行的效果如下：