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

将服务操作绑定到用户界面控件

将服务操作绑定到用户界面控件介绍了如何将从服务操作返回的数据绑定到用户界面控件。将服务操作绑定到控件时，Flash Builder 会生成下列代码：

• 包含 CallResponder 和服务标签的声明标签

• 用于调用服务调用的事件处理函数

• 控件与从操作返回的数据之间的数据绑定

声明标签

声明标签是一个 MXML 元素，用于声明当前类的非默认、非可视属性。将服务操作绑定到用户界面时，Flash Builder 会生成包含 CallResponder 和服务标签的声明标签。CallResponder 和生成的服务类是容器元素的属性，该元素通常是 Application 标签。

以下示例显示了一个声明标签，该标签可提供对远程 EmployeeService 的访问：

<fx:Declarations> 
    <s:CallResponder id="getAllEmployeesResult"/> 
    <employeesservice:EmployeesService id="employeesService" 
        fault="Alert.show(event.fault.faultString + '\n' 
        + event.fault.faultDetail)" showBusyCursor="true"/> 
</fx:Declarations>

 

CallResponder

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)"/>

 

事件处理函数

将服务操作绑定到用户界面组件时，Flash Builder 会为 CallResponder 生成一个事件处理函数。该事件处理函数管理操作的结果。还可以在 ActionScript 代码块中创建事件处理函数，并从用户界面组件的属性引用该事件处理函数。

通常，使用从服务返回的数据填充诸如 List 和 DataGrid 等控件。默认情况下，Flash Builder 会为创建之后立即激发的控件生成 creationComplete 事件处理函数。对于其它控件，Flash Builder 会为控件的默认事件生成处理函数。例如，对于 Button，Flash Builder 会为 Button 的 click 事件生成处理函数。

该控件的事件属性会设置为生成的事件处理函数。以下示例显示了为 DataGrid 生成的 creationComplete 事件处理函数：

<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 生成的事件处理函数。

<fx:Script> 
    <![CDATA[ 
        import mx.events.FlexEvent; 
        import mx.controls.Alert; 
 
        protected function button_clickHandler(event:MouseEvent):void 
        { 
            deleteItemResult.token = 
                employeesService.deleteItem(dg.selectedItem.emp_no); 
        } 
    ]]> 
</fx:Script> 
. . . 
 
<s:Button label="Delete Item" id="button" click="button_clickHandler(event)"/>

 

数据绑定

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

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>