dynamicContent - Efficient loading/rendering of a Component Tree

Language

XPages

Tags

Author

Tony McGuckin

Submitted on

March 7, 2012 at 3:15 PM

Rating

Downloads

Notes

Following a recent application review for a customer that ran into performance issues based on doing heavy-lifting operations within computed "rendered" properties, I put together this dynamic content test harness to explain what happens under the hood here.

If you understand the XPages Request Processing Lifecycle, you will know that the "rendered" property is evaluated multiple times during a POST request (and once during a GET request). The former here being of particular interest given that it can be evaluated up to 4 times for a POST request. This is a JSF thing to accommodate resetting of the rendered property during any of the phases should something go wrong (ie: validation failing, invoke of the application phase failing, ...).

So this example demonstrates how you can efficiently load, render, and discard parts of the component tree without causing undue processing of branches within the component tree for GET or POST requests.

Code 1 - XSP Markup for test harness XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.ibm.com/xsp/core xsdxp://localhost/xsp~core.xsd
http://www.ibm.com/xsp/coreex xsdxp://localhost/xsp~coreex.xsd"
	xmlns:xe="http://www.ibm.com/xsp/coreex" pageTitle="Dynamic Content Test Harness"
	disableTheme="true">
	<xp:this.resources>
		<xp:styleSheet>
			<xp:this.contents>
				<![CDATA[
					.container{
						background-color:#fff;
						padding:30px;
						-moz-border-radius:5px;
						-moz-box-shadow:3px 5px 10px #888;
						width:350px;
						border:1px solid #757575;
						margin:50px 0px 20px 50px;
					}
				]]>
			</xp:this.contents>
		</xp:styleSheet>
	</xp:this.resources>
	<xp:div styleClass="container">
		<xp:label
			value="On initial viewing, dynamicContent will have loaded: content_0"
			id="label2">
		</xp:label>
		<xp:br></xp:br>
		<xp:br></xp:br>
		<xp:link escape="true"
			text="Dynamically load: content_0 using GET request" id="link0"
			value="/test.xsp#content=content_0">
		</xp:link>
		<xp:br></xp:br>
		<xp:link escape="true"
			text="Dynamically load: content_1 using GET request" id="link1"
			value="/test.xsp#content=content_1">
		</xp:link>
		<xp:br></xp:br>
		<xp:link escape="true"
			text="Dynamically load: content_2 using GET request" id="link2"
			value="/test.xsp#content=content_2">
		</xp:link>
		<xp:br></xp:br>
		<xp:br></xp:br>
		<xp:link escape="true"
			text="Dynamically load: content_0 using POST request" id="link3">
			<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="dynamicContainer">
				<xp:this.action>
					<xe:changeDynamicContentAction facetName="content_0"
						for="dynamicContent">
					</xe:changeDynamicContentAction>
				</xp:this.action>
			</xp:eventHandler>
		</xp:link>
		<xp:br></xp:br>
		<xp:link escape="true"
			text="Dynamically load: content_1 using POST request" id="link4">
			<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="dynamicContainer">
				<xp:this.action>
					<xe:changeDynamicContentAction facetName="content_1"
						for="dynamicContent">
					</xe:changeDynamicContentAction>
				</xp:this.action>
			</xp:eventHandler>
		</xp:link>
		<xp:br></xp:br>
		<xp:link escape="true"
			text="Dynamically load: content_2 using POST request" id="link5">
			<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="dynamicContainer">
				<xp:this.action>
					<xe:changeDynamicContentAction facetName="content_2"
						for="dynamicContent">
					</xe:changeDynamicContentAction>
				</xp:this.action>
			</xp:eventHandler>
		</xp:link>
	</xp:div>
	<xp:div styleClass="container" id="dynamicContainer">
		<xe:dynamicContent id="dynamicContent" useHash="true"
			defaultFacet="content_0" afterContentLoad="#{javascript:print('afterContentLoad')}"
			beforeContentLoad="#{javascript:print('beforeContentLoad')}">
			<xp:this.facets>
				<xp:div loaded="${javascript:print('content_0:loaded'); return true;}"
					rendered="#{javascript:print('content_0:rendered'); return true;}"
					xp:key="content_0">
					<xp:span>content_0 loaded by default</xp:span>
				</xp:div>
				<xp:div loaded="${javascript:print('content_1:loaded'); return true;}"
					rendered="#{javascript:print('content_1:rendered'); return true;}"
					xp:key="content_1">
					<xp:span>content_1 now loaded</xp:span>
				</xp:div>
				<xp:div loaded="${javascript:print('content_2:loaded'); return true;}"
					rendered="#{javascript:print('content_2:rendered'); return true;}"
					xp:key="content_2">
					<xp:span>content_2 now loaded</xp:span>
				</xp:div>
			</xp:this.facets>
		</xe:dynamicContent>
	</xp:div>
</xp:view>

Code 2 - faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
  <lifecycle>
    <phase-listener>com.ibm.xsp.lifecycle.XSPPhaseListener</phase-listener>
  </lifecycle>
</faces-config>

Code 3 - XSPPhaseListener.java


package com.ibm.xsp.lifecycle;

import javax.faces.event.PhaseEvent;
import javax.faces.event.PhaseId;

/*
 * @author:
 *		Tony McGuckin/Ireland/IBM
 *		tony.mcguckin@ie.ibm.com
 *
 * Description:
 *		XSPPhaseListener for outputting phase information
 *    
 * Test Harness:
 *		n/a
 *
 * Configuration:
 * 		faces-config.xml#phase-listener.XSPPhaseListener
 * 
 * History:
 *    07-March-2012 Original version
 */
public class XSPPhaseListener implements javax.faces.event.PhaseListener {

	private static final long serialVersionUID = 1L;

	public PhaseId getPhaseId() {
    	return PhaseId.ANY_PHASE;
    }

    public void beforePhase(PhaseEvent event) {
    	if(event.getPhaseId().equals(PhaseId.RESTORE_VIEW)){
	       	System.out.println(" ");
	   		System.out.println("Request:\tStarted...");
	   	}
	   	System.out.println(" ");
	   	System.out.println("Lifecycle:\tBefore Phase: " + event.getPhaseId());
    }

    public void afterPhase(PhaseEvent event) {
    	System.out.println("Lifecycle:\tAfter Phase: " + event.getPhaseId());
	    System.out.println(" ");
	    if(event.getPhaseId().equals(PhaseId.RENDER_RESPONSE)){
	    	System.out.println("Request:\tCompleted.");
	   		System.out.println(" ");
	   	}
    }
}


Example console output showing loaded / rendered evaluations during different requests - you need to load this and study for yourself - what are you waiting for? :-)

GET request output:

[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: Request:       Started...
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: Lifecycle:     Before Phase: RESTORE_VIEW 1
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: Lifecycle:     After Phase: RESTORE_VIEW 1
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: Lifecycle:     Before Phase: RENDER_RESPONSE 6
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: beforeContentLoad
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: content_1:loaded
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: afterContentLoad
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: content_1:rendered
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: Lifecycle:     After Phase: RENDER_RESPONSE 6
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM: Request:       Completed.
[1FA0:000A-214C] 07/03/2012 21:11:14   HTTP JVM:

POST request output:

[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Request:       Started...
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     Before Phase: RESTORE_VIEW 1
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     After Phase: RESTORE_VIEW 1
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     Before Phase: APPLY_REQUEST_VALUES 2
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: content_2:rendered
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     After Phase: APPLY_REQUEST_VALUES 2
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     Before Phase: PROCESS_VALIDATIONS 3
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: content_2:rendered
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     After Phase: PROCESS_VALIDATIONS 3
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     Before Phase: UPDATE_MODEL_VALUES 4
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: content_2:rendered
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     After Phase: UPDATE_MODEL_VALUES 4
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     Before Phase: INVOKE_APPLICATION 5
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: beforeContentLoad
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: content_1:loaded
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: afterContentLoad
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     After Phase: INVOKE_APPLICATION 5
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     Before Phase: RENDER_RESPONSE 6
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: content_1:rendered
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Lifecycle:     After Phase: RENDER_RESPONSE 6
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM:
[1FA0:000A-214C] 07/03/2012 21:13:47   HTTP JVM: Request:       Completed.

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.

No comments yetLogin first to comment...