Dynamic UI include in Primefaces Dialog

Question

I'm working on a schoolproject and encountered a problem with dynamic ui insert. I'm currently working in JSF2.0 / Primefaces 3 M1. The main problem is that I want to have a Primefaces dialog with dynamic content which is changed through means of a menubar.

The dialog component contains a ui:include tag with src set to a managed bean property. The menuitems are linked to bean methods that change this property.

The main problem is that the variable is not changing at all, I'm currently using alerts to show this variable. Currently working with remoteCommand but I've also already tried with action/actionlistener in the menuitem component. Any help would be appreciated.

This is the main page with the menubar and the dialog.

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

And this is my backing 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;
}
}

score 1 · Answer 1 · answered May 26 '11 at 18:27

Actually, I think the methods to update the backing value look like they work just fine. The issue is probably in how you are trying to display it. When the page is initially rendered, the value for goToPage is evaluated and placed into the content of the page returned to the user's browser. Once this value is set on the user's side, it will not re-synchronize with the backing bean until that part of the page is re-rendered.

I believe a prime faces remoteCommand allows you to do this with AJAX using update="client side id". I'm not a prime faces guy though, so I put together this little test. First change your 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" />

Then add a simple text field to your page content with the appropriate Id:

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

Your output text should start synchronizing. As long as that works, you can simply re-target the update from testOutput to mainDialog and you should be in business.

Thanks, I thought remoteCommand would let me bypass the whole update system, guess I was wrong. I've tried putting my panel with dynamic content inside another panel, which I could then update. But the problem that arises then is that I lose functionality of some PrimeFaces components, for instance will stop working, as will other components like autocomplete, commandbuttons, you name it. I'm really starting to feel like I'm stuck between a rock and a hard place. — wezlee, May 26 '11 at 19:54

Dynamic UI include in Primefaces Dialog

1 Answers1