SAP ABAP Web Dynpro 开发指南

c. Web dynpro 开发方式技术架构

Web dynpro 其实有两种语言可以编写一种是 Web dynpro for ABAP 还有一种是 Web dynpro for JAVA。但是我们一般还是 ABAP 比较常见，在开发过程中呢我们可以通过 Web Dynpro Tools(工具) 来自动生成代码，也可以自己手工编写代码，这些代码最终都会加载到我们的程序中最终生成可执行的程序。

1. Tools(工具) 生成代码：工具生成的代码我们一般用于界面样式定义、界面之间的跳转切换等等。
2. 手工编写代码：手工编写代码一般用于动态化界面修改、其他服务或者文件的链接等等。一般工具创建代码就能满足我们的需求。
3. 参考程序：在我们 SAP 系统中呢其实也有大量的参考程序来供我们学习参考，这些参考程序都在 SWDP_TEST 包中，我们直接 SE80 去看就行了。

我随便运行进入了一个程序叫 wdr_test_display_mesages

d. Web dynpro 组件架构逻辑

熟悉了解 Web dynpro 的组成和组件架构逻辑可以方便理解我们后面的开发。Web dynpro 它是以组件为核心的，一个组件包含以下几点。下图中紫色的是组件控制器 Component Controller、红色的是 Window、蓝色的是 View。还有一个 View Controoler 这些我们下面都会介绍到的。

1. Component Controller：Component Controller 是在组件级别进行交互控制，比如和其他的组件进行交互或者是从外部系统获取数据。
2. Window：Window 就是不同的窗体，但是我们一般一个 Window 就够用了。在一个 Window 中可以有多个 View。
3. View：View 就是不同的显示界面，相当于我们 Dialog 程序中的不同的 Screen 屏幕，每一个 View 就是我网页中的一个输出界面。
4. View Controller：View Controller 一般都是在本组件中进行的数据交互来控制界面的输出效果，例如我从 Component Controller 把数据传到我们 View Controller 中，然后 View Controller 控制我这个数据在界面哪里以什么样的形式输出展示。
5. Context：Context 这个东西你就可以理解为变量数据所在位置。

03、创建运行一个简单 Web Dynpro

这一步我们将创建运行一个简单的 Web Dynpro 来熟悉操作界面以及解决创建过程中的一些异常情况。以下 Web Dynpro 就简称 WDA 是 SAP Web Dynpro for ABAP 的缩写。

a. 创建

创建一个 Web Dynpro 程序呢是在 SE80 包的层面创建。就如下步骤所示。我们创建的 Web Dynpro 组件 (接口) 它就相当于是一个程序了，一个组件就相当于是一个程序哦。

1. 包层面创建 WDA

2. 选择类型输入对应名称

这一步是给我们创建的 Web Dynpro 起一个名字，还有类型的选择以及窗口名称和视图名称。类型有两个选项分别适用于以下情况：

• Web Dynpro 组件：用于创建一个完整的 Web Dynpro 应用程序组件。这个组件可以包含多个视图、窗口和控制器。它是一个自包含的单元，可以实现特定的业务功能。当你需要创建一个功能完整的 Web Dynpro 应用程序时，选择这个选项。
• Web Dynpro 组件界面：用于创建 Web Dynpro 组件的接口。这个接口定义了组件的外部可见部分，包括接口视图、接口控制器和接口上下文。其他 Web Dynpro 组件可以通过这个接口与组件进行交互。当你需要为多个组件提供一个统一的交互接口，或者希望复用某些视图和控制器逻辑时，选择这个选项。

3. 查看创建的 WDA

根据我们上面的操作我们已经创建了一个 Web Dynpro 组件，我们先来看一下系统都为我们创建了哪些东西。下图中 VIEW01 就是我们绘制界面的地方，但是有时候这个绘制界面会出问题，这个我后面也有解决方法的。

4. 激活 WDA

记得一定要先激活

5. 进入绘制界面

我们创建的 VIEW01 就是我们绘制界面的地方，但是这个绘制界面有时候会不正常，如果有问题请根据下面章节 Layout 界面异常进行操作，如果正常就如下图所示即可忽略下面章节，进入 Layout 界面如果不是专用连接就按照下图所示操作然后会让你登录就输入 SAP 用户名密码就行了，进入之后如果是灰色背景就先点击修改/显示按钮，如果报错 500 也点修改/显示按钮，或者右击刷新几次，如果不行就重新进一下 SE80 界面再次进入 Layout 重复上述操作。

b. Layout 界面异常

Layout 界面异常一般常见的就是两种情况，4XX，5XX，4 开头一般是某些服务没有激活，我之前在 Webservice 的文章中有提到过详细的解决方法，如果是 5 开头一般是 IP 问题。

1. 报错 403

右击保存此页面，然后打开这个 html 页面，我是用 HBuilder 打开的你们用记事本也可以，HBuilder 进去 Ctrl+K 可以格式化代码。

我们可以看到这个页面来自 url 在第一行，观察圈出来的字符。

根据 url 路径进入 SAP 事务码 SICF 发现这个没激活，激活之后重新进入程序就行了。

2. 报错 500

报错 500 也挺奇怪的，我有时候刷新 Layout 页面再加上显示和修改状态的来回切换或者重新进入 Layout 界面就自己好了，可能是我这个系统有问题，如果像我这样操作尝试不行的话可能是域名 IP 的问题，按照下图操作试试。进入文件夹 C:\Windows\System32\drivers\etc 修改 host 文件。以下内容换成你自己 SAP 的 IP，事务码 SM51 Ctrl + Shift +F3 可以查看服务器 IP 端口号

192.168.9.666 SAPECC SAPTRANSHOST
192.168.9.666 SAPECC.COM

c. 绘制简单的控件 并运行 Web Dynpro

这一步我们随便搞点简单的控件先把 Web Dynpro 运行跑起来。

1. 绘制 TXTX_VIEW

绘制控件的时候要拖文字而不是图标，要托到顶不能拖到屏幕任意位置松手，绘制完需要填写 text，敲回车或者保存才能刷新绘制页面。

这是 TEXT_VIEW 控件的所有属性解释，后面出现一些控件的通用属性就不会再介绍了。

2. 插入控件

除了上面拖动绘制还可以在右上角的树形菜单插入控件。

3. 生成 Application 运行

这一步的操作我们将根据当前 Web Dynpro 的情况生成一个应用。

1. 创建应用：这一步完了之后并不算真的成功此时访问 url 是报 500 的。我们还要进一步保存。

2. 保存应用

3. 运行访问：浏览器直接输入生成的 url，会先让你登录的。

04、Web Dynpro 各界面作用

这一步我们将熟悉每个界面的作用。

a. VIEW(视图) 各分页签的作用

这一步我们将了解 VIEW(视图) 各分页签的作用，这将对于我们后面开发有很大帮助。

1. Properties(基本属性)：这个是界面是对应视图的一些基本属性例如描述、创建更改者、时间，主要是可以看到这个视图关联相关的组件，可以形成一些关联交互关系。

2. Layout：这个上面我们已经很熟悉了就是绘制这个视图的界面。

3. Inbound Plugs、Outbound Plugs：Inbound Plugs 和 Outbound Plugs 就是进入界面离开界面，当你需要离开一个界面就需要触发该视图下的 Outbound Plugs，然后给这个 Outbound Plugs 绑定另外一个视图的 Inbound Plugs 就可以跳转到对应的视图也可以携带上参数，并且触发对应的 Outbound Plugs 和 Inbound Plugs 可以执行相应的 Event Handler，有点类似于 Dialog 程序中的 PAI 和 PBO 事件，每个 Inbound Plugs 和 Outbound Plugs 都有自己对应的 Event Handler，Inbound Plugs 是进入这个界面执行对应 Event Handler，Outbound Plugs 是离开这个界面执行对应 Event Handler。

4. Context(上下文)：就是和我这个界面一些相关的变量操作。

5. Attributes：一些其他的属性大多数是类的属性，这些属性很重要对于我们操控变量控件都有作用。

6. Actions(行为)：这里定义各种行为，然后触发某个事件。Event Handler 这列代表我们有什么样的事件，然后 Actions 这列就是以什么样的行为触发这个事件。

7. Methods：Methods 这里可以定义一些方法，然后我们可以在调用这些方法。起到封装的作用吧！

b. Window(窗体) 各分页签的作用

上面我们已经介绍了 View 各分页签的作用，Window 各分页签的作用其实跟 View 的都差不多，只不过是级别不同，下面我只介绍不同点。

1. Window(窗体)：这里可以查看我们对应窗体下面包含哪些视图，也就是我这个窗体可以显示哪些页面，还可以设置默认视图 (页面)。

05、Web Dynpro 对应的 3 大控制器

把 Web Dynpro 的所有控制器搞清楚之后我们可以做到知其然知其所以然，不然会搞不清楚状况，这个值从哪来到哪去这个界面跳转到哪里等等。下图是一个 Web Dynpro MVC 整体的关系。

a. 最基本的控制器架构

控制器基本架构我会按照如下图所示展开介绍。这个控制器就是一个单纯的控制器，我们组件控制器、视图控制器、窗体控制器都是基于它的。

1. Properties 控制器基本属性：我可以包含关联一些其他控制器，主要作用就是控制器与其他东西的关联关系。

2. Methods 方法：这是控制器所拥有的方法，其中 Standard Hook Methods 是高级方法里面有两个钩子函数 WDDOINIT(初始化自动执行) 和 WDDOEXIT(退出的时候自动执行)，这两个方法都是标准默认存在的，我们可以创建一些自定义的方法这些方法属于 Additional Methods，一般这些自定义方法就是我们具体的业务逻辑了，例如数据如何选取数据如何编辑。。。

3. Attributes 属性：可以理解为这就是控制器中的各种变量，这些变量可能是对象可能是结构等等，其中 Standard Attributes 是标准默认的属性一共有两个 WD_THIS(Web Dynpro 自己本身) 和 WD_CONTEXT(Web Dynpro 的上下文也就是变量这些变量会上下传递)，我们也可以自定义属性这些属性属于 Additional Attributes

4. Context 上下文：Context 在控制器中很重要，它存储我们控制器的所有数据结构。它是以这种节点形式展现的例如一个结构下面可能分有属性、内表、对象等等这样子。

b. 组件控制器/自定义控制器

组件控制器比我们基本控制器多了一个事件。

c. 视图控制器

视图控制器比基本控制器多了下图种框出来的，这些我们在上面其实都是有介绍过的。

d. Window 控制器

Window 控制器比基本控制器多了下图种框出来的，这里我们主要说一下左侧的 View 之间的关系，它其实描述的意思是我从 View1 离开之后去了 View2 从 View2 离开之后又去了 View3。可以说是描述了这个窗体下包含哪些视图和视图之间的跳转关系。

06、Web Dynpro 必会的技术功能

这一步我们将熟悉每个界面的作用。

a. VIEW(视图) 页面之间的跳转

既然要做跳转那么我们就得再创建一个页面也就是视图。然后要做的效果就是在两视图之间可以来回跳转。

1. 创建第二个页面：第二个页面我们叫 VIEW2，创建的时候如果对象列表里面没显示出来就保存刷新一下。如果报错 500 就点修改/查看按钮

2. 加入到窗体中：上面我们只是创建了一个 VIEW2，但是它还没有包含到我们的窗体中需要手动加进入我这个窗体才能显示这个 VIEW2。

3. 添加两个 VIEW 之间的关系：如何添加页面之间的跳转关系我们在上面提到过了是通过 Outbound Plug、Inbound Plug 来关联绑定，如果不清楚的翻到上面看。我们要做到两个视图之间来回跳转，一步一步来我分解成以下几点。

4. VIEW01 跳转到 VIEW2：需要触发 VIEW01 的 Outbound Plug，并给这个 Outbound Plug 绑定上 VIEW2 的 Inbound Plug。可能有点绕多理解理解，然后我们现在创建 VIEW01 的 Outbound Plug 和 VIEW2 的 Inbound Plug。完成下面步骤之后只是代表视图有了对应的 Plug Name，我们还需在窗体层面手动关联 Outbound Plug 和 Inbound Plug。创建完记得激活

2. 给 VIEW01 的 Outbound Plug 关联 VIEW2 的 Inbound Plug：是拖拉拽的那种形式，下面第一张图是我们还还未关联之前可以看到窗口结构下面把 MAIN 下的视图和视图对应的 Plug Name 都显示出来了，在关联的时候我们要注意拖拉的方向一般是 Inbound Plug 托到 Outbound Plug 上面，拿我们下图来说就是 CAME_TO_VIEW2 拖到 GO_TO_VIEW2 上面。但是实际拖拉方向好像也没啥影响主要是嵌套位置会被设默认值笔者目前也不知道这个嵌套位置有啥用，先留着吧后期我弄懂之后再回来填坑。

托上去之后会出现一个弹框，这个弹框其实也把对应关系描述的很清楚了。并且对应 Outbound Plug 下面也会出现关联的 Inbound Plug。现在对应关系是有了但是我们得有一个行为方法来触发 Outbound Plug 才能跳转到 Outbound Plug 对应的 Inbound Plug 的视图。

3. 在 VIEW01 中绘制按钮并设置按钮行为触发 Outbound Plug：

点击最后一步的图标之后会出现下图所示的弹框，这个弹框主要是让你填一个 Action 至于你想不想填 Outbound 看你自己的需求。因为我不一定点击按钮就必须跳转页面吧我还可以提交数据或者获取数据什么的，完成这一步之后我们会发现 VIEW01 视图下面的 Action 分页签多了一个 Action，这是根据这个弹框自动创建的，双击 Action 名称或者 Event Handler 可以查看生成的代码。

4. 查看运行效果：我们可以在 VIEW2 绘制一个文本以方便我们跳转过去之后明显的查看运行效果，完成上述操作之后记得激活所有东西。Web Dynpro 界面点击浏览器返回是没啥用的，如果要返回或者去往其他视图还是要通过这种方法，下面我将大概描述 VIEW2 跳转到 VIEW01 的步骤。

5. 理解了上面的操作那么 VIEW2 跳转到 VIEW01 就简单多了：我们还是采用按钮触发 Outbound。当然触发之前肯定得先去对应视图声明 Outbound Plug 和 Inbound Plug，然后再到窗体中做关联，再想办法触发 Outbound Plug。我下面也整理了具体步骤以及详细的图文流程。

4. 注意事项：我们可以看到创建的 Inbound Plug 都有对应的 Event Handler，这些 Event Handler 都可以双击进去编写添加相关的逻辑代码，代表着我进入指定界面后执行相应的逻辑。

07、Context(上下文) 概念与作用

Context 这玩意可以理解为变量，不管控制器还是视图都是由自己的 Context 的，控制器会创建自己的 Context 然后 Context 具体内容可能来自数据库取数，视图也会创建的 Context 具体的数据内容可能来自控制器传递给它。Context 我们可以手工定义也可以参考数据字典来创建，Context 它是以树状图的那种节点形式展示的，就如下图所示。

a. Context 基本概念图解

这一步我们介绍 Context 和理解上图中的各种标注和图标的含义。

1. 图标含义：圆圈●代表一个节点，三角形▲代表具体的属性也就是变量。这种树形图也能方便的看出数据结构之间的层级下图中 BOOKINGS 和 CARRID 是平级的。
2. 节点属性：每个节点右边都有一个属性，例如上图的 BOOKINGS 右边有一个 (c=0…n) 这个属性决定了我们这个节点在执行过程中最小值最大值，0…n 一般可能是内表 0 代表内表可以没初始值可以为空 n 代表有多行嘛。1…1 一般可能是结构前者 1 代表必须有默认值后者 1 代表最多只有一行。
3. Lead Selection：在 Context 中还有一个 Lead Selection 的概念，Lead Selection 也就是我当前选中获取的行。
4. 多实例/单实例：多实例和单实例的区别在于取数方式不同，说简单点就是多实例一口气把所有数据取完单实例是选中谁用到谁就取谁，首先我们的数据结构是这样的，因为我 FLIGHTS 是个内表，这个内表有一个字段 BOOKINGS 又是一个内表，所以 FLIGHTS 的每一条数据都对应多条 BOOKINGS 的数据。这样的数据能体现出多实例与单实例的区别当你把 s 参数设置为 false 的时候 FLIGHTS 内表展现或者说是取数会把每条数据的 BOOKINGS 都取出来，而当你把 s 参数设置为 true 的时候比如你选中使用 FLIGHTS 的第二条数据它这个时候才会取第二条数据对应的 BOOKINGS。而不是把所有 BOOKINGS 都取出来。

多实例

单实例

5. Supply Function：Supply Function 是在声明 Context 的时候一起定义的一般是在节点位置定义。当 Lead Selection 在变化时也就是选中行变化时意味着我 FLIGHTS 当前行的 BOOKINGS 内表字段有变化这时候就要通过一个方法去重新取数那么这个方法就是这个节点的 Supply Function。每当我某个节点需要数据的时候我就通过这个节点定义的 Supply Function 去获取数据。尤其是单实例的那种应用需求 Supply Function 就显得实用了。

4. 性能方面的考虑：根据我们的需求例如数据量大小访问频率来决定使用单实例还是多实例。

b. Context Mapping(上下文映射) 数据之间的传递

为了能使相同的数据在不同页面之间共享显示，SAP 它是这样设计的，在组件级别有一个 Context 在视图级别也有一个 Context，例如我组件级别 Context 中有一个内表叫 data1 有 5 个字段，在视图 1 的 Context 中也有一个内表叫 showdata 有 5 个字段这时我可以将组件级别的这个内表和视图级别的这个内表关联起来，每当我视图 1 显示的时候它就会自动获取对应关联的组件级别的数据加载到视图中。组件级别的 Context 可以被多个视图关联使用。

下面是具体几个步骤

1. 在组件级别定义 Context：一般参考数据字典来创建。
2. 进入 VIEW 级别的 Context：当进入到这个界面之后右边会显示组件级别的所有 Context 左边会显示我当前视图级别的 Context，关联的时候我们可以拖拽关联，如果视图级别 Context 没有定义任何节点变量那么我们把组件级别的 Context 节点拖动过去之后视图级别 Context 会生成与组件级别一样的节点。当然我们也可以先手动在视图级的 Context 定义节点字段然后再拖动组件级别的 Context 一一对应，这种就适合需要两边字段不一样的情况。

08、Context 应用小案例

下面我们做这样一个案例，在 VIEW01 中增加两个输入框，给这两个输入框输入值之后点击按钮调整到 VIEW2 界面并把这两个值通过 Context 传递过去，由于视图级别的 Context 不能直接通信所以我们要先在组件级别的 Context 中创建一个 node 节点再给这个节点下面参考数据表的 2 字段创建两个属性，然后将这两个属性关联到视图 VIEW01 的 Context 上和 VIEW2 的 Context 上这样当我们在视图 VIEW01 输入值之后这两个值就传递到了组件级别的 Context，然后当我们跳转到 VIEW2 的时候 VIEW2 的 Contex 会获取组件级别的 Context 等于又会把这两值传递给 VIEW2。

a. 组件级别 Context 创建节点属性

按如下图步骤创建节点和属性，如果选项是灰色不能点的话就点击修改/查看按钮。

1. Create Nodes：Interface Node 的作用是用于在不同的 Web Dynpro 组件之间共享数据。如果你有多个 Web Dynpro 组件需要访问同一个 Context 节点的时候需要选为 X。这里我们只是跟视图通信视图的 Context 是组件 Context 的子集，视图可以直接访问和使用组件 Context 中的节点和属性的。然后点击 Add Atttributes from Structure

2. Select Components of Structure <数据字典>：我们选择这两个字段作为此节点的属性，后期也可以通过这两个字段来查数据库表。完了记得激活。

b. 给 VIEW01 做 Context Mapping 并增加输入框

这一步我们将组件的 Context 与视图 VIEW01 的 Context 做 Mapping 映射，并将映射的字段跟输入框控件关联。

1. Context Mapping：直接将整个节点拖过去，会自动做 Mapping。

2. Context Mapping 效果查看：可以看到如果我们没有逐个指定字段做 Mapping 的话系统会自动创建一样的字段。映射完可以激活下

c. 使用表单向导给 VIEW01 增加输入框

创建输入框我们可以根据向导来选择表单创建，这样会比较方便，根据表单创建的控件会比较美观并且速度也快。

1. 进入向导页面：这一步顺便观察一下当前的容器数量情况，我们创建表单的时候会新创建一个容器。容器对于我们页面布局有很大帮助，后面会对布局专门介绍的。

2. 创建表单：按照如下图所示创建表单关联节点。

3. 观察创建的表单：如果写过 html 的小伙伴可以按照如下理解，其实每个容器每个控件都可以看成一个 div。现在我这个表单中的这两个输入框等于和我组件级别的 Context 有了双向传值的这么一个过程。首先我输入值之后这个值会传到 VIEW01 的 Context 然后 VIEW01 的 Context 又和组件 Context 做了映射。现在等于只要能访问我组件 Context 的都能拿到这两值了。

d. VIEW2 页面获取组件 Context 的值 以及最终效果演示

上面理解了做这一步就很简单了，因为界面和视图视图和组件的 Context 都是双向传值的，所以只要我们把映射关联关系都配对就行了，所以这一步我只介绍大致步骤即可。

1. 映射关联：视图的 Contex 与页面控件关联还是采用和上面表单一样的方式，为了明显一点我把抬头改了一下并且给之前的一个 TEXTVIEW 控件也关联了值。给其他自定义控件关联值的时候只要 Binding 那列可以点的就都可以包括属性也可以通过 Context 中的变量来控制。

给之前的输入框也关联一下。

2. 效果查看：在 VIEW01 输入值并跳转到 VIEW2 之后发现值也都传递获取到位了。完美！！！经过这样一顿操作相信你们对 Context 已经了解知道如何使用了。

e. 回车触发跳转到 VIEW2 界面

这里我们做一个提升用户体验的功能，回车跳转界面，跳转界面是要触发 Outbound，我们之前给按钮做了 Action，这个 Action 去触发了 Outbound，我们直接把这个 Action 给输入框的回车事件关联上即可实现跳转。

1. 关联 Action：需要注意的是如果你点击新建按钮创建 Action 的弹框并不会给你有填写触发 Outbound 的输入框，如果你非要在这里新创建一个 Action 并想实现跳转的话可以自己手动加上代码，我又新建了一个 GO_TO_VIEW2TEST 并把之前可以跳转的页面的 Action 中的代码复制了过来。也是可以的。

09、所有控件作用详解大全

这是所有控件，还是蛮多的让我们分类来逐个解释

a. Text 相关控件

b. Action 相关控件

c. Selection 相关控件

d. Complex 相关控件

e. Layout 相关控件

f. Graphic 相关控件

g. Integration 相关控件

10、页面布局方式

这是所有控件，还是蛮多的让我们分类来逐个解释

a. 流式布局

如果给容器设定了流式布局那么这些容器里面的控件都会尽量挤在一行如果浏览器宽度变了一行排不下了后面的容器里面最后面的控件就会被挤下来排在第二行如果 2 行还是放不下那么就再排第三行。如果做过 HTML 的小伙伴对流式布局应该是比较容易理解的，这就好像你给标签使用 CSS 设置了浮动一个道理。over 解释完毕！！！

b. 行布局

如果将容器设置为行布局那么容器里面的控件从第二个开始可以设置 Layoutdata，如果设置为 RowData 那么就是紧跟上一个控件屁股后面，如果设置为 RowHeadData 那么就会换到新的一行显示。如果浏览器宽度过小一行容纳不下也会自动排列到第二行显示。如果你把容器设置为流式布局控件是没有 Layoutdata 这个属性让你设置的，流式布局控件是完全自我调整放飞自我了。

1. 创建容器：我们创建一个容器并将它设置为行布局。

2. 在容器中创建控件：创建了 6 个控件，先看一下效果。

3. 设置为 RowHeadData：我们将第二个控件设置为 RowHeadData 再看看效果。每次更改完属性记得保存，当要运行的时候记得激活。

4. 分析向导创建的表单是怎么做的布局：其实我们可以观察参考之前根据向导创建的表单是如何布局实现的，模仿学习参考就行了。表单这个容器的布局是 FormLayout 感觉和行布局调整控件的方式差不多。

c. 矩阵布局

容器设为矩阵布局后容器里面所有控件默认都是在一行的，就算浏览器宽度不够还是会在一行的，如果要换行那么就得手动更改并且换行之后每列的宽度都是按照这列宽度最宽的那个控件维持。它就跟 HTML 的 table 标签是一样的。

1. 宽度不够也不会换行：可以看到它就是死活不换行。

2. 按照当前列最宽的控件维持此列宽度：把控件 2 换行，把控件 4 换行，把控件 3 宽度调为 400px，这样就能明显看出来效果了。

为了更明显我直接改了这个 table 标签的 css 属性，这样就能明显看出来矩阵布局的效果了。

3. colSpan 与 hAlign 属性：这两个属性看下面的图解就明白了。

d. 网格布局

网格布局就是你可以自定义表格有几列，有几行是根据你控件所占位置决定的，比如第一行的 4 列都占满了那么控件就会去第二列，由于我们可以调整单个控件所占占列数所以可以灵活的将控件放置到你想放的单元格。

1. 控件 colSpan 默认都为 1：现在我们一共有 6 个控件如果我将容器设置为 4 列按照控件默认属性每个控件占一列会出现 2 行。如下图所示。

2. 将控件放到指定位置：如果我们想把'控件 6'放在第 3 行第 2 列该怎么做呢？我们需要把控件 5 的 colSpan 设置为 4 让'控件 5'占据 4 列那么'控件 6'就会被挤到第 3 行，然后再把'控件 6'的 colSpan 设置为 2 让它占据 2 列再设置 hAlign 属性让它靠右即可。如果你设置控件的 colSpan 超过了容器的列那么就按容器设置的列了并不会将占据的位置延申到下一行。

e. 表单布局

表单布局布局上面我们用向导在上面创建过了，这里我再解释一下，表单布局它每行不管几个控件都会撑满整个屏幕的，并且会随着屏幕宽度的变化自适应宽度。例如现在浏览器宽度是 1200px，当前行只有一个控件那么这个控件就会是 1200px，如果当前行有两个控件那么这两个控件各占 600px，当浏览器宽度被用户缩小到 1000px 的时候，当前行只有一个控件那么这个控件就会是 1000px，如果当前行有两个控件那么这两个控件各占 500px，以此类推。

下面我们将之前的容器删掉重新创建一个容器并选择 Formlayout，然后给这个容器里面创建 6 个控件并设置布局。

1. 删除之前的容器创建新的容器：删除之前的容器就右击然后 Remove Element 就可以了，然后创建的话上面介绍过我这里就不具体演示了。

2. 设置 Layout 创建控件：控件的话依然使用文本控件吧，创建一个然后 Ctrl C V 复制就行了。

3. 设置控件布局：如果你给控件选择 FormData 那么它会紧跟前一个控件的屁股，如果你给它选择 FormHeadData 它会换行，如果选择 FormTopData 它会去到第一行。现在我们来模拟上面我们向导创建出来的表单布局方式。

4. 下图是我们要模拟的表单布局，首先观察下面表单的布局它一共有 5 个控件我们上面多创建了一个可以删掉。'航线'这个控件是要换行的所以要设置为 FormHeadData，航线后面输入框紧跟前一个控件就行所以要设置为 FormData，然后'航班号'控件也是要换行的航班号后面的输入框紧跟前一个就行。

2. 根据上面的分析我们要做如下设置。

3. 经过设置我们现在基本达到了差不多的布局，但是输入框的描述对齐方式应该居右对其才可以的。

4. 这样设置对其方式，其实上面也介绍过了。

3. 效果查看：可以看到现在基本一模一样了，只是我输入框控件用了文本控件而已，这些你们都可以自己去设置更换的。

f. 其他布局

上面这些布局方式掌握精通之后其实都够用了，布局方式一共就这么多上面我已经介绍了常用的其余的大家可以自行研究。

11、使用变量 动态控制 控件属性

动态的去控制控件的属性这样的需求还是很常见的，在我们报表程序或者是 Dialog 程序的日常开发中也常常会有根据当前选项来确定隐藏或者显示哪些输入框等等。现在我们做如下一个小案例在 WebDynpro 中也实现同样的效果，在上面我们根据向导创建了一个表单现在对这个表单航班号输入框的可见性做一个动态变化。

既然要做到动态控制属性那么就得需要一个变量，首先我们会认识了解哪些变量类型适合做这种事情，然后我们先做一个手动更改变量值来控制输入框的属性，然后在这个基础上再使用按钮配合代码逻辑来更改变量值控制输入框的属性。这一步我们也会对 WebDynpro 中的代码编写有个初始的认识。

a. 声明变量 绑定到属性

这个变量需要声明在哪里要根据我们需求来决定，如果这个变量需要控制多页面的控件属性那么我们是不是应该声明在组件级别的 Context 中，如果这个变量只控制 VIEW01 的控件属性那么我们是不是直接在 View01 的 Context 中声明即可。

1. 在 View01 创建变量 (属性节点)：其实我们上面一直说的变量也就是 Context 中的属性节点，首先我们需要在如下图位置创建属性节点。

2. 选择对应类型：这个属性名我们叫做 inv_or_dis，意思是隐藏或者显示，然后根据类型就根据搜索帮助选择布尔值类型的 (WDY_BOOLEAN)。由于这个控件的 visible 属性是控制控件的可见性的而这个属性值又是布尔值所以我们定义的属性类型要相对应。

3. 给控件属性关联定义的变量：通过如下方式把此输入框的属性变为动态的，但是此时我们这个变量其实还不是动态的，至于我后面在何时变动这个变量的值那么就是根据我的业务需求了。

那么此时这个变量的默认值其实是'空'当我们激活之后观察此输入框就成了不可输入状态。如下图所示。

4. 更改变量默认值：我们可以尝试将这个变量的默认值改为 X 也就是 true，然后这个输入框按理来说就恢复可显示状态了。这样也差不多体会到如何动态更改控件属性了。接下来我们只需要根据需求或者用某种方式来更改这个变量 (INV_OR_DIS) 就行了。

b. 按钮触发 更改变量值

下面我们将动态更改此变量达到控件属性动态变化的效果，我们实现的方式是通过一个按钮实现，当然实际的业务需求可能会根据数量的大小、用户的权限、等等来更改变量值，我这里为了演示方便就在按钮的 onAction 方法中更改此变量的值了。

1. 定义按钮：可以拖动也可以在右侧的属性菜单右击插入控件，下图是拖动的示例。

2. 创建 Action：下面是根据按钮属性的 onAction 向导创建 Action，也可以提前去 Action 的分页签创建一个 Action 然后在输入绑定到这个按钮都是可以的。

3. 代码编写此按钮功能：我们这个按钮功能其实很简单就是对 INV_OR_DIS 变量做一个来回切换赋值，当它是 X 的时候把它清空，当它是空的时候给他赋值 X。

4. 根据当前需求我们代码逻辑做如下步骤。

2. 在编写代码的时候其实 WebDynpro 为我们提供了便捷的方式可以根据向导创建对应的代码逻辑，例如对一个变量进行读取、赋值、添加值、等等一些操作都可以通过向导完成。如下图所示，这些操作我们后面也会详细介绍到的。

3. 首先我们需要读取 INV_OR_DIS 的值，所以我们选择 Read。按照如下图所示步骤，可以看到 SAP 为我们自动生成了读取 INV_OR_DIS 的代码。这些代码呢其实你仔细看是大概能看懂的自己想编写也完全写的出来，但是代码的详解呢这里我们不做具体介绍，我们只知道变量值最终被读取到了 lv_inv_or_dis 中。

4. 变量赋值逻辑，这里我们只是更改了 lv_inv_or_dis 变量，但是这个变量不等于我们 Context 中的属性，所以我们还需要根据 lv_inv_or_dis 变量把值赋值回去，也就是使用 set 给 INV_OR_DIS 再做一个赋值操作。

5. 向导的步骤跟上面 Read 是一样的只不过需要选择 Set 下图我简略了步骤，这里需要注意的是根据向导对同样的变量做读取赋值这些操作会产生重复的代码，我们需要把这些重复的代码删除掉。大家可以仔细观察一下代码的，其实这块 SAP 自动生成的代码我们只能用上 set single attribute 这个注释之下的那些代码。

删除代码

4. 效果演示：

12、Table 控件的应用

Table 控件呢是用于表单输出的或者可以说是用于内表输出的。它就和我们 Dialog 程序中的 Tablecontrol 是差不多的，只不过在 Webdynpro 这块它的取数数据来源比较特殊一点。Table 控件的数据来源和我们上面那些案例一样也是要从 Context 里面获取对应的。只不过它需要的数据节点要是个内表。

如下图 Context metadata 所示其中的 FLIGHTS 就可以作为我们 Table 控件的数据源，0…n 和 1…n 其实都代表这个数据节点是一个内表。那么这些节点我们一般都是不会去手动创建的一般都是通过向导带出来的数据，比如我需要展示 BAPI_FLIGHT_GETLIST 这个 RFC 返回的 FLIGHT_LIST 内表，其实是要在 Webdynpro 层面创建一个服务调用 Service Call，这个服务调用可以以多种方式调用各种服务来产生数据源供我们 Webdynpro 使用。

a. 了解我们调用的 BAPI

其实不一定非调用 BAPI，你也可以自己创建一个 Function Module，或者调用 Web service 都是可以的。这里我们调用一个 BAPI 作为我们的数据源，下面介绍了解我们将使用的 BAPI_FLIGHT_GETLIST，这样就在后面创建 Service Call 的时候顺手许多。

1. 此 BAPI 简介：这是查询 FLIGHT(航线) 清单的一个 BAPI，最简的使用方法就是给它传一个始发地和目的地它会给你返回这两个地点所有的航班。其他的参数和业务我们大可不必管，只要让它有数据出来就行。
2. 入参出参：入参 DESTINATION_FROM 是始发地、DESTINATION_TO 是目的地。出参 FLIGHT_LIST 是返回的所有航班。我们只用关心这三个参数即可。

3. 效果测试：你像我下面这样填应该也是可以获取到数据的，如果不行就去 SE16N 查询 SPFLI 表即可。

b. 创建 Service Call

这个变量需要声明在哪里要根据我们需求来决定，如果这个变量需要控制多页面的控件属性那么我们是不是应该声明在组件级别的 Context 中，如果这个变量只控制 VIEW01 的控件属性那么我们是不是直接在 View01 的 Context 中声明即可。

1. 打开向导页面：根据如下图所示打开创建 Service Call 的向导页面

2. 向导步骤：

3. 可以看看步骤一的解释文本。然后点击继续。

2. 这一步是选择你这个服务在哪个组件控制器去调用，一个 WebDynpro 是可以有多个组件控制器的，我们选择 Webdynpro 为我们初始默认创建的就行。

3. 选择 Function Module。

4. 函数模块填写 BAPI_FLIGHT_GETLIST 上面我们已经介绍过了，你也可以填写自己创建的函数都可以。Destination 一般不用填我们调用自身 SAP 系统的函数模块就不用填这个。

5. 这一步很重要，它是把我们函数中的哪些参数自动创建定义到我们的组件控制器中，首先你可以先看下图进行大致理解，主要就是给参数选择对应的 Obj Type 如果参数要涉及到数据的选择或者是在界面中显示数据一定要定义在 Context 中，如果你定义到了 Attributes 中那么这是作为这个组件的的一些基本属性只能这个组件去使用。我们需要使用到的参数有 DESTINATION_FROM(始发地)、DESTINATION_TO(目的地)、FLIGHT_LIST(航线信息。所以这些都要定义在 Context 中 Obj Type 得选择 C。

6. 把我们调用的服务进行封装，在 Webdynpro 中会生成一个新的方法，以后调用这个方法就会影响我 Context 或 Attributes 中的属性变量。这些属性变量就是自动根据函数中的参数创建生成的。

7. 最后点击完成

3. Call service 创建效果查看：

4. 可以看到根据我们向导对应的选择在 Context 中生成了对应节点属性。这些节点属性我们就可以直接去用，并且是跟我们 Webdynpro 自动生成封装的方法是一起的。方法调用数据产生会影响这些属性变量。

3. 可以看到自动生成封装的方法对这个 BAPI 进行了调用，并且会对 Context 中的属性变量对应赋值。这些代码大部分是大概能看懂的，但是也没必要完全搞懂，会用能达到效果就行。

c. 做 Context mapping 绘制对应控件

首先说一下我们要做出的效果，我们在 VIEW01 进行数据的选取输入，然后当用户点击查询按钮之后我们跳转到 VIEW2 界面根据用户在 VIEW01 的输入调用方法并在 VIEW2 以 Table 控件显示航线信息。下面这些控件的绘制以及与对应 Context 中属性的关联我不做详细解释，上面都有过详细解释了。

1. VIEW01 的 Context mapping：VIEW01 是需要 DESTINATION_FROM(始发地)、DESTINATION_TO(目的地) 两个参数进行关联并显示在页面上的，所以我们将整个 IMPORTING 拖动到 VIEW01 的 Context 上进行映射关联。

2. 绘制 DESTINATION_FROM(始发地) 输入框：我们直接根据向导参考 VIEW01 的 Context 中对应的属性绘制即可，如下图这些步骤所示。

2. 只绑定保留 CITY 这个输入框即可。

3. 效果查看

4. 将容器的 isLayoutContainer 属性打勾，如果一个容器里面有控件元素则 isLayoutContainer 这个属性就必须打勾，指示该容器是否作为布局容器使用，这意味着你可以在该容器内放置其他 UI 元素，并通过不同的布局管理器（如 GridLayout、FlowLayout 等）来控制这些元素的排列和对齐方式。不然会报错 ACC: Label for MeltingGroup-like Container "FORM_CONTAINER_1" is not set

3. 绘制 DESTINATION_TO (目的地) 输入框：跟上面步骤一样只不过选择 Context 的时候选择 DESTINATION_TO(目的地) 即可

4. 主要就是这一步不一样。

如果你在绘制第二的时候对应容器跑到了刚才第一个容器的里面那么你在使用向导绘制前应该先选中最大的容器，这样才能保证正确的嵌套关系，如下图所示。

2. 修改输入框对应文本

3. 运行效果，现在这两个输入框跟视图的 Context 有着关联，而视图的 Context 又跟组件 Context 有关联，而函数的调用又获取的是组件的 Context。所以这两个输入框就等于这样跟我们函数做了密切关联，这里面的数据流转要搞清楚哈。

4. VIEW2 的 Context mapping：VIEW2 是需要 FLIGHT_LIST(航线清单) 这个参数进行关联并显示在页面上的，所以我们将整个 IMPORTING 拖动到 VIEW01 的 Context 上进行映射关联。

5. 在 VIEW2 中绘制 Table 控件：

2. 只作为输入的话一般就选择 TextView，默认就行了。

3. 效果查看，现在输入框还有各部分之间的关联关系都没问题了，现在我们只需要让组件的 Context 中的 FLIGHT_LIST 有值就行了。

d. 数据来源 触发调用方法

我们当前业务情况何时调用这个方法获取数据比较何时呢？是不是就是当我 VIEW2 页面显示的时候调用就可以了。想要做到只要我一进入页面就调用封装的那个方法我们可以在 VIEW2 的 Inbound Plugs 中实现，我们之前也说过 Inbound Plug 都有对应的 Event Handler，这些 Event Handler 都可以双击进去编写添加相关的逻辑代码，代表着我进入指定界面后执行相应的逻辑。我们就可以在这里调用方法来使得组件的 Context 有数据。

1. 进入代码页面：我就直接使用了之前的页面跳转方式和之前的这些 Inbound Plug。

2. 通过向导调用方法：我们组件中的方法也是可以通过向导调用的，都很方便的。

3. 效果演示：

END、总结

以上就是今天要讲的内容，本文仅仅简单介绍了 SAP ABAP Web Dynpro。