Webdynpro For ABAP 布局详解

转载 2018年04月17日 12:54:15

Webdynpro布局详解

 

在上次的教程里,我们已经实现了最简单的ALV应用,接下来会逐一介绍各个控件的使用,但是介绍控件之前,我们先来介绍一下webdynpro的UI布局。

 

所谓UI布局就是页面上各个控件的排列位置,WebDynpro中有种布局方式:

1、 Flow Layout

控件从左到右顺序排列,浏览器宽度不够会自动换行,这是默认的布局方式

2、 Row Layout

控件从左到右顺序排列在一行或多行,主要受两个选项控制:

Row Head Data:另起一行排在最左边

Row Data: 在同一行从左到右顺序排列

注意,Row layout方式在竖直方向是不会对齐的,浏览器宽度不够不会换行

3、 Matrix Layout

控件从左到右顺序排列在一行或多行,主要受两个选项控制:

Matrix HeadData:另起一行排在最左边

Matrix Data: 在同一行从左到右顺序排列

注意,Matrix layout方式在竖直方向是会对齐(左对齐)的,浏览器宽度不够不会换行

4、 Grid Layout

和Matrix Layout很像,但是比MatrixLayout多了一个colCount的参数来控制列的数量,会根据列的数量(colCount参数)自动顺序排列下来

注意,Grid layout方式在竖直方向是会对齐(左对齐)的,浏览器宽度不够不会换行

 

举例演示

新建WebDynpro程序:ZWD_LAYOUT

 

 

 

选择开发包,选择“本地对象”即可

 

创建四个Group控件

 

分别更改每个Group控件的ID和Layout属性,以及里面的Caption控件的text属性

 

设置完成后是这个样子

 

接下来往每个Group控件中添加文本长度不同的Caption控件

 

选择Caption类型

 

设置CAPTION1的text属性为123

 

然后Group控件内添加另外7个Caption控件,ID和TEXT如下表

ID

TEXT

CAPTION1(上面一步已添加)

123

CAPTION2

一二三

CAPTION3

4567

CAPTION4

四五六七

CAPTION5

89012

CAPTION6

八九零一二

CAPTION7

345678

CAPTION8

三四五六七八

 

Flow Layout设置完成是这个样子

 

将Flow Layout里的8个Caption控件依次COPY到Row Layout里

 

 

COPY完成之后是这个样子

 

将CAPTION5_CP的Layout Data由RowData改为RowHeadData

 

保存之后,可以发现从CAPTION5_CP开始,另起了一行,但是每一列并没有对齐

 

同样用复制粘贴的方法将Row Layout中的8个Caption复制到Matrix Layout中

复制完成是这个样子的

 

我们可以发现,每一列都是左对齐(现在看是没有左对齐,但现实在浏览器上是左对齐的),再看CAPTION5_CP_CP的Layout Data,也变成了MatrixHeadData了(MatrixHeadData和RowHeadData一样,都会另起一行)

 

同样用复制粘贴的方法将Matrix Layout中的8个Caption复制到Grid Layout中

复制完成是这个样子的

 

我们会发现变成了一列显示,这是因为Grid Layout有一个参数叫colCount(列数),默认值是1,我们来将colCount的值由1改为4试一下

 

然后我们发现数据被分成了4列,并且每一列是左对齐,这和Matrix Layout的效果是一样的,也就是说Grid Layout添加了列数的控制,然后顺序排下来,自动换行

 

我们来创建WebDynpro Application来测试这个程序

 

 

保存,选择开发包(本地对象)

 

 

效果和我们预期的一样

 

我们将浏览器变窄,可以看到Flow Layout会自己换行,而其他的布局则不会!!!

 

进阶篇

如果想在一个Layout控件内设置多个布局样式,也是使用TransparentContrainer控件

先拖拽一个Tray控件到画布上,Tray控件可以实现面板的收起和展开

 

修改Tray控件里面的Caption文本

添加UI元素

 

先添加一个TransparentContrainer,使用Flow Layout

 

再添加一个TransparentContrainer,使用Grid Layout

 

设置TC_FLOW_LAYOUT的Layout

 

设置TC_GRID_LAYOUT的Layout为GridLayout,并设置colCount为3

 

然后将之前的Caption控件复制到两个TransparentContrainer中

复制完成后是这个样子

 

激活整个程序,测试看看效果

 

两种样式,完美展现

WebDynpro for ABAP

  • 2010年05月19日 11:16
  • 1.86MB
  • 下载

Webdynpro For ABAP 实例

Webdynpro
  • balderzwz
  • balderzwz
  • 2011-05-04 23:45:00
  • 2284

web dynpro for abap 基础知识(一)

现在对web dynpro for ABAP的需求会越来越大,你信吗?或许应该多了解些,空闲在家开始学习sap课程NET310 abap web dynpro。想学这个课程是因为Alex说,现在对we...
  • chfeijj
  • chfeijj
  • 2009-12-29 17:37:00
  • 5649

Web Dynpro for ABAP (读取、更改、添加或删除存储于控制器上下文中的信息) 学习笔记(上下文节点)

如何读取、更改、添加或删除存储于控制器上下文中的信息? 访问上下文节点 请注意下列重要信息: • 对于每个控制器(),都会生成名称为IF_ 的界面。 • 对于控制器上下...
  • HJackyua
  • HJackyua
  • 2017-09-11 11:46:12
  • 288

tipps & tricks wda

  • 2008年09月20日 03:20
  • 519KB
  • 下载

Web Dynpro demo、FPM Demo

Web Dynpro demo 两个package: SWDP_DEMO和SWDP_TEST FPM Demo 两个package: APB_FPM_DEMO和APB_FPM_DEMO_SC...
  • champaignwolf
  • champaignwolf
  • 2017-03-21 20:34:25
  • 595

Webdynpro ABAP 简单剖析

众所周知,WEBDYNPRO是今天来SAP主推的一个面向WEB的MVC编程框架,接触过J2EE的朋友都不会对MVC这种设计模式陌生,WEBDYNPRO ABAP的基本设计思路和很多著名的面向互联网的M...
  • zeewjj
  • zeewjj
  • 2014-01-22 03:25:07
  • 5662

Web Dynpro ABAP---ALV控件的使用

一.动态更改Column Header DATA lo_cmp_search_usage           type ref to if_wd_component_usage. ...
  • zhongguomao
  • zhongguomao
  • 2015-12-09 09:53:40
  • 987

To upload an excel file using WebDynpro Application.

Scenario:To upload an excel file using WebDynpro Application. Procedure: 1. Go to transac...
  • champaignwolf
  • champaignwolf
  • 2015-08-04 19:43:50
  • 1178

个人收藏 Programming dynamic ALV in WebDynpro for ABAP

 Programming dynamic ALV in WebDynpro for ABAPScenario: To create a dynamic ALV based on a dynamic c...
  • jesson0083
  • jesson0083
  • 2009-11-30 09:55:00
  • 1789
收藏助手
不良信息举报
您举报文章:Webdynpro For ABAP 布局详解
举报原因:
原因补充:

(最多只允许输入30个字)