2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

时间:2022-01-04 14:29:57

/*******************************************************************************************************************/

//Flex3.0 以及flex 4.0 和Fluorine之间的数据传输

//资料来源:网络以及自己学习过程的总结

//create data: 2010年8月4日 星期三

//create by: zcg

/*******************************************************************************************************************/

主要内容:

第一:后台Fluorine后台环境的搭建

第二:前台Flex的搭建

 

第一部分:后台Fluorine后台环境的搭建

1>     安装Fluorine软件

Fluorine是一个第三方的软件,我们需要从网络上下载下来。 然后安装。

2>     在本地创建一个文件夹,然后创建一个IIS虚拟目录指向这个路径。

这里我们在本地创佳文件夹,存放位置为:E:\FluorineForlder。然偶在IIS创建一个虚拟目录指向我们新创建的这个文件夹。在IIS中如下图所示,并设置它的一些相关的属性

  2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

3>     创建一个Fluorine 的web站点

新建一个站点,如下图所示:这里我们选择FluorineFx ASP.NET Web Site

然后再location选择 HTTP, 路径定位到我们在IIS中在上一步中创建的那个虚拟目录的路径,如下图所示:http://localhost/FluorineForlder

需要注意的是,为了方便我们在IIS中站点的名称和我们文件夹的名称相同

 2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

然后单击[ok]完成Fluorine的创建。创建后的站点入下图所示

 2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

4>     我们为工程添加一个类库

单击VS的解决方案管理器,点击新建project

 2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

这里我们一定要选择FluorineFx ServiceLibrary

然后Name:fluorineLibrary为其名称

单击[ok]

VS里面如下图所示:

 2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

5>     编译fluorineLibrary

6>     将fluorineLibrary 工程编译后的DLL文件添加到我们创建的这个Fluorine站点里面,也就是添加到下面的文件工程里面:http://localhost/FluorineForlder/ 。 这一部也是很重要的。

7>     然后将站点设置为VS里面的启动项,然后将console.aspx页面设置为启动页面。运行程序

   2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

展开左边的目录树,然后在右边的text文本框里面输入:message,单击Call按钮,在下面如果出现"Gateway echo: messagex"字符串,那么这个就证明,后台的Fluorin开发环境搭建成功,并测试成功。

 

然后我们在类库里面添加一个访问”hellow world 的方法”,添加后的代码如下图所示

using System;

using System.Collections.Generic;

using System.Text;

using FluorineFx; //注意要添加这个命名空间,如果程序没有自动的添加,我们需要手动的为他们添加

namespace fluorineLibrary

{

    /// <summary>

    /// Fluorine sample service.

    /// </summary>

    [RemotingService("Fluorine sample service")]

    public class Sample

    {

        public Sample()

        {

        }

 

        public string Echo(string text)

        {

            return "Gateway echo: " + text;

        }

        //我们添加的回调函数

        public string hello()

        {

            return "Hello World !";

        }

    }

}

 

 

 

第二部分:搭建前台的Flex工程

打开FlashBuilder4.0.新建一个Flex project 工程

 2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

ProjectName:输入新建工程的名称

Flolder:顶到保存Flex程序的位置

Application server type: 我们选择”ColdFusion”

然后再下面我们选择:ColdFusion Flash Remoting,单击想【Next>】

 2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

Web root:输入我们在上一步创建的 fluorine的web app位置

Root URL:输入我们在上一步创建的fluorine的web app在IIS中的URL

Context root :具体的不也清楚,但是我们需要把和上面的Root URL值的最后的内容保持一致。在本例中Root URL 为:http://localhost/FluorineForlder/ 那么:Context root :就应该为:FluorineForlder

这里需要注意的是:上面的ColdFusion installation type: 必须选择第二项:Deployed to J2EE server

然后单击下一步,知道完成Flex前台的创建

下面我们主要讲解如何实现数据的方程访问

在Flex的主页面添加下面的代码

 

<?xml version="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>

       <mx:RemoteObject id="ro"

                      destination="fluorine" 

                      source="fluorineLibrary.Sample" >

           <mx:method name="hello" result="RemoteResult(event)"/> 

       </mx:RemoteObject>

          // destination="fluorine". Destination属性的值是死的,我们照着写就KO了

// source="fluorineLibrary.Sample"    fluorineLibrary为们创建的fluorine的站点的中添加的类库的命名空间的名称,sample为这个命名空间里面的类。 Name:为我们调用类的方法的名称,在本例中,hello 就是我们在类库里面添加的一个方法。

    </fx:Declarations>

    <fx:Script>

       <![CDATA[

           import mx.controls.Alert;

           import mx.rpc.events.ResultEvent;

           private function mm():void

           {

             ro.hello();

           }

           //

           public function RemoteResult(re:ResultEvent):void

           {

              var str:String = re.result as String;

              mx.controls.Alert.show(str);

           }

       ]]>

    </fx:Script>

    <mx:Button  label="mybutton" click="mm()"/>

</s:Application>

 

 

然后我们运行Flex程序

单击按钮后,将返回一个对话框,如下图所示:

 2010年8月4日周四_Fluorine开发环境的搭建及其开发入门

到此我们的数据传输构建成功。然后我们根据实际的需要就可以添加其他的数据处理函数了。