flex (eclipse)开发配置手册

一 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>标签之前添加以下结点
[quote]<destination id="helloFlex">
<properties>
<source>cn.shy.flexjava.HelloFlex</source>
</properties>
</destination>[/quote]


这个时候我们就可以将工程放入到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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值