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


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

    //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中如下图所示,并设置它的一些相关的属性

      

    3>     创建一个Fluorine 的web站点

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

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

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

     

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

     

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

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

     

    这里我们一定要选择FluorineFx ServiceLibrary

    然后Name:fluorineLibrary为其名称

    单击[ok]

    VS里面如下图所示:

     

    5>     编译fluorineLibrary

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

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

      

    展开左边的目录树,然后在右边的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 工程

     

    ProjectName:输入新建工程的名称

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

    Application server type: 我们选择”ColdFusion”

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

     

    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程序

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

     

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

  • 相关阅读:
    BOM(JavaScript高程笔记)
    初识AJAX
    初识DOM
    《JavaScript DOM 编程艺术》读书笔记
    git/ TortoiseGit 在bitbucket.org 使用证书登陆
    原生JS的对象常用操作总结
    js 判断对象相等
    IE 坑爹的浏览器兼容模式
    Linux+mysql混杂
    前端-CS-04
  • 原文地址:https://www.cnblogs.com/xingchen/p/1792481.html
Copyright © 2020-2023  润新知