今天又看到另外一种展现效果,感觉更炫。
一,定义块组件
<?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);
}