RIA技术入门之Macromedia Flex & JSP（三）

RIA技术入门之Macromedia Flex（三）
作者：Mr.一点点

6.3.3 在flex_testing目录下建立如下employees.jsp文件，此程序在服务器端执行，从服务端返回数据。

employees.jsp

<?xml version="1.0" encoding="utf-8"?>
<employees>
<%
String deptId=request.getParameter("deptId");
if (deptId.equals("ENG")) {
%>
<employee>
<name>Christina Coenraets</name>
<phone>555-219-2270</phone>
<email>[e-mail]</email>
</employee>
<employee>
<name>Louis Freligh</name>
<phone>555-219-2100</phone>
<email>[e-mail]</email>
</employee>
<%
} else if (deptId.equals("PM")) {
%>
<employee>
<name>Ronnie Hodgman</name>
<phone>555-219-2030</phone>
<email>[e-mail]</email>
</employee>
<employee>
<name>Joanne Wall</name>
<phone>555-219-2012</phone>
<email>[e-mail]</email>
</employee>
<%
} else if (deptId.equals("MKT")) {
%>
<employee>
<name>Maurice Smith</name>
<phone>555-219-2012</phone>
<email>[e-mail]</email>
</employee>
<employee>
<name>Mary Jones</name>
<phone>555-219-2000</phone>
<email>[e-mail]</email>
</employee>
<%
}
%>
</employees>

服务器端根据提交的参数deptId，返回不同的结果。

6.4 First Flex - 3：调用Actionscript
本步骤说明在mxml文件中如何调用actionscript脚本。

6.4.1 使用<mx:Script> 标签
6.4.2 与html中调用javascript类似

LogonWindow.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" " target="_blank">http://www.macromedia.com/2003/m ... ;/A>" xmlns="*">
<mx:Script>

function showWindow(modal)
{
if(userId.text == "admin")
{
if(password.text == "123")
{
this.destroyAllChildren();
//var popup = mx.managers.PopUpManager.createPopUp(_root, HTTPServiceDemo, modal, {deferred: true});
}
}
}
</mx:Script>

<mx:TitleWindow closeButton="true" xmlns:mx="http://www.macromedia.com/2003/mxml"" target="_blank">http://www.macromedia.com/2003/m ... xml" title="Logon">
<mx:Form>

<mx:FormItem label="UserId" required="true">
<mx:TextInput id="userId" width="150"/>
</mx:FormItem>

<mx:FormItem label="Password" required="true">
<mx:TextInput id="password" width="150"/>
</mx:FormItem>

<mx:FormItem>
<mx:HBox horizontalGap="30">
<mx:Button label="Logon" click="showWindow(false)" />
<mx:Button label="Cancel" click=""/>
</mx:HBox>
</mx:FormItem>

</mx:Form>
</mx:TitleWindow>

</mx:Application>

6.5 First Flex - 4：建立as文件
本例说明在mxml文件中如何调用.as文件（actionscript脚本文件，类似javascript的js文件），及如何绑定数据。

6.5.1 在flex_testing目录下建立如下LogonWindow.mxml文件；

LogonWindow.mxml

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" " target="_blank">http://www.macromedia.com/2003/m ... ;/A>" xmlns="*" width="1024">

<!-- VerifyUser controller -->
<VerifyUser id="verifyUser"
verifyUserView="{this}"
userId = "{userId.text}"
password = "{password.text}"/>

<mx:TitleWindow id ="loginWindow" closeButton="true" xmlns:mx="http://www.macromedia.com/2003/mxml" title="Logon">

<mx:Form>

<mx:FormItem label="UserId" required="true">
<mx:TextInput id="userId" text="{verifyUser.userId}" width="150"/>
</mx:FormItem>

<mx:FormItem label="Password" required="true">
<mx:TextInput id="password" width="150"/>
</mx:FormItem>

<mx:FormItem>
<mx:HBox horizontalGap="30">
<mx:Button label="Logon" click="verifyUser.verify(false)" />
<mx:Button label="Cancel" click="this.deletePopUp()"/>
</mx:HBox>
</mx:FormItem>

</mx:Form>
</mx:TitleWindow>

</mx:Application>

<VerifyUser id="verifyUser"
verifyUserView="{this}"
userId = "{userId.text}"
password = "{password.text}"/> 为通过类名VerifyUser创建对象，对象id 为 verifyUser，其他为传递给对象的参数；
调用方法时用对象调用，即verifyUser.verify(false)；
verifyUserView为此页面对象自身，这样在as文件中就可以调用页面上的对象；