PanelGroup 展示

 最近开发项目，学到了一种蛮好的展示界面的方法。。

 

一，所先定义这些块的组件，PlanImage.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" 
		 fontFamily="微软雅黑"
		 buttonMode="true"
		 width="190" mouseChildren="false" height="70"
		 mouseOver="mouseOverHandler(event)"
		 mouseOut="mouseOutHandler(event)"
		 click="image_clickHandler(event)"
		 >
	<fx:Metadata>
		[Event(name="imageClick", type="pipi.CustomEvent")]
		[Event(name="itemDelete", type="pipi.CustomEvent")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import comp.message.Message;
			
			import pipi.CustomEvent;
			import pipi.Util;
			
			import util.HttpUtil;
			
			//数据
			private var _data:Object;
			
			//image 前缀	
			private var imagePrefix:String = 'images/file/';

			[Bindable]
			public function get flagLabelVisible():Boolean
			{
				return _flagLabelVisible;
			}

			public function set flagLabelVisible(value:Boolean):void
			{
				_flagLabelVisible = value;
			}

			public function get deleteIconVisible():Boolean
			{
				return _deleteIconVisible;
			}

			public function set deleteIconVisible(value:Boolean):void
			{
				_deleteIconVisible = value;
			}

			public function get data():Object
			{
				return _data;
			}

			public function set data(value:Object):void
			{
				_data = value;
				img.source = imagePrefix + (value.fileType as String).substring(1)+'.png';
				lb.text = _data.label;
				flagLabel.text=_data.flagLabel ;
			}

			protected function image_clickHandler(event:MouseEvent):void
			{
				//单击图片事件
				if(_deleteIconVisible && event.localX > 164 &&event.localY<27)
				{
					var _this:Object = this;
					Util.confirm("删除","是否删除此计划摸底?",function():void{
						
						var param:URLVariables = new URLVariables();
						param.planId = _data.planId;
						HttpUtil.doPost("bfPlanAction!deleteBfPlan.do", param, function(obj:Object):void{
							Message.showSuccess("删除成功");
							_this.dispatchEvent(new CustomEvent("itemDelete", _data));
						});		
					});
				}else{
					this.dispatchEvent(new CustomEvent("imageClick",data));
				}
			}
			[Bindable]
			private var _deleteIconVisible:Boolean = false;
			private var _flagLabelVisible:Boolean = true;
			
			protected function mouseOverHandler(event:MouseEvent):void
			{
				if(_deleteIconVisible)
					delete_icon.visible = true;
			}
			protected function mouseOutHandler(event:MouseEvent):void
			{
				if(_deleteIconVisible)
					delete_icon.visible = false;
			}
			
			
		]]>
	</fx:Script>
	
	<s:Rect id="bg"  
			width="100%" height="100%"
			topRightRadiusX="3" bottomLeftRadiusX="3" 
			bottomRightRadiusX="3" topLeftRadiusX="3">
		<s:fill>
			<s:SolidColor color="#f5f8fd"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="#d5e1f3"/>
		</s:stroke>
	</s:Rect>
	<s:Line width="100%" bottom="0">
		<s:stroke>
			<s:SolidColorStroke caps="none" color="#E1E1E1" joints="miter" miterLimit="4" weight="1"/>
		</s:stroke>
	</s:Line>
	<s:HGroup left="0" paddingLeft="10" verticalAlign="middle" verticalCenter="0">
		<s:Image id="img" smooth="true" smoothingQuality="high"/>
		<s:Label id="lb" fontSize="12"/>
		
	</s:HGroup>
	<s:Image id="delete_icon" source="images/file/delete-small.png" right="5" top="5" smooth="true"  visible="false"/>
	<s:Label id ="flagLabel" right="10" bottom="0" visible="{_flagLabelVisible}"/>
</s:Group>

二，然后在module定义plan

  

<panel:PanelGroup top="47" left="5" right="5" bottom="5">
 <s:Scroller width="100%" height="100%">
  <s:VGroup id="main_group" width="100%" height="100%" verticalAlign="top" paddingLeft="20" paddingTop="10" gap="15"/>
 </s:Scroller>
 </panel:PanelGroup>

 

三，加载这些组件

main_group.removeAllElements();
			
			for(var i:int=0; i<message.data.length; i++){//根据各年度加上各年度的计划
				  var year:String = message.data[i].businessYear;
				  var list:Array = message.data[i].dataList as Array;
				  
				  var planLabel:PlanLabel = new PlanLabel();//计划年度
				  planLabel.data = year+"年";
				  main_group.addElement(planLabel);
				  
				var tileGroup:TileGroup = new TileGroup();
				tileGroup.width = main_group.width*0.9;
				tileGroup.horizontalGap = 15;
				tileGroup.verticalGap = 15;
				tileGroup.requestedColumnCount = -1;
				
	  			for(var j:int=0; j<list.length; j++)
	  			{
	  				var item:Object =   list[j];
					
 	  				var image:PlanImage = new PlanImage();
	  				item.label = item.planName;
  	  				item.fileType = ".folder";
	  				image.data = item;
	  				image.addEventListener("imageClick", itemClick);
	  				image.addEventListener("itemDelete", statuteDelete);
					image.deleteIconVisible = true;
					tileGroup.addElement(image);
	  			}
				main_group.addElement(tileGroup);
				
				var line:Group = new Group();
				line.height = 20;
				main_group.addElement(line);
			}