神戸は昨日、一昨日と少し涼しくなりましたが、まだまだ残暑は続くようです(汗
さてひとつ宣伝です。
来週8日(金曜)に、ノーツコンソーシアム 第三回大阪研究会が開催されます。
詳しくは上記リンク先をご確認ください。
今回は東京からIBMチャンピオンを招待してのセッションも予定されておりますので、ぜひこのチャンスをお見逃しなく!!
また会員外の方でも見学が可能です。
コンソーシアム事務局へご連絡ください。
さて、前回まででスクリプトを使用せず、ノーツクライアントおよびWeb画面でのアプリケーションの作成をご紹介しましたが、弊社ではXpagesモバイルコントロールを使用した、スマホ向けの画面をよく使用しておりますので、今回からはそちらをご紹介させて頂きます。
現在までのページをiPhoneで表示した場合、以下のような画面になります。
こちらを「NotesワークフローアプリケーションをXPagesでモバイル化するチュートリアル」に従い、モバイルコントロールでリメイクしてみましょう。
お手数ですが、「概要」・「準備」・「設定」については、上記チュートリアルに従ってください。
それではモバイル用のXPageを作成します。「新規XPageの作成」をクリックし、以下の設定を行いOKをクリックします。
名前： m_mobile |
開いたページに、コントロールの「モバイル」から、「単一ページアプリケーション」をドラッグ&ドロップします。
続いて、「アプリケーションページ」を先の単一ページアプリケーションのファセット(緑の●)に配置します。
アプリケーションページの「すべてのプロパティ」を開き、以下設定を行います。
id : viewpage pageName: viewpage |
次に単一ページアプリケーションの「すべてのプロパティ」を開き、以下設定を行います。
selectedPageName : viewpage |
続いて、コントロールより「ページ見出し」をアプリケーションページのファセットに配置します。
※チュートリアルでは、単一ページアプリケーションのファセットと記載されていますが、正しくはアプリケーションページのファセットになります。
続いてページ見出しの「すべてのプロパティ」を以下のように設定します。
label : 一覧 |
それではブラウザ起動時の設定を以下に変更し、iPhoneでプリビューしてみましょう。
URLは、http://サーバー名/(ディレクトリ名/)ファイル名になります。
XPage: m_mobile |
正しく設定できていれば、以下のように表示されるはずです。
続きまして日付順のビューを追加します。
「拡張ライブラリ」から「データビュー」を選択し、先のページ見出しの右横に配置します。
データビューのデータソースの選択ダイアログが開きますので、以下設定しOKします。
ビュー : 申請日順 - byDate |
アウトラインで「ページ見出し」と「デービュー」が同じ階層にあることを確認します。
続いてビューとして表示する内容を設定します。
チュートリアルではカテゴリ別ビューを作成してありますが、今回は日付順のビューを作成します。
データビューの「すべてのプロパティ」を開き、「形式」内「summaryColumn」を選択すると「+」が表示されますので、こちらをクリックし、以下設定を行います。
columnName : created |
同様に「extraColumns」を選択し、「+」をクリックし、以下設定を行います。
columnName : Dsp_Applier |
続いて出来上がった「viewExraCulumn[0]」の右に表示される「+」をクリックし、列を追加します。
新たに「viewExraCulumn[0]」が追加され、先のデータは「viewExraCulumn[1]」に格納されます。
「viewExraCulumn[0]」に以下設定を行います。
columnName : Title |
以上の設定にて、iPhoneのプリビューでは以下のように表示されます。
それでは少し各行のスタイルを変更してみましょう。
まず日付のフォントサイズです。
「summaryColumn」の項目を開き、「style」項目をクリックすると、下記のようなスタイルエディタが表示されますので、こちらをクリックします。
開いたスタイルエディタの「フォント」タブにて以下設定します。
※特に指定ではありませんので、お好みで変更してください。
フォント : メイリオ サイズ : 14 色: 濃いグレー |
同様に「extraColumns」内、ふたつの「viewExtraColumn」についても「style」を変更します。
私の例では、以下のような設定しました。
viewExtraColumn[0]
フォント : メイリオ 色 : 濃い青 |
viewExtraColumn[0]
フォント : メイリオ サイズ : 12 色: 濃いグレー |
以上でプレビューすると、下記のように変化します。
style の設定は、ぜひいろいろと触ってみてください。
さて少し長くなりますが、もう少し続けます。
続いてビューページを初期値として4行表示し、「さらに表示・・・」をタップするごとに4行表示するページャーを追加します。
まず初期値の設定です。
データビューを選択し、「すべてのプロパティ」、「データ」内に以下設定を加えます。
rows : 4 |
次に「さらに表示・・・」ボタンを追加します。
「コアコントロール」内の「リンク」を「pagerBottom」というファセットへ配置します。
※チュートリアルの画像では「value」となっていますが、「text」が正解です。
text : さらに表示・・・ |
次にリンクの設定を行いますが、たいへん申し訳ありませんが、本来の目的である「@関数だけ」では実現できないため、スクリプトを使用致します。
先と同じ「基本」タブ内「rendered」を選択し、右側の◆アイコンから「値の計算」をクリックします。
スクリプトエディタが起動しますので、以下スクリプトを入力もしくはコピペしてください。
スクリプトの意味としては、ビューの行数が4行以上の場合に表示させるというものです。
var dv = getComponent("dataView1"); if(dv.getRowCount() > 4) return true; else return false; |
続いて「リンク」がタップされた際のイベントを追加します。
「リンク」を選択した状態で、「イベント」タブをクリックします。
次に「クライアント」タブを選択し、「アクションの追加」をクリックします。
「シンプルアクションの追加」ダイアログが表示されますので、以下設定を行います。
アクション : 行をデータイテレータに追加する disableId : link1 (・・・追加する行がない場合、「リンク」を非表示) for : davaView1 (対象となるビュー) rowCound : 4 (追加する行数) |
以上、iPhoneでプリビューすると、初期画面は以下となります。
「さらに表示・・・」をタップすると、4行追加されます。
以上、今回は1ヶ所のみスクリプトを記述しましたが、かなり簡単にモバイルのビューページが出来たのではないでしょうか。
次回はフォームのページを追加し、ビューとフォームを接続致します。
