Myeclipse10 + Flex4.6 集成开发 配置

第一篇 博客，记录 Arcgis Server 开发之路

最近，要研究生毕业了，找了份工作，是做Arcgis二次开发的，之前没怎么做过，从今天开发学习。

由于在公司实习用过Flex，这几天在网上荡来荡去，发现Arcgis有Flex Api，用Flex做二次开发的前端，好处有一大堆，我就不说了。

现在Web企业系统基本上都是基于j2ee的，因此Arcgis二次开发也大多数是基于j2ee的，也由于我javaweb比较熟悉吧。

搭配环境是开发的第一步。

下面是我搭Myeclipse + Flex + Blazeds开发的步骤，可以完美实现。

第一步：

建立WEB项目：

点击finish；

 

 

第二步：

右键WebRoot

点击import：

点金FileSystem：

点击Browse：

选择blazeds的解压缩文件夹：在blazeds文件夹下有两个子文件夹，分别是：

META-INF,WEB-INF,导入之后，如下图所示：

点击finish，在弹出的对话框选择yes  to  all

这时候项目结构如下：

 

第三步：

把项目部署到tomcat中

第四步：

右键项目名称：选择 添加/更改项目类型，选择添加FLEX项目类型，如下图所示：

配置如下：

点 next：

配置如下：

 

一开始会提示你先点击验证配置，这个不用管，先把配置弄好，再点击验证配置，

根文件夹：前面你部署项目到tomcat，直接去tomcat下的webapps找到项目

根url：http://localhost:tomcat端口号，我的是8080/项目名称（flexDemo）

上下文根目录：和项目名称一致（flexDemo）

输出文件夹：我是手动填写的，没用默认的，这里是WebRoot

完成之后点击验证配置，

点击finish：项目结构如下：

项目有错误，去找

点击右键：

错误就消失了。

第四步：

往flexDemo文件里面拖放一个DataGrid控件，代码如下：

<?xmlversion="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Declarations>

        <!-- 将非可视元素（例如服务、值对象）放在此处 -->

    </fx:Declarations>

    <mx:DataGrid x="138" y="67">

        <mx:columns>

            <mx:DataGridColumn headerText="列 1" dataField="col1"/>

            <mx:DataGridColumn headerText="列 2" dataField="col2"/>

            <mx:DataGridColumn headerText="列 3" dataField="col3"/>

        </mx:columns>

    </mx:DataGrid>

   

</s:Application>

 

部署到tomcat下，启动tomcat

在浏览器输入：http://localhost:8080/flexDemo/flexDemo.html

出现如下所示画面就说明成功了：

第五步：建立java与Flex的通信：

 

首先在src下创建两个类：P和PS

package test;

 

public class P {

   

String name;

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public P(String n){

        this.name=n;     

    }

}

 

package test;

 

import java.util.ArrayList;

import java.util.List;

 

public class PS {

 

    public List getList(){

        List l=new ArrayList();

        for(int i=0;i<10;i++){

            l.add(new P("第"+i+"个"));

           

        }

        return l;         

    }

}

 

第六步：

WEB-INF文件夹下的flex中在remoting-config.xml文件中定义 PS对应的 destination

<destination id="test">

    <properties>

        <source>test.PS</source>

    </properties>

</destination>

 

flexDemo.mxml代码如下：

<?xmlversion="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"  creationComplete="init()">

    <fx:Script>

        <![CDATA[

            import mx.controls.Alert;

            import mx.rpc.events.ResultEvent;

            import mx.rpc.events.FaultEvent;

           

            [Bindable]

            private varemployeeList:Object;

           

            private function init():void {

                employeeServiceRO.getList();

            }

           

            private function resultHandler(event:ResultEvent):void {

                employeeList =event.result;

            }

           

            private function faultHandler(event:FaultEvent):void {

                //Alert.show(event.fault.faultString, 'Error');

                Alert.show(event.toString(),'Error');

            }

        ]]>

    </fx:Script>

    <fx:Declarations>

        <mx:RemoteObject id="employeeServiceRO" destination="test"

                         result="resultHandler(event);"

                         fault="faultHandler(event);"/>

    </fx:Declarations>

    <mx:DataGrid x="32" y="25" width="400" dataProvider="{employeeList}">

        <mx:columns>

            <mx:DataGridColumn headerText="Name" dataField="name"/>

        </mx:columns>

    </mx:DataGrid>   

</s:Application>

注意：<mx:RemoteObject> 中的destination必须与remoting-config.xml中的destination中的id名称一样，这里都是test

第七步：修改隐藏文件夹的配置信息：

可以去项目所在的目录中找，也可以在myeclipse直接修改，如下所示：

点击之后如下所示：

点一下 把前面的勾去掉，点击OK，就可以显示隐藏文件了，项目结构如下所示：

打开flexProperties文件：

修改配置信息：

serverContextRoot="flexDemo"

将serverContextRoot改为你项目的名称，如果本来就是项目名称就不用改了，然后刷新一下项目，右键项目名称，点击refresh；

重新部署，启动tomcat，打开浏览器输入：http://localhost:8080/flexDemo/flexDemo.html

出现如下界面，说明项目成功：