Dynamic ui:include updates with partial rendering don't work

[Turjakas]

Also, I've noticed that I get a null from RequestStateManager.get(facesContext, RequestStateManager.FACELET_FACTORY)

if I call it from an action method, but it works from the preRenderComponent System Event listener.

Where do you specifically call your updateIncludedSection() method?

[Oleg]

Hallo Turjakos,

I specified this method in a managed bean (session scoped). updateIncludedSection() is called by action method from p:commandLink. The action method is here

Code: Select all

	/**
	 * Sets sidebar selection if user selects sidebar link.
	 *
	 * @param  selectionName selection name
	 * @return String outcome
	 */
	public String setSidebarSelection(final String selectionName)
	{
		some updates ....

		// update included section
		updateIncludedSection();

               .....
	}

What is your use case?

[Turjakas]

I still cannot find a solution to dynamically (= based on a backing bean property) include Facelet pages in JSF 2.0.
Also, I would like to do page updates using AJAX (partial page rendering).

EDIT: I'm trying to implement a wizard-component (similar to p:wizard), which displays content from separate Facelet pages.
I do NOT want to define the entire wizard in a single Facelet page as it will be too hard to manage and maintain.

Has no-one else actually ever needed this kind of functionality?

The approach proposed by Oleg did not work properly for me for some reason, which I'm not able to determine.
With that approach I could only get hold of a FaceletFactory instance when executing in preRenderComponent system event handler. Action methods or postAddToView did not work.
However, when putting the dynamic page inclusion code to preRenderComponent event handler, the CSS styles of many PrimeFaces components did not render correctly.
This might have something to do with the dynamic inclusion of JavaScript code that is needed by the PrimeFaces components and that code does not get executed.

I also didn't understand the following line in Oleg's code:

Code: Select all

// some required magic ...
includeSection.getAttributes().remove("com.sun.facelets.MARK_ID");

And I had to remove that in order to get the code work at all. With that code in place I got exceptions about duplicate component IDs.

[Oleg]

I still cannot find a solution to dynamically (= based on a backing bean property) include Facelet pages in JSF 2.0.
Also, I would like to do page updates using AJAX (partial page rendering).

EDIT: I'm trying to implement a wizard-component (similar to p:wizard), which displays content from separate Facelet pages.
I do NOT want to define the entire wizard in a single Facelet page as it will be too hard to manage and maintain.

Has no-one else actually ever needed this kind of functionality?

The approach proposed by Oleg did not work properly for me for some reason, which I'm not able to determine.
With that approach I could only get hold of a FaceletFactory instance when executing in preRenderComponent system event handler. Action methods or postAddToView did not work.
However, when putting the dynamic page inclusion code to preRenderComponent event handler, the CSS styles of many PrimeFaces components did not render correctly.
This might have something to do with the dynamic inclusion of JavaScript code that is needed by the PrimeFaces components and that code does not get executed.

I also didn't understand the following line in Oleg's code:

Code: Select all

// some required magic ...
includeSection.getAttributes().remove("com.sun.facelets.MARK_ID");

And I had to remove that in order to get the code work at all. With that code in place I got exceptions about duplicate component IDs.

Hi Turjakas,

How I mentioned above about my code I did "cut & paste" from http://confluence.highsource.org/displa ... f+Facelets. The author didn't understand that too I didn't try to remove this line. It works properly for me. I have now a rationally mix of dynamically and not dynamically (control by "rendered" attribute) includes. I sometimes get the message about duplicate IDs as well, but it's quite correct because I include the same section more as one time and there are components with the same IDs. A solution: include such sections inside of f:subview ! By the way, f:subview has "rendered" attribute and can be used for non dynamically includes.

I hope, that helps you.
- Oleg.

[Turjakas]

Oleg,

Some questions to you about your configuration:

1. Are you using JSF 1.2 or 2.0? Which implementation and version?
2. Is partial state saving enabled (context parameter javax.faces.PARTIAL_STATE_SAVING) ? (I guess this is JSF 2.0-specific)
3. Are you using p:commandLink to update the included content ? Are you using ajax="true" and what is the scope of the update (the process="xxx" and update="xxx" attributes) ?

My answers to the questions:
1. JSF 2.0, Mojarra 2.0.2 in GlassFish v3
2. Partial state saving is enabled
3. I am using: p:commandLink ajax="true" process="@form" update="@form"

I had some progress with my experiments, as now I am able to do AJAX update to the content.
At times I face some problems with JavaScript and Flash-components, as it seems that new dynamically included scripts do not get executed after an AJAX request. (If the AJAX request introduces a Flash-based chart using PrimeFaces, for example).

However, non-AJAX requests (and AJAX requests with commandLink attribute process="@all") that include dynamically content using your approach fail sometimes with an exception:

Code: Select all

java.lang.NullPointerException
	at javax.faces.component.UIComponent$ComponentSystemEventListenerAdapter.processEvent(UIComponent.java:2345)
	at javax.faces.event.SystemEvent.processListener(SystemEvent.java:102)
	at com.sun.faces.application.ApplicationImpl.processListeners(ApplicationImpl.java:1993)
	at com.sun.faces.application.ApplicationImpl.invokeComponentListenersFor(ApplicationImpl.java:1941)
	at com.sun.faces.application.ApplicationImpl.publishEvent(ApplicationImpl.java:285)
	at com.sun.faces.application.ApplicationImpl.publishEvent(ApplicationImpl.java:243)
	at javax.faces.component.UIComponentBase.publishAfterViewEvents(UIComponentBase.java:2005)
	at javax.faces.component.UIComponentBase.doPostAddProcessing(UIComponentBase.java:1691)
	at javax.faces.component.UIComponentBase.setParent(UIComponentBase.java:403)
	at javax.faces.component.UIComponentBase$ChildrenList.add(UIComponentBase.java:2428)
	at javax.faces.component.UIComponentBase$ChildrenList.add(UIComponentBase.java:2411)
	at com.sun.faces.application.view.StateManagementStrategyImpl$4.invokeContextCallback(StateManagementStrategyImpl.java:297)
	at javax.faces.component.UIComponent.invokeOnComponent(UIComponent.java:1253)
	at javax.faces.component.UIComponentBase.invokeOnComponent(UIComponentBase.java:672)
	at javax.faces.component.UIComponent.invokeOnComponent(UIComponent.java:1262)
	at javax.faces.component.UIComponentBase.invokeOnComponent(UIComponentBase.java:672)
	at com.sun.faces.application.view.StateManagementStrategyImpl.restoreView(StateManagementStrategyImpl.java:284)
	at com.sun.faces.application.StateManagerImpl.restoreView(StateManagerImpl.java:177)
	at com.sun.faces.application.view.ViewHandlingStrategy.restoreView(ViewHandlingStrategy.java:131)
	at com.sun.faces.application.view.FaceletViewHandlingStrategy.restoreView(FaceletViewHandlingStrategy.java:430)
	at com.sun.faces.application.view.MultiViewHandler.restoreView(MultiViewHandler.java:143)
	at com.sun.faces.lifecycle.RestoreViewPhase.execute(RestoreViewPhase.java:199)
	at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
	at com.sun.faces.lifecycle.RestoreViewPhase.doPhase(RestoreViewPhase.java:110)
	at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:118)
	at javax.faces.webapp.FacesServlet.service(FacesServlet.java:312)
	at org.apache.catalina.core.StandardWrapper.service(StandardWrapper.java:1523)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:343)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:215)
	at org.primefaces.webapp.filter.FileUploadFilter.doFilter(FileUploadFilter.java:79)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:256)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:215)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:277)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:188)
	at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:641)
	at com.sun.enterprise.web.WebPipeline.invoke(WebPipeline.java:97)
	at com.sun.enterprise.web.PESessionLockingStandardPipeline.invoke(PESessionLockingStandardPipeline.java:85)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:185)
	at org.apache.catalina.connector.CoyoteAdapter.doService(CoyoteAdapter.java:332)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:233)
	at com.sun.enterprise.v3.services.impl.ContainerMapper.service(ContainerMapper.java:165)
	at com.sun.grizzly.http.ProcessorTask.invokeAdapter(ProcessorTask.java:791)
	at com.sun.grizzly.comet.CometEngine.executeServlet(CometEngine.java:473)
	at com.sun.grizzly.comet.CometEngine.handle(CometEngine.java:341)
	at com.sun.grizzly.comet.CometAsyncFilter.doFilter(CometAsyncFilter.java:84)
	at com.sun.grizzly.arp.DefaultAsyncExecutor.invokeFilters(DefaultAsyncExecutor.java:161)
	at com.sun.grizzly.arp.DefaultAsyncExecutor.interrupt(DefaultAsyncExecutor.java:137)
	at com.sun.grizzly.arp.AsyncProcessorTask.doTask(AsyncProcessorTask.java:88)
	at com.sun.grizzly.http.TaskBase.run(TaskBase.java:189)
	at com.sun.grizzly.util.AbstractThreadPool$Worker.doWork(AbstractThreadPool.java:330)
	at com.sun.grizzly.util.AbstractThreadPool$Worker.run(AbstractThreadPool.java:309)
	at java.lang.Thread.run(Thread.java:619)

I guess @all processes the page just like a normal non-AJAX request and that causes some additional processing, which does not like the dynamic inclusion. But again, that happens usually when I go back to a view I have already visited (= include dynamically a facelet that has been included before in the session).

[Liberitas]

Wrote on 05.03.10: Hi, all. My question is to Oleg: could you put your working code here again? I got the same need as Turjakas. And I ask U coz' all links u've given here give 502 errors for now. And as I see the topic is old. So, could U, please?

Already got all needed stuff. Thanks to Oleg, spasibki (russian - thanks:))!

[bluesturbo]

Having problems with Facelets dynamic ui:include, setting ajax to false has no effect? The Facelets template is base on the Layout component with ui:composition rendering the dynamic page.

Are anyone using dynamic includes in a similar fashion, does it work for you?

Code: Select all

 <h:form prependId="false">         
            <p:accordionPanel   widgetVar="accordionNav" activeIndex="0"
                                animate="false"
                                style="height:16px;width:100%">
                <p:tab title="Home"  >
                    <p:commandLink id="dashboard"  value="Dashboard"
                                   actionListener="#{navigationBean.selectPage}"
                                   update="@form centerLabel"
                                   ajax="false"/>
                </p:tab>

<ui:composition xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="/template/main.xhtml">
    <ui:define name="center" >
            <ui:include src="#{navigationBean.centerPage}.xhtml"/>
    </ui:define>
</ui:composition>

 public void selectPage(ActionEvent actionEvent) {
        centerPage = actionEvent.getComponent().getId().toString();
        System.out.println(centerPage);
    }

[nch]

Hi

I found a workaround that works... not sure what the overhead is, but it doesn't seem to be too expensive.

In native JSF 2 this works:

Code: Select all

            <h:commandLink id="page4LinkId" value="Page4"
                           action="#{pageViewIdGenerator.sideBarAction}">
                <f:param name="pageViewId" value="./samplePageFour.xhtml"/>
                <f:ajax execute="@this" render="@none" />
                <f:ajax execute="@none" render=":includeContainerPanelGroup" />
            </h:commandLink>

(the 2 f:ajax tags do it)

where the template client has:

Code: Select all

    <ui:define id="contentDefine" name="content">
        <h:panelGroup id="includeContainerPanelGroup" >
            <ui:include id="contentInclude" src="#{pageViewIdGenerator.includedPage}"/>
        </h:panelGroup>
    </ui:define>

and the managed bean has:

Code: Select all

    private String includedPage = "./samplePageTwo.xhtml"; // getter and setter not shown

    public void sideBarAction() {
        FacesContext fc = FacesContext.getCurrentInstance();
        includedPage = fc.getExternalContext().getRequestParameterMap().get("pageViewId");
    }
 

With Primefaces, the workaround is a little more involved':
a) because the Primefaces update only seems to work on h:form tags or their sub tags (please correct me if I am wrong), and
b) because I am using menuitems for my navigation, and they don't display when one uses sub tags.
Nevertheless this worked:

Code: Select all

            <p:menu autoSubmenuDisplay="true" id="navigationMenu" tiered="true">
                <p:submenu id="zone" label="Zone">
                    <p:menuitem id="zoneMI" label="Zone Form"
                                actionListener="#{navigationBean.menuListener}"
                                process="@this" update="@none" oncomplete="remoteUpdate()">
                    </p:menuitem>
                    <p:menuitem id="zoneTestMI" label="Zone Test Form"
                                actionListener="#{navigationBean.menuListener}"
                                process="@this" update="@none" oncomplete="remoteUpdate()">
                    </p:menuitem>
                </p:submenu>
            </p:menu>
            <p:remoteCommand name="remoteUpdate" process="@none" update="listForm editForm" />

However, I found i had to use the update client ids 'listForm' and 'editForm' which are on the included pages. This means that every included page has to have those same client ids for it to work.

Regards,
Nic

[sdguna]

Hi Nic,

I tried with your solution for some reason I can not make it work.

I am using P:layout
When Ajax updates it always updates in the top layout, I want it in the center layout. I don't know why. I am trying to make this work for more than a week now. It is really a headache.

Please help me.

Here is the template.

Code: Select all

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>
                <ui:insert name="title">Default Title</ui:insert>
     </title>
     <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
     <h:outputStylesheet name="css/s.css"/>
     <style type="text/css">
                /* Colors and Images for Dark theme */
                body {
                        font-family: Georgia;
                        font-size: 90%;
                }
                .yui-skin-sam .yui-layout {
                       background-color:white;
                }
                .yui-layout-unit-top .yui-layout-bd {
                       background-color:#ECE38E;
                       border:none;
                 }
                .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
                       background-color:#073252;
                       border:none;
                 }

                .yui-skin-sam .yui-layout .yui-layout-hd {
                       border-bottom-color:black;
                 }

                .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd h2 {
                        color:white;
                }

                .yui-skin-sam .yui-layout-unit-right div.yui-layout-bd {
                        border-color:black;
                 }

                a:link, a:visited {
                        color:#FFFFFF;
                        text-decoration: none;
                }
                a:hover
                {
                 text-decoration:underline;
                }
                .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd .close {
                        border:0;
                        top:3px;
                        width:16px;
                        height:16px;
                }
                .yui-skin-sam .yui-layout .yui-layout-unit-right div.yui-layout-hd .collapse,
                .yui-skin-sam .yui-layout .yui-layout-unit-left div.yui-layout-hd .collapse {
                        border:0;
                        right:20px;
                        width:18px;
                        height:18px;
                }
               .yui-skin-sam .yui-layout .yui-layout-clip {
                        background-color: #333333;
                }

                .yui-skin-sam .yui-layout .yui-layout-unit-bottom div.yui-layout-bd {
                        text-align: center;
                        border:none;
                }

                /* Accordion */
             .yui-skin-sam .yui-accordionview {
                        border-bottom-color:#b5c4eb;
                        border-left-color: #b5c4eb;
                        border-right-color:#b5c4eb;
                        border-top-color:#b5c4eb;
                        color:#ffc879;
                        font-family:verdana;
                        letter-spacing:0.01em;
                        list-style:armenian inside none;
               }
              .yui-skin-sam .yui-accordion-content {
                        background-color: white;
                        border-style:ridge;
                        color:#a15e00;
                        font-size: 87%;
               }
                .yui-skin-sam .yui-accordionview li.yui-accordion-panel a.yui-accordion-toggle,
                .yui-skin-sam .yui-accordionview li.yui-accordion-panel a.yui-accordion-toggle:hover,
                .yui-skin-sam .yui-accordionview li.yui-accordion-panel a.yui-accordion-toggle.active:hover,
                .yui-skin-sam .yui-accordionview li.yui-accordion-panel a.yui-accordion-toggle.active  {
                        background: url(../images/dialoghd.gif) repeat-x;
                        background-color:#f8f9fa;
                        background-repeat:repeat-x;
                        color:#a15e00;
                }
                .yui-skin-sam .yui-accordionview li.yui-accordion-panel a.yui-accordion-toggle:hover
                {
                    background-color:#D8E2FA;
                }
                .yui-skin-sam .yui-accordionview li.yui-accordion-panel a.yui-accordion-toggle.active {
                     background-color:#D8E2FA;
                }
        </style>
</h:head>

    <body class="yui-skin-sam">
    <p:layout fullPage="true"  style="width:100%; height:100%">
            
            <p:layoutUnit id="top" position="top" resizable="false" height="95">

                <ui:insert id="top" name="top" />
            </p:layoutUnit>
            <p:layoutUnit id="bottom" position="bottom" height="50" resizable="true" zindex="0" scrollable="null">
                <ui:insert name="bottom" id="bottom"/>
            </p:layoutUnit>
            <p:layoutUnit id="left" position="left" width="240" resizable="true" collapsible="true" header="Functions" closable="true"  minWidth="10" scrollable="true" style="text-align:justify;padding-top:1px;">
                <ui:insert name="left" id="left" />
            </p:layoutUnit>
               
            <p:layoutUnit id="right" position="right" width="150" header="Future"   resizable="true" closable="true" collapsible="true" style="text-align:justify;padding-top:1px;">
                <ui:insert name="right" id="right"/>
            </p:layoutUnit>
        <p:layoutUnit  id="center" position="center" rendered="true" collapsed="0" style="text-align:center;padding-top:1px;display:inline-block"   >
                <h:form>
                    <ui:insert name="center" />
                    
                </h:form>
            <!--
                <iframe id="frame" style="background:#D8E2FA" height="550" width="1050" scrolling="yes" align="left" frameborder="0" name="frame" >
               </iframe>
            -->
            </p:layoutUnit>
         </p:layout>
    </body>
</html>

Here is the Home page:

Code: Select all

     </ui:define>
        <ui:define name="left" >
            <div id="menutre" style="background-image:url('../attachments/imagestill/image04.jpg'); background-repeat:repeat-y;">
                <p:accordionPanel multiple="true" speed="0.1"  activeIndex="0">
                     <p:tab title="Information">
                         <h:form>
                                <img src="../Function_Icon_Set/arrow_right_48.png" width="17" height="13" alt="arrow_right_48"/>
                                   <p:commandLink action="#{UtilityContoller.sideBarAction}" update="@none" process="@this" oncomplete="remoteUpdate" ajax="false" style="margin-bottom:5px;color:black;" value="Les Souches">
                                    <f:param id="race" name="getPageId" value="/race/List.xhtml"/>
                                </p:commandLink>
                            <br/>
                                <img src="../Function_Icon_Set/arrow_right_48.png" width="17" height="13" alt="arrow_right_48"/>
                                    <h:commandLink  action="/product/List" style="margin-bottom:5px;color:black;" value="&nbsp;Les Produits">
                                        <f:param id="product" name="getPageId" value="/product/List.xhtml"/>
                                    </h:commandLink>
          <!-- many menus here -->
<p:remoteCommand name="remoteUpdate" process="@none" update="container"/>
                        </h:form>
                           </p:tab>
                   </p:accordionPanel>
                </div>
        </ui:define>
        <ui:define name="right" >
            <h:outputText value="Right Column" />
        </ui:define>
        
        <ui:define id="container1" name="center" >
            <h:form id="container"  >
                <ui:include src="#{utilityController.currentPage}"/>
            </h:form>
        </ui:define>
        
    </ui:composition>

My backing bean is returning the value correctly. If I don't specify Ajax it always opens as a new page.

[nch]

Hi sdguna,

I see that you have wrapped your ui:include tag in an h:form tag. I'm no expert but this didn't work for me. I have h:form tags on my included xhtml and reference these in my update attribute.

Code: Select all

            <ui:define name="selectedForm">
                <ui:include src="#{navigationBean.selectedIncludePath}"/>
            </ui:define>

and the xhtml of the included source looks like this:

Code: Select all

<ui:composition id="zoneCmpstn"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">
    <p:layout >
        <p:layoutUnit position="west" size="400" style="border-style: none">
            <h:form id="listForm">
                 ..... more tags here
            </h:form>
        </p:layoutUnit>
        <p:layoutUnit position="center"  style="border-style: none">
            <h:form id="editForm" style="margin-top: 200px" >
                     ..... more tags here
            </h:form>
        </p:layoutUnit>
    </p:layout>
</ui:composition>

I refer to listForm and editForm in the update attribute. This solution is far form ideal as one needs to have a listForm and editForm on every included xhtml.

Having said that, mine works perfectly with a 2.0.1-SNAPSHOT, however, I am busy trying to find out why I just seem to get garbage when I use 2.0.2. I suspect it something to do with the p:layout changes.

Also, as p:commandLink works with child tags you could most probably use a p:ajax instead of a p:remoteCommand e.g.:

Code: Select all

          <p:commandLink action="#{UtilityContoller.sideBarAction}" update="@none" process="@this" oncomplete="remoteUpdate" ajax="false" style="margin-bottom:5px;color:black;" value="Les Souches">
                        <f:param id="race" name="getPageId" value="/race/List.xhtml"/>
                        <p:ajax  process="@none" update="container"/>
                    </p:commandLink>

I only used p:remoteCommand because at present p:menuItem within p:menu does not work with children.

Hope this helps.

Nic.