Webdynpro For ABAP 布局详解

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中

复制完成后是这个样子

 

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

 

两种样式，完美展现