flex (eclipse)开发配置手册 -

fly-sky

浏览: 197735 次
性别:
来自: 湖南

最近访客更多访客>>

wang141129

ws07

zhaofeng365

hanjiguang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

flex (eclipse)开发配置手册

博客分类：

flash

一 Flex For Eclipse开发环境安装

1:从Adobe官网下载的Flex builder eclipse 插件：FB3_WWEJ_Plugin.exe
2：点击安装
3：选择安装路劲，按默认安装即可

4：点击下一步，选择你eclipse的安装目录。例如
D:/ProgramFiles/eclipse3.4_en/eclipse。
5：默认安装flash 9，可以选择不安装，因为官网有debug版的flash 9,对于开发者适合
用debug版的。

6：安装完成
7：将C:/Program Files/Adobe/Flex Builder 3 Plugin/
com.adobe.flexbuilder.update.site下的features 和plugins目录复制覆盖到
D:/Program Files/eclipse3.4_en/eclipse目录下,这里覆盖实际上就是将原来目录里没有
的插件添加进去。

8：将C:/Program Files/Adobe/Flex Builder 3 Plug-in/ eclipse（和上一步的目录不一
样）下的features 和plugins目录复制继续覆盖到D:/ProgramFiles/eclipse3.4_en/eclipse目录下
9：将C:/Program Files/Adobe/Flex Builder 3 Plug-in下的sdks目录拷贝到eclipse目
录中。（此步骤非必须）
10：启动eclipse，就可以在新建项目中找到Flex Bulider了

11：最后一项配置SDK,（此步骤可以省去,默认已经配好了）；
选择Window->Preferences->Flex->Installed Flex SDKs。如下图默认的sdks是我们安装
的flex插件中的sdk。我们可以修改为拷贝放入到eclipse目录里面的sdks。
60天的试用期提示，选择继续使用

以上使用的eclipse使用的是3.4版本的。

二 Web项目中Flex与后台的交互
Flex与后台交互的方式有许多中，这里只介绍使用HTTPService进行交互的例子：

1：新建一个web工程：flex_java_web
程序类型选择Web
服务器类型选择J2EE;
勾选创建java/Flex结合的
项目
2:点击下一步,默认配置，完成。(服务器的创建参照第三章)

指定服务器Tomcat 指定服务器Tomcat
3:新建web工程完毕

4：在src里面写入java代码，这里写的是servlet，并从后台向前台发送一段XML数据。
Flex与后台交互的数据是基于XML形式的。
代码如下：

package cn.shy.servlet; 


import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; 


public class FlexServlet extends HttpServlet { 


protected 
void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {


doPost(req, resp);
}
protected 
void doPost(HttpServletRequest req, HttpServletResponse resp)


throws ServletException, IOException {
System.out.println("success in servlet");


// 返回的是一段xml文本 


resp.setContentType("text/xml");
resp.setCharacterEncoding("UTF-8");
PrintWriter out = resp.getWriter();
out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.println("<myxml>");
out.print("<response>");
out.println("<id>"+"1"+"</id>");
out.println("<msg>"+"Hello World!"+"</msg>");
out.print("</response>");
out.print("<response>");
out.println("<id>"+"1"+"</id>");
out.println("<msg>"+"First Flex Web"+"</msg>");
out.print("</response>");
out.println("</myxml>");


} 
}

5:配置web.xml文件

<servlet> 
<servlet-name>flexServlet</servlet-name> 
<servlet-class>cn.shy.servlet.FlexServlet</servlet-class> 
</servlet> 

<servlet-mapping> 
<servlet-name>flexServlet</servlet-name> 
<url-pattern>/flexServlet</url-pattern> 
</servlet-mapping>

6：编写前台flex_java_web.mxml文件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 


<!--通过post请求 --> 

<mx:HTTPService id="myRequest" method="POST" 
url="http://localhost:8080/flex_java_web/flexServlet" 
useProxy="false"> 
</mx:HTTPService> 



<mx:Button id="btnSend" label="发送请求" click="myRequest.send();" x="10" 
y="19"/> 

<mx:Panel x="10" y="49" width="374" height="200" layout="absolute"> 


<!--显示返回的数据--> 

<mx:DataGrid x="10" y="8" 
dataProvider="{myRequest.lastResult.myxml.response}"> 


<mx:columns> 
<mx:DataGridColumn headerText="id" dataField="id"/>
<mx:DataGridColumn headerText="msg" dataField="msg"/>


</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>

注：
DataGrid的
dataProvider属性指定数据源，此地返回的数据源是一个名为 myxml.xml的文件。

7：启动服务运行程序：浏览器访问地址为：
http://localhost:8080/flex_java_web/flex_java_web.html
点击发送请求按钮

三 flex程序与远程服务器上的java文件进行交互(blaze Ds)

1：建立服务器端程序
这里描述一下在Eclipse中建立服务器的方法，上一章中也有用到。
File-->New-->Server

选择tomcat的安装目录和jre；点击下一步。按照默认步骤。创建完毕！

对新建Server的一些设置

在server窗口右键open；打开Server,按照如图更改默认选项(一定要在服务启动之前更
改，否则就无法修改了，如下图所示)， ①本地服务配置中选择:使用tomcat安装目录；②部
署路径：webapps。

2：解压blazeds_bin_3-0-0-544.zip得到blazeds.war文件，放入任意指定的文件夹。这个
是Adobe公司开源的联接java和flex程序的框架。( 该文件下面存在：META-INF和WEB-INF两
个文件。在blazeds \WEB-INF\flex目录下有个remoting-config.xml配置文件，我们要在这
个remoting-config.xml文件里添加destination结点来告诉Flex应用程序如何连接上Javaclass的)
4：新建一个工程名为flex_java_server作为服务器端程序。这里是普通的java Web工程，
和我们平时创建j2ee程序一样。
5：导入blazeds：将META-INF和WEB-INF两个文件目录放入到这个新建工程的WebContent目
录里面。
也可以通过以下操作来完成导入：
在左侧视图中选中 WebContent（Web Root）右键 -> Import -> FileS ystem -> 选择
BlazeDS 安装目录下的 blazeds 文件夹，出现
Override 提示框，选择 Yes To All。

6：一点可有可无的修改：web.xml文件：

<web-app> 


<display-name>flex_java_server</display-name> 
<description>flex_java_server Application</description> 
默认的名字为Blaze Ds 
<!--Http Flex Session attribute and binding listener support -->


<listener> 
<listener-class>flex.messaging.HttpFlexSession</listener-class> 
</listener> 


<!-- MessageBroker Servlet --> 


<servlet> 
<servlet-name>MessageBrokerServlet</servlet-name> 
<display-name>MessageBrokerServlet</display-name> 
<servlet-class>flex.messaging.MessageBrokerServlet</servlet-class> 
<init-param> 


<param-name>services.configuration.file</param-name> 
<param-value>/WEB-INF/flex/services-config.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>

.
.

…

7：编写服务器段程序：在src中编写java类文件。例如：HelloFlex.java

package cn.shy.flexjava; 


public 
class HelloFlex { 

private String helloStr; 

public HelloFlex() {
helloStr="java与flex已经链接成功！"; 
}

public String getHello() {
return 
helloStr;
}
}

8：配置WEB-INF/flex/remoting-config.xml文件：在 </default-channels>标签之后和
</service>标签之前添加以下结点

引用

<destination id="helloFlex">
<properties>
<source>cn.shy.flexjava.HelloFlex</source>
</properties>
</destination>

这个时候我们就可以将工程放入到tomcat中，启动服务了。

9：下面开始创建客户端程序：
1： Application server type选择 J2EE；
2：点选 Use remote object access service；
使用远程访问
3：不创建 java/flex联合项目。
10：点击下一步

这里注意点较多：①根目录选择我们服务器端程序的目录；

②Root URL：填入我们远程访问服务器端程序的url地址；
③Context root：这个要和我们访问的地址根目录名称一致；
也就是Root URL 和 Context root 中的相对路径的名称都与该web 项目名称保持相同。
另外：必须点击按钮：validate configuration验证配置，成功后会在上部显示"…….are
valid"

点击下一步并完成。

11：编写客户端程序：flex_java_client.mxml文件：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:RemoteObject id="remoteObject" 
						 destination="helloFlex" 
						 source="cn.shy.flexjava.HelloFlex" 
						 endpoint="http://localhost:9090/flex_java_server/messagebroker/amf"
						 result="resultHandler(event)"
						 fault="faultHandler(event)"/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
		import mx.rpc.events.FaultEvent;
		import mx.controls.Alert;
		import mx.rpc.events.ResultEvent;
		
		// 请求成功 
		private function resultHandler(event:ResultEvent):void 
		
		
		{ 
		Alert.show(event.result.toString(),"成功");
		}
		
		// 请求失败 
		private function faultHandler(event:FaultEvent):void 
		{ 
		Alert.show(event.fault.toString(),"失败"); 
		} 					
		]]> 
	</fx:Script> 
	
	<s:Button x="200" y="100" label="发送请求" click="remoteObject.getHello()"/>
</s:WindowedApplication>

注意点：①<mx:RemoteObject>标签的destination属性值必须跟remoting-config.xml文件里destination标签
的id值一致
②enpoint属性要设置，我没有设置时出现错误，原因不明。但有的参考资料就没有设置此属性。

12：运行客户端程序；这样就把flex文件和java文件链接起来了。
注意点：有时运行不起来需要在工程属性中重新对其设置：右键工程-->属性

四备注

1：下载AdobeAI R(AdobeAIRInstaller.exe)安装flex桌面运行环环境
2: Web程序运行环境为flash 9 及以上。
3:桌面运行程序的发布及安装顺序：
①右键工程，选择export

②选Flex Builder--> Release Build

③：指定安装程序存放目录：

④：选择程序发布认证证书。没有的话点击创建(Create)

创建加密证书

⑤：点击完成生成安装程序：（这个时候需要安装AdobeAI R运行时环境才能安装程序）
点击.air后缀名文件执行安装过程，生成.exe文件。

作者博客:http://blog.csdn.net/qiushyfm
mail:qiushyfm@live.cn