UI部品 基本編
| この記事でわかること： ・データの初期表示を早める方法 ・レコード件数が多い場合の対処方法 ・ユーザーからのリクエストがあったタイミングでレコードを読み込む （ロードオンデマンド）の実装方法 |
本記事はForguncy製品サイトで公開しているリストビュー概要資料における、各機能の実装方法を解説したものです。
リストビュー概要資料は下記リンクからご覧いただけます。
| プロジェクトファイル （作成バージョン：(10.0.13.0） | stepup_listview_before.fgcp stepup_listview_after.fgcp（実装済みプロジェクトファイル） |
1.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順1-1.テーブルを確認
プロジェクトには複数のテーブルが内蔵されています。
今回は「社員マスタ」を使用します。
手順1-2.テーブルを確認
プロジェクトには複数のページが内蔵されています。
そのうち、今回使用するページは「データの読み込みタイミング」です。
2.読み込み件数を制御する
ユーザーからのリクエストがあったタイミングでレコードを読み込む設定（ロードオンデマンド）がOFFの状態でも、ページがロードされた時に読み込むデータの件数を指定できます。
デフォルトでは「制限なし」になっており、リストビューに連結されているテーブルのレコードが最初にすべて読み込まれます。
アプリに表示するデータの件数が少ない場合はそのままでも問題ないのですが、レコード数が膨大になると画面の初期表示が遅くなり、パフォーマンスが低下してしまいます。
これを解消するため、読み込み件数の制御処理を実装します。
手順2-1.ページロード時の取得レコード数を制限
ロードオンデマンドがOFFの状態のまま、最初に読み込むレコード数の上限を設定します。
リボンの[デザイン]＞[クエリー]＞[ページロード時の取得レコード数]欄の設定を「制限なし」から「20」に変更します。
この設定でアプリを起動すると最初に読み込まれるレコードは20となり初期表示が早くなります。
しかし、スクロールをしてもそれ以上のレコードを追加で読み込むことはできません。
3.ユーザーのリクエストに応じて追加読み込みを行う
上述の通りロードオンデマンドを設定しなくてもデータ読み込み件数の制限をかけることはできますが、追加読み込みができないため目的のデータを見ることができない等の不便が発生しかねません。
そこで、ロードオンデマンドをONにしてユーザーがリストビューのスクロールを行ったタイミングでデータの追加読み込みを行うよう設定します。
手順3-1.ロードオンデマンドをONに設定
リボンの[デザイン]＞[クエリー]＞[ロードオンデマンド]のアイコンをクリックします。
設定がONになると背景色がグレーに変わり、[追加の読み込みレコード数]欄が入力可能に変化します。
デフォルトは100になっていますが、今回は30に指定します。
これで、ユーザーがリストビューのスクロールをした際に自動で追加のレコードが30ずつ読み込まれるようになりました。
4.デバッグを実行する
デバッグを行うには、動作確認したいページを開いた状態でリボンの[ホーム]>[デバッグ実行]>[▶]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
プロジェクトを実行すると、ページが表示されます。
リストビュー上にはデータが20件しか表示されていませんが、スクロールを行うと表示件数が増加するのが確認できます。
ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。
こちらもぜひご活用ください。
