Skip to main content link. Accesskey S
  • Help
  • IBM Logo
  • IBM Notes and Domino Application Development wiki
  • All Wikis
  • All Forums
  • THIS WIKI IS READ-ONLY. Learn more...
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
Community Articles > 日本語 - Japanese > モバイルコントールの Mobile Page コントロールの preload と resetContext プロパティの役割
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileIBM contributorHiroaki Komine
Contribution Summary:
  • Articles authored: 43
  • Articles edited: 7
  • Comments Posted: 1

Recent articles by this author

JMeter で XPages アプリケーションをテストする、入門編

JMeter を初めて使う方にむけて、Domino アプリケーションや XPages アプリケーションを JMeter でテストをするための手順を最初のステップから解説します。

Eclipse Memory Analyser Tool を使用した、XPages のメモリリークの調査

Java アプリケーションのメモリリークを調査する強力なツールである Eclipse Memory Analyser Tool を使用して、XPages アプリケーションのメモリリークを調査する方法について紹介します。

XSP クライアントサイド Javascript オブジェクト関数

XPages アプリケーション開発の中で利用できる、XSP クライアントサイド Javascript オブジェクト関数について解説します。

Lotus Notes Java クラスのリサイクルとメモリ消費の検証

XPages や Java エージェントなどで Lotus Notes を操作する Lotus Notes Java クラスでは、開発者が明示的にリサイクルをして使用したオブジェクトを開放する必要があります。このリサイクルを適切に行わないことで、Java クラスの

XPages アプリケーションでの「可視(rendered)」プロパティによるパフォーマンス低下への対策

XPages アプリケーション開発で、「可視」設定ので「値の計算」はパフォーマンス低下を招く可能性があります。「可視」評価の Javascript に複雑な処理を実装する必要があるときには、そのスクリプトでパフォーマンスの低
Community articleモバイルコントールの Mobile Page コントロールの preload と resetContext プロパティの役割
Added by IBM contributorHiroaki Komine | Edited by IBM contributorHiroaki Komine on February 18, 2012 | Version 10
expanded Abstract
collapsed Abstract
Notes/Domino 8.5.3 Upgrade Pack 1 ではモバイルコントロールが追加され、スマートフォンなどのモバイルアプリケーション用の便利なコントロールが追加されています。 モバイルコントロールのアプリケーションの特徴として、Single Page Application コントロール内に、表示される画面に相当する Mobile Page を複数配置し、アプリケーションお使用時にそのページ間の遷移をさせることで、サーバーにからのページ取得のオーバーヘッドを減らす仕組みがあります。しかし実際のアプリケーションではサーバーからのページロードを行う必要があったり、その際に画面のリセットしたいなどの要求もあります。 Mobile Page コントロールにはそのような要望にこたえるための preload と restContent プロパティがあります。それらのプロパティの仕組みについて解説します。
ShowTable of Contents
HideTable of Contents
  • 1 はじめに
  • 2 まずはテスト
  • 3 テストページを開いてみる
    • 3.1 preload プロパティ
  • 4 XPages アプリケーションのソース

はじめに

Notes/Domino 8.5.3 Upgrade Pack 1 ではモバイルコントロールが追加され、スマートフォンなどのモバイルアプリケーション用の便利なコントロールが追加されています。
モバイルコントロールのアプリケーションの特徴として、Single Page Application コントロール内に、表示される画面に相当する Mobile Page を複数配置し、アプリケーションお使用時にそのページ間の遷移をさせることで、サーバーにからのページ取得のオーバーヘッドを減らす仕組みがあります。しかし実際のアプリケーションではサーバーからのページロードを行う必要があったり、その際に画面のリセットしたいなどの要求もあります。
Mobile Page コントロールにはそのような要望にこたえるための preload と restCOntent プロパティがあります。それらのプロパティの仕組みについて解説します。

 

まずはテスト

XPage アプリケーションをテスト用に作ってみました。その XPage アプリケーションのソースはこの記事の最後の掲載します、

どんなアプリケーションかというと、ひとつの Single Page Application コントロールに5つの Mobile Page があります。各ページの名前は firstPage、secondPage、thirdPage、fourthPage、fifthPage で、最初に表示するのは firstPage です。その firstPage から残りの4つのページへ遷移できます。

すべてのページに値の計算でラベルを表示する Static Line Item コントロールを置いています。その計算式は以下のような JavaScript です。

	return (new Date()).toLocaleString();

	

日時を計算して表示するだけです。

ただし、この JavaScript はサーバーサイド JavaScript なので、ページが生成された瞬間の日時が表示されます。

secondPage、thirdPage、fourthPage、fifthPage の4つのページの設計はほとんど同じですが preload と resetContent の設定だけが違います。

  preload resetContent
secondPage true 省略
thirdPage false 省略
fourthPage 省略 true
fifthPage 省略 false

 

このようなページを作ることで preload プロパティと resetContent プロパティの動きが分かります。

 

テストページを開いてみる

それではテストをしてみましょう。

作成した XPage をブラウザから開きます。するともちろん firstPage だけが表示され、そのときの日時が画面に表示されます。

preload プロパティ

まずは preload の動きの違いを見てみましょう。まず secondPage のリンクを開いてみます。このページは preload=true でした。開かれたページに表示される日時は最初のページの時刻とまったく同じです。一方、thirdPage を開くと、開いたその瞬間の日時が表示されます。この thirdPage は preload=false でした。

モバイルコントロールが提供するモバイルアプリケーションのしくみでは、Single Page Application に含まれる Mobile Page コントロールが画面のページの一つひとつを表示しますが、その Mobile Page コントロールから作られる複数のページが一つの HTML ファイルで最初にまとめてブラウザに渡されます。ブラウザは最初にまとめて複数のページを受け取り、そのページの中で画面遷移を行います。こうすることでページ更新のたびのサーバーへリクエストや、サーバー処理の待ち時間を減らすことができ、ネットワークのトランザクションも減らすことができます。

しかしこのようなページをすべて最初に取得することは、必ずしも良いことばかりではありません。たくさんのページが必要なアプリケーションでは、使うかどうかわからないページもあるかもしれません。そのため preload プロパティであらかじめページをロードするかどうか設定することができます。

先のテストでは secondPage は最初に firstPage を呼び出したときに一緒にクライアントに送られてきていました。これは最初に firstPage を開いたときにブラウザでソースを見ることで確認できます。一方,thirdPage は呼び出されたときに始めて画面が生成されます。そのため画面に表示される日時が firstPage と異なっていました。

なお一旦 thirdPage を開いたら、そのあと firstPage に戻ったりしても開きなおしても thirdPage の時刻は変わりません。これは最初にページが開かれたら、その後はコンテンツの更新を行わないためです。

 

 

 

XPages アプリケーションのソース

	 
	<?xml version="1.0" encoding="UTF-8"?>
	<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	    <xe:singlePageApp id="singlePageApp1"
	        selectedPageName="firstPage">
	        <xe:appPage id="appPage1" pageName="firstPage">
	            <xe:djxmHeading id="djxmHeading1" label="First Page"></xe:djxmHeading>
	            <xe:djxmRoundRectList id="djxmRoundRectList1">
	                <xe:djxmLineItem id="djxmLineItem13">
	                    <xe:this.label><![CDATA[#{javascript:return (new Date()).toLocaleString();}]]></xe:this.label>
	                </xe:djxmLineItem>
	                <xe:djxmLineItem id="djxmLineItem1" label="goto 2nd page - preload=true"
	                    moveTo="secondPage">
	                </xe:djxmLineItem>
	                <xe:djxmLineItem id="djxmLineItem2" label="goto 3rd page - preload=false"
	                    moveTo="thirdPage">
	                </xe:djxmLineItem>
	                <xe:djxmLineItem id="djxmLineItem3" label="goto 4th page - resetContent=true"
	                    moveTo="fourthPage">
	                </xe:djxmLineItem>
	                <xe:djxmLineItem id="djxmLineItem4" label="goto 5th page - resetContent=false"
	                    moveTo="fifthPage">
	                </xe:djxmLineItem>
	            </xe:djxmRoundRectList>
	        </xe:appPage>
	        <xe:appPage id="appPage2" pageName="secondPage" preload="true">
	            <xe:djxmHeading id="djxmHeading2" label="Second Page"
	                back="Back" moveTo="firstPage">
	            </xe:djxmHeading>
	            <xe:djxmRoundRectList id="djxmRoundRectList2">
	                <xe:djxmLineItem id="djxmLineItem5">
	                    <xe:this.label><![CDATA[#{javascript:return (new Date()).toLocaleString();}]]></xe:this.label>
	                </xe:djxmLineItem>
	                <xe:djxmLineItem id="djxmLineItem9" label="preload=ture">
	                </xe:djxmLineItem>
	            </xe:djxmRoundRectList>
	        </xe:appPage>
	        <xe:appPage id="appPage3" pageName="thirdPage" preload="false">
	            <xe:djxmHeading id="djxmHeading3" label="Third Page"
	                back="Back" moveTo="firstPage">
	            </xe:djxmHeading>
	            <xe:djxmRoundRectList id="djxmRoundRectList3">
	                <xe:djxmLineItem id="djxmLineItem6">
	                    <xe:this.label><![CDATA[#{javascript:return (new Date()).toLocaleString();}]]></xe:this.label>
	                </xe:djxmLineItem>
	                <xe:djxmLineItem id="djxmLineItem10" label="preload=false">
	                </xe:djxmLineItem>
	            </xe:djxmRoundRectList>
	        </xe:appPage>
	        <xe:appPage id="appPage4" pageName="fourthPage" resetContent="true">
	            <xe:djxmHeading id="djxmHeading4" label="Fourth Page"
	                back="Back" moveTo="firstPage">
	            </xe:djxmHeading>
	            <xe:djxmRoundRectList id="djxmRoundRectList4">
	                <xe:djxmLineItem id="djxmLineItem7">
	                    <xe:this.label><![CDATA[#{javascript:return (new Date()).toLocaleString();}]]></xe:this.label>
	                </xe:djxmLineItem>
	                <xe:djxmLineItem id="djxmLineItem11" label="resetContent=true">
	                </xe:djxmLineItem>
	            </xe:djxmRoundRectList>
	        </xe:appPage>
	        <xe:appPage id="appPage5" pageName="fifthPage" resetContent="false">
	            <xe:djxmHeading id="djxmHeading5" label="Fifth Page"
	                back="Back" moveTo="firstPage">
	            </xe:djxmHeading>
	            <xe:djxmRoundRectList id="djxmRoundRectList5">
	                <xe:djxmLineItem id="djxmLineItem8">
	                    <xe:this.label><![CDATA[#{javascript:return (new Date()).toLocaleString();}]]></xe:this.label>
	                </xe:djxmLineItem>
	                <xe:djxmLineItem id="djxmLineItem12" label="resetContent=false">
	                </xe:djxmLineItem>
	            </xe:djxmRoundRectList>
	        </xe:appPage>
	    </xe:singlePageApp>
	</xp:view>
	 

	

 

expanded Attachments (0)
collapsed Attachments (0)
expanded Versions (13)
collapsed Versions (13)
Version Comparison     
VersionDateChanged by              Summary of changes
13Feb 19, 2012, 7:59:26 AMHiroaki Komine  IBM contributor
12Feb 18, 2012, 8:49:00 AMHiroaki Komine  IBM contributor
11Feb 18, 2012, 8:47:49 AMHiroaki Komine  IBM contributor
This version (10)Feb 18, 2012, 8:36:11 AMHiroaki Komine  IBM contributor
9Feb 18, 2012, 8:21:54 AMHiroaki Komine  IBM contributor
8Feb 18, 2012, 8:16:16 AMHiroaki Komine  IBM contributor
7Feb 18, 2012, 8:15:36 AMHiroaki Komine  IBM contributor
6Feb 18, 2012, 8:13:55 AMHiroaki Komine  IBM contributor
5Feb 18, 2012, 8:13:14 AMHiroaki Komine  IBM contributor
4Feb 18, 2012, 8:10:53 AMHiroaki Komine  IBM contributor
3Feb 18, 2012, 8:07:45 AMHiroaki Komine  IBM contributor
2Feb 18, 2012, 8:06:50 AMHiroaki Komine  IBM contributor
1Feb 18, 2012, 7:59:04 AMHiroaki Komine  IBM contributor
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • FacebookIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use