動的コンテンツ - 効果的なコンポーネントツリーのロードとレンダリング

コード 1 - テスト用に利用する XPage の XSP マークアップ:
 
<?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>
 
コード 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>
 
コード 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(" ");
      }
    }
}
 
 
異なるリクエストでのサンプルのコンソールへのアウトプットで評価のロード / レンダリングを表示 -  まずこれをロードしてから次に何が起こるかよく確認してください
 
GET リクエストのアウトプット:
 
[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 リクエストのアウトプット:
 
[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.





これは最近パフォーマンスが非常に悪いアプリケーションをレビューして、それが「可視」プロパティの計算によって引き起こされた問題であったことを受けて、この状況を説明するためにテスト用にこの動的コンテンツをまとめてみました。

XPages のリクエスト処理のライフサイクルをお分かりなら、この「可視」プロパティが POST リクエスト(GETリクエストの間に1回)の間に何度も評価されることに気づくでしょう。
一度の POST リクエストで4回も評価されています。これは JSF によるもので、何かおかしなこと(例えば、妥当性検査の失敗、アプリケーションフェーズの実行の失敗)が起こっていたり、各フェーズの間にレンダリングされたプロパティをリセットするからです。

このサンプルは、コンポーネントツリー内で GET や POST リクエストの処理を負荷をかけずに、ロード、レンダリング、破棄する方法を示したものです。

XPages
katoman
July 21, 2015 at 12:42 PM
Rating
0





No comments yetLogin first to comment...