BorderContainer 使用

今天又看到另外一种展现效果，感觉更炫。

 

 

一，定义块组件

 

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" fontFamily="微软雅黑"
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="320" height="70" cornerRadius="5"
		 mouseOver="bg.alpha=1" mouseOut="bg.alpha= _selected ? 1 : 0" 
		 backgroundColor="#FFFFFF" click="clickHandler(event)" buttonMode="true"
		 >
	<fx:Metadata>
		[Event(name="imageClick", type="pipi.CustomEvent")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			import pipi.CustomEvent;
			import pipi.Util;
			
			[Bindable]
			private var _data:Object;

			public function get selected():Boolean
			{
				return _selected;
			}

			public function set selected(value:Boolean):void
			{
				_selected = value;
				bg.alpha = _selected ? 1 : 0;
			}

			public function get data():Object
			{
				return _data;
			}
            [Bindable]
			private var _img_url:String;
			public function set data(value:Object):void
			{
				_data = value;
				_img_url = 'images/projectType/' + (_data.projectTypeCd as String).substr(0, 2) + '.png';
			}
			
			private var _selected:Boolean = false;
			protected function clickHandler(event:MouseEvent):void
			{
				_selected = true;
				bg.alpha = 1;
				this.dispatchEvent(new CustomEvent("moreClick", _data));
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:borderStroke> 
		<mx:SolidColorStroke id="bg" alpha="0" color="#6B8E23" weight="2"/> 
	</s:borderStroke>
	<s:Image id="img" source="{_img_url}" verticalCenter="0" left="5"/>
	<s:VGroup left="78" right="0" top="0" bottom="0" gap="0">
		<s:HGroup width="100%" height="50%" verticalAlign="middle" paddingLeft="5">
			<s:Label color="#000000" text="{_data.projectCd}" fontWeight="bold"/>
		</s:HGroup>
		<s:HGroup width="100%" height="50%" verticalAlign="middle" paddingLeft="5">
			<s:Label color="0x005AB5" text="{_data.projectAddr}" fontWeight="bold"/>
			<s:Label color="0x984B4B" text="{_data.projectTypeName}" fontWeight="bold"/>
		</s:HGroup>
	</s:VGroup>
</s:BorderContainer>

二

  

<s:BorderContainer id="left" left="5" right="5" top="44" bottom="5">
		<s:Scroller left="10" right="10" top="10" bottom="35">
			<s:TileGroup id="main_grid" left="10" right="10" top="10" bottom="10" verticalGap="8">
			</s:TileGroup>
		</s:Scroller>
		<page:PagingToolbar id="paging" left="5" bottom="5" width="320"
							pageChange="paging_pageChangeHandler(event)"/>
	</s:BorderContainer>

三 加载

	var main_data:Array = message.data.list as Array
					var item_width:Number =  250;
					main_grid.removeAllElements();
					
					for(var i:int=0; i<main_data.length; i++){
						var item:DocumentItem = new DocumentItem;
						item.width = item_width;
						item.data = main_data[i];
						item.addEventListener("moreClick", moreClick);
						main_grid.addElement(item);
					}