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

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

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

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

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

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

结果，页面上的列表视图将包含具有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>

它看起来像这样：

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

因此，每个部门都有一个包含两个选项卡的面板来表示：常规部门信息和员工列表。 这个用例可以使用访问从树模型节点定义可以轻松实现。 页面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访问器的嵌套 列表视图 （实际上，它可以是任何东西，例如一个表）。

• 此职位的示例应用程序可在此处获得 。

它需要JDeveloper 12.1.3。

而已！

翻译自: https://www.javacodegeeks.com/2015/12/master-detail-data-adf-list-view.html