您的位置:首页 > 编程语言 > Java开发

Flex与Java整合自学总结

2009-12-20 19:49 603 查看
大家好,最近时间在学习富客户端技术Flex,相信大家比较了解它了,在这里就不多介绍了,不了解的Google搜索!下面我来总结一下,它怎么和J2EE结合进行通信的。以下都是本人学习实践,可能有些地方还不完善,希望大家提醒指点!
 
学习前应该需要的资源:
1、 MyEclipse 6.5 (官网下载)
2、 Flex builder 3 (官网下载)
3、 Tomcat6.0作为服务器(官网下载)
4、 BlazeDS    从Adobe官方网站上下载下来,将blazeds.war文件放在tomcat的webapps目录下。
最好装好JDK,配置好JDK的环境,这样可以单独开tomcat,没装也没关系,就在
MyEclipse 里面加tomcat也行!
 
接下来就来建立第一个整合项目了,其实方法有很多种(可以将flex插件装到MyEclipse上一起开发),我在这里就介绍两工具分开项目,其它的自己慢慢领会就OK了!废话不多说了,下面开始吧:
我一般是先建立Java端(一般分两种,一种建Java Project;一种是建web Project。后者可以建J2EE东西,前者只能是Java类):
第一种: 建立Java Project

 
 
 
名字随便起,不过下面的选项必须选Create Project from existing source 
(从现有的文件里建项目)浏览tomcat webapps文件夹下的 blazeds/WEB-INF
Blazeds 是 blazeds.war解压出来的.其它都不用选,默认的就行了!接下来点NEXT

这里需要注意的地方,Default output folder Java类编译成的.class文件放这里
这里选择classes 然后点 Finish
 

完成之后是这个样子,flex文件下放着四个配置文件,以后会说到。
Lib目录下,放着flex与java通信所用到的jar包,若要连数据库,可装数据库的jar 包放里面。Src是放Java类的,这里没有变成source folder ,须手动设置,右击该文件,
Build Path /    User as source folder 就OK了!

Web.xml是程序的入口,里面的配置一般不用改动!这样Java端就建好了,下面介绍第二种!
 
 
第二种:建立Web Project

名字随便写,记得选Java EE5.0,不然可能会出错,其它不用管,点Finish
接下来需引入blazeds项目里面的资源进来,选中WebRoot文件夹右击Import  选
General /  File System  在Form directory 那选择 Borwse 

选择tomcat webapps / blazeds  Select All 点Finish     Yes To All   覆盖所有
 

这个就是普通的J2EE项目,导入了四个配置文件,和jar 包+web.xml,
Java端就这样了,下面就开始建Flex端,记得开tomcat, web project建法的必须开,因为这时tomcat还没有此项目,须部署进tomcat,这样就发现,tomcat apps目录下就多了这个项目,因为接下来的Flex项目是从这个基础上建立的!
 
 
建立Flex项目:
 

名字随便起,项目路径随便是哪里!选Web application   J2EE 语言   NEXT
 

注意了,这里是最重要的,Root folder 选择tomat 的绝对路径下的 webapps 下的,Java端的项目名作为地址,Root URL是 http://localhost:8080/项目名,注意端口,是你的tomcat端口    Context root  是 /项目名    这里的项目名应该是一致的  点下面验证,这幅图显示没能过,因为我没开tomcat,下面这幅图是开了tomcat 的.   注意flex 编译文件swf的路径 output folder 默认是 tomcat路径下 webapss/项目名/项目名-debug  ,我个人觉得应该放入j2EE项目的WebRoot下比较好,最好是建个文件夹,名称就取flex项目名,这样你运行时会比较方便,不用改http地址了!当然个人建议还是建J2EE项目比较好! 

 
 
点Finish
 

这些就不解释了,bin-debug有个小箭头,因为是放在tomcat里,不同于其它的路径,故会如此 .    Tomcat下就变成这种情况

De-bug进去

 
WEB-INF下

 
 
 
例1  : 接下来就一个小例子,Hello World !来热下身:
Java端建立一个类  Hello  放在com包中  接收调用者的一个String参数,返回一个Hello
 
package com;
 
public class Hello {
 
public String sayHello(String str){
System.out.println("Hello"+str);
return "Hello"+str;
}
}
 
 
要想flex端能调用得到这个类,就必须在四个配置文件中的  remoting-config.xml文件里配置
<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service" 
    class="flex.messaging.services.RemotingService">
 
    <adapters>
        <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
    </adapters>
 
    <default-channels>
        <channel ref="my-amf"/>
    </default-channels>
 
 
<destination id="hello">
<properties>
<source>com.Hello</source>
</properties>
</destination>
 
 
</service>
红色部分为加入的内容,意思相当于定义了一个对象hello,它对应的类是com.Hello.也就是上面的java类;
 
接下来flex页面代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#CFF20C, #F93407]">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
 
[Bindable]
private var res:String;    //表示可梆定的变量
 
//拿值的一个事件
public function getResult(evt:ResultEvent):void
{
res = evt.result as String;
}
 
//出错的一个事件
public function faultHandler(evt:FaultEvent):void
{
Alert.show(evt.fault.toString());
}
 
//按钮单击事件,调用Java端方法
public function onclick(evt:MouseEvent):void
{
hel.sayHello(ti1.text);
}
]]>
</mx:Script>
 
//红色为远程访问java对象
<mx:RemoteObject id="hel" destination="hello" result="getResult(event)"  fault="faultHandler(event)"/>
 
<mx:Button x="302" y="53" label="Button" click="onclick(event)"/>
<mx:TextInput x="112" y="53" id="ti1"/>
<mx:Label x="21" y="83" width="527" height="62" fontSize="19" color="#040404" id="lbl1" text="{res}"/>    //梆定值
 
</mx:Application>
 
效果图  而且java 端也接收到了,并在console下输出  :  Hello小风
 

 
例2  :  接下来的例子,是同时调用java类的不同方法,并实现Flex端前后台分离
Java 端在刚刚 Hello 类中加入一个简单方法,showName();
 
 
public String showName(String str){
System.out.println("我的名字是:"+str);
return "我的名字是"+str;
}
 
Java 端其它不用动。接下来是Flex端:
 
建立一个moreMethod.as文件:
 
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.RemoteObject;
 
[Bindable]
public var helloStr:String;
 
[Bindable]
public var showNameStr:String;
 
public var ro:RemoteObject = null;
 
public function initApp():void
{
ro= new RemoteObject();
ro.destination="hello";
 
//为不同的方法增加结果监听事件,注意名字要能在Java端找到对应的方法,不然会调不到
ro.getOperation("sayHello").addEventListener(ResultEvent.RESULT,sayHelloResult);
ro.getOperation("showName").addEventListener(ResultEvent.RESULT,showNameResult);
}
 
public function sayHelloResult(evt:ResultEvent):void
{
helloStr = evt.result as String;
 
}
 
public function showNameResult(evt:ResultEvent):void
{
showNameStr = evt.result as String;
 
}
 
public function sayHellof(str:String):void
{
ro.sayHello(str);
}
 
public function showNamef(str:String):void
{
ro.showName(str);
}
 
Flex 界面 mxml 代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
 
<!--引用moreMethod文件-->
<mx:Script source="moreMethod.as" /> 
 
<mx:Button x="310" y="45" label="Hello" fontSize="13" click="sayHellof(tihello.text)"/>
<mx:Label x="401" y="47" text="{helloStr}" width="213" fontSize="13"/>
<mx:Button x="310" y="119" label="ShowName" fontSize="13" click="showNamef(tishowname.text)"/>
<mx:Label x="446" y="121" text="{showNameStr}" width="213" fontSize="13"/>
<mx:TextInput x="129" y="119" fontSize="13" id="tishowname"/>
<mx:TextInput x="129" y="45" fontSize="13" id="tihello"/>
 
 
</mx:Application>
 
 
Flex前后台不分离的代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
<mx:RemoteObject id="ro" destination="hello">
<mx:method name="sayHello" result="sayHelloResult(event)" />
<mx:method name="showName" result="showNameResult(event)" />
</mx:RemoteObject>
 
 
 
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.RemoteObject;
 
[Bindable]
public var helloStr:String;
 
[Bindable]
public var showNameStr:String;
 
 
public function sayHelloResult(evt:ResultEvent):void
{
helloStr = evt.result as String;
 
}
 
public function showNameResult(evt:ResultEvent):void
{
showNameStr = evt.result as String;
 
}
 
public function sayHellof(str:String):void
{
ro.sayHello(str);
}
 
public function showNamef(str:String):void
{
ro.showName(str);
}
 
 
]]>
</mx:Script>
 
<mx:Button x="310" y="45" label="Hello" fontSize="13" click="sayHellof(tihello.text)"/>
<mx:Label x="401" y="47" text="{helloStr}" width="213" fontSize="13"/>
<mx:Button x="310" y="119" label="ShowName" fontSize="13" click="showNamef(tishowname.text)"/>
<mx:Label x="446" y="121" text="{showNameStr}" width="213" fontSize="13"/>
<mx:TextInput x="129" y="119" fontSize="13" id="tishowname"/>
<mx:TextInput x="129" y="45" fontSize="13" id="tihello"/>
 
 
</mx:Application>
 

 
 
例3 :Flex类跟Java实体类的映射,用户的管理小程序:(增删改查)
使用Mysql数据库,用到的类如下,
Java 端 >>   User实体类User.java
 
package com.chenhf.entity;
 
public class User {
 
private int uid;
 
private String username;
 
private String password;
 
private int role ;
 
public int getUid() {
return uid;
}
 
public void setUid(int uid) {
this.uid = uid;
}
 
public String getUsername() {
return username;
}
 
public void setUsername(String username) {
this.username = username;
}
 
public String getPassword() {
return password;
}
 
public void setPassword(String password) {
this.password = password;
}
 
public int getRole() {
return role;
}
 
public void setRole(int role) {
this.role = role;
}
 
 
}
 
数据连接类:
BaseDao.java
package com.chenhf.dao;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
 
public class BaseDao {
 
public static final String DRIVER = "com.mysql.jdbc.Driver";
public static final String URL = "jdbc:mysql://localhost:3306/forum";
public static final String DBNAME = "root";
public static final String DBPASS = "root";
 
public static Connection getConn() {
Connection conn = null;
 
try {
Class.forName(DRIVER);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
 
try {
conn = DriverManager.getConnection(URL, DBNAME, DBPASS);
} catch (SQLException e) {
e.printStackTrace();
}
 
return conn;
 
}
 
public static void closePSTMT(PreparedStatement pstmt) {
try {
 
if (pstmt != null) {
pstmt.close();
pstmt = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
 
 
public static void closeRS(ResultSet rs) {
try {
 
if (rs != null) {
rs.close();
rs = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
 
public static void closeConn(Connection conn) {
try {
 
if (conn != null) {
conn.close();
conn = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
 
用户管理业务类
UserDao.java
package com.chenhf.dao;
 
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
 
import com.chenhf.entity.User;
 
public class UserDao {
 
public String sayHello(String str){
System.out.println(str);
return "hello  "+str;
}
 
public List<User> getAllUsers(){
List<User> users = new ArrayList<User>();
User u = null;
 
String sql = "select * from users";
Connection conn = BaseDao.getConn();
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()){
u = new User();
u.setUid(rs.getInt("uid"));
u.setUsername(rs.getString("username"));
u.setPassword(rs.getString("password"));
u.setRole(rs.getInt("role"));
users.add(u);
}
 
} catch (SQLException e) {
e.printStackTrace();
}finally{
BaseDao.closeRS(rs);
BaseDao.closePSTMT(pstmt);
BaseDao.closeConn(conn);
}
 
return users;
 
}
 
public User getUserByUid(int uid){
User u = null;
String sql = "select * from users where uid = "+uid;
Connection conn = BaseDao.getConn();
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()){
u = new User();
u.setUid(rs.getInt("uid"));
u.setUsername(rs.getString("username"));
u.setPassword(rs.getString("password"));
u.setRole(rs.getInt("role"));
}
 
} catch (SQLException e) {
e.printStackTrace();
}finally{
BaseDao.closeRS(rs);
BaseDao.closePSTMT(pstmt);
BaseDao.closeConn(conn);
}
 
return u;
}
 
public int addUser(String username,String password,int role){
 
String sql = "insert into users(username,password,role) values(?,?,?)";
Connection conn = BaseDao.getConn();
PreparedStatement pstmt = null;
int result = 0;
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,username);
pstmt.setString(2,password);
pstmt.setInt(3,role);
result = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally{
BaseDao.closePSTMT(pstmt);
BaseDao.closeConn(conn);
}
return result;
 
 
}
 
public int updateUser(String username,String password,int role,int uid){
String sql = "update users set username = ?,password = ?,role = ? where uid = ?";
Connection conn = BaseDao.getConn();
PreparedStatement pstmt = null;
int result = 0;
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,username);
pstmt.setString(2,password);
pstmt.setInt(3,role);
pstmt.setInt(4,uid);
result = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally{
BaseDao.closePSTMT(pstmt);
BaseDao.closeConn(conn);
}
return result;
}
 
public int deleteUser(int uid){
int result = 0;
String sql = "delete from users where uid = ?";
Connection conn = BaseDao.getConn();
PreparedStatement pstmt = null;
try {
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1,uid);
result = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally{
BaseDao.closePSTMT(pstmt);
BaseDao.closeConn(conn);
}
return result;
 
}
 
}
 Remoting-config.xml加入配置
<destination id="userDao">
<properties>
<source>com.chenhf.dao.UserDao</source>
</properties>
</destination>
 
Flex 端 >> 
UserManager.xml   (前后台未分离的)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="showAll(event)">
 
<mx:Panel x="34" y="29" width="528" height="333" layout="absolute" title="管理用户" fontSize="12">
<mx:DataGrid x="20" y="19" width="463" height="245" id="dg" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
  itemClick="showDetailUser(event)" dataProvider="{data1}">
<mx:columns>
<mx:DataGridColumn headerText="UID" dataField="uid"/>
<mx:DataGridColumn headerText="用户名" dataField="username"/>
<mx:DataGridColumn headerText="密码" dataField="password"/>
<mx:DataGridColumn headerText="角色" dataField="role"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
 
 
<mx:Panel x="570" y="29" width="283" height="333" layout="absolute" title="用户信息" fontSize="12" visible="false" id="pnl2">
<mx:Label x="24.5" y="74" text="用户名:"/>
<mx:Label x="29.5" y="134" text="密码:"/>
<mx:Label x="29.5" y="199" text="角色:"/>
<mx:TextInput x="78.5" y="74" id="tiusername" />
<mx:TextInput x="78.5" y="132" id="tipassword"/>
<mx:TextInput x="78.5" y="197" id="tirole"/>
<mx:Button x="113" y="245" label="修 改" click="addOrUpdateUser(event)" id="btnEdit"/>
<mx:Button x="182.5" y="245" label="关 闭" click="closePanel()"/>
<mx:Button x="24.5" y="23" label="新用户" click="createNew()"/>
<mx:Button x="113" y="23" label="删除用户" click="DeleteUser(event)" id="btnDelete"/>
<mx:Label x="31.5" y="247" visible="false" id="lbluid"/>
</mx:Panel>
 
 
 
<mx:RemoteObject id="ud" destination="userDao" result="resultHandler(event)" />
 
<mx:Script>
<![CDATA[
import mx.collections.Grouping;
import mx.collections.GroupingCollection;
import mx.controls.Alert;
 
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import mx.utils.ArrayUtil;
 
[Bindable]
private  var data1:ArrayCollection;
 
public function resultHandler(event:ResultEvent):void
{
 
data1 = event.result as ArrayCollection;
 

 
public function showAll(evt:Event):void
{
 
ud.getAllUsers();
}
 
 
 
public function showDetailUser(evt:Event):void
{
pnl2.visible = true;
btnEdit.label ="修 改";
btnDelete.enabled = true;
var u:Object = dg.selectedItem as Object;
 
tiusername.text = u.username;
tipassword.text = u.password;
tirole.text= u.role.toString();
lbluid.text = u.uid.toString();
}
 
 
public function closePanel():void
{
pnl2.visible = false;
}
 
public function createNew():void
{
btnEdit.label ="增 加";
btnDelete.enabled = false;
tiusername.text = "";
tipassword.text = "";
tirole.text= "";
lbluid.text = "";
}
 
 
 
public function addOrUpdateUser(evt:MouseEvent):void
{
 
var obj:Object = new Object();
 
obj.username = tiusername.text;
obj.password = tipassword.text;
obj.role = parseInt(tirole.text,0);
 
if(lbluid.text!=""){
obj.uid = parseInt(lbluid.text,0);
ud.updateUser(obj.username,obj.password,obj.role,obj.uid);
}
else
{
ud.addUser(obj.username,obj.password,obj.role);
}
showAll(evt);
 
 
}
 
public function DeleteUser(evt:MouseEvent):void
{
ud.deleteUser( parseInt(lbluid.text,0));
showAll(evt);
 
}
 
]]>
 
</mx:Script>
 
</mx:Application>
 

 
 
 
 
知识点:  用户实体类的映射   User.as    (也可以运用封装)
 
package com.chenhf.flex
{
//映射的关键语句
[RemoteClass(alias="com.chenhf.entity.User")] 
public class User
{
public function User()
{
}
 
 
public var uid:int;
 
public var username:String;
 
public var password:String;
 
public var role:int;
 
 
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息