zoukankan      html  css  js  c++  java
  • 集成.Net / Flex3 & FluorineFX — Part II: The Client

    1) Open Flex Builder and create a new Flex project

    File->New->Flex Project. Do not choose an Application server type, The location of the project folder and output folder are important. In this case, I have saved the web site to c:\Inetpub\wwwroot\FluorineFXText so I saved the new flex project to c:\Inetpub\wwwroot\FluorineFXTest\Flex, and kept the output folder set to bin-debug. That means that, after hitting Next, I will set the Output folder URL to http://localhost/FluorineFXTest/Flex/bin-debug. If you are using the Visual Studio web host, you will need to add the port to the URL.


    2) You must then tell the flex compiler where to find the services-config file and context.

    Append the following to the Flex Compiler sheet of the project properties:
    -services “..\..\WEB-INF\flex\services-config.xml” -context-root “/FluorineFXTest”

    Note that we are using a relative path from the bin-debug path that we have just created to the WEB-INF directory that was created earlier by the FluorineFX ASPX web site template in Visual Studio.

    3) Add the ContactVO class to your new project

    Right click on the project and select New->ActionScript Class. Enter the Package vo and the name ContactVO.

    Paste the following in as the class file and save:
    package vo
    {
    public class ContactVO
    {
    public function ContactVO()
    {
    }
    public var Name:String;
    public var Email:String;
    public var Phone:String;

    }
    }
    Note that the class properties must match the C# class that you created earlier

    4) Add the mxml code

    Below is the body of the application that you should enter in to the project's main mxml file. Save it, and when you click the debug button, you should get a simple application with one button to to query the service and return just one contact, and one button that will query the service and get an ArrayCollection of contacts, which it will display  in the data grid.


    The important parts below are the RemoteObject block, which references the service endpoint and methods that we defined in the server-side setup, and the registerClassAlias call, which registers the AS class ContactVO as analogous to it's remote counterpart, Contact.cs.

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    import mx.rpc.events.FaultEvent;
    import mx.rpc.events.ResultEvent;
    import mx.collections.ArrayCollection;
    import vo.ContactVO;
    import flash.net.registerClassAlias;

    registerClassAlias("DataLib.Contact", ContactVO);

    [Bindable]
    private var contacts : ArrayCollection;
    private var contactVORef:ContactVO;

    private var contact : ContactVO;

    private function getContact():void
    {
    ro.GetContact();
    }

    private function getContacts():void
    {
    ro.GetContacts();
    }

    public function contactHandler(event:ResultEvent):void
    {
    contact = event.result as ContactVO;
    Alert.show(contact.Name);
    }

    public function contactsHandler(event:ResultEvent):void
    {
    contacts = event.result as ArrayCollection;
    }

    public function faultHandler(event:FaultEvent):void
    {
    Alert.show(”Fault”,  event.fault.toString());
    }

    ]]>
    </mx:Script>

    <mx:RemoteObject id=”ro” destination=”fluorine” source=”ServiceLib.Sample” fault=”faultHandler(event)”>
    <mx:method name=”GetContact” result=”contactHandler(event)”/>
    <mx:method name=”GetContacts” result=”contactsHandler(event)”/>
    </mx:RemoteObject>

    <mx:Panel title=”Contacts” width=”100%” height=”100%”>
    <mx:ControlBar>
    <mx:Button label=”Get One Contact” click=”getContact();”/>
    <mx:Button label=”Get All Contacts” click=”getContacts();”/>
    <mx:Spacer width=”100%”/>
    </mx:ControlBar>
    <mx:DataGrid id=”dg” dataProvider=”{contacts}” width=”100%” height=”100%”>
    <mx:columns>
    <mx:DataGridColumn headerText=”Name” dataField=”Name” width=”100″/>
    <mx:DataGridColumn headerText=”Email” dataField=”Email” width=”100″/>
    <mx:DataGridColumn headerText=”Phone” dataField=”Phone” width=”100″/>
    </mx:columns>
    </mx:DataGrid>
    </mx:Panel>

    </mx:Application>

    When you click the debug button, you should get a simple application with one button to to query the service and return just one contact, and one button that will query the service and get an ArrayCollection of contacts, which it will display  in the data grid.

  • 相关阅读:
    锚点定位跳转的各种实现方法
    css 布局之定位 相对/绝对/成比例缩放
    闭包,jQuery插件的写法:图片预加载
    mui 常见的效果
    根据浏览器内核判断是web/iOS/android/ipad/iphone 来打开不同的网站或页面
    有字库API方法使用一二
    tab 切换实现方法
    在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用
    html + css3 demo
    jsfiddle 使用教程
  • 原文地址:https://www.cnblogs.com/yidianfeng/p/2232472.html
Copyright © 2011-2022 走看看