WDA的页面布局一般通过各种component layout来控制的.WDA提出MVC的概念还是比较超前的，但是受限于庞大而复杂的底层架构，UI的设计不发做到元素级别的CSS控制，基本上整体样式比较单一，对于行间距、列间距、字体、边框、线条、按钮等等难以做到精确的控制，更不用说各种动画、渐变效果了。对于TO B的业务场景来说，满足业务需求是最重要的，WDA的优势在于整合业务场景，在系统易用性上进行一次大的尝试。之后在FIORI的学习中我们可以发现，SAP并没有完全抛弃WDA的APPS，有一些比较经典的APPS，SAP直接通过嵌入方式进行了移植，保留了原有的页面风格与业务流程。
常见的几种Container Element
-
Group
-
Panel
-
TranparentContainer
-
Tray
常见的几种Layout Element
-
Flow Layout
流布局，根据element的长度/数量以及容器/窗口大小来确定自动换行。这种布局，不同行的元素对象互不影响，这种流布局适用于子容器对象的布局。
不会强制换行的对象有：
I
-
Row Layout
行布局，通过Rowdata与RowHeadData控制强制换行，当元素设计Layout属性为RowHeadData时，会强制元素进行换行。
-
MatrixLayout
如果MatrixLayout与容器UI元素一起使用，所有的子元素都会继承属性LayoutData，它的值可以是MatrixData或MatrixHeadData。如果你把这个属性为MatrixHeadData，就会强制换行。如果你将该属性设置为MatrixData，则子元素元素会显示在与前一个元素相同的行中，即使已经达到右边的边缘。这个容器中的子元素被排列成列。使用这个布局管理器，列的数量列的数量不是静态定义的，而是由任何一行中的最大的子元素数量决定的。元素的最大数量。不同行中的元素数量可能有所不同。你可以使用属性StretchedHorizontally和StretchedVertically来指定是否.你可以使用属性StretchedHorizontally和StretchedVertically来指定UI元素是否要分布在容器区域内。如果这两个属性都是设置为空格，那么这些元素就被定位在容器的左上角。安排在MatrixLayout中的UI元素可以占据多个单元格（colSpan属性）。
-
FormLayout
设置FormTopData将页面水平划分为几个部分，每个部分
包含一个静态定义的列数。这些列的宽度是唯一的
在所有部分都是唯一的。因此，各部分宽度的比例是由各部分相关的列数的比例给出的
的比率。
例如，在图中，Layout Managers-FormLayout (1)，FormLayout 被分配到
组和每个嵌入式组。组的标题是
标题为Group 1和Group 2的组定义了一个与嵌入组有关的新部分。对于
组1，colCount被设置为4，而组2，colCount被设置为8。每个嵌入的
组也使用FormLayout作为他们的布局管理器。每个嵌入组的列数由第一个标签定义。
嵌入组的列数是由该组中定义的第一个标签决定的。
-
GridLayout
通过COL COUNT来确认什么时候换行，如果需要修改已经设计好的布局，需要考虑保持原有的列数量（需要保持原有布局的情况下对元素数量进行增加/删除的话）,需要对原有的行插入一个空的不可见的元素，以保持原有的布局完整性。 -
FormLayoutAdvanced
一种加强的FormLayout -
TitleLayout
TileLayout按顺序从左到右排列容器的孩子，类似于FlowLayout。
文本包装也不能用TileLayout明确定义。如果一个行没有足够的空间来存放，就会自动
如果没有足够的空间给下一个子容器，一行就会自动被包裹。通过这种方式，TileLayout
支持响应式的网页设计。在TileLayout中，所有的容器子节点都以相同的宽度显示。
TileLayout（与FlowLayout不同）。因为所有的容器子节点的宽度都是一样的。
容器的子节点以瓦片设计的方式排列，以行和列显示。通过属性allowedColCounts，你可以指定一个由空格分隔的整数值的列表。空格隔开。只有在定义的列数之后才会插入换行符。比如说。你指定了一个 "2 3 "的值 指定了一个 "2 3 5 "的值。容器的孩子只显示在2、3或5列。如果你没有为这个属性指定一个值，任何数量的列都有可能。
