仿照Flexstroe3写的一个员工管理应用 （四）

本篇内容为创建员工缩略图以及员工详细信息，如图。

 

 

1.在views.personnel包下创建一个名为EmployeeCatalogPanel的Panel组件，分别用【browse】和【details】两个state显示员工列表和员工详细信息。

 

	<s:states>
		<s:State name="details" />
		<s:State name="browse" />
	</s:states>

2. 在EmployeeCatalogPanel中创建一个BorderContainer，里面包含一个Cavas用于显示员工列表。

 

	<s:BorderContainer width="100%" height="100%" >
		<mx:Canvas id="thumbContent" width="100%" height="100%" horizontalScrollPolicy="off" />
		<!--tetails-->
	</s:BorderContainer>

 

 3. 创建一个类型为ArrayCollection的变量_catalog，用于存放Employee List，重写其set和get。

 

private var _catalog:ArrayCollection = new ArrayCollection; // 用于存放employees

[Bindable]
public function set catalog(value:ArrayCollection):void{
	_catalog = value;
	createThumbnails(); // 创建缩略图
}

public function get catalog():ArrayCollection{
	return _catalog;
}

 

 

4. 在views.personnel包下创建一个名为EmployeeCatalogThumbnail的BorderContainer组件，为其声明一个pubilc的Employee变量。

 

[Bindable]
public var employee:Employee;

 

 

5. 在EmployeeCatalogThumbnail中拖入一个Image用于显示Employee的头像，用两个label控件显示Employee的姓名和性别，参照附件。

 

6. 分别用【cols2】、【cols3】、【cols4】3个State显示EmployeeCatalogThumbnail在员工总数发生变化时的大小，总数大于9时，每行显示最多显示4名员工；总数在4~9之间，每行最多显示3名员工；否则显示2名员工。

 

width.cols4="{COL_WIDTH_4}" height.cols4="{COL_HEIGHT_4}"
width.cols3="{COL_WIDTH_3}" height.cols3="{COL_HEIGHT_3}"
width.cols2="{COL_WIDTH_3}" height.cols2="{COL_HEIGHT_3}"

 

 

7.为EmployeeCatalogThumbnail加入rollOver、rollOut、click的事件处理函数。

 

8.回到EmployeeCatalogPanel，创建一个Array对象，用于存放EmployeeCatalogThumbnails。

 

private var thumbnails:Array = new Array(); // 用于存放???CatalogThumbnail
private var filterCount:int; // 
private var accepted:Dictionary = new Dictionary();

 

 

9.在createThumbnails()中，根据catalog逐个创建EmployeeCatalogThumbnail，在结束时调用layoutCatalog函数。

 

private function createThumbnails():void {
	var i:int; 
	if (null != thumbnails) { // 清空缩略图
		for (i=0; i < thumbnails.length; i++) {
			thumbContent.removeElement(thumbnails[i]);
		}
	}
	
	var row:int = 0;
	var col:int = -1;
	var n:int = catalog.length;
	thumbnails = new Array(n);
	filterCount = n;
	
	// 创建CatalogThumbnails
	for (i=0; i < n; i++) {
		var thumb:EmployeeCatalogThumbnail = new EmployeeCatalogThumbnail();
		thumbnails[i] = thumb;
		thumbnails[i].showInAutomationHierarchy = true;
		thumb.employee = catalog.getItemAt(i) as Employee;
		accepted[thumb.employee] = true;
		thumbContent.addElement(thumb);
		thumb.addEventListener(EmployeeThumbEvent.DETAILS, employeeThumbEventHandler);
	}
	
	layoutCatalog(); // 布局
}

 

10. 员工管理的动画效果放在layoutCatalog中处理，请参照代码中的注释。

 

11. 在主应用程序中加入EmployeeCatalogPanel控件，并加入加载员工的方法，运行程序。

 

<personnel:EmployeeCatalogPanel id="catalogPanel" x="176" y="26" width="660" height="600"/>
<s:Button x="76" y="26" label="加载员工" click="employeeManager.queryEmployees(null)" />

 

12. 在views.personnel包下创建一个名为EmployeeDetails的BorderContainer组件，用于显示员工详细信息，其内容如图，代码参照附件。

 

13. 回到EmployeeCatalogPanel，在thumbContent下面加入EmployeeDetails。

 

<s:BorderContainer width="100%" height="100%" >
	<mx:Canvas id="thumbContent" width="100%" height="100%" horizontalScrollPolicy="off" />
	<personnel:EmployeeDetails id="details" visible="false" visible.details="true"
								   width="{EmployeeCatalogThumbnail.COL_WIDTH_4 * 3}" height="100%"
								   addEmployee="thumbEventHandler(event)"
								   browse="thumbEventHandler(event)"
								   updateEmployee="thumbEventHandler(event)"/>
</s:BorderContainer>

 

 

 

14. 在showDetails()中将显示detail，并将其余的thumbnail移动到右手边。