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.