前回までで、支出が入力ができるアプリになりました。最終的には入力はスマホから行う予定ですので、Nomad Mobile からアクセスしてみましょう。
まずは、そのままの状態で Nomad Mobile で開いてみます。
ノーツのアプリがそのままスマホで利用できるのは本当にすごいと思います。ただ、使いやすいか？と言われると、残念ながらそうではありません。PC は横長、スマホは縦長の画面ですから仕方ありませんね。Nomad はスマホを横持ちすると横画面になりますが、それでも、画面解像度の差もあり厳しいです。
スマホで使いやすくするためには、スマホに合った開発が必要ということですね。今回は、スマホからの利用を想定したアプリですので、専用の設計を追加することとします。
ビューの作成
画面構成として、左にナビ、右にビューという画面構成に無理があります。まずは、最初の画面がビューだけになるようにしたいと思います。次のようなイメージです。
単一カテゴリ機能を利用して、カテゴリの開閉が必要のないすっきりとした画面を作成します。
ビューの作成
先にビューを作成します。
フォームの埋め込みビューの単一カテゴリ機能を使用します。重要なのは表示するデータの判定に使用される 1 列目ですね。次のような式を記述して、年月度でカテゴライズします。
| xY := @Text(@Year(Date)) + "年"; xM := @Right("0" + @Text(@Month(Date)); 2) + "月"; xY + " " + xM |
フォームの作成
続いて、下記のような新規フォーム mfViewByMon を作成します。
まず次の 3 つのフィールドを作成します。
| フィールド | 種類 | 詳細 |
| SaveOptions | テキスト | このフォームは保存する必要がないので設定。 デフォルト値は "0"。常時非表示。 |
| CategoryKey_Lst | テキスト | 表示用の計算結果。複数値。常時非表示。 |
| CategoryKey | コンボボックス | 「ウィンドウに合わせる」表の中に配置。 |
その下に埋め込みビューを配置します。先に作成したビューを埋め込みビューとして配置しして、画面いっぱいに表示されるように設定します。
続いて「単一カテゴリの表示」にフィールド CategoryKey を指定します。これで、CategoryKey フィールドで指定した年月のデータだけがビューに表示されるようになります。
最後に選択肢の設定を行います。
CategoryKey_Lst は選択肢を保持するための一時フィールドです。表示用の計算結果で、下記の式を指定します。
|
xLst := @DbColumn("":"NoCache"; "":""; "mvExpenceByDate"; 1); @If(@IsError(xLst); ""; xLst) |
埋め込みビューの 1 列目をリストで取得しています。
次にコンボボックスの CategoryKey フィールドです。
選択肢はフィールドプロパティで「式で選択肢を設定」を指定、以下の式を設定します。
| @GetField(@ThisName + "_Lst") |
フィールドのデフォルト値には以下の式に設定します。
|
xLst := @GetField(@ThisName + "_Lst"); @Subset(xLst; 1) |
CategoryKey_Lst の値を使って、複数回の検索（@DbColumn）を行わないようにしています。
フレームセットの作成
画面構成の一番外側にあたる上下 2 分割のフレームセット mfsMain を作成します。
上側のフレーム mfrmHeader はアプリのタイトルを表示するだけのフレームです。作成手順は記載しませんが、@DbTitle でアプリ名称を表示するだけの単純なページを指定し、都合のいい高さで固定します。
下側のフレーム mfrmView には先ほど作成したフォーム mfViewByMon を配置します。
なお、各フレーム内のスクロールは止めておきましょう。
最後に、アプリケーションのプロパティで作成したフレームセットを開く設定をして完了です。
これで View まわりの開発は完了ですので、Nomad で確認します。次のようにすっきりした画面で表示されます。
※ 2024/4/15 加筆 アクションボタンは次回の作成です。
参考文献
Nomad アプリの作り方は、下記セミナー資料に参考にさせていただいております。
Nomad の挙動や設定テクニックなど、網羅的に記載されているので、ぜひご確認ください。私自身、今後もさまざなシーンでお世話になることになるかと思います。
| 前回 | 作ってみよう | 次回 |
0 件のコメント:
コメントを投稿