Primefaces樹 - 選擇不更新<p:layout />與<ui:include/>

我使用的是導航樹與<p:layout />和<ui:include />，我想，當我點擊樹節點上動態更新<ui:include />試驗。Primefaces樹 - 選擇不更新<p:layout />與<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>

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

這在Web瀏覽器中給出了這樣的佈局：

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

我的問題是

當我點擊上面的編輯器節點上，它被選中，並強調，與<ui:include />負荷我請求的頁面/塊
當我點擊上面的日曆節點時，它被選中並突出顯示，並且<ui:include />加載我請求的頁面/塊
當我點擊上面的Editor節點時，它沒有被選中，但<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 />，並且樹節點被突出顯示？

在此先感謝。

來源

2011-05-24 airwave209

我可以理解你在做什麼，但我不一定認爲這是最好的方法。

與其動態更改<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，你的樹節點和母版頁的內容將適當地加載。

來源

2011-05-25 11:21:59

似乎更要解決此問題，而不是解決辦法，因爲這將意味着刷新瀏覽器，而不是做一個PPR。但無論如何感謝您的洞察力。 – airwave209 2011-05-25 13:11:57

我同意maple_shaft你應該使用這個模板。但是，如果您必須堅持這樣看待p：tree元素的更新屬性。您在那裏指定要更新的元素的ID，可以是您的ui：包含元素，因爲這是一個UIComponent。

在我的應用程序中，我也使用p：tree進行導航，但我更喜歡在單擊節點時強制重定向。原因是由此產生的頁面可以通過瀏覽器進行書籤。換句話說，目標網址在瀏覽器地址文本框中結束。

我做到這一點的方法是在支持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應用是更有凝聚力並遵守紀律。

來源

2011-05-25 15:04:16 AlanObject

最終我自己解決了這個問題。

原來是Javascript中的一些問題，當我將<p:tree update="" />指定給多個目的地時，樹節點不會突出顯示。

因此，在閱讀代碼和YUI文檔後，最後我通過向onnodeClick處理程序<p:tree />添加一個Javascript函數來強制突出顯示所選節點來解決問題。

該功能只強制突出顯示點擊節點。

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

至少適合我的情況下，使用官方Primefaces罐子:)

來源

2011-05-26 03:46:43 airwave209

Primefaces樹 - 選擇不更新<p:layout />與<ui:include/>

回答

相關問題