WDA-5-VIEW视图切换

时间:2021-09-18 12:31:58

这一部分介绍同一窗口下不同视图之间的链接跳转。

前提:完成上一步骤MAIN视图ALV显示。

1.效果展示

 点击ALV物料下划线链接,页面跳转到物料明细页面。

WDA-5-VIEW视图切换

WDA-5-VIEW视图切换

2.实现过程

 基于上一步骤在MAIN页面显示ALV物料信息,通过ALV物料下划链接跳转到物料明细页面。

 物料明细页面主要有两部分:基本信息、工厂物料明细。

 这两部分信息需要增加两个节点(ZSMM_DETAIL-基本信息 ZSMM_ITEM-工厂物料明细)、一个ALV组件(工厂物料明细)。

 2.1Context增加节点

 2.1.1进入Componentcontroller组件控制页,增加节点ZSMM_DETAIL(基本信息),记录数据有且只有一条,则Cardinality=1..1 Selection=0..1

 WDA-5-VIEW视图切换

 增加节点ZSMM_ITEM(工厂物料明细),记录数据可能有多条,则Cardinality = 0..n selection = 0..1

 WDA-5-VIEW视图切换

 2.1.2进入视图VIEW-MAIN同上新增节点

 WDA-5-VIEW视图切换

 2.2增加ALV组件

 WDA-5-VIEW视图切换

 进入Componentcontroller增加ALV组件ALV_DETAIL,如下图所示:

 WDA-5-VIEW视图切换

 窗口WINDOWS增加ALV组件

 WDA-5-VIEW视图切换

 2.3新增视图MATERIAL_DETAIL

 属性页增加组件ALV_DETAIL,显示工厂物料明细。

 WDA-5-VIEW视图切换

 布局页面如下:基本信息数据绑定的是节点ZSMM_DETAIL

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

 Context节点设置(同2.1部分的操作)

 WDA-5-VIEW视图切换

 Attributes属性页

 WDA-5-VIEW视图切换

 Actions动作事件页

 WDA-5-VIEW视图切换

 Methods方法页

 WDA-5-VIEW视图切换

 2.4VIEW视图之间跳转

 设置VIEW视图MAIN、MATERIAL_DETAIL之间的跳转:MAIN视图通过ALV下划链接跳转到MATERIAL_DETAIL视图,MATERIAL_DETAIL视图返回按钮触发后返回到MAIN视图

 2.4.1设置MAIN视图:Inbound Plugs/Outbound Plugs

 FROM_DETAIL来自MATERIAL_DETAIL视图的事件

 WDA-5-VIEW视图切换

 TO_DETAIL输出参数到MATERIAL_DETAIL视图,当前参数为空。

 WDA-5-VIEW视图切换

 2.4.2设置MATERIAL_DETAIL视图:Inbound Plugs/Outbound Plugs

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

 2.5窗口WINDOWS嵌套视图

 在一个窗口中实现视图之间的跳转。

 WDA-5-VIEW视图切换

 2.6代码部分

 2.6.1视图MAIN方法METHODS:ON_LINK

 视图MAIN中ALV行项目物料MATNR下划线链接触发事件ON_LINK

 WDA-5-VIEW视图切换

 代码部分:

method on_link .
"定义
data:
lo_nd_detail type ref to if_wd_context_node, "节点
lo_el_detail type ref to if_wd_context_element, "元素
ls_detail type wd_this->element_zsmm_detail. "结构 **Main获取ALV选择行记录
data:
lo_nd_alv type ref to if_wd_context_node, "节点
lt_alv type wd_this->elements_zsmm_material, "表体
ls_alv type wd_this->element_zsmm_material. "结构 "获取节点
lo_nd_alv = wd_context->get_child_node( name = wd_this->wdctx_zsmm_material ).
"获取内表
lo_nd_alv->get_static_attributes_table( importing table = lt_alv ).
"获取行记录
if lt_alv[] is not initial.
read table lt_alv index r_param->index into ls_alv.
endif. **Material_detail基本信息
"获取节点 context-zsmm_material
lo_nd_detail = wd_context->get_child_node( name = wd_this->wdctx_zsmm_detail ).
"获取结构记录
ls_detail = ls_alv. "获取节点元素清单
lo_el_detail = lo_nd_detail->get_element( ).
"节点元素中的属性赋值
lo_el_detail->set_static_attributes( static_attributes = ls_detail ). **Material_detail物料明细
data:
lo_nd_item type ref to if_wd_context_node, "节点
lo_el_item type ref to if_wd_context_element, "元素
lt_item type wd_this->elements_zsmm_item, "表体
ls_item type wd_this->element_zsmm_item. "结构 "获取节点zsmm_item
lo_nd_item = wd_context->get_child_node( name = wd_this->wdctx_zsmm_item ). select *
into corresponding fields of table lt_item
from marc
where matnr = ls_alv-matnr. "Data binding 节点ZSMM_ITEM绑定数据IT_ITEM
lo_nd_item->bind_table(
new_items = lt_item "数据表
set_initial_elements = abap_true "abap_true原始记录清空并新增记录
). "跳转到MATERIAL_DETAIL物料明细视图
wd_this->fire_to_detail_plg( ).
endmethod.

 备注:fire_to_detail_plg( )是在MAIN视图中设置Outbound Plugs-to_detail生成的跳转方法。

 2.6.2视图MATERIAL_DETAIL方法:ONACTIONBT_BACK

 视图MATERIAL_DETAIL中按钮ONACTIONBT_BACK触发事件,返回MAIN视图

 WDA-5-VIEW视图切换

 代码部分:

method ONACTIONBT_BACK .
"返回MAIN视图
wd_this->fire_to_main_plg( ).
endmethod.

 备注:fire_to_main_plg( )是在MATERIAL_DETAIL视图中Outbound Plugs-TO_MAIN生成的跳转方法。

 2.6.3初始化ALV组件:ALV_ITEM

 在视图MATERIAL_DETAIL中增加了ALV组件,显示工厂物料明细。需对ALV进行初始化。

 进入Componentcontroller界面METHODS方法:INIT_ALV_DETAIL

WDA-5-VIEW视图切换

 代码部分:

method INIT_ALV_DETAIL .
data:
lo_nd_item type ref to if_wd_context_node,
lo_cmp_alv type ref to if_wd_component_usage,
lo_cmpif_alv type ref to iwci_salv_wd_table,
lo_config type ref to cl_salv_wd_config_table. * alv component usage
lo_cmp_alv = wd_this->wd_cpuse_alv_detail( ). "Properties->component use
if lo_cmp_alv->has_active_component( ) is initial.
lo_cmp_alv->create_component( ).
endif. * set data node
lo_nd_item = wd_context->get_child_node( name = wd_this->wdctx_zsmm_item ). "context-node
lo_cmpif_alv = wd_this->wd_cpifc_alv_detail( ). "Properties->component use
lo_cmpif_alv->set_data( lo_nd_item ). * configure alv
lo_config = lo_cmpif_alv->get_model( ). * table settings
lo_config->if_salv_wd_table_settings~set_fixed_table_layout( value = abap_true ).
lo_config->if_salv_wd_table_settings~set_visible_row_count( ).
lo_config->if_salv_wd_table_settings~set_width( '100%' ).
lo_config->if_salv_wd_table_settings~set_footer_visible( if_salv_wd_c_table_settings=>footer_visible_on_demand ).
lo_config->if_salv_wd_table_settings~set_scrollable_col_count( ).
lo_config->if_salv_wd_table_settings~set_read_only( abap_false ).
lo_config->if_salv_wd_table_settings~set_data_check( if_salv_wd_c_table_settings=>data_check_on_cell_event ). lo_config->if_salv_wd_std_functions~set_view_list_allowed( abap_false ).
lo_config->if_salv_wd_std_functions~set_pdf_allowed( abap_false ).
lo_config->if_salv_wd_std_functions~set_edit_check_available( abap_false ).
lo_config->if_salv_wd_std_functions~set_edit_insert_row_allowed( abap_false ).
lo_config->if_salv_wd_std_functions~set_edit_append_row_allowed( abap_false ).
lo_config->if_salv_wd_std_functions~set_edit_delete_row_allowed( abap_false ). * table toolbar
* data:
* lo_fun_add type ref to cl_salv_wd_function,
* lo_btn_add type ref to cl_salv_wd_fe_button,
* lo_fun_chg type ref to cl_salv_wd_function,
* lo_btn_chg type ref to cl_salv_wd_fe_button,
* lo_fun_del type ref to cl_salv_wd_function,
* lo_btn_del type ref to cl_salv_wd_fe_button,
* lo_fun_save type ref to cl_salv_wd_function,
* lo_btn_save type ref to cl_salv_wd_fe_button.
*
* lo_fun_add = lo_config->if_salv_wd_function_settings~create_function( 'BT_ADD' ).
* create object lo_btn_add.
* lo_btn_add->set_text( wd_assist->get_text( key = 'B01' ) ).
* lo_btn_add->set_image_source( value = '~Icon/AddRow' ).
* lo_fun_add->set_editor( lo_btn_add ).
*
* lo_fun_chg = lo_config->if_salv_wd_function_settings~create_function( 'BT_CHG' ).
* create object lo_btn_chg.
* lo_btn_chg->set_text( wd_assist->get_text( key = 'B02' ) ).
* lo_btn_chg->set_image_source( value = '~Icon/EditChangedItem' ).
* lo_fun_chg->set_editor( lo_btn_chg ).
*
* lo_fun_del = lo_config->if_salv_wd_function_settings~create_function( 'BT_DEL' ).
* create object lo_btn_del.
* lo_btn_del->set_text( wd_assist->get_text( key = 'B03' ) ).
* lo_btn_del->set_image_source( value = '~Icon/DeletedItem' ).
* lo_fun_del->set_editor( lo_btn_del ).
*
* lo_fun_save = lo_config->if_salv_wd_function_settings~create_function( 'BT_SAVE' ).
* create object lo_btn_save.
* lo_btn_save->set_text( wd_assist->get_text( key = 'B04' ) ).
* lo_btn_save->set_image_source( value = '~Icon/Save' ).
* lo_fun_save->set_editor( lo_btn_save ). * table columns and column header
data:
lt_columns type salv_wd_t_column_ref,
ls_column type salv_wd_s_column_ref,
lo_column type ref to cl_salv_wd_column,
lo_header type ref to cl_salv_wd_column_header,
lo_dropdown_by_key type ref to cl_salv_wd_uie_dropdown_by_key,
lo_input_field type ref to cl_salv_wd_uie_input_field,
lo_text_view type ref to cl_salv_wd_uie_text_view,
lo_checkbox type ref to cl_salv_wd_uie_checkbox,
lr_link type ref to cl_salv_wd_uie_link_to_action,
lv_field_name type string,
lv_length type i. lt_columns = lo_config->if_salv_wd_column_settings~get_columns( ). loop at lt_columns into ls_column.
lo_column = ls_column-r_column.
lo_header = lo_column->get_header( ).
lo_header->set_ddic_binding_field( if_salv_wd_c_column_settings=>ddic_bind_none ). case ls_column-id.
when 'MATNR'.
"lo_column->set_width( value = '18' ).
lo_header->set_text( value = wd_assist->get_text( key = 'A01' ) ).
create object lo_input_field exporting value_fieldname = ls_column-id.
lo_input_field->set_read_only_fieldname( value = 'FG_READ' ).
lo_column->set_cell_editor( lo_input_field ). when 'WERKS'.
"lo_column->set_width( value = '4' ).
lo_header->set_text( value = wd_assist->get_text( key = 'A10' ) ).
create object lo_input_field
exporting
value_fieldname = ls_column-id.
lo_input_field->set_read_only_fieldname( value = 'FG_READ' ).
lo_column->set_cell_editor( lo_input_field ). when 'EKGRP'.
"lo_column->set_width( value = '3' ).
lo_header->set_text( value = wd_assist->get_text( key = 'A11' ) ).
create object lo_input_field
exporting
value_fieldname = ls_column-id.
lo_input_field->set_read_only_fieldname( value = 'FG_READ' ).
lo_column->set_cell_editor( lo_input_field ). when others.
lo_column->set_visible( value = cl_wd_uielement=>e_visible-blank ). endcase. endloop.
endmethod.

 上述操作基本完成。

 2.7测试

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

3.关注点

 ALV组件:组件尽量不要重复使用,多视图容易冲突。

 Context节点:节点元素属性根据用途区分不同的业务场景。

 关系:

  Windows->view->container->select_options/Table->Component use

  Windows->view->Inbound/Outbound Plugs

 语法关注:

lo_nd_detail type ref to if_wd_context_node,       "节点
lo_el_detail type ref to if_wd_context_element, "元素
lt_detail  type wd_this->element_zsmm_detail. "内表
ls_detail type wd_this->element_zsmm_detail.   "结构 "获取节点ZSMM_DETAIL
lo_nd_detail = wd_context->get_child_node( name = wd_this->wdctx_zsmm_detail ).
"获取节点内表数据
lo_nd_alv->get_static_attributes_table( importing table = lt_detail ).
"获取行记录
read table lt_detail index r_param->index into ls_detail
"获取节点元素
lo_el_detail = lo_nd_detail->get_element( ).
"节点元素属性赋值
lo_el_detail->set_static_attributes( static_attributes = ls_detail ).
"节点数据绑定
lo_nd_detail->bind_table( new_items = lt_detail set_initial_elements = abap_true ).

WDA-5-VIEW视图切换的更多相关文章

  1. iOS开发系列--视图切换

    概述 在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单.在iOS开发中常用的视图切换有三种,今天我们将一一介绍: UITabBarController ...

  2. 8、ASP.NET MVC入门到精通——View(视图)

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 View视图职责是向用户提供界面.负责根据提供的模型数据,生成准备提供给用户的格式界面. 支持多种视图引擎(Razor和ASPX视图引擎是官 ...

  3. pushViewController addSubview presentModalViewController视图切换

    1.pushViewController和popViewController来进行视图切换,首先要确保根视图是NavigationController,不然是不可以用的, pushViewContro ...

  4. IOS 视图切换动画

    我在网上找到的这个小方法,被我举一反三使用的屡试不爽.比如用在,当视图需要执行某一方法跳转到新的一个UIView上,从底层渐变浮到最上层.就是一个不错的视觉效果或者当需要类似keyboard的效果从底 ...

  5. UI3_视图切换

    // // ViewController.m // UI3_视图切换 // // Created by zhangxueming on 15/7/3. // Copyright (c) 2015年 z ...

  6. UI2_视图切换ViewController

    // // SubViewController.h // UI2_视图切换 // // Created by zhangxueming on 15/7/3. // Copyright (c) 2015 ...

  7. UI1_ViewController视图切换及Appdelegate

    // // ThirdViewController.h // UI1_ViewController视图切换及Appdelegate // // Created by zhangxueming on 1 ...

  8. UI2_视图切换

    // // ViewController.m // UI2_视图切换 // // Created by zhangxueming on 15/7/1. // Copyright (c) 2015年 z ...

  9. Tabbar视图切换,返回上一视图,添加item

    前面有一篇博文iOS学习之Tab Bar的使用和视图切换 这是在AppDelegate里使用Tabbar,这样的程序打开就是TabbarView了,有时候我们需要给程序做一些帮助页面,或者登录页面,之 ...

  10. IOS—通过ChildViewController实现view的切换

    IOS-通过ChildViewController实现view的切换 在以前,一个UIViewController的View可能有很多小的子view.这些子view很多时候被盖在最后,我们在最外层Vi ...

随机推荐

  1. js获取HTTP的请求头信息

    以下为js获取HTTP的全部请求头信息: var req = new XMLHttpRequest(); req.open('GET', document.location, false); req. ...

  2. web前端职业规划(转)

    关于一个WEB前端的职业规划,其实是有各种的答案,没有哪种答案是完全正确的,全凭自己的选择,只要是自己选定了, 坚持去认真走,就好.在这里,我只是简要说一下自己对于这块儿内容的理解.有一个观点想要分享 ...

  3. Mongodb Manual阅读笔记:MongoDB教程

    Mongodb教程的说明,可以当手册用 Getting Started Install MongoDB on Linux Systems Install MongoDB on Red Hat Ente ...

  4. ExecuteNonQuery()返回值注意点

    在使用ExecuteNonQuery(),调用存储过程,语句执行无错误,但是返回结果一直是-1 原因: 当使用储存过程时, 要把SET NOCOUNT ON  这个语句去掉, 这样数据就有反回值了 当 ...

  5. nginx的HA集群及配置

    一.服务器环境 master服务器: ip:192.168.11.155 系统环境:CentOS release 6.5 (Final) 内核版本:2.6.32-431.el6.x86_64 防火墙和 ...

  6. bzoj2152 聪聪可可

    Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一般情况下石头剪刀布就好 ...

  7. [LeetCode 111] - 二叉树的最小深度 (Minimum Depth of Binary Tree)

    问题 给出一棵二叉树,找出它的最小深度. 最小深度是指从根节点沿着最短路径下降到最近的叶子节点所经过的节点数. 初始思路 不难看出又是一个需要层次遍历二叉树的题目,只要在112基础上作出简单修改即可得 ...

  8. IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

    E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...

  9. JTable常见用法细则+设置某列可编辑+滚动表格

    JTable常见用法细则 JTable是Swing编程中很常用的控件,这里总结了一些常用方法以备查阅.欢迎补充,转载请注明作者与出处. 一.创建表格控件的各种方式: 1)  调用无参构造函数. JTa ...

  10. 记录我发现的第一个关于 Google 的 Bug

    先贴上 Bug 链接: https://issuetracker.google.com/issues/68969655 Bug 本身是很简单的,就是 Google 的 Android 在线参考文档中, ...