Primefaces 树 - 在 <p:layout /> 中未使用 <ui:include/> 更新选择答案

【问题标题】：Primefaces tree - selection not updated in <p:layout /> with <ui:include/>Primefaces 树 - 在 <p:layout /> 中未使用 <ui:include/> 更新选择
【发布时间】：2011-05-24 23:53:58
【问题描述】：

我正在尝试使用带有<p:layout /> 和<ui:include /> 的导航树，我想在单击树节点时动态更新<ui:include />。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">
<f:view contentType="text/html">
<h:head></h:head>
<h:body>
<p:layout fullPage="true">
   <p:layoutUnit position="left" width="200" resizable="true" collapsible="true">
      <h:form>
         <p:tree expanded="true" nodeSelectListener="#{menutree.onTreeNodeClicked}" id="tree"
               value="#{menutree.menuTree}" var="node" update="test,tree"
               selection="#{menutree.selectedNode}" selectionMode="single">
            <p:treeNode>
               <h:outputText value="#{node}" />
            </p:treeNode>
         </p:tree>
      </h:form>
   </p:layoutUnit>
       <p:layoutUnit position="center" resizable="true" collapsible="false">
      <h:panelGroup id="test" layout="block">
         <ui:include src="${menutree.selectedNode.name}.xhtml" />
      </h:panelGroup>
   </p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>

backing bean 看起来像这样：

@SessionScoped
public class MenuTreeBean implements Serializable
{
    private final Log logger = LogFactory.getLog(getClass());

    private final TreeNode root;

    private TreeNode selectedNode;

    public MenuTreeBean()
    {
        root = new DefaultTreeNode("root", null);

        CustomTreeNode aaRoot = new CustomTreeNode("welcome", "Widgets", root);

        new CustomTreeNode("1", "Editor", aaRoot);
        new CustomTreeNode("2", "Calendar", aaRoot);

        setSelectedNode(aaRoot);
    }

    public TreeNode getMenuTree()
    {
        return root;
    }

    public TreeNode getSelectedNode()
    {
        logger.info("Selected: " + selectedNode);
        return selectedNode;
    }

    public void setSelectedNode(TreeNode selectedNode)
    {
        logger.info("Selected: " + selectedNode);
        this.selectedNode = selectedNode;
    }

    public void onTreeNodeClicked(NodeSelectEvent e)
    {
        logger.info("Clicked: " + e.getTreeNode());
        selectedNode = e.getTreeNode();
    }
}

相应地，还有更多的小页面，其中仅包含一个 Primefaces 小部件 - 或只是 HTML。

这在网络浏览器中给出了这样的布局：

------------------------------------
| Widget      |                    |
|   Editor    |                    |
|   Calendar  |                    |
|             |                    |
|             |                    |
|             |                    |
|             |                    |
|             |                    |
|             |                    |
------------------------------------

我的问题是

当我单击上面的编辑器节点时，它会被选中并突出显示，<ui:include /> 会加载我请求的页面/块
当我单击上面的日历节点时，它会被选中并突出显示，<ui:include /> 会加载我请求的页面/块
当我点击上面的编辑器节点时，它没有被选中，但<ui:include /> 仍然加载我请求的页面/块；日历节点仍然突出显示

如果我在<p:tree /> 处关闭更新属性，树节点选择和突出显示将按预期工作；除了我错过了我需要的动态<ui:include />。

对于上面的日志记录，Widgets 被设置为最初被选中。然后，当我点击编辑器时，方法的顺序是

2011/05/24 23:06:25 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Widgets
2011/05/24 23:06:25 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Widgets
2011/05/24 23:06:25 com.foo.bar.MenuTreeBean setSelectedNode
INFO: Selected: Editor
2011/05/24 23:06:25 com.foo.bar.MenuTreeBean onTreeNodeClicked
INFO: Clicked: Editor
2011/05/24 23:06:25 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Editor

但是当我点击日历时，顺序变成了

2011/05/24 23:07:15 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Editor
2011/05/24 23:07:15 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Editor
2011/05/24 23:07:15 com.foo.bar.MenuTreeBean setSelectedNode
INFO: Selected: Editor
2011/05/24 23:07:15 com.foo.bar.MenuTreeBean onTreeNodeClicked
INFO: Clicked: Calendar
2011/05/24 23:07:15 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Calendar

我想知道我是否遗漏了什么，所以当我单击树节点时，<ui:include /> 将加载，并且树节点会突出显示？

提前致谢。

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

我能理解你想要做什么，但我不一定认为这是最好的方法。

与其动态更改<ui:include 标记的src 属性，不如查看一个主模板页面，所有子页面都将从该页面继承其基本内容。

在您的模板页面中，您可以这样定义 layoutUnit：

<p:layoutUnit position="center" scrollable="true">
  <ui:insert name="content">
  <!-- content would go here -->
  </ui:insert>
</p:layoutUnit>

然后在您的子页面中指定一个合成标签。

<ui:composition template="/WEB-INF/templates/master.xhtml">

现在您的树节点而不是动态更新 src 属性只需重定向到适当的 URL，您的树节点和母版页内容将正确加载。

【讨论】：

似乎更多的是一种解决方法而不是解决方案，因为这意味着刷新浏览器而不是执行 PPR。但无论如何感谢您的洞察力。

【解决方案2】：

我同意 maple_shaft 的观点，您应该为此使用模板。但是，如果您必须坚持这一点，请查看 p:tree 元素的 update 属性。您可以在此处指定要更新的元素的 ID，它可以是您的 ui:include 元素，因为它是一个 UIComponent。

在我的应用程序中，我还使用 p:tree 进行导航，但我更喜欢在单击节点时强制重定向。这样做的原因是生成的页面可以被浏览器标记为书签。换句话说，目标 URL 最终出现在浏览器地址文本框中。

我这样做的方式是在backing bean中如下：

public void onNodeSelect(NodeSelectEvent event) {

    selectedNode = event.getTreeNode();
    String url =  // compute some URL to move to based on selectedNode

    FacesContext fc = FacesContext.getCurrentInstance();
    ExternalContext ec = fc.getExternalContext();
    try {
        ec.redirect(url);
    } catch (IOException ex) {
        Logger.getLogger(Navigation.class.getName()).log(Level.SEVERE, null, ex);
    }
}

重申：使用模板，即使这对您来说意味着学习曲线，它实际上会迫使您的 web 应用程序更具凝聚力和纪律性。

【讨论】：

【解决方案3】：

最终我自己解决了这个问题。

原来是 Javascript 中的一些问题，当我将<p:tree update="" /> 指定到多个目的地时，树节点不会突出显示。

所以在阅读了代码和 YUI 文档之后，最后我通过向<p:tree /> 的 onNodeClick 处理程序添加一个 Javascript 函数来解决该问题，以强制突出显示选定的节点。

该函数只是强制突出显示单击的节点。

function highlightNode(e)
{
    e.node.highlight();
}

至少适用于我使用官方 Primefaces jar 的情况:)

【讨论】：