Create structure and Classes
Create Structure
创建structure结构如下

Create Class ZCL_CONATINER
ZCL_CONATINER用于存储UIBB的DATA,其没有method,只有一个attribute。

Create Class ZCL_CONNECTOR
ZCL_CONNECTOR 作为wire schema的connector class,在interface中引入IF_FPM_CONNECTOR,IF_FPM_CONNECTOR_DEF,IF_FPM_CONNECTOR_RUN,在attribute中引入MO_CONTAINER与 MV_PORT_TYPE,在方法中添加 CLASS_CONSTRUCTOR。

实现相应的方法
METHOD if_fpm_connector_run~get_output.
* Set container data as output
ro_output = mo_container.
ENDMETHOD.
METHOD if_fpm_connector_run~is_create_allowed.
* Entity creation is not possible
rv_allowed = abap_false.
ENDMETHOD.
METHOD if_fpm_connector_def~initialize.
* Set value to port type and wire label
mv_port_type = iv_port_type.
if_fpm_connector_def~mv_wire_label = 'Identity'. " hard code just for example, you can create text element
ENDMETHOD.
METHOD if_fpm_connector_def~set_input.
* set input data to container
mo_container ?= io_input.
ENDMETHOD.
METHOD class_constructor.
* It's generally to set 'FBI' as sv_namespace
if_fpm_connector~sv_namespace = 'FBI'.
ENDMETHOD.
Create Class ZCL_INITIAL_FORM_UIBB_FDR
创建ZCL_INITIAL_FORM_UIBB_FDR作为 initial page 中 FORM GUIBB 的 feeder class,引入接口IF_FPM_GUIBB,IF_FPM_GUIBB_FORM,IF_FPM_FEEDER_MODEL,添加 attributes MO_DATA,MS_OBJECT_KEY

实现相应的方法
METHOD if_fpm_feeder_model~get_inport_key.
* Provide the inport object key
GET REFERENCE OF ms_object_key INTO rr_object_key.
ENDMETHOD.
METHOD if_fpm_feeder_model~get_namespace.
* Get namespace, the namespace is what you set in connector class zcl_fpm_connector
rv_namespace = 'FBI'.
ENDMETHOD.
METHOD if_fpm_feeder_model~get_outports.
* Maintain outports
DATA: ls_outport TYPE if_fpm_feeder_model=>ty_s_port.
CLEAR et_outport.
GET REFERENCE OF ms_object_key INTO ls_outport-object_key.
ls_outport-type = if_fpm_feeder_model=>cs_port_type-selection.
ls_outport-identifier = 'SE'.
ls_outport-description = 'Selection'.
INSERT ls_outport INTO TABLE et_outport.
GET REFERENCE OF ms_object_key INTO ls_outport-object_key.
ls_outport-type = if_fpm_feeder_model=>cs_port_type-collection.
ls_outport-identifier = 'CO'.
ls_outport-description = 'Collection'.
INSERT ls_outport INTO TABLE et_outport.
ENDMETHOD.
METHOD if_fpm_feeder_model~get_outport_data.
* Create container instance
IF mo_data IS NOT BOUND.
CREATE OBJECT mo_data.
ENDIF.
ro_data ?= mo_data.
ENDMETHOD.
METHOD if_fpm_guibb_form~flush.
* This method can achieve the new value in UI
DATA: ls_change_log TYPE fpmgb_s_changelog,
lv_name TYPE name_komp.
FIELD-SYMBOLS: <fs_userid> TYPE /bobf/conf_key.
* Field name in screen
lv_name = 'USERID'.
* set the new value to container
READ TABLE it_change_log INTO ls_change_log WITH KEY name = lv_name.
IF sy-subrc = 0.
ASSIGN ls_change_log-new_value->* TO <fs_userid>.
mo_data->mo_container = <fs_userid>.
ENDIF.
ENDMETHOD.
METHOD if_fpm_guibb_form~get_definition.
* This method is mandatory for feeder class
* For all variants
eo_field_catalog ?= cl_abap_typedescr=>describe_by_name( 'ZFPM_STR' )."structure name
ENDMETHOD.
METHOD if_fpm_guibb~initialize.
* Create instance for container
CREATE OBJECT mo_data.
ENDMETHOD.
Create Class ZCL_MAIN_FORM_UIBB_FDR
与前面类似,创建ZCL_MAIN_FORM_UIBB_FDR作为 main page 中 FORM GUIBB 的 feeder class,引入接口IF_FPM_GUIBB,IF_FPM_GUIBB_FORM,IF_FPM_FEEDER_MODEL,添加 attributes MO_DATA,MS_OBJECT_KEY,MO_CONNECTOR

实现相应的方法
METHOD if_fpm_feeder_model~get_inport_key.
* Get inport key
GET REFERENCE OF ms_object_key INTO rr_object_key.
ENDMETHOD.
METHOD if_fpm_feeder_model~get_namespace.
rv_namespace = 'FBI'.
ENDMETHOD.
METHOD if_fpm_feeder_model~set_connector.
* Set connector
mo_connector ?= io_connector.
ENDMETHOD.
METHOD if_fpm_guibb_form~get_data.
* Set data to UI
DATA: lv_name TYPE name_komp.
FIELD-SYMBOLS: <fs_userid> TYPE /bobf/conf_key.
* Get data from connector
mo_data ?= mo_connector->if_fpm_connector_run~get_output( ).
* Set data to field 'USERID'
ASSIGN COMPONENT 'USERID' OF STRUCTURE cs_data TO <fs_userid>.
<fs_userid> = mo_data->mo_container.
* Set data changed flag
ev_data_changed = abap_true.
ENDMETHOD.
METHOD if_fpm_guibb_form~get_definition.
* This method is mandatory
* For all variants
eo_field_catalog ?= cl_abap_typedescr=>describe_by_name( 'ZFPM_STR' ).
ENDMETHOD.
Create FPM application
Create Application
创建Application如下

Create Application Configuration
选中Application后右击创建configuration,在跳出的页面中输入configuration id,点击New按钮,填入描述与package信息

创建后如下

Create Component Configuration
Create OVP Component Configuration
选择行后,点击 Assign 按钮,输入configuration id

Assig成功后,点击configuration的链接,创建该OVP configuration

Create Page in OVP Component Configuration
进入到OVP Component Configuration页面,点击New创建Initial Page

Create Component in initial Page
Create FORM UIBB Component in initial Page
在Page中创建Form Component

输入相关信息

点击Configure UIBB 按钮,系统提示创建FORM UIBB Component

提示输入Feeder Class

点击创建Add Group,选中Group后点击Add Element in Group,选择相应的字段,点击save保存

Create Toolbar Button
点击OVP链接返回OVP配置页面

点击创建Continue Toolbar 按钮

Create Component in main Page
按照前面步骤Main Page的FORM UIBB

Configure UIBB如下

Create a Wire Schema
回到OVP界面,创建wire如下

Test Application
GUI中选中Application Configuration后点击测试按钮,测试程序

网友评论