使用 p:layoutUnit 时防止 p:dialog 更新整个页面

Question

我一直在使用 p:layoutUnit 创建一个基本菜单。在我添加 p:dialog 组件之前它工作正常。在这种情况下，整个页面（包括菜单）会重新加载。我想知道防止这种情况的最佳方法是什么？我在下面创建了一个最小示例，还创建了一个视频来说明这里的问题：http://youtu.be/aUFIBFnRQdA

主页：

<h:head>    
    <title>Sample</title>   
 </h:head>
<h:body>

<p:layout style="min-width:400px;min-height:700px;">
<p:layoutUnit position="west" resizable="false" size="300" minSize="40" maxSize="200">
    <h:form>   
    <p:menu>
        <p:submenu label="Menu">
            <p:menuitem value="Sample2" outcome="sample2" />
            <p:menuitem value="Sample3" outcome="sample3"/>
        </p:submenu>
    </p:menu>
</h:form>
</p:layoutUnit>

<p:layoutUnit position="center">
    <h3 style="margin-top:0">Plain Menu</h3>
    <ui:insert name="source2" />
</p:layoutUnit>
</p:layout>
</h:body>

带有primefaces命令按钮的页面：

<ui:composition
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:p="http://primefaces.org/ui"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  template="sample.xhtml">
<ui:define name="source2">
<h3 style="margin-top:0">PF Button</h3>
    <h:form>
    <p:commandButton value="Ajax Submit" id="ajax" styleClass="ui-priority-
primary" />
    </h:form>
</ui:define>
</ui:composition>

带有primefaces对话框的页面：

<ui:composition
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:p="http://primefaces.org/ui"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  template="sample.xhtml">
<ui:define name="source2">
<h3 style="margin-top:0">PF Dialog</h3>
    <h:form>
        <p:dialog header="Sample Dialog" widgetVar="dialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false"/>
    </h:form>
</ui:define>       
</ui:composition>

编辑 - 尝试在 Ajax 菜单上解决问题（失败 - 整个页面仍在刷新/更新）。

<p:layout style="min-width:400px;min-height:700px;">
<p:layoutUnit position="west" resizable="false" size="300" minSize="40" 
maxSize="200">
    <h:form>   
    <p:menu>
        <p:submenu label="Menu">
            <p:menuitem value="Stocks" actionListener="#
{menuView.selectStock}"/>
            <p:menuitem value="Portfolio" url="portfolio.xhtml"/>
        </p:submenu>
    </p:menu>
</h:form>
</p:layoutUnit>

使用backing bean：

@ManagedBean
@SessionScoped
public class MenuView {

public void selectStock() {
    String outcome = "stocks.xhtml?faces-redirect=true";
    FacesContext context = FacesContext.getCurrentInstance();       
context.getApplication().getNavigationHandler().handleNavigation(context, 
null, outcome);
    }
}

Answer 1

我根据这篇帖子找到了解决方案：How to update a LayoutUnit in PrimeFaces to get it rendered?

现在我通过从支持 bean 返回页面 url 来更新菜单选项，然后使用包装在面板中的 ajax 更新页面。

所以索引页面是这样的：

<p:layout style="min-width:400px;min-height:700px;">
<p:layoutUnit position="west" resizable="false" size="300" minSize="40" 
maxSize="200">
    <h:form>   
    <p:menu>
        <p:submenu label="Menu">
            <p:menuitem value="Stocks" update="optionPanel" action="#
{menuView.selectStock}"/>
            <p:menuitem value="Portfolio" update="optionPanel" action="#
{menuView.selectPortfolio}"/>
        </p:submenu>
    </p:menu>
</h:form>
</p:layoutUnit>

<p:layoutUnit position="center" id="source">
    <h3 style="margin-top:0">Plain Menu</h3>
    <p:panel id="optionPanel">
    <ui:insert name="source">
    <ui:include src="#{menuView.view}" />
    </ui:insert>
    </p:panel>
    </p:layoutUnit>
</p:layout>

backing bean 看起来像这样：

public class MenuView {

private String view;

public void selectStock() {
    setView("/stocks.xhtml");
}

public void selectPortfolio() {
    setView("/portfolio.xhtml");
}

public String getView() {
    return view;
}

public void setView(String view) {
    this.view = view;
}

为此，我还必须从 xhtml 页面中删除 ui:composition 和 ui:define 标记，并将它们重新设置为带有 h​​ead 和 body 标记以及标准标题的独立页面。