如何设计折叠样式的屏幕(类似MIGO的屏幕)

本文介绍如何在SAP应用中设计折叠样式的屏幕,通过使用七个屏幕(包括主屏幕、信息屏幕及不同状态的子屏幕),实现屏幕内容的动态显示与隐藏。详细解释了各子屏幕的设计逻辑及屏幕间的调用流程。
sap的应用中,我们有时会需要设计折叠样式的屏幕(类似MIGO的屏幕),以缓解屏幕区域的太小的矛盾。折叠样式屏幕实现的基本原理是用子屏幕根据用户的输入调用不同的子屏幕来实现的。现在以放置两个子屏幕的折叠式的屏幕来说明实现的步骤。为了实现两个子屏幕的折叠式的屏幕需要设计7个屏幕(一个主屏幕,两个信息屏幕,一个全展示子屏幕,一个下半部展示子屏幕,一个上半部展示子屏幕,一个下全关闭子屏幕)。具体步骤如下:<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

Step 1:设计一个主屏幕,放置一个子屏幕范围

屏幕的逻辑流为:

PROCESS BEFORE OUTPUT.

CALL SUBSCREEN sa_2200_1 INCLUDING sy-repid &apos;2220&apos;.

*

PROCESS AFTER INPUT.

MODULE USER_COMMAND_0100.

CALL SUBSCREEN sa_2200_1.

MODULE USER_COMMAND_0100 INPUT.

DATA lv_return_code TYPE i.

CLEAR save_ok.

save_ok = ok_code.

CLEAR ok_code.

CLEAR gv_processed.

CALL METHOD cl_gui_cfw=>dispatch

IMPORTING

return_code = lv_return_code.

CHECK lv_return_code = cl_gui_cfw=>rc_noevent.

CASE save_ok.

WHEN &apos;PB_2220_1&apos; OR &apos;PB_2220_2&apos; OR &apos;PB_2240_1&apos; OR &apos;PB_2240_2&apos; OR

&apos;PB_2260_1&apos; OR &apos;PB_2260_2&apos; OR &apos;PB_2280_1&apos; OR &apos;PB_2280_2&apos;.

PERFORM set_the_col_area_screen.

WHEN others.

* action code from the menus will be processed here.

PERFORM get_screen_number USING save_ok.

ENDCASE.

ENDMODULE. " USER_COMMAND_0100 INPUT

*&---------------------------------------------------------------------*

*& Form set_the_col_area_screen

*&---------------------------------------------------------------------*

* This subroutine is used to set the subscreen for the collapsible

* areas

*----------------------------------------------------------------------*

FORM set_the_col_area_screen .

CASE save_ok.

WHEN &apos;PB_2220_1&apos; OR &apos;PB_2260_2&apos;. "打开下半部展开的子屏幕

gv_subscreen_2200_1 = 2280.

WHEN &apos;PB_2220_2&apos; OR &apos;PB_2260_1&apos;. "打开上半部展开的子屏幕

gv_subscreen_2200_1 = 2240.

WHEN &apos;PB_2240_1&apos; OR &apos;PB_2280_2&apos;. "打开全关闭的子屏幕

gv_subscreen_2200_1 = 2260.

WHEN &apos;PB_2280_1&apos; OR &apos;PB_2240_2&apos;. "打开全打开的子屏幕

gv_subscreen_2200_1 = 2220.

ENDCASE.

ENDFORM. " set_the_col_area_screen

Step 2: 最底层的两个信息子屏幕

屏幕(2290)

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /><shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 297.75pt; HEIGHT: 183.75pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:/DOCUME~1/wuzy/LOCALS~1/Temp/msohtml1/01/clip_image001.png"></imagedata></shape>

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 297.75pt; HEIGHT: 183.75pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:/DOCUME~1/wuzy/LOCALS~1/Temp/msohtml1/01/clip_image001.png"></imagedata></shape>

逻辑流

PROCESS BEFORE OUTPUT.

*

PROCESS AFTER INPUT.

屏幕(2230)

<shape id="_x0000_i1026" style="WIDTH: 415.5pt; HEIGHT: 228pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:/DOCUME~1/wuzy/LOCALS~1/Temp/msohtml1/01/clip_image003.png"></imagedata></shape>

逻辑流

PROCESS BEFORE OUTPUT.

*

PROCESS AFTER INPUT.

Step 3: 定义全展示子屏幕 (2220)

<shape id="_x0000_i1027" style="WIDTH: 415.5pt; HEIGHT: 372pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:/DOCUME~1/wuzy/LOCALS~1/Temp/msohtml1/01/clip_image005.png"></imagedata></shape>

第一个按钮的功能码:PB_2220_1

第一个按钮的功能码:PB_2220_2

屏幕逻辑流

PROCESS BEFORE OUTPUT.

CALL SUBSCREEN SA_2220_1 including sy-repid &apos;2290&apos;.

CALL SUBSCREEN SA_2220_2 including sy-repid &apos;2300&apos;.

*

PROCESS AFTER INPUT.

CALL SUBSCREEN SA_2220_1.

CALL SUBSCREEN SA_2220_2.

Step 4:定义上半部展开的子屏幕(2240)

<shape id="_x0000_i1028" style="WIDTH: 415.5pt; HEIGHT: 316.5pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:/DOCUME~1/wuzy/LOCALS~1/Temp/msohtml1/01/clip_image007.png"></imagedata></shape>

第一个按钮的功能码:PB_2240_1

第一个按钮的功能码:PB_2240_2

屏幕逻辑流

PROCESS BEFORE OUTPUT.

CALL SUBSCREEN SA_2240_1 including sy-repid &apos;2290&apos;.

*

PROCESS AFTER INPUT.

CALL SUBSCREEN SA_2240_1.

Step 5:定义下半部展开的子屏幕(2280)

<shape id="_x0000_i1029" style="WIDTH: 415.5pt; HEIGHT: 239.25pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:/DOCUME~1/wuzy/LOCALS~1/Temp/msohtml1/01/clip_image009.png"></imagedata></shape>

第一个按钮的功能码:PB_2280_1

第一个按钮的功能码:PB_2280_2

屏幕逻辑流

PROCESS BEFORE OUTPUT.

CALL SUBSCREEN SA_2280_2 including sy-repid &apos;2300&apos;.

*

PROCESS AFTER INPUT.

CALL SUBSCREEN SA_2280_2.

Step 6:定义全关闭的子屏幕(2260)

<shape id="_x0000_i1030" style="WIDTH: 401.25pt; HEIGHT: 151.5pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:/DOCUME~1/wuzy/LOCALS~1/Temp/msohtml1/01/clip_image011.png"></imagedata></shape>

第一个按钮的功能码:PB_2260_1

第一个按钮的功能码:PB_2260_2

屏幕逻辑流

PROCESS BEFORE OUTPUT.

*

PROCESS AFTER INPUT.

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值