Notes/Domino 8.5.3 Upgrade Pack 1 ではモバイルコントロールが追加され、スマートフォンなどのモバイルアプリケーション用の便利なコントロールが追加されています。
モバイルコントロールのアプリケーションの特徴として、Single Page Application コントロール内に、表示される画面に相当する Mobile Page を複数配置し、アプリケーションお使用時にそのページ間の遷移をさせることで、サーバーにからのページ取得のオーバーヘッドを減らす仕組みがあります。しかし実際のアプリケーションではサーバーからのページロードを行う必要があったり、その際に画面のリセットしたいなどの要求もあります。
Mobile Page コントロールにはそのような要望にこたえるための preload と restCOntent プロパティがあります。それらのプロパティの仕組みについて解説します。
どんなアプリケーションかというと、ひとつの Single Page Application コントロールに5つの Mobile Page があります。各ページの名前は firstPage、secondPage、thirdPage、fourthPage、fifthPage で、最初に表示するのは firstPage です。その firstPage から残りの4つのページへ遷移できます。
すべてのページに値の計算でラベルを表示する Ｓｔａｔｉｃ Ｌｉｎｅ Ｉｔｅｍ コントロールを置いています。その計算式は以下のような ＪａｖａＳｃｒｉｐｔ です。
secondPage、thirdPage、fourthPage、fifthPage の4つのページの設計はほとんど同じですが preload と resetContent の設定だけが違います。
まずは 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 の時刻は変わりません。これは最初にページが開かれたら、その後はコンテンツの更新を行わないためです。
<?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>