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

6.2 First Flex - 1：登陆界面
6.2.1 重启Tomcat服务；
6.2.2 在flex_testing目录下建立如下LogonWindow.mxml文件；
6.2.3 打开IE，访问http://localhost:8080/flex_testing/LogonWindow.mxml，显示登陆界面。

LogonWindow.mxml

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

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*" width="1024">

<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" 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="" />
<mx:Button label="Cancel" click=""/>
</mx:HBox>
</mx:FormItem>

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

</mx:Application>

 

文件格式很简单吧？
<?xml version="1.0" encoding="utf-8"?>为xml文档规范及编码格式（UTF-8），且必须只能在文件的第一行。
<mx:…>为mxml标签。
MXML目前不支持中文。

 

6.3 First Flex - 2：提交请求（MXML）
下面我们来看看在mxml文件中如何向服务器端的jsp程序提交请求，如何得到响应。本例子在表格上显示从服务端取回的数据；

6.3.1 首先修改flex-config.xml中<http-service-proxy>的whitelist，允许提交http请求：

flex-config.xml

<http-service-proxy>
<whitelist>
<!-- whitelist config for unnamed services -->
<unnamed>
<url>http://*</url>
<url>https://*</url>
<url>http://{localserver}/*</url>
<url>https://{localserver}/*</url>

/* 表示允许我们编写的Flex应用可以访问任意的服务端程序。{localserver}表示本Web应用模块，即相同的域名前缀；

 

6.3.2 在flex_testing目录下建立如下HTTPServiceDemo.mxml文件；

HTTPServiceDemo.mxml

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

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" verticalGap="20" horizontalAlign="center" width="1024">

<mx:HTTPService id="employeeSrv" url="employees.jsp">
<mx:request>
<deptId>{dept.selectedItem.data}</deptId>
</mx:request>
</mx:HTTPService>

<mx:TitleWindow xmlns:mx=http://www.macromedia.com/2003/mxml title="HTTPService" horizontalAlign="center">

<mx:HBox horizontalAlign="center">

<mx:Label text="Select a department:"/>
<mx:ComboBox id="dept" width="150">
<mx:DataProvider>
<mx:Array>
<mx:Object label="Engineering" data="ENG"/>
<mx:Object label="Product Management" data="PM"/>
<mx:Object label="Marketing" data="MKT"/>
</mx:Array>
</mx:DataProvider>
</mx:ComboBox>

<mx:Button label="Get Employee List" click="employeeSrv.send();"/>

</mx:HBox>

<mx:DataGrid dataProvider="{employeeSrv.result.employees.employee}" width="100%">
<mx:columns>
<mx:Array>
<mx:DataGridColumn columnName="name" headerText="Name"/>
<mx:DataGridColumn columnName="phone" headerText="Phone"/>
<mx:DataGridColumn columnName="email" headerText="Email"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>

</mx:TitleWindow>

</mx:Application>

<mx:HTTPService>为指定HTTP服务；
url为提交的对象，类似html中<form action="">；
<mx:request>表明这是一个请求。（注：在Flex中，不仅可以发出HTTP request，还可以通过Remote Object请求远程的任意对象，本文不涉及此方面。）；
<mx:request><mx:request>标签内为提交的参数；
dataProvider为数据源，即为服务端返回的数据；

（未完待续）