当前位置：首页 > ops >正文

WDA学习(25):DateNavigator使用

ops 2025/7/3 8:13:07

1.18 UI Element:Date Navigator使用

本实例测试创建Date Navigator;

1.创建Component,View: V_DATE_NAVIGATOR;

2.创建Context节点；

创建NODE: NODE_DATENAV, Cardinality:1..1;

创建Attribute:SELECTION_MODE,类型WDUI_DATE_SELECTION_MODE；

创建Attribute: FIRST_DAY_OF_WEEK,类型WDUI_DAY_OF_WEEK；

创建Attribute: FIRST_SELECTED_DATE,类型D;

创建Attribute:LAST_SELECTED_DATE,类型D;

创建Attribute: MONTH_PER_COLUMN,类型I;

创建Attribute: MONTH_PER_ROW,类型I;

创建Attribute: START_WITH，类型D;

创建NODE:NODE_MARKING,Cardinality:0..n;

创建Attribute:DATE,类型D;

3.创建Layout UI Element;

创建UI Element:Tray,ID:TRAY1,包含一些输入参数UI Element;

创建UI Element:Toolbar;

创建UI Element:ToolbarButton,绑定Action:APPLY;

创建UI Element:Label;

创建UI Element:DropDownByKey,ID: INP,selectedKey绑定Context的Attribute: V_DATE_NAVIGATOR.NODE_DATENAV.FIRST_DAY_OF_WEEK;

创建UI Element:InputField,ID:INP1,value绑定Context的Attribute: V_DATE_NAVIGATOR.NODE_DATENAV.FIRST_SELECTED_DATE;

创建UI Element:InputField,ID:INP2,value绑定Context的Attribute: V_DATE_NAVIGATOR.NODE_DATENAV.LAST_SELECTED_DATE;

创建UI Element:InputField,ID:INP3,value绑定Context的Attribute: V_DATE_NAVIGATOR.NODE_DATENAV.MONTH_PER_COLUMN;

创建UI Element:InputField,ID:INP4,value绑定Context的Attribute:

V_DATE_NAVIGATOR.NODE_DATENAV.MONTH_PER_ROW;

创建UI Element:DropDownByKey,ID:INP5,selectedKey绑定Context的Attribute:

V_DATE_NAVIGATOR.NODE_DATENAV.SELECTION_MODE;

创建UI Element:InputField,ID:INP6,value绑定Context的Attribute: V_DATE_NAVIGATOR.NODE_DATENAV.START_WITH;

创建UI Element:DateNavigator;

设置Properties

firstDayOfWeek:绑定Attribute,V_DATE_NAVIGATOR.NODE_DATENAV.FIRST_DAY_OF_WEEK;

firstSelectedDate:绑定Attribute,V_DATE_NAVIGATOR.NODE_DATENAV.FIRST_SELECTED_DATE;

lastSelectedDate:绑定Attribute,V_DATE_NAVIGATOR.NODE_DATENAV.LAST_SELECTED_DATE;

monthsPerColumn:绑定Attribute,V_DATE_NAVIGATOR.NODE_DATENAV.MONTH_PER_COLUMN;

monthsPerRow:绑定Attribute,V_DATE_NAVIGATOR.NODE_DATENAV.MONTH_PER_ROW;

selectionMode:绑定Attribute,V_DATE_NAVIGATOR.NODE_DATENAV.SELECTION_MODE;

startsWith:绑定Attribute,V_DATE_NAVIGATOR.NODE_DATENAV.START_WITH;

onDaySelect：绑定Action，SEL_DAY;

onMonthSelect:绑定Action,SEL_MONTH;

onStartDateChanged:绑定Action,CHANGE_START_DAY;

onWeekSelect:绑定Action，SEL_WEEK;

创建UI Element:DateNavigatorMarking;

设置Properties

dataSource:绑定V_DATE_NAVIGATOR.NODE_MARKING；

date：绑定NODE_MARKING.DATE;

4.创建Method页签方法；

创建INIT_PROPER方法，初始化DateNavigator的属性参数，WDDOINIT方法中调用；

代码实例：

 DATA:lo_node TYPE REF TO if_wd_context_node.DATA:lo_element TYPE REF TO if_wd_context_element.DATA:lv_date TYPE D.lv_date = sy-datum."获取节点lo_node = wd_context->get_child_node( wd_this->wdctx_node_datenav ).lo_element = lo_node->get_element( ).lo_element->set_attribute(EXPORTINGname = 'FIRST_SELECTED_DATE'value = lv_date).lo_element->set_attribute(EXPORTINGname = 'LAST_SELECTED_DATE'value = lv_date).lo_element->set_attribute(EXPORTINGname = 'MONTH_PER_COLUMN'value = 1).lo_element->set_attribute(EXPORTINGname = 'MONTH_PER_ROW'value = 2).lo_element->set_attribute(EXPORTINGname = 'START_WITH'value = lv_date).

实现Action: SEL_DAY,日期选择;

  DATA:lo_node TYPE REF TO if_wd_context_node.DATA:lo_element TYPE REF TO if_wd_context_element.DATA:lt_marking TYPE wd_this->elements_node_marking.DATA:ls_marking TYPE wd_this->element_node_marking.DATA:lv_date TYPE string."获取选择的日期lv_date = wdevent->get_string( name = 'DAY' )."获取节点lo_node = wd_context->get_child_node( wd_this->wdctx_node_marking ).lo_node->get_static_attributes_table( IMPORTING table = lt_marking ).READ TABLE lt_marking INTO ls_marking WITH KEY date = lv_date.IF sy-subrc = 0.DELETE TABLE lt_marking FROM ls_marking.ELSE.ls_marking-date = lv_date.APPEND ls_marking TO lt_marking.ENDIF.lo_node->bind_table( new_items = lt_marking set_initial_elements = abap_true ).

实现Action:SEL_MONTH,选择月份；

  DATA:lo_event TYPE REF TO cl_wd_custom_event.DATA:lv_year TYPE string.DATA:lv_month TYPE string.lo_event = wdevent.lv_year = wdevent->get_string( name = 'YEAR' ).lv_month = wdevent->get_string( name = 'MONTH' ).lv_year = 'select month:' && lv_year && lv_month.wd_comp_controller->show_msg( msg = lv_year msg_type = 'S' ).

实现Action: SEL_WEEK,选择周；

  DATA:lo_event TYPE REF TO cl_wd_custom_event.DATA:lv_year TYPE string.DATA:lv_week TYPE string.DATA:lv_first_day TYPE string.lo_event = wdevent.lv_year = wdevent->get_string( name = 'YEAR' ).lv_week = wdevent->get_string( name = 'WEEK' ).lv_first_day = wdevent->get_string( name = 'FIRST_DAY' ).lv_year = 'select week:' && lv_year && '年第' && lv_week && '周' && 'first day:' && lv_first_day.wd_comp_controller->show_msg( msg = lv_year msg_type = 'S' ).

实现Action:CHANGE_START_DAY,修改start day;

代码实例：

  DATA:lo_event TYPE REF TO cl_wd_custom_event.DATA:lv_date TYPE string.lv_date = wdevent->get_string( name = 'START_DATE' ).lv_date = 'change start date:' && lv_date.wd_comp_controller->show_msg( msg = lv_date msg_type = 'S' ).

5.执行显示