使用ADF列表视图的主从数据

最近，从UI角度来看，ADF Faces 表组件不再被认为很酷。对于显示数据集合， 列表视图今天应该很酷。这并不意味着我们根本不应该使用af：table 。在某些情况下（经常是:)），表比列表视图更适合。但是，列表视图组件看起来非常好，它非常适合现代UI趋势，并且绝对值得在ADF应用程序中广泛使用。

与数据收集有关的最常见用例之一是显示主从数据。在这篇文章中，我将展示我们可以使用List View对此做些什么。

列表视图组件提供了开箱即用的功能，可以通过使用groupHeaderStamp构面来显示层次结构数据。

假设在应用程序中定义了Departments-Employees层次结构：

屏幕截图2015年12月1日下午2.53.27

如果我们将详细信息集合“雇员”拖到页面上并选择“ ADF列表视图”作为所需组件，该向导将允许我们包括一个包含来自父集合的属性的组标题：

屏幕截图2015年12月1日下午2.56.44

结果，页面上的列表视图将包含具有Department属性的groupHeaderStamp构面：

<af:listView value="#{bindings.Departments.treeModel}" var="item" ...fetchSize="#{bindings.Departments.rangeSize}" id="lv1"><af:listItem id="li1"><af:panelGridLayout id="pgl2"><af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="gr1"><af:gridCell marginStart="5px" width="34%" id="gc1"><af:outputFormatted value="#{item.bindings.EmployeeId.inputValue}"id="of1"/></af:gridCell>...</af:panelGridLayout></af:listItem><f:facet name="groupHeaderStamp"><af:listItem id="li2"><af:outputFormatted value="#{item.bindings.DepartmentName.inputValue}"id="of6"/></af:listItem></f:facet>
</af:listView>

它看起来像这样：

屏幕截图2015-12-01 at 4.12.37 PM

看起来不错，但实际上并不是我所需要的！我的要求是实现这样的事情：

屏幕截图2015年12月1日下午4.15.09

因此，每个部门都有一个包含两个选项卡的面板来表示：常规部门信息和员工列表。这个用例可以使用访问从树模型节点定义可以轻松实现。 页面def文件中的列表视图的树模型如下所示：

<tree IterBinding="DepartmentsIterator" id="Departments"><nodeDefinition DefName="DepartmentsDeafultVO" Name="Departments0"><AttrNames><Item Value="DepartmentId"/><Item Value="DepartmentName"/></AttrNames><Accessors><Item Value="Employees"/></Accessors></nodeDefinition><nodeDefinition DefName="EmployeesDeafultVO" Name="Departments1"><AttrNames><Item Value="EmployeeId"/><Item Value="FirstName"/><Item Value="LastName"/><Item Value="Email"/></AttrNames></nodeDefinition>
</tree>

在Departments0节点定义中定义了“ 雇员”访问者。它使用员工 视图链接访问器来检索每个部门行的详细记录。详细记录的结构在Departments1节点定义中描述。

我们将像这样使用这种分层树模型：

<af:listView value="#{bindings.Departments.treeModel}" var="item" ...>            <af:listItem id="li1"><af:panelTabbed position="above" id="pt1" childCreation="lazyUncached"><af:showDetailItem id="tab1" text="Department"><af:panelFormLayout id="pfl1" inlineStyle="height:150px;"><af:panelLabelAndMessage label="#{item.bindings.DepartmentId.hints.label}"id="plam1"><af:inputText value="#{item.bindings.DepartmentId.inputValue}"id="ot1"/></af:panelLabelAndMessage>...</af:panelFormLayout></af:showDetailItem><af:showDetailItem id="sdi1" text="Employees"><af:listView value="#{item.Employees}" var="empItem" ...><af:listItem id="li2"><af:panelGridLayout id="pgl2"><af:gridRow  id="gr1"><af:gridCell id="gc1"><af:outputFormatted value="#{empItem.bindings.EmployeeId.inputValue}"id="of1"/></af:gridCell>...</af:panelGridLayout></af:listItem></af:listView></af:showDetailItem></af:panelTabbed></af:listItem>
</af:listView>

因此，每个列表项都包含一个在内部标记的面板，而Employees选项卡则包含一个引用Employees访问器的嵌套 列表视图 （实际上，它可以是任何东西，例如一个表）。