WDA学习（10）：ALV Config Model

2.2 ALV Configuration Model

       本实例展示使用ALV Configuration Mode，设置ALV显示样式。可以复制Use an ALV TABLE in WDA这个实例，在其基础上修改。

1.复制Use an ALV TABLE in WDA实例。

选择Z_TEST_WDA5组件->右键->Copy；

 

 2.修改MAIN视图组件

Properties页签：引入ALV相关Used Component

 

 Methods页签：WDDOINIT方法，增加使用ALV Configuration Model逻辑。

点击魔术棒，实例化Used Component。

自动生成代码：

"实例化Used Component
  DATA:lo_cmp_usage type ref to if_wd_component_usage.
  lo_cmp_usage =   wd_this->wd_cpuse_alv( ).
  if lo_cmp_usage->has_active_component( ) is initial.
    lo_cmp_usage->create_component( ).
  endif.

 选择实例化Used Component,点击输入框后f4小方块，可以查询到本组件下可实例化的组件，需要Properties页签引入。

 点击魔术棒，获取Config Model。

点击Component Name输入框后f4帮助方块，选择Component，自动带出Component Use和Controller Name信息。

 

 点击Method Name输入框后帮助，获取可调用的方法

 

  自动生成代码：

 "获取Config Mode
  "Component接口
  DATA:lo_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE .
  lo_INTERFACECONTROLLER =   wd_this->wd_cpifc_alv( ).
  "Config model
  DATA:lv_value TYPE ref to cl_salv_wd_config_table.
  lv_value = lo_interfacecontroller->get_model( ).

2.2.1设置ALV Table显示行数

方法：IF_SALV_WD_TABLE_SETTINGS~SET_VISIBLE_ROW_COUNT

实例代码：

 "设置可见行数
lv_value->IF_SALV_WD_TABLE_SETTINGS~SET_VISIBLE_ROW_COUNT( 20 ).

2.2.2设置ALV Table某栏位排序

实例代码：

 "设置字段排序
  DATA:lo_field TYPE REF TO cl_salv_wd_field.
  lo_field = lv_value->IF_SALV_WD_FIELD_SETTINGS~GET_FIELD( FIELDNAME = 'PRICE' ).
  lo_field->IF_SALV_WD_SORT~CREATE_SORT_RULE( SORT_ORDER = IF_SALV_WD_C_SORT=>SORT_ORDER_DESCENDING ).

2.2.3.添加STATUS字段，显示交通灯

设置交通灯显示，需要添加Context上下文Status，用来显示Icon。

当选择Context时，右键->Create，发现不能创建Attribute,我们需要将NODE_FLIGHT节点对应的Dictionary Structure取消掉

 

 创建Status，类型：String

 

 创建完成后，因为MAIN视图组件Context是映射的COMPONENTCONTROLLER组件控制器的上下文，所以需要在MAIN视图组件Context更新映像。

选择MAIN视图组件->Context页签->选择NODE_FLIGHT节点->右键->Update Mapping。

 

 实例代码：

method WDDOINIT .

  "系统自动生成节点对应类型定义代码

*  types:

*    begin of Element_node_sflight,

*      CARRID  type SFLIGHT-CARRID,

*      CONNID  type SFLIGHT-CONNID,

*      FLDATE  type SFLIGHT-FLDATE,

*      PRICE  type SFLIGHT-PRICE,

*      CURRENCY  type SFLIGHT-CURRENCY,

*      PLANETYPE  type SFLIGHT-PLANETYPE,

*      SEATSMAX  type SFLIGHT-SEATSMAX,

*      SEATSOCC  type SFLIGHT-SEATSOCC,

*      PAYMENTSUM  type SFLIGHT-PAYMENTSUM,

*      STATUS  type STRING,

*    end of Element_node_sflight,  "#EC NEEDED

*    Elements_node_sflight type

*       standard table of Element_node_sflight

*       with default key. "#EC NEEDED

  "定义对应节点类型

  DATA:lt_sflight TYPE wd_this->Elements_node_sflight.

  DATA:wa_sflight LIKE LINE OF lt_sflight.

  DATA:lo_node TYPE REF TO IF_WD_CONTEXT_NODE.

  "剩余座位

  DATA:lv_seatfree TYPE I.

 

  "查询数据

  SELECT * INTO CORRESPONDING FIELDS OF TABLE lt_sflight FROM SFLIGHT.

 

  "实例化Used Component

  DATA:lo_cmp_usage type ref to if_wd_component_usage.

 

  lo_cmp_usage = wd_this->wd_cpuse_alv( ).

  if lo_cmp_usage->has_active_component( ) is initial.

    lo_cmp_usage->create_component( ).

  endif.

 

  "获取Config Mode

  "Component接口

  DATA:lo_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE .

  lo_INTERFACECONTROLLER =   wd_this->wd_cpifc_alv( ).

  "Config model

  DATA:lv_value TYPE ref to cl_salv_wd_config_table.

  lv_value = lo_interfacecontroller->get_model( ).

 

  "设置可见行数

  lv_value->IF_SALV_WD_TABLE_SETTINGS~SET_VISIBLE_ROW_COUNT( 20 ).

 

  "设置字段排序

  DATA:lo_field TYPE REF TO cl_salv_wd_field.

  lo_field = lv_value->IF_SALV_WD_FIELD_SETTINGS~GET_FIELD( FIELDNAME = 'PRICE' ).

  lo_field->IF_SALV_WD_SORT~CREATE_SORT_RULE( SORT_ORDER = IF_SALV_WD_C_SORT=>SORT_ORDER_DESCENDING ).

 

  "设置status字段显示信号灯

  "context:node_flight节点下创建attribute,status

  "根据剩余座位数，设置不同信号灯

  LOOP AT lt_sflight INTO wa_sflight.

    "剩余座位数

    lv_seatfree = wa_sflight-seatsmax - wa_sflight-seatsocc.

    IF lv_seatfree = 0.

      wa_sflight-status = 'ICON_RED_LIGHT'.

    ELSEIF lv_seatfree < 50.

      wa_sflight-status = 'ICON_YELLOW_LIGHT'.

    ELSE.

      wa_sflight-status = 'ICON_GREEN_LIGHT'.

    ENDIF.

    MODIFY lt_sflight FROM wa_sflight.

  ENDLOOP.

  DATA:lo_column TYPE REF TO cl_salv_wd_column.

  DATA:lr_image TYPE REF TO cl_salv_wd_uie_image.

  DATA:lv_icon TYPE String.

  "获取列对象

  lo_column = lv_value->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN( id = 'STATUS' ).

  CREATE OBJECT lr_image.

  lr_image->SET_SOURCE_FIELDNAME( 'STATUS' ).

  lo_column->SET_CELL_EDITOR( lr_image ).

 

  "获取NODE_SFLIGHT子节点

  lo_node =  wd_context->get_child_node( name = 'NODE_SFLIGHT' ).

  lo_node->bind_table( lt_sflight ).

endmethod.

2.2.4设置PRICE字段可编辑

       修改WDDOINIT方法

实例代码：

"设置列可编辑
  DATA:lo_input_field TYPE REF TO  cl_salv_wd_uie_input_field.
  lo_column = lv_value->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN( id = 'PRICE' ).
  "创建input field对象
  CREATE OBJECT lo_input_field EXPORTING VALUE_FIELDNAME = 'PRICE'.
  lo_column->set_cell_editor( lo_input_field ).
  "关闭只读模式
  lv_value->IF_SALV_WD_TABLE_SETTINGS~SET_READ_ONLY( abap_false ).

修改MAIN视图组件的Layout页面

创建一个SAVE按钮保存修改的记录。

 

 重写ONSAVE方法，

实例代码：

method ONACTIONSAVE .
   "Component接口
  DATA:lo_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE .
  lo_INTERFACECONTROLLER =   wd_this->wd_cpifc_alv( ).
  "调用data_check方法
  lo_INTERFACECONTROLLER->data_check( ).
endmethod.

实现ALV提供ON_DATA_CHECK事件的Event Handler方法

 

代码实例：

method ONDATACHECK .
  DATA:lo_node TYPE REF TO if_wd_context_node.
  DATA:lo_element TYPE REF TO if_wd_context_element.
  DATA:lt_sflight TYPE wd_this->Elements_node_sflight.

  "修改没有错误
  CHECK r_param->t_error_cells IS INITIAL.
  lo_node = wd_context->get_child_node( name = 'NODE_SFLIGHT' ).
  "获取修改后的数据，这里获得的是整个内表，能否获取更改的记录
  lo_node->get_static_attributes_table( IMPORTING table = lt_sflight ).

  "查看一下r_param信息
  "删除行数据
  DATA:lo_deleted TYPE SALV_WD_T_TABLE_ROW.
  lo_deleted = r_param->t_deleted_rows.

  "插入行数据
  DATA:lo_inserted TYPE SALV_WD_T_TABLE_ROW.
  lo_inserted = r_param->t_inserted_rows.

  "修改过的数据
  DATA:lo_modified TYPE SALV_WD_T_TABLE_MOD_CELL.
  lo_modified = r_param->t_modified_cells.

  "更新数据库表
*  UPDATE sflgiht FROM TABLE lt_sflight.

  "创建信息
  DATA:lo_current_controller TYPE REF TO if_wd_controller.
  DATA:lo_message_manager TYPE REF TO if_wd_message_manager.
  lo_current_controller ?= wd_this->wd_get_api( ).
  "获取message manager对象
  CALL METHOD lo_current_controller->get_message_manager
    RECEIVING
      message_manager = lo_message_manager.
  "显示成功信息
  CALL METHOD lo_message_manager->report_success
    EXPORTING
       message_text = 'Data was successfully saved.'.
endmethod.

3.创建Web Component Application，运行

 

 2.2.5设置CARRID,CONNID单元格点击事件

       将CARRID,CONNID列变成按钮和链接类型，可以触发点击事件。

实例代码：

"设置CARRID列为按钮
  DATA:lo_button TYPE REF TO cl_salv_wd_uie_button.
  lo_column = lv_value->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN( id = 'CARRID' ).

  CREATE OBJECT lo_button.
  lo_button->set_text_fieldname( 'CARRID' ).
  lo_column->set_cell_editor( lo_button ).

  "设置CONNID列为link链接
  DATA:lo_link TYPE REF TO cl_salv_wd_uie_link_to_action.
  lo_column = lv_value->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN( id = 'CONNID' ).

  CREATE OBJECT lo_link.
  lo_link->set_text_fieldname( 'CONNID' ).
  lo_column->set_cell_editor( lo_link ).

创建Context上下文节点：EVENT_PROPERTIES

 

 节点下Attributes:

COLUMN_ID:点击列ID；

INDEX:点击单元格所在行；

ATTRIBUTE: 点击列ID；

VALUE：点击单元格对应值；

 

 实现ALV提供ON_CLICK事件的Event Handler方法

 

 实例代码：

method ONALVCLICK .
  DATA:lo_node TYPE REF TO if_wd_context_node.
  DATA:lo_element TYPE REF TO if_wd_context_element.
  DATA:lt_event_properties TYPE wd_this->Elements_event_properties.
  DATA:ls_event_properties TYPE wd_this->Element_event_properties.
  FIELD-SYMBOLS:<fs_value> TYPE ANY.

  "获取点击信息
  CLEAR ls_event_properties.
  ls_event_properties-column_id = r_param->column.
  ls_event_properties-index = r_param->index.
  ls_event_properties-attribute = r_param->attribute.
  ASSIGN r_param->value->* TO <fs_value>.
  ls_event_properties-value = <fs_value>.
  APPEND ls_event_properties TO lt_event_properties.
  "获取上下文节点
  lo_node = wd_context->get_child_node( name = 'EVENT_PROPERTIES' ).
  lo_node->bind_table( lt_event_properties ).
endmethod.

修改MAIN视图组件，Layout页签

创建TABLE视图控件，显示EVENT_PROPERTIES上下文节点内容。

选择右边控件树->TABLE视图控件，右键->Create Binding,点击Context,选择EVENT_PROPERTIES上下文节点

 

 3.创建Web Component Application，运行