With the remote object declaration in place, you can add the invocation logic. The code in the following snippet contains three functions:
Additionally, there is a local variable of type TickerInfo that contains
the latest response object (line 7). Notice the [Bindable] attribute right above the
variable declaration. It is a special attribute that automatically wires
any user interface (UI) component using the quote variable to the change events
caused by the changes in the quote value. For example, when the .NET code
returns a TickerInfo object, Flex invokes the gotServerData method.
The method argument is a special event that carries the data that the .NET method returns. Method implementation casts the object to the ActionScript TickerInfo type and assigns the value to the quote variable (line 16). As a result of the
assignment, the [Bindable] attribute will guarantee that all of the change events are
sent to the UI components using the quote variable.
The next step is to wire the UI components to display the data:
- import mx.controls.Alert;
- import mx.rpc.events.FaultEvent;
- import com.examples.TickerInfo;
- import mx.rpc.events.ResultEvent;
- [Bindable]
- private var quote:TickerInfo;
- public function handleClick():void
- {
- tickerInfoService.getTickerInfo( symbolText.text );
- }
- public function gotServerData( event:ResultEvent ):void
- {
- quote = event.result as TickerInfo;
- }
- public function faultHandler( event:FaultEvent ):void
- {
- Alert.show( "Server reported an error " + event.fault.faultString, "Server Error" );
- }
To get the invocation in motion, invoke the handleClick function when the user clicks the
"Get data" button. To do this, you must add
an event handler to the button's markup:
<mx:Button x="228.5" y="19" label="Get data" width="67" click="handleClick()"/>
The user interface displays the data from the server using four Label objects:
<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"/>
It is very easy to link the Label objects to the fields of the received TickerInfo object. Notice the bold text in the code below:
<mx:Label x="87" y="10" fontWeight="bold" text="{quote.lastPrice}"/>
<mx:Label x="87" y="36" fontWeight="bold" text="{quote.currentBid}"/>
<mx:Label x="87" y="62" fontWeight="bold" text="{quote.currentAsk}"/>
<mx:Label x="87" y="88" fontWeight="bold" text="{quote.lastPriceTimeStamp}"/>
Each Label component is configured to display a value of a corresponding
field from the object stored in the local quote variable.
Since the variable is Bindable, Flex automatically reflects any changes in
the variable value in the user interface.