Adding client code: The MXML markup

The client code for this example is very straightforward. The client application requests a ticker symbol from the user, invokes the remote method, gets the result object, and renders it in the user interface. Figure 4 demonstrates the layout of the client application.

Figure 4. Layout of the client application

You can design this interface easily within Flex Builder. To create the same layout as shown above, replace the contents of the default application file from the Flex Builder project with the following MXML code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   layout="absolute" width="365" height="268">
        
        <mx:Script>
       <![CDATA[
          // all the invocation handling code will be added here
       ]]>
   </mx:Script>
   
   <mx:Panel x="10" y="10" width="345" height="248" 
      layout="absolute" title="Sample Flex to .NET application">
      <mx:TextInput id="symbolText" x="120.5" y="19" width="100"/>
      <mx:Label x="29.5" y="21" text="Ticker Symbol:"/>
      <mx:Button x="228.5" y="19" label="Get data" width="67"/>
      <mx:Canvas x="29.5" y="71" width="266" height="116" 
         borderColor="#4f809d" borderStyle="solid" cornerRadius="10" 
         backgroundColor="#64a6c6" backgroundAlpha="0.43"  
         horizontalScrollPolicy="off" verticalScrollPolicy="off">
         <mx:Label x="10" y="36" text="Bid:"/>
         <mx:Label x="10" y="62" text="Ask:"/>
         <mx:Label x="10" y="10" text="Price:"/>
         <mx:Label x="10" y="88" text="Timestamp"/>
         <mx:Label x="87" y="10" fontWeight="bold"/>
         <mx:Label x="87" y="36" fontWeight="bold"/>
         <mx:Label x="87" y="62" fontWeight="bold"/>
         <mx:Label x="87" y="88" fontWeight="bold"/>
      </mx:Canvas>
      <mx:Label x="29.5" y="51" text="Server response:"/>
   </mx:Panel>   
</mx:Application>

Adding an ActionScript Value Object class

The .NET code returns an object of type GettingStarted.Examples.TickerInfo. Though it is optional, it is a good practice to create a corresponding ActionScript class. The class will be used to represent an instance of the server-side object on the client side:

package com.examples
{
  [Bindable]
  [RemoteClass( alias="GettingStarted.Examples.TickerInfo" )]
  public class TickerInfo
  {
    public var symbolName:String;
    public var lastPrice:Number;
    public var lastPriceTimeStamp:Date;
    public var currentBid:Number;
    public var currentAsk:Number;
  }
}

Notice that the RemoteClass metadata attribute on top of the class declaration. The alias name in the attribute refers to the full type name of the corresponding .NET class. The names of the class fields and their types must match the field names in the class from the .NET side. Notice the package name of the ActionScript class: com.examples. As a result, the class must reside in the TickerInfo.as file located in the com\examples folder. Use one of the approaches below to add the class file to the project:

Adding class file through the file system:

1. Open Windows Explorer and navigate to the project folder. You can find out the location of the project by opening project properties > Info. See the path next to Location.
2. Create com\ and com\examples\ folders under the project root folder.
3. Download TickerInfo.as from sample file archive in the Requirements section of this article and copy it into the com\examples folder.
4. Flex Builder automatically detects changes in the directory structure and adds the folders and ActionScript file to the project.

Creating class in Flex Builder:

1. Create com\examples folders. Select the SampleFlexToDotNetProject project node in Flex Builder and add the folders using right-click context menu to select New > Folder.
2. Select the examples folder. Right-click the folder and select New > ActionScript Class
3. Enter TickerInfo for the class name in the New ActionScript Class dialog box. Click OK to create the class.
4. Enter the class code as shown above.

Declaring RemoteObject (MXML or API)

The next step is to add the client-side invocation code. To establish an ActionScript "proxy" to the remote .NET object, declare the following MXML construct:

<mx:RemoteObject id="tickerInfoService"
    destination="GenericDestination"
    source="GettingStarted.Examples.StockQuoteService"
    showBusyCursor="true"
    fault="faultHandler(event)" >
    <mx:method name="getTickerInfo" result="gotServerData(event)"/>
</mx:RemoteObject>

There are several important elements in the RemoteObject declaration shown above:

• The code creates a proxy to the remote .NET object. The id assigned on line 1 ("tickerInfoService") is how the rest of the client application will refer to the created remote object.
• The destination attribute on line 2 refers to a special remoting destination in WebORB, allowing access to all deployed classes. This destination is useful for testing and experimentation, but not recommended for production.
• The source attribute on line 3 declares the full type name of the .NET class used by the Flex client. This attribute is required only when you specify the value GenericDestination.
• The fault attribute on line 5 refers to a function (faultHandler) to be used if a remote invocation results in an exception.
• The <mx:method> element on line 6 is a declaration of a remote method that can be invoked using the tickerInfoService service. The method name must be the same as the method in the .NET class referenced on line 3. You can add additional <mx:method> elements if there is more than one method in the remote class.

You can add the <mx:RemoteObject> MXML markup right after the <mx:Script> block in the MXML code shown above.

An alternative way to declare a remote object is by using ActionScript. The code below accomplishes the same as the MXML above:

var tickerInfoService:RemoteObject = new RemoteObject( "GenericDestination" );
tickerInfoService.source="GettingStarted.Examples.StockQuoteService";
tickerInfoService.addEventListener( FaultEvent.FAULT, faultHandler );
tickerInfoService.getTickerInfo.addEventListener( Result.EVENT,gotServerData );

Page 4 of 6

Previous Page

Next Page