View介绍
介绍view之前，首先大家要知道容器(component)，容器是应用项目中主要的，可以重用的单元，我们要把view创建在容器里面，然后可以排列放到任何窗体上。所以要创建web dynpro程序，首先要创建容器，稍候会有创建的步骤说明。创建容器后，它会以节点形式显示在屏幕的左边工作台中。在点开web dynpro components节点后，component节点会展开，许多自动生成的部分会显示出来；当双击component名字时，component将会显示在屏幕的右边，component view列出了所有管理的细节例如创建人，创建时间，开发包等。
为了保证web dynpro程序的可访问性，需要检查激活容器，通过选择按钮checks active打钩实现。
Web dynpro components 能够嵌套，容器可以集成嵌套其他容器组。
在Implemented Interfaces页签，可以输入已经存在的定义好的容器接口到你当前处理的容器中。
View是用户所能开到的开发的最小单位，其他格式元素排列在view里面。View包含controller 和controller context,他们以等级结构方式存储，应用数据将在里面处理。
允许图形元素链接到应用数据中。
创建View
在屏幕左边的工作台容器里的Views节点上右键，从context按钮中选择’create’按钮
一旦view创建起来，View编辑器将会在屏幕右边的工具区中显示出对象浏览器，可以通过‘Layout’页签中的可用工具进行图形编辑操作。
注：要想能够通过浏览器查看创建的View，必须把它放到web dynpro 窗体中激活，
即时component包含单一窗体也需要嵌入激活，它不会自动处理。
编辑View
创建好view后，会自动显示‘layout‘页签，有三部分组成：
l 左列编辑器，能够找到‘UI element library‘,一些组织好的元素集合。
l 中间为图形view设计界面，可以通过编辑器设计view.通过拖拽移动元素。
l 右边区域分成两部分‘UI Element Hierarchy‘ 和’UI Element Properties’.
上部分的UI Element Hierarchy显示为树节点结构，可以改变它的顺序和嵌套关系。
下部分的UI Element Propertie显示当前选中的UIelement的属性列表。
插入UI 元素
新创建的view并不包含可见的对象，只有一个元素根节点已经创建好。这个根节点UI元素叫做ROOT UI ELEMENT CONTAINER,通常可以用两种不同的处理方式插入UI元素：
l 从UI Element Library拖放,可以从左边的UI库中拖放到View Designer区域，放 到他们到合适的位置。
注：拖拽方式会自动生成一个的UI元素名称，可以通过属性页签更改名字。
l 在树结构的元素菜单内容中插入。可以通过一系列的对话框指定新UI element的名字和类型,如图所示：
1） View 的UI元素
提供的UI元素用来在view中组织信息和功能，意思是对于屏幕显示设计至关重要，所以，多个元素同时使用的目的是：
一些元素用来格式化UI架构，例如group,tabstrip,可以插入其他元素到这些元素中。
元素table或者textview用来显示数据，元素的inputfiled能够通过用户界面输入值。
Button和checkbox等交互元素也被提供使用。下图是个UI元素在view中的安排图：
UI 元素属性
每个UI元素有不同的属性，例如背景色，宽度等等指定UI元素。在View设计器中显示的属性均在属性表中。属性表格显示当前别选中的UI元素的属性。
所有的静态属性可以直接输入表中，例如列ID.大部分属性值能够指定为静态，也可以绑定对应的内容元素。例如：按钮的’Enabled’属性经常绑定内容属性，内容值决定button处于激活还是未激活状态，对于这种类型，web dynpro运行时提供了指定的数据类型集合。
一些属性，必须绑定内容，例如当绑定一个内容元素时，表数据源必须被指定。
ACTIONS
除了元素属性，表里面也管理着元素事件。事件提供给用户交互触发时用，例如按钮和输入框。当你在表中输入了事件名称后，对应的事件处理变被创建起来。当双击事件名时，ABAP编辑器被调用出来，这样你可以编辑代码处理时间。
注：新创立的事件处理自动插入’Mehtod’页签。如果其他的按钮的其他方法同时创建在同一个view中,同样已经被插入了’Mehtod’页签，对于你输入的新事件名字提供选择。
2） View Context的结构
每个view包含一个存储数据的数据容器，这个数据容器就叫做view的context。
在viewcontext中，应用数据被view布局安排和存储。例如：数据提供在后端，显示在前端，也可以被预定义，空数据元素可以被用户输入填充。其他的数据元素用到内部结构的context中。
每个context有个层级结构，包含了根节点CONTEXT和其他不同的context排列在它下面。我们可以创建新的context节点和独立的context属性在每个context节点下。
编辑context结构
在view编辑器中转换到context页签编辑view的context，我们可以用context菜单创建一个新的context节点或者context属性，插入对应的节点上。如图所示：
在context树结构下，被选中的context元素显示在表中。表中含有明显的标签例如节点名称，属性类型还有许多非常重要的属性，使他成为web dynpro概念中非常重要的一部分。
Context Node
关于context node更为细节详细的描述请等待下面我将介绍的节点的创建和维护，在Web Dynpro架构中。
Context Attributes
Context attributed的概念相对简单，只需要指定名称和数据类型即可。其他的一些属性是可选的用法。更详细的信息参见下面将要写的context attributes创建和维护。
3） Data Binding
UI元素有属性，每个UI元素包含一个属性用来描述用户输入的值或者被显示的数据源，这些UI元素可以用来传输和显示数据。
这些属性在设计时可以被指定为固定值或者参考某个context元素。参考context元素的方式被称为绑定context元素。这种情况下，context元素的值在运行时显示，输入数据传输到屏幕的view元素的context元素里。
注意：输入的值（即‘value‘属性）被绑定到context属性上，即就是那些用户输入的数据，它保存这些值进行进一步的处理。
UI 元素DataSource的属性值绑定到table的context节点上，如图所示：
上面的两个例子描述了两个典型的情况：输入值的传输和UI元素的应用数据的填充。尽管如此，其他更多的UI元素属性能够绑定到context元素。刚提到的两个例子中的文本的长度和table的宽度等。UI元素属性的值的绑定还是相同的格式呈现出来取决于Web Dynpro容器的设计。绑定contenxt元素需要UI元素的value属性或者datasource属性.
建立数据绑定
UI元素属性的数据绑定设置在view布局中。可以用插入到UI元素的属性表中的Binding 列，点击按钮打开对话框，可以看到对应的context结构对应的View元素进行选择。
注意：需要绑定context元素的属性应该有个绑定按钮，如图：
。
数据绑定向导
有些UI元素的数据向导是可用的，这使得绑定UI元素所对应的context 节点更容易些。
注意：当一个table通过向导绑定到一个context节点时，不需要单独创建每个table列。而是向导提供了对应的内容，一旦你选择了向导的context节点，它也提供了可用的属性。你可以选择节点属性作为实际属性显示在table中即可。另外，当向导操作完成后，你还可以更改列元素属性，需要的table列被在布局中被创建出来，需要绑定的数据也执行了。
通过选择跟容器下的树结构UI元素的上下文菜单的’Create Binding’开始数据绑定向导。
属性空值标识
对应一些绑定到context 属性的UI元素，如果没有值的话，将会自动输出null值。例如：type NUM4c将显示为“0000”，类型T将显示为“00：00：00”等。
这种行为不是所期望的在某种情况下，所以要停止输出空值通过以下步骤实现：
l 首先，必须用法IF_WD_CONTEXT_NODE_INFO=>SET_NULLABEL()标记节点信息的值值设置为可空的值.可以设置节点的单独的属性或者所有的属性设置为nullable.
l 第二步，设置实际的值为‘null‘，接口IF_WD_CONTEXT_NODE 提供了方法
Set_attribute_null(“NODE_NAME”).另一种方法是设置空字符串到输入字段（也就是删除掉任何内容）。
4） UI Element Actions
有些UI元素包含actions. Actions是用户在应用程序界面交互中触发的特别的事件。对应相应的一系列的后续事件处理，下面的例子描述了这个过程：
注意：当为UI元素的button创建了action后，在这个action的事件处理方法中，我们必须指定相对应的此action事件的用户的UI元素按钮。
每个action总是连接到一个事件处理方法。某些情况下，在同一个veiw中，可能需要同时用相同的action对应多个UI 元素，对于这个需求，参考下面要讲的多个actions的参数化mapping设置。
创建Actions
作为数据绑定的例子，UI元素的actions的创建和维护在View编辑器的属性表中操作。
事件处理方法
当创建了个新的action，对应的事件处理方法自动创建起来，起初它是空的，开发人员可以通过编辑器写入ABAP程序代码，事件处理方法就像是其他的view方法，是view controller的一部分，所以他们在编辑器的’methods’标签中。
Controller Methods
事件处理方法是view controller的特别的方法。从技术角度来说，他们和其他的controller methods没有什么不同，例如初始方法WDDOINIT 或者方法WDDOEXIT。由于他们的名字有前缀ONACTION在action的名字前面被指定。
注意： 如果UI元素的action名为GO，则对应的事件处理方法自动变为ONACTIONGO.
Parameter Mapping
参数映射是为多个actions的使用的。如果你对几个事件用一个action,例如：多个buttons,需要指定期望赋值的唯一的信息，可以通过参数映射得到信息。
注意：我们不需传输action ID值，既然这个方法不是平台独立的，所以我们用标准的参数IDs。
参数映射通过程序实现：
data parameters type wdr_name_value_list.
data parameter type wdr_name_value.
Field-symbols <data> type any.
*parameters can be simple values
Parameter-name = ‘LINES_TO_INSERT’.
Parameter-value = ‘3’.
Parameter-type = cl_abap_typedescr=>typekind_string.
Insert parameter into table parameters.
*parameters can be object references
Parameter-name = ‘CUSTOMER’.
Parameter-object = customer_object.
Parameter-type = cl_abap_tpedescr=>typekind_oref.
Insert parameter into table parameters.
*parameters can be deep data objects (structure/table)
Create object data_ref like table.
Assign data_ref->* to <data>.
<data> = table.
Parameter-name = ‘TABLE’.
Parameter-dref = data_ref.
Parameter-oref = cl_abap_typedescr=>typekind_dref.
Insert parameter into table parameters.
*Specify parameter mapping
CL_WD_BUTTON->MAP_ON_ACTION(parameters)
*Read parameter mapping
CL_WD_BUTTON->MAPPED_ON_ACTION( importing parameters = parameters ).
当事件触发后，连接的action通过下面的参数调用。
l Web Dynpro ABAP 标准参数（ID 和CONTEXT_ELEMENT）
l UI元素的指定参数
l 参数映射的事件参数
这些参数能够定义为action的方法参数。方法参数的类型必须为参数的值是可以共存的。
注意：所有参数的值为必输的，如果当调用action时，并不是所有的方法参数没有输入，将会产生异常。
参数值同样可以通过WDEVENT对象读取。
= WDEVENT->GET_INT( ‘LINES_TO_INSERT’ ).
= WDEVENT->GET_OBJECT( CUSTOMER’ ).
= WDEVENT->GET_CONTEXT_ELEMENT(‘CONTEXT_ELEMENT’)
或者
=WD_EVENT->GET_DATA( EXPORTING name = ‘TABLE’ importing value = table ).
5） Action的事件处理
如果Web Dynpro 程序的通过用户界面触发了UI元素的action,view controller的事件处理自动链接调用。在事件处理中，开发人员加的源代码将会触发action,如下例步骤：
l 读，编辑和重置content 元素
l 调用函数模块
l 触发导航
Programming
从技术角度看，事件不同于其他的controller方法只是因为它也响应事件处理的事件赋值。对于所有的controller方法的编程，你可以从几个特别的类的属性和方法中选择去执行指定的web dynpro处理步骤。 下面的简单例子描述了一个controller 方法处理action的细节。
第一个例子：简单航班列表的图形代表
用户通过web dynpro程序的输入字段输入航班，然后点击button,下面的包含用户选择的合适条件的数据显示出表里面。
上面的图像显示出view布局和对应的context.当第一次调用程序时，表是空的，当用户输入了数据并点击了按钮‘GO’,对应的’GO’的action自动触发，事件处理方法（ONACTIONGO）被调用。下面的步骤必须执行在此方法中。
l Context节点INPUT_NODE的属性通过方法ONACTIONGO读取和传输变量.
l 内表通过内部的变量被填充
l Context节点通过内表被填充。
怎样把上述描述转换为代码呢？
DATA Declaration
Mehtod onactiongo.
Data: input_node type ref to if_wd_context_node,
Table_node type ref to if_wd_context_node,
Car type string,
Flights type standard table of spfli.
在第一步所有用到的变量已经声明了。
l INPUT_NODE 作为内部变量的用户输入的context 节点。
l Table_node 作为内部变量的content node的表结果集。
l Car 声明作为内部变量的用户的输入。
l Flights声明作为结果呈现表。
本例中的表flights参考数据字典中的表spfli从而不需要更多的细节声明。
用户输入参数
内部变量INPUT_NODE绑定到content节点的input_node:
Input_node = WD_CONTEXt->GET_CHILD_NODE( ‘INPUT_NODE’ ).
通过接口IF_WD_CONTEXT_NODE的属性WD_CONTEXT和方法GET_CHILD_NODE实现.
WD_CONTEXT属性总是参考本地controller context,方法ONACTIONGO是当前view controller的方法。意思是在此例子WD_CONTEXT参考当前view的context.
方法GET_CHILD_NODE返回context节点的input_node值。
方法GET_ATTRIBUTE读取context属性。
INPUT_NODE->GET_ATTRIBUTE( exporting Name = ‘IN1’ importing Value = CAR ).
此方法从input_node的context 节点迭代得到IN1的属性值，然后传输给内部变量CAR.
意思是UI 元素inputfield的值传输给方法ONACTIONGO通过View context，现在可以编辑了。
Filling The Result Table
内表FLIGHTS通过一个格式化的类填充，这个类是CL_WD)FLIGHT_MODEL，并且有方法GET_FLIGHTS_BY_CARRID.变量CAR作为此方法的输入参数。
Flights = cl_wd_flight_model=>get_flights_by_carrid( car ).
此步骤中并没有元素指定给web dynpro使用。
Passing the Result Table
一旦FLIGHTS表被得到数据，必须连接到context node table_node.就像是读取输入字段一样，也需要两步骤：
TABLE_NODE = WD_CONTEXT->GET_CHILD_NODE( ‘TABLE_NODE’).
首先，把view context的内容赋值给变量TABLE_NODE,需要连接到节点INPUT_NODE上的方法和属性已经使用过。内表FLIGHTS的内容传递给内部变量TABLE_NODE.
TABLE_NODE->BIND_ELEMENTS( FLIGHTS ).
endmethod.
方法bind_elements同样是接口IF_WD_CONTEXT_NODE的一个方法。它从内表FLIGHTS创建新的元素并且把他们加到变量TABLE_NODE. context 节点的属性TABLE_NODE被内表填充，并且可以通过Table在view 布局中显示出它的值。
