Notes開発者のためのXPagesデザインレシピ

簡単でCoolなXPagesアプリケーションを作るための情報を発信していきます

Noamd Notesクライアント レイアウト

Notes、Nomadで作るレスポンシブアプリDay3:ウィンドウサイズによるリアルタイムレスポンシブ

前回からの続き

 前回はPostOpenイベントを使って、フレームセットの切替を行いましたが、今回はV12から追加されたonSizeイベントを使って、フレームセットの切り替え、レスポンシブ的な動作が実現可能か?を検証していきます。

仕様確認1:onSizeイベントの発火条件

 onSizeイベントは新しく実装された機能ですので、新機能と言えば予想通り動かないのが定番です。そこで@式、LotusScriptでそれぞれ@PromptやMsgboxを使ってイベントが発火するか?を確認します。

画面の向きイベントNotesNotesNomad
iOS
Nomad
iOS
Nomad
Android
Nomad
Android
@LotusScript@LotusScript@LotusScript
DBオープン×
リサイズ×
DBオープン×××
DBオープン×××
縦→横画面回転××
横→縦画面回転××
〇マークは1回、●マークは2回発火(スマホは3回発火する場合もある。PCは2回のみで1回はツールバー表示)

 結果をまとめると下記の通りです。

1.LotusScriptは発火しない。(実装されていない?)
2.iOSではDBオープン時に発火しない。(別途PostOpenなどに実装が必要。統一コードにしづらい。)
3.縦→横への回転は1回だが、横→縦への回転は2回発火する。(どういう意図?)

仕様確認2:onSizeイベントから@Command([OpenFrameset])を実行

 onSizeイベントからはLotusScriptが使用できないことがわかりました。次に@式を使って@Command([OpenFrameset])が実行可能か?を調査します。

画面の向きイベントNotesNomad iOSNomad Android
@@@
DBオープン
リサイズ
DBオープン×
DBオープン×
縦→横画面回転入れ子エラー
横→縦画面回転入れ子エラー
×はイベント発火なし

 結論としてはiOS版Nomadでは、入れ子エラー(再帰呼び出しエラー)がするので、@Command(OpenFrameset])が使えないとなります。onSizeはLotusScriptも使えないのでiOSの場合はPostOpenイベントで開くフレームセットを決定する形で実装する必要がありそうです。

@Command([FileCloseWindow])をエージェントに置き換える

 onSizeイベントは@式のみの発火だと言うことがわかりましたので、@式で記述する必要があります。Day1では@Command([FileCloseWindow])でページが残ってしまう問題をそのままにしていましたが、今回はこれをLotusScriptエージェントにすることで解決したいと思います。

【LotusScript-(FileCloseWindowAgent)】

Sub Initialize
	'@Command([RunAgent])から呼び出し、FileCloseWindowを実現する
	
	'クラス、変数宣言
	Dim ws			As New NotesUIWorkspace
	Dim uidoc		As NotesUIDocument
	
	'クラス、変数セット
	Set uidoc		= ws.CurrentDocument
	
	'ウィンドウを閉じる
	Call uidoc.Close(True)
	
End Sub

【エージェントのプロパティ】

Day2で作ったPostOpenイベントをiOSのみの動作に変更する

 先ほど行った検証で、PC用Notes、Android版Nomadであれば、onSizeイベントでデータベースオープン時と画面回転時にOpenFramesetでフレームセットの切替ができそうです。問題はiOS版Nomadです。バージョンアップに期待するしかありませんが、今回はiOSでのonSize実装をあきらめ、PostOpenイベントをiOSのみで実行する形にします。PCやAndroidで動作させないのは、PostOpenとonSizeで2回イベントが発火しエラーになるのを避けるためです。

【LotusScript-PostOpenイベント(改善版)】

Sub Postopen(Source As Notesuidocument)
	'ウィンドウサイズを取得し、横幅>高さの場合は、PC用フレームセットを開く
	
	'変数、クラス宣言
	Dim ws						As New NotesUIWorkspace	
	Dim session				As New NotesSession
	Dim iResolutionWidth		As Integer
	Dim iResolutionHeight		As Integer
	
	'iOSのみフレームセット切り替え(他のPlatformはonSizeイベントから実行)
	If session.Platform = "iOS" Then
		'クラス、変数セット
		iResolutionWidth			= Cint(Source.FieldGetText("ResolutionWidth"))
		iResolutionHeight			= Cint(Source.FieldGetText("ResolutionHeight"))
		
		'ウィンドウサイズを判定して、フレームセットを開く
		If iResolutionWidth > iResolutionHeight Then
			Call ws.OpenFrameSet("fsMain")
			Call Source.Close
		End If		
	End If
End Sub

onSizeイベントでウィンドウサイズを判定し、開くフレームセットを切り替える

 やっとonSizeイベントを使って、フレームセットを切り替え、レスポンシブ動作を実現する準備が整いました。今回変わるのは、スマホ用フォーム、PC用フォームのonSizeイベントにそれぞれフレームセットを開き直すコードが入るので、データベースオープン時だけでなく、ウィンドウリサイズ時、画面回転時にもフレームセットの変更が起きることです。

 言い忘れましたが、onSizeイベントで@ResolutionWidth、@ResolutionHeightが想定通りの値を返すことは確認しています。PostOpenイベントがバグなのか?は不明です。

【@式-onSize(スマホ用フォーム)】

REM {iOS以外:幅>高さであればPC用フレームセットを開く};
@If(@Platform<>"iOS" & @ResolutionWidth > @ResolutionHeight;
	@Do(
		@Command([RunAgent];"(FileCloseWindowAgent)");
		@Command([OpenFrameset];"fsMain")
	);
	@Return("")
)

【@式-onSize(PC用フォーム)】

REM {iOS以外:幅<=高さであればスマホ用フレームセットを開く};
@If(@Platform<>"iOS" & @ResolutionWidth <= @ResolutionHeight;
	@Do(
		@Command([RunAgent];"(FileCloseWindowAgent)");
		@Command([OpenFrameset];"mfsMain")
	);
	@Return("")
)

【実行結果-PC】

 これでウィンドウサイズの変更時にレイアウトが変更されるレスポンス動作が実装できました。Android版Nomadでは、画面の回転でレイアウトが変更されます。

 iOS版Nomadの仕様がAndroid版と同じになればもっとスッキリした実装になりそうです。

次回予告

 @ResolutionWidth、@ResolutionHeightはビュー列のプロパティでも使うことができます。何が便利かというと、PC、タブレット、スマホで同じビューを使う場合、解像度に応じて列の省略、最適化された列を出すことができると言うことです。次回はビューでの@ResolutionWidth、@ResolutionHeightを解説します。