WDA学习(23):UI Element:Radio Button Group & CheckBox Group使用

1.16 UI Element:Radio Button & CheckBox使用

本实例测试Radio Button Group,CheckBox Group等的使用。

注：DropdownByKey,DropdownByIndex使用方式和RadioButtonGroupByKey,RadioButtonGroupByIndex一致。

1.创建Component及Main View;

2.Main View的Context；

创建Context节点：NODE_CBG_TEXT；

设置属性Cardinality：0..n；

创建Attributes:TEXTS，类型TEXTS;

创建Context节点：NODE_RGB_BI；

设置属性Cardinality：0..n；

创建Attributes:TEXTS,类型STRING;

创建Context节点：NODE_CHECKBOX；

设置属性Cardinality：1..1;

创建Attributes: CHECKED，类型char1;

创建Attributes: TEXT,类型string;

创建单独Attributes:SEL_KEY,类型String;

 

3.Main View的Layout;

创建UI Element:RadioButtonGroupByIndex;

设置属性

colCount:3；

texts: 绑定节点Attribute MAIN.NODE_RGB_BI.TEXTS;

onSelect: 绑定Action,SEL_RBG_BI;

创建UI Element:RadioButtonGroupByKey;

设置属性

colCount:1;

selectedKey:绑定Attributes,MAIN.SEL_KEY;

onSelect:绑定Action, SEL_RBG_BK;

创建UI Element:CheckBoxGroup;

设置属性

colCount:1;

texts:绑定节点Attribute, MAIN.NODE_CBG_TEXT.TEXTS

创建UI Element:Button,绑定Action: GET_CHB_SEL;

创建UI Element:CheckBox;

设置属性

onToggle：绑定Action，TOG_CHECKBOX;

checked:绑定节点Attribute, NODE_CHECKBOX.CHECKED;

创建UI Element:Button,绑定Action: GET_CHECK;

 

4.实现Action方法；

WDDOINIT方法中调用初始化方法；

创建Method: INIT_RBG_KEY，初始化Radio Button Group By Key;

代码实例：

  DATA:lo_node TYPE REF TO if_wd_context_node.
  DATA:lo_element TYPE REF TO if_wd_context_element.
  DATA:lo_node_info TYPE REF TO if_wd_context_node_info.
  DATA:lt_valueset TYPE wdr_context_attr_value_list.
  DATA:ls_valueset TYPE wdr_context_attr_value.

  "获取节点
  lo_node_info = wd_context->get_node_info( ).
  "初始化radio button选项
  ls_valueset-value = '1'.
  ls_valueset-text = 'test radio1'.
  APPEND ls_valueset TO lt_valueset.
  ls_valueset-value = '2'.
  ls_valueset-text = 'test radio2'.
  APPEND ls_valueset TO lt_valueset.
  "绑定值
  lo_node_info->set_attribute_value_set(
    name = 'SEL_KEY'
    value_set = lt_valueset
  ). 

创建Method: INIT_RBG_INDEX,初始化Radio Button Group By Index;

代码实例：

 "初始化radio button group值
  DATA:lt_rgb_text TYPE wd_this->Elements_node_rgb_bi.
  DATA:ls_rgb_text LIKE LINE OF lt_rgb_text.
  DATA:lo_node TYPE REF TO if_wd_context_node.
  ls_rgb_text-texts = 'test11'.
  APPEND ls_rgb_text TO lt_rgb_text.
  ls_rgb_text-texts = 'test22'.
  APPEND ls_rgb_text TO lt_rgb_text.
  ls_rgb_text-texts = 'test33'.
  APPEND ls_rgb_text TO lt_rgb_text.

  lo_node = wd_context->get_child_node( name = WD_THIS->WDCTX_NODE_RGB_BI ).
  lo_node->bind_table( lt_rgb_text ). 

创建Method: INIT_CBG,初始化CheckBox Group;

代码实例：

  DATA:lo_node TYPE REF TO if_wd_context_node.
  DATA:lt_cbg_text TYPE wd_this->Elements_node_cbg_text.
  DATA:ls_cbg_text LIKE LINE OF lt_cbg_text.

  ls_cbg_text-texts = 'test1'.
  APPEND ls_cbg_text TO lt_cbg_text.
  ls_cbg_text-texts = 'test2'.
  APPEND ls_cbg_text TO lt_cbg_text.
  ls_cbg_text-texts = 'test3'.
  APPEND ls_cbg_text TO lt_cbg_text.

  lo_node = wd_context->get_child_node( name = WD_THIS->WDCTX_NODE_CBG_TEXT ).
  lo_node->bind_table( lt_cbg_text ).

Action：SEL_RBG_BI,选择Radio Button Group By Index触发；

代码实例：

 DATA:lv_index TYPE string.
  wdevent->get_data(
    EXPORTING
      name = 'INDEX'
    IMPORTING
      value = lv_index
  ).
  lv_index = '选择按钮:' && lv_index.
  wd_comp_controller->show_msg( msg = lv_index msg_type = 'S' ).

*  "方式2：通过绑定值，获取选择
*  DATA:lt_el_sets TYPE wdr_context_element_set.
*  DATA:lo_element TYPE REF TO if_wd_context_element.
*  DATA:lv_str TYPE string.
*  DATA:lo_context_node TYPE REF TO IF_WD_CONTEXT_NODE.
*  lo_context_node  = wd_context->path_get_node( path = `NODE_RGB_BI` ).
*  lo_context_node->GET_ATTRIBUTE( EXPORTING NAME = 'TEXTS' IMPORTING value = lv_str ).
*  "显示信息
*  lv_str = '选择:' && lv_str.
*  wd_comp_controller->show_msg( msg = lv_str msg_type = 'S' ).

Action：SEL_RBG_BK，选择Radio Button Group By Key触发；

代码实例：

 DATA:lv_key TYPE string.
  wdevent->get_data(
    EXPORTING
      name = 'KEY'
    IMPORTING
      value = lv_key
  ).
  lv_key = '选择按钮:' && lv_key.
  wd_comp_controller->show_msg( msg = lv_key msg_type = 'S' ).

Action: GET_CHB_SEL,获取Check Box选中项；

代码实例：

  DATA:lo_node TYPE REF TO if_wd_context_node.
  DATA:lt_cbg_text TYPE wd_this->Elements_node_cbg_text.
  DATA:ls_cbg_text LIKE LINE OF lt_cbg_text.
  DATA:lv_text TYPE string.
  DATA:lo_cbg TYPE REF TO CL_WD_CHECKBOX_GROUP.
  lo_cbg ?= wd_this->v_view->GET_ELEMENT( ID = 'CBG1' ).

  lo_node = wd_context->get_child_node( wd_this->WDCTX_NODE_CBG_TEXT ).
  lo_node->GET_STATIC_ATTRIBUTES_TABLE( IMPORTING table = lt_cbg_text ).

  DATA:lt_el_sets TYPE wdr_context_element_set.
  DATA:lo_element TYPE REF TO if_wd_context_element.
  DATA:lv_str TYPE string.
  DATA:lv_key TYPE string.
  DATA:lt_str TYPE string_table.
  DATA:ls_str LIKE LINE OF lt_str.
  lt_el_sets  = wd_context->path_get_node( path = `NODE_CBG_TEXT` )->get_selected_elements( ).
  LOOP AT lt_el_sets INTO lo_element.
    lo_element->GET_ATTRIBUTE( EXPORTING name = 'TEXTS' IMPORTING value = lv_str  ).
    APPEND lv_str TO lt_str.
  ENDLOOP.

  CLEAR lv_str.
  LOOP AT lt_str INTO ls_str.
    lv_str = lv_str && '点击:' && ls_str.
  ENDLOOP.
  wd_comp_controller->show_msg( msg = lv_str msg_type = 'S' ).

Action: GET_CHECK，获取Check Box是否选择；

代码实例：

   DATA:lo_node TYPE REF TO if_wd_context_node.
   DATA:lo_elem TYPE REF TO if_wd_context_element.
   DATA:lv_checked TYPE char1.
   DATA:lo_checkbox TYPE REF TO CL_WD_CHECKBOX.

   "设置只读
   lo_checkbox ?= wd_this->v_view->GET_ELEMENT( id = 'CB1' ).
   lo_checkbox->set_read_only( abap_true ).

   lo_node =  wd_context->get_child_node( name = WD_THIS->WDCTX_NODE_CHECKBOX ).
   lo_elem = lo_node->get_element( ).
   lo_elem->get_attribute( EXPORTING name = 'CHECKED' IMPORTING value = lv_checked ).
   wd_comp_controller->show_msg( msg = '是否选择：' && lv_checked msg_type = 'S' ).

Action: TOG_CHECKBOX,当Checkbox选中时触发；

代码实例：

   DATA:lo_textview TYPE REF TO CL_WD_TEXT_VIEW.
   DATA:lo_event TYPE REF TO cl_wd_custom_event.
   DATA:lv_checked TYPE char1.
   lo_event = wdevent.
   lv_checked =  lo_event->get_char( name = 'CHECKED' ).
   IF lv_checked = 'X'.
     "设置文本，
     lo_textview ?= wd_this->v_view->GET_ELEMENT( id = 'TV1' ).
     lo_textview->set_text( '已选择:hello world' ).
   ELSE.
     "设置文本，
     lo_textview ?= wd_this->v_view->GET_ELEMENT( id = 'TV1' ).
     lo_textview->set_text( 'hello world' ).
   ENDIF.