Flex uses event handlers to trigger a service call.

Flex code is not processed “top to bottom,” as in server templates. Instead, applications built with Flex listen for events to trigger responses.

By default, Flex uses the creationComplete event on a component to trigger a service call.

Examine the RichEditableText component in the HelloCF.mxml source code:

<s:RichEditableText x="70" y="60" 
    text="{getMessageResult.lastResult}" 
    fontWeight="bold" fontSize="24" fontStyle="italic" 
    color="red" id="richEditableText" 
    creationComplete="richEditableText_creationCompleteHandler(event)"/>

The creationComplete event fires after the application creates the component. For this RichEditableText component, creationComplete calls an event handler that Flash Builder generated for the event. Examine the code for the event handler, which is placed inside of a Script block:

<fx:Script> 
    <![CDATA[ 
        import mx.events.FlexEvent; 
        import mx.controls.Alert; 
 
        protected function richEditableText_creationCompleteHandler(event:FlexEvent):void 
        { 
            getMessageResult.token = helloService.getMessage(); 
        } 
 
    ]]> 
</fx:Script>

The creationComplete event handler calls the getMessage operation from the ColdFusion service.

Other events, such as a Click event on a button or a selectionChange event of a list, can be used to trigger service calls.

When you add a service, Flex creates a component containing methods that call the service operations. When you invoke one of the methods, the component calls the corresponding service operation over the network using the appropriate protocol.

Service calls are associated with CallResponders. Data returned from a service call is placed in the lastResult attribute of the CallResponder. CallResponders allow service calls to operate asynchronously. The client application can continue to be responsive while the service call is being processed.

Examine the generated service call and responder:

<fx:Declarations> 
    <s:CallResponder id="getMessageResult"/> 
    <helloservice:HelloService id="helloService" 
        fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" 
        showBusyCursor="true"/> 
</fx:Declarations>

When you imported the HelloService service, Flex created the HelloService class. This class contains methods to invoke the getMessage(), getLocales(), and getLocalizedMessage operations of the service.

The CallResponder, identified by the getMessageResult id, provides access to the returned data.

Flex data binding allows you to assign the value of the lastResult attribute of a CallResponder to a UI component. When the last result updates, Flex automatically updates the component.

Flex uses curly braces {} to bind data to an attribute of a component. In this example, Flex binds the lastResult value to the text attribute of the RichEditableText component.

Examine the data binding for the RichEditableText component:

<s:RichEditableText x="70" y="60" 
    text="{getMessageResult.lastResult}" 
    fontWeight="bold" fontSize="24" fontStyle="italic" 
    color="red" id="richEditableText" 
    creationComplete="richEditableText_creationCompleteHandler(event)"/>

The data returned to the CallResponder, getMessageResult.lastResult, is automatically assigned as the text attribute for the RichEditableText component.

In summary, Flash Builder generates code to access the imported service in the client application:

• After Flex creates the RichEditableText component in the running application, the creationComplete event fires, calling a service operation.

• The data returned from the service call is placed in the lastResult attribute of the associated CallResponder.

• The text attribute of the RichEditableText component, which is bound to the lastResult attribute, updates with the returned data.