当前位置： 文江博客 话题详情

Primefaces 树 - 中的选择未更新与 >

发布于 2024-11-09 16:21:10 字数 4609 浏览 0 评论 0 原文

我正在尝试使用带有 和 的导航树，我想动态更新 当我单击树节点时。

<!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>

支持 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  |                    |
|             |                    |
|             |                    |
|             |                    |
|             |                    |
|             |                    |
|             |                    |
------------------------------------

我遇到的问题是

  • ，当我单击上面的编辑器节点时，它被选中并突出显示，并且 加载页面/ 当我单击上面的“日历”节点时，我请求的块
  • 会被选中并突出显示，并且 会
  • 在我单击返回编辑器节点时 加载我请求的页面/块上面，它没有被选中，但是 仍然加载我请求的页面/块；日历节点仍然突出显示

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

对于上面的日志记录，最初设置为选择 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

我想知道我是否错过了任何内容”，因此当我单击树节点时， 将加载，并且树节点会突出显示？

提前致谢。

原文

I'm experimenting using a navigation tree with a <p:layout /> and an <ui:include />, which I want to dynamically update the <ui:include /> when I click on a tree node.

<!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>

The backing bean looks like this:

@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();
    }
}

Correspondingly, there are few more little pages, which contain nothing more than a Primefaces widget - or simply HTML.

This gives such layout in the web browser:

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

The problem I have is

  • when I click on the Editor node above, it gets selected and highlighted, and the <ui:include /> loads the page/chunk I requested
  • when I click on the Calendar node above, it gets selected and highlighted, and the <ui:include /> loads the page/chunk I requested
  • when I click back on the Editor node above, it did not get selected, but the <ui:include /> still loads the page/chunk I requested; the Calendar node was still highlighted

If I turn off the update attribute at <p:tree />, tree node selection and highlight is working as expected; except I miss the dynamic <ui:include /> which I needed.

As for the logging traces above, Widgets is set to be selected initially. Then, when I clicked Editor, the sequence of the methods are

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

But when I clicked Calendar, the sequence became

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

I wonder if I miss anything out so that when I click the tree nodes, the <ui:include /> will load, and the tree node gets highlighted?

Thanks in advance.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

玻璃人 2024-11-16 16:21:10

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

您应该查看所有子页面都将从中继承其基本内容的主模板页面，而不是动态更改 标记的 src 属性。

在模板页面中，您可以这样定义布局单元：

<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，并且您的树节点和母版页内容将正确加载。

I can understand what you are trying to do but I don't necessarily think this is the best approach.

Rather than dynamically changing the src attribute of a <ui:include tag you should look into a master template page that all child pages will inherit their base content from.

In your template page you can define a layoutUnit as such:

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

Then in your child pages you would specify a composition tag.

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

Now your tree nodes rather than dynamically update a src attribute can just redirect to the appropriate URL and your tree node and master page content will load appropriately.

回复 原文
风渺 2024-11-16 16:21:10

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

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

我在支持 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 应用程序更具凝聚力和纪律性。

I agree with maple_shaft that you should be using a template for this. However if you must stick with this look at the update attribute of the p:tree element. There you specify an ID of an element to update, which can be your ui:include element since that is a UIComponent.

In my application I am also using a p:tree for navigation, but I prefer to force a redirect when a node is clicked. The reason for this that the resulting page is book-markable by the browser. In other words the target URL ends up in the browser address text box.

The way I do this is in the backing bean as follows:

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);
    }
}

To reiterate: Use a template even if that means a learning curve for you and it will actually force your webapp to be more cohesive and disciplined.

回复 原文
摇划花蜜的午后 2024-11-16 16:21:10

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

事实证明，Javascript 存在一些问题，当我将 指定到多个目的地时，树节点不会突出显示。

因此，在阅读代码和 YUI 文档后，最后我通过向 的 onNodeClick 处理程序添加 Javascript 函数来解决该问题，以强制突出显示所选节点。

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

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

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

Eventually I solved the problem on my own.

It turned out to be some problem in the Javascript, that the tree node won't get highlighted when I specify <p:tree update="" /> to more than one destinations.

So after reading the code and YUI docs, finally I workaround the problem by adding a Javascript function to the onNodeClick handler of <p:tree />, to force highlighting the selected node.

The function just forces highlighting the clicked node.

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

At least works for my situation with using official Primefaces jars :)

回复 原文
~没有更多了~

关于作者

愛放△進行李

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文