Primefaces对话框中包含动态用户界面[重复]答案

【问题标题】：Dynamic UI include in Primefaces Dialog [duplicate]Primefaces对话框中包含动态用户界面[重复]
【发布时间】：2011-09-02 15:30:13
【问题描述】：

我正在处理一个学校项目，但遇到了动态 ui 插入问题。我目前在 JSF2.0 / Primefaces 3 M1 工作。主要问题是我想要一个 Primefaces 对话框，其中包含通过菜单栏更改的动态内容。

对话框组件包含一个 ui:include 标记，其中 src 设置为托管 bean 属性。菜单项链接到更改此属性的 bean 方法。

主要问题是变量根本没有改变，我目前正在使用警报来显示这个变量。目前正在使用 remoteCommand，但我也已经尝试在 menuitem 组件中使用 action/actionlistener。任何帮助将不胜感激。

这是带有菜单栏和对话框的主页。

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:p="http://primefaces.prime.com.tr/ui"
  xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <title>KunstInHuis: Main</title> 
</h:head>
<h:body style="font-size: 12px;">
    <h:form id="mainForm">
        <f:metadata>
            <f:event type="preRenderView" listener="#{login.verifyAccess}"/>
        </f:metadata>
        <p:remoteCommand name="lazyANew" actionListener="#{main.goToAboNew}" onsuccess="alert('test')"/>
        <p:remoteCommand name="lazyAList" actionListener="#{main.goToAboList}" onsuccess="alert('test')"  />
        <p:remoteCommand name="lazyASearch" actionListener="#{main.goToAboSearch}" onsuccess="alert('test')" />
        <p:menubar autoSubmenuDisplay="true"> 
            <p:submenu label="Abonnementen"> 
                <p:menuitem value="Nieuw" onclick="lazyANew()" onsuccess="alert('#{main.goToPage}')"/>
                <p:menuitem value="Lijst" onclick="lazyAList()" onsuccess="alert('#{main.goToPage}')" />
                <p:menuitem value="Zoek"  onclick="lazyASearch()" onsuccess="alert('#{main.goToPage}')"/>
            </p:submenu>  
            <p:submenu label="Klanten">
                <p:menuitem value="Nieuw" url="#"  />  
                <p:menuitem value="Lijst" url="#"/>               
            </p:submenu>
            <p:submenu label="Kunstwerken">
                <p:menuitem value="Nieuw" url="#" />  
                <p:menuitem value="Lijst" url="#"/>               
            </p:submenu>  
        </p:menubar>
    </h:form>
    <p:dialog  id="mainDialog" header="Abonnement aanmaken" widgetVar="dlg0" minHeight="300" minWidth="450" 
              resizable="true" modal="false" >
        <ui:include src="#{main.goToPage}" />
    </p:dialog>
</h:body>

这是我的支持 bean。

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.page.beans;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;

/**
 *
 * @author wezlee
 */
@ManagedBean(name = "main")
@ViewScoped
public class mainMenuBean implements Serializable {
private boolean panelRender=false;
private String goToPage = "./includes/forms/abboCreate.xhtml";

/** Creates a new instance of mainMenuBean */
public mainMenuBean() {
}
public void goToAboNew(ActionEvent e){
    goToPage="./includes/forms/abboCreate.xhtml";
}
public void goToAboNew(){
    goToPage="./includes/forms/abboCreate.xhtml";
}
public void goToAboList(ActionEvent e){
    goToPage="./includes/forms/abboList.xhtml";
}
public void goToAboList(){
    goToPage="./includes/forms/abboList.xhtml";
}
public void goToAboSearch(ActionEvent e){
    goToPage="./includes/forms/abboSearch.xhtml";
}
public void goToAboSearch(){
    goToPage="./includes/forms/abboSearch.xhtml";
}
/**
 * @return the goToPage
 */
public String getGoToPage() {
    return goToPage;
}

public void setGoToPage(String src){
    this.goToPage=src;
}
}

【问题讨论】：

标签： jsf dynamic primefaces

【解决方案1】：

实际上，我认为更新支持值的方法看起来工作得很好。问题可能在于您如何尝试显示它。当页面最初呈现时，goToPage 的值被评估并放入返回给用户浏览器的页面内容中。一旦在用户端设置了这个值，它就不会与支持 bean 重新同步，直到页面的该部分被重新渲染。

我相信 Prime faces remoteCommand 允许您使用 update="client side id" 通过 AJAX 执行此操作。虽然我不是一个主要面孔的人，所以我把这个小测试放在一起。首先更改您的 remoteCommands：

<p:remoteCommand name="lazyANew" actionListener="#{main.goToAboNew}" update="testOutput" />
<p:remoteCommand name="lazyAList" actionListener="#{main.goToAboList}" update="testOutput"  />
<p:remoteCommand name="lazyASearch" actionListener="#{main.goToAboSearch}" update="testOutput" />

然后使用适当的 Id 在您的页面内容中添加一个简单的文本字段：

Page target: <h:outputText value="#{main.goToPage}" id="testOutput" />

您的输出文本应该开始同步。只要可行，您就可以简单地将更新从 testOutput 重新定位到 mainDialog，然后您就应该开始工作了。

【讨论】：

谢谢，我以为 remoteCommand 会让我绕过整个更新系统，我想我错了。我尝试将包含动态内容的面板放在另一个面板中，然后我可以对其进行更新。但随之而来的问题是我失去了一些 PrimeFaces 组件的功能，例如将停止工作，其他组件（如自动完成、命令按钮等）也会停止工作。我真的开始觉得自己被困在一块石头和一个坚硬的地方之间。