ShowTable of Contents
はじめに
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>