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

 本篇的主要包括两部分内容。     1. 服务器端的文件结构及基础代码。      2. 实现员工信息的保存。  

 知识点：

      1. 与java端交互

      2. flex上传图像

      3. 自定义事件

      4. 验证表单

      5. 基本的动画效果

 

 

一、 服务器端的文件结构及基础代码

    1. 文件结构说明。

  2. web.xml

	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>
		
    <listener>
        <listener-class>flex.messaging.HttpFlexSession</listener-class>
    </listener>

    <servlet>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	    <init-param>
	        <param-name>contextConfigLocation</param-name>
	        <param-value>classpath:applicationContext.xml</param-value>
	    </init-param>
	    <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
    </servlet-mapping>

 

  3. 定义员工持久化对象Employee，需要特别留意的是headtraid采用了byte[]类型，数据库中存放的类型为longblob。

	/**
	 * 头像
	 */
	private byte[] headtraid;

 

  4. 编写EmployeeManager,使之继承SuperEntityManager，这样便具备了增删改的功能，写一个查找方法findEmployees。

/**
 * 员工信息管理
 * @author 黄连忠
 */
@Service("employeeManager")
@Component
@RemotingDestination(channels={"my-amf","my-secure-amf"})
public class EmployeeManager extends SuperEntityManager {
	
	/**
	 * 根据查询条件查询出员工
	 * @param condition
	 * @return
	 */
	@SuppressWarnings("unchecked")
	public List<Employee> findEmployees(String condition) {
		Criteria c = superDao.createCriteria(Employee.class);
		c.add(Restrictions.eq("deleted", false));
		if (StringUtil.isNotNull(condition)){
			c.add(Restrictions.like("name", "%"+condition+"%"));
		}
		c.addOrder(Order.asc("name"));
		return c.list();
	}
	
}

 

二、Flex端

  1. 首先用Po2FlexVoUtil工具类生成对应SuperEntity.as和Employee.as，放到对应的文件夹下。

  2. 切换到Flash透视图，新建一个名为views.personnel的包。在其在下面建一个名为BasicInfo的NavigatorContent组件。具体内容请参照附件。

  3.  来看看泰头像处理这部分。首先定义一个id为headtrait的Image，将其source绑定到类型为ByteArray的headtraid，当图像传到浏览器后便会将其显示为图片。

<mx:Image id="headtrait" source="{employee.headtraid}" width="150" height="155"/>

<s:Button label="选择头像" id="btnSelectImage" click="selectImage()"/>

private function selectImage():void {
	var arr:Array = [];
	arr.push(new FileFilter("图像", ".gif;*.jpeg;*.jpg;*.png"));
	fileReference.browse(arr);
}
private function fileReference_select(evt:Event):void {
	fileReference.load();
}
			
private function fileReference_complete(evt:Event):void {
	headtrait.source = fileReference.data;
}

 

在非可视元素中定义一个<net:FileReference id="fileReference"   select="fileReference_select(event);"   complete="fileReference_complete(event);" />

  4. 验证表单。将FormItem中的required属性置为true, 使其在界面中显示红色的*。在非可视元素中定义一个StringValidator。并且在整个组件的creationComplete事件中，将validate_ename加入到事先定义的validatorArr数组当中（/commonAs/validate.as文件）。  在需要验证的时候调用validateForm()函数即可。

<mx:StringValidator id="validate_ename" source="{ename}" property="text" required="true" requiredFieldError="员工姓名不能为空！" />

if (validateForm()){
	Alert.show("您确定要执行更新操作吗?", "提示信息", Alert.YES|Alert.NO, this, function(evt:CloseEvent):void{
		if (evt.detail==Alert.YES){
						
		}
	});
}

  

5. 调用java端方法。在非可视元素中声明一个RemoteObject.

<s:RemoteObject id="employeeManager" destination="employeeManager"

showBusyCursor="true" fault="faultHandler(event)">

<s:method name="add" result="onAdd(event)"/>

<s:method name="update" result="onUpdate(event)"/>

</s:RemoteObject>

直接使用java端的方法即可。

protected function doAdd(event:MouseEvent):void{
	if (validateForm()){
		Alert.show("您确定要添加员工吗?", "提示信息", Alert.YES|Alert.NO, this, function(evt:CloseEvent):void{
			if (evt.detail==Alert.YES){
				var tempEmployee:Employee = new Employee();
				tempEmployee.name = ename.text;
				tempEmployee.gender = rgGender.selectedValue as String;
				tempEmployee.birthday = birthday.selectedDate;
				tempEmployee.nativeplace = nativeplace.text;
				tempEmployee.joinDate = joinDate.selectedDate;
				tempEmployee.leaveDate = leaveDate.selectedDate;
				tempEmployee.headtraid = headtrait.source as ByteArray;
				
				tempEmployee.descn = descn.text;
				tempEmployee.htmlDescn = descn.htmlText;
				employeeManager.add(tempEmployee);
			}
		});
	}
}

 

6. 自定义事件。新建一个名为EmployeeThumbEvent的自定义Event，放在lzh.icecream.personnel.event包下面，供以后用。具体内容请参照附件。

protected function onAdd(event:ResultEvent):void{
	employee = event.result as Employee;
	dispatchEvent(new EmployeeThumbEvent(EmployeeThumbEvent.ADD_EMPLOYEE, employee));
}

  <fx:Metadata>

[Event(name="addEmployee", type="lzh.icecream.personnel.event.EmployeeThumbEvent")]

[Event(name="updateEmployee", type="lzh.icecream.personnel.event.EmployeeThumbEvent")]

</fx:Metadata>

7. 基本的动画效果。在employee值发生变化时，让头像围绕Y轴转360度。

public function set employee(employee:Employee):void{
	this._employee = ObjectUtil.copy(employee) as Employee;
	
	
	var rotate3D:Rotate3D = new Rotate3D();
	rotate3D.angleXFrom = 0; rotate3D.angleXTo = 0;
	rotate3D.angleYFrom = 0; rotate3D.angleYTo = 360;
	rotate3D.angleZFrom = 0; rotate3D.angleZTo = 0;
	rotate3D.autoCenterTransform = true;
	rotate3D.autoCenterProjection = true;
	
	rotate3D.target = headtrait;
	rotate3D.play();
}

 

8. 对主应用程序icecream.mxml做简单的修改。加入自定义组件<personnel:BasicInfo />。创建好数据库之后，启动tomcat，试着添加一条数据，然后到数据库看看。