Skip to main content link. Accesskey S
  • Log In
  • Help
  • IBM Logo
  • IBM Notes and Domino Application Development wiki
  • All Wikis
  • All Forums
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
Community Articles > 日本語 - Japanese > モバイルコントールの Mobile Page コントロールの preload と resetContext プロパティの役割
  • New Article
  • 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 19, 2012 | Version 13
  • Edit
  • More Actions Show Menu▼
Rate this article 1 starsRate this article 2 starsRate this article 3 starsRate this article 4 starsRate this article 5 stars
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 プロパティ
    • 3.2 resetContentプロパティ
  • 4 XPages アプリケーションのソース

はじめに

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

 

まずはテスト

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

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

すべてのページに JavaScript による値の計算で文字列を表示する 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 の時刻は変わりません。これは最初にページが開かれたら、その後はコンテンツの更新を行わないためです。

なお、preload プロパティを指定しなかったときのデフォルトの処理は false です。

 

resetContentプロパティ

つぎに resetContent プロパティについてみてみましょう。まず fourthPage のリンクをひらきます。fourthPage は resetContent は true でした。preload プロパティは設定していなかったので fourthPage を開いた瞬間の日時が表示されます。一旦開いた後で firstPage に戻り、また fourthPage を開きます。すると日時は先ほどとは変わり、開きなおした瞬間の日時が表示されます。

一方、fifthPage を開くと、最初はページを開いた瞬間の日時が表示されますが、その後 firstPage に戻り、また fifthPage を開いても日時の表示は変わりません。これは先ほどの thirdPage の動きと同じになります。

resetContnt プロパティはこのようにページの内容を開くたびにページの内容(コンテキスト)をリセットするかどうかの設定を行います。resetContent を ture にすることでページの内容をキャッシュせず、開かれたときに最新のデータをサーバーから取得するようにすることができます。たとえばほとんど変更されることがないようなデータをサーバーから取得して表示するときには resetContent プロパティは false で良いかもしれません。しかし、時々、あるいは頻繁に変更されるデータであれば、resetContent プロパティを true にして常に最新のデータをサーバーから取得するようにすべきでしょう。

なお、resetContent プロパティを指定しなかったときのデフォルトの処理は false です。

 

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

この記事のテストを行うために作成した XPage のソースを以下に掲載します。

 

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

	

 


  • Edit
  • More Actions Show Menu▼


expanded Attachments (0)
collapsed Attachments (0)
Edit the article to add or modify attachments.
expanded Versions (13)
collapsed Versions (13)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (13)Feb 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
10Feb 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
expanded Comments (0)
collapsed Comments (0)
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
  • Wiki design feedback
  • Content feedback
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use