实习日志（5）：Flex页面“跳转”

Flex没有页面跳转概念，页面在flex里面其实就是一个个的Canvas，vbox，hbox等等之类的东西。看到的不同页面的切换，就是这些元素一层层的堆积，或者替换。是一组容器从一个子容器转向另一个子容器。

上次已经实现了Flex向Servlet传值，今天工作的重点是Servlet向Flex传值，Flex根据接收到的值判断需要跳转到哪个页面。

参照网上的实例代码，跳转实现的方式采用最常用的viewStack。具体方法如下：

将登录框，登录成功提示消息和登录失败提示消息放在同一个viewStack里面，通过返回值判断需要显示的窗口。

MXML代码：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application backgroundGradientColors="backgroundColorFareArray" xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" layout="absolute">
	<mx:HTTPService id="lg" 
		url="http://localhost:8080/BlackBoardV1.3/UserServlet"
		useProxy="false"
		method="post" result="resultHandler(event)">
	   <mx:request>
	      <userName>{userName.text}</userName>
	      <password>{password.text}</password>
	      <type>{radiogroup.selectedValue}</type>
	      <flag>{"check"}</flag>
	   </mx:request>
	</mx:HTTPService>
	 <mx:Script>  
        <![CDATA[
        	import flash.trace.Trace;
        import mx.controls.Alert;  
        import mx.rpc.events.ResultEvent;
        
           public function lgin(event:Event):void{  
                lg.send();     
             }
            public function resultHandler(event:Event):void{ 
            	if(lg.lastResult.toString()=="true")
            	{
            		viewstack1.selectedIndex=1;         		
            	} 
                else
                {
                	viewstack1.selectedIndex=2;
                }
             }
             public function insert(event:Event):void{  
                viewstack1.selectedIndex=3;
             }
             
              protected function insertUser(event:Event):void { 
              var u:URLRequest=new URLRequest("insertUser.html"); 
               navigateToURL(u,"_self"); 
        }
        ]]>  
    </mx:Script>   

	<mx:Style source="css/back.css"/> 
	<mx:ViewStack id="viewstack1" width="100%" height="100%" horizontalCenter="550" verticalCenter="180">
	     <mx:Panel width="349" height="222" layout="absolute" 
		title="登录窗口" fontSize="14" horizontalAlign="center" verticalAlign="middle">
		<mx:Label x="32" y="23" text="帐号："/>
		<mx:Label x="32" y="62" text="密码："/>
		<mx:TextInput x="82" y="23" id="userName"/>
		<mx:TextInput x="82" y="64" id="password" displayAsPassword="true"/>
		<mx:Button x="171" y="131" label="注　册" click="insertUser(event)"/>
		<mx:Button x="82" y="131" label="登　录" click="lgin(event);"/>
		<mx:Label x="32" y="102" text="权限："/>
		<mx:RadioButtonGroup id="radiogroup" labelPlacement="right"/>
		<mx:RadioButton x="87" y="100" label="普通" value="普通" groupName="radiogroup"/>
		<mx:RadioButton x="189" y="100" label="高级" value="高级" groupName="radiogroup"/>
	</mx:Panel>	
	
	     <mx:HBox label="true" width="100%" height="100%">
	          <mx:Label text="恭喜您，登录成功" width="318" height="100" fontSize="32" fontWeight="bold" color="#111212"/>
	     </mx:HBox>
	     
	     <mx:HBox label="false" width="100%" height="100%">
	          <mx:Label text="哈哈哈，你失败了" width="318" height="100" fontSize="32" fontWeight="bold" color="#111212"/>
	     </mx:HBox>	
	</mx:ViewStack>
</mx:Application>

Servlet重点代码：

public void checkUser(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		String userName=request.getParameter("userName");
		String password=request.getParameter("password");
		String type=request.getParameter("type");
		userName=NewString.getNewString(userName);
		password=NewString.getNewString(password);
		type=NewString.getNewString(type);
		//调用dao
		UserDao uDao=new UserDao();
		if(uDao.checkUser(userName, password, type))
		{
			out.write("true");
		}else
		{
			out.write("false");
		}
	}

实现结果：

登录界面：

 

跳转到测试页面

 

另外要通过按钮（或超链接）的方式实现跳转可以采用

 var u:URLRequest=new URLRequest("insertUser.html"); 
  navigateToURL(u,"_self");方法。如点击注册按钮之后所进行的跳转。

 

错误处理：

1、因为对Servlet有些生疏了，居然直接使用return方法企图传值给flex，显然传值失败了。

解决方法：因为Servlet的return是给服务器传值的，要传值给前端需要采用流的方式。

例：PrintWriter out = response.getWriter();    out.write("false");

2、报出异常：Multiple constructor definitions found. Constructor may not be defined in <Script/> code.

解决方法：
自定义函数与默认的无参构造函数重名，将自定义函数重命名即可。

 

查看了API对于事件的定义，比较晦涩，一时难以理解，先记在这儿吧。

一个事件是来自应用程序的一个信号，Flash播放器可以用它来执行某些操作。

系统事件由Flex框架分配，基于在代码中定义的某些逻辑或基于一个组件的内置功能。
当用户和应用程序交互时，会分配一个用户事件。