Flex访问数据——将服务操作绑定到用户界面控件

CallResponder 管理对服务调用的结果。它包含的标记属性可设置为由服务调用返回的 Async 标记。CallResponder 包含的另一个 lastResult 属性可设置为来自服务调用的最后一个成功的结果。将事件处理函数添加到 CallResponder，以便访问通过 lastResult 属性返回的数据。

当 Flash Builder 生成 CallResponder 时，会基于它所绑定到的服务操作的名称生成 ID 属性。以下代码示例显示了 EmployeeService 的两个操作的 CallResponder。getAllItems() 操作已绑定到 DataGrid 的 creationComplete 事件处理函数。delete 操作已绑定到 DataGrid 中的选定项目。DataGrid 会在创建getAllItems() 服务调用后，立即显示从该服务调用检索到的项目。Delete Item Button 控件可从数据库删除 DataGrid 中的选定记录。

<fx:Script> 
    <![CDATA[ 
        import mx.events.FlexEvent; 
        import mx.controls.Alert; 
 
        protected function dg_creationCompleteHandler(event:FlexEvent):void 
        { 
            getAllItemsResult.token = employeesService.getAllItems(); 
        } 
 
        protected function button_clickHandler(event:MouseEvent):void 
        { 
            deleteItemResult.token = 
                employeesService.deleteItem(dg.selectedItem.emp_no); 
        } 
    ]]> 
</fx:Script> 
 
<fx:Declarations> 
    <s:CallResponder id="getAllItemsResult"/> 
    <employeesservice:EmployeesService id="employeesService" 
        fault="Alert.show(event.fault.faultString + 'n' 
        + event.fault.faultDetail)" showBusyCursor="true"/> 
    <s:CallResponder id="deleteItemResult"/> 
</fx:Declarations> 
<mx:DataGrid id="dg" editable="true" 
        creationComplete="dg_creationCompleteHandler(event)"dataProvider="{getAllItemsResult.lastResult}"> 
    <mx:columns> 
        <mx:DataGridColumn headerText="emp_no" dataField="emp_no"/> 
        <mx:DataGridColumn headerText="last_name" dataField="last_name"/> 
        <mx:DataGridColumn headerText="hire_date" dataField="hire_date"/> 
    </mx:columns> 
</mx:DataGrid> 
<s:Button label="Delete Item" id="button" click="button_clickHandler(event)"/>

?

事件处理函数

<fx:Script> 
    <![CDATA[ 
        import mx.events.FlexEvent; 
        import mx.controls.Alert; 
 
        protected function dg_creationCompleteHandler(event:FlexEvent):void 
        { 
            getAllItemsResult.token = employeesService.getAllItems(); 
        } 
    ]]> 
</fx:Script> 
. . . 
 
<mx:DataGrid id="dg" editable="true" 
        creationComplete="dg_creationCompleteHandler(event)" 
        dataProvider="{getAllItemsResult.lastResult}"> 
    <mx:columns> 
        <mx:DataGridColumn headerText="emp_no" dataField="emp_no"/> 
        <mx:DataGridColumn headerText="last_name" dataField="last_name"/> 
        <mx:DataGridColumn headerText="hire_date" dataField="hire_date"/> 
    </mx:columns> 
</mx:DataGrid>

可以为响应用户事件的控件（如 Button）生成事件处理函数。以下示例显示了为填充 DataGrid 的 Button 生成的事件处理函数。

构建用户界面时，将服务操作绑定到控件。请参阅将服务操作绑定到控件。

Flash Builder 可生成代码，用于将从服务操作返回的数据绑定到显示数据的用户界面控件。

以下示例显示了 Flash Builder 生成的代码，该代码用于填充 DataGrid 控件。对于自定义数据类型 Employee，getAllItems() 操作将返回一组员工记录。

DataGrid 的 dataProvider 属性被绑定到存储在 CallResponder 中的结果 getAllItemsResult。Flash Builder 使用与为 Employee 记录返回的每个字段相对应的 DataGridColumn 自动更新 DataGrid。每一列的 headerText 和 dataField 属性是根据在 Employee 记录中返回的数据设置的。?

<mx:DataGrid creationComplete="datagrid1_creationCompleteHandler(event)" 
    dataProvider="{getAllItemsResult.lastResult}" editable="true"> 
        <mx:columns> 
            <mx:DataGridColumn headerText="gender" dataField="gender"/> 
            <mx:DataGridColumn headerText="emp_no" dataField="emp_no"/> 
            <mx:DataGridColumn headerText="birth_date" dataField="birth_date"/> 
            <mx:DataGridColumn headerText="last_name" dataField="last_name"/> 
            <mx:DataGridColumn headerText="hire_date" dataField="hire_date"/> 
            <mx:DataGridColumn headerText="first_name" dataField="first_name"/> 
        </mx:columns> 
    </mx:DataGrid>