ValenceのApp Builderで作成したアプリケーションは、配置したウィジェットの高さがレイアウトによって自動的に決まります。
そのため、一覧と明細を縦に並べた画面で「一覧をもっと多く表示したい」「明細を広く見たい」と思っても、利用者側で表示領域を調整することはできません。
本Tipsでは、ユーティリティウィジェットの「Vertical Layout」を使用して、ウィジェットの高さを実行時に動的に変更する方法をご紹介します。
Vertical Layoutウィジェットについて
「Vertical Layout」は、App Builderのユーティリティウィジェットに含まれるレイアウト用のコンテナウィジェットです。
内部に配置したウィジェットを縦方向に並べて表示します。
このウィジェット自体は画面に何かを表示するものではありませんが、「ウィジェットオプション」で以下のような実行時の振る舞いを、内包したウィジェットに対してまとめて設定できます。
- ウィジェットのサイズ変更を許可 … 実行時に利用者が高さをドラッグで変更できるようにする
- ウィジェットの折りたたみを許可 … 実行時に利用者がウィジェットを折りたためるようにする
今回はこのうち「ウィジェットのサイズ変更を許可」を使用します。
設定手順
今回は、商品マスタの一覧を表示するGridウィジェット「PGM020_商品一覧」と、選択した商品の内容を表示するFormウィジェット「PGM020_商品詳細」の2つを、Vertical Layoutに配置します。
1. Vertical Layoutウィジェットを追加する
アプリケーション編集画面の左下にある「ウィジェットの追加」ボタンをクリックします。
「ウィジェットの追加」画面が表示されるので、「ユーティリティ ウィジェット」タブを選択します。
「Vertical Layout」を選択すると名前の入力画面が表示されます。
ここで指定した名前は、スクリプトからgetWidget()で参照する際にも使用します。今回は「VL01」としました。
「OK」をクリックすると、編集画面にVertical Layoutウィジェットが追加されます。
追加直後は中身が空のため、専用のツールバーだけが表示された空白の領域となります。
3. Vertical Layout内にウィジェットを配置する
追加した「Vertical Layout」ウィジェットの下部にあるツールバーの「＋」アイコンをクリックすると、Vertical Layout内にウィジェットを追加できます。
ここでは「PGM020_商品一覧」（Grid）と「PGM020_商品詳細」（Form）を順に追加しました。追加した順に上から縦方向に並びます。
なお、画面左下の「ウィジェットの追加」ボタンから追加した場合はアプリケーション直下に配置され、Vertical Layoutの内側には入りません。
必ずVertical Layoutウィジェット下部の「＋」アイコンから追加してください。
4. 「ウィジェットのサイズ変更を許可」を有効にする
Vertical Layoutウィジェット下部のツールバーにある設定（歯車）アイコンをクリックすると、画面左側に設定パネルが表示されます。
このとき、Vertical Layoutが対象としている範囲がハイライト表示されるため、意図した構成になっているかを確認できます。
設定パネルの「ウィジェットオプション」＞「デスクトップのみ」を展開し、「ウィジェットのサイズ変更を許可」にチェックを入れます。「OK」をクリックして設定パネルを閉じ、画面右下の保存アイコンでアプリケーションを保存します。以上で設定は完了です。
動作確認
アプリケーションを起動すると、Vertical Layout内に配置した商品一覧と商品詳細が縦に並んで表示されます。
この時点では、2つのウィジェットに均等な高さが割り当てられています。
ウィジェットの境界にマウスカーソルを合わせるとサイズ変更用のカーソルに変わり、そのままドラッグすると高さを変更できます。
商品一覧の下端を下方向へドラッグすると一覧の高さが広がり、一度に確認できる行数が増えます。
逆に上方向へドラッグすると商品一覧が縮み、その分だけ商品詳細の表示領域が広がります。
項目数の多いフォームでもスクロールせずに全体を確認できます。
このように、アプリケーションを作り直すことなく、利用者がその時の作業内容に合わせて表示領域の配分を調整できるようになります。
設定時の注意点
- 設定項目が「デスクトップのみ」の配下にある通り、この機能はデスクトップ（PCブラウザ）での表示が対象です。モバイル表示ではサイズ変更は行えません。
- サイズ変更が有効になるのは、Vertical Layoutの内側に配置したウィジェットです。Vertical Layoutの外に配置したウィジェットは対象外となります。
- 変更した高さはその場の表示に対するもので、アプリケーションの定義自体が書き換わるわけではありません。
- 同じ「デスクトップのみ」にある「ウィジェットの折りたたみを許可」と併用すると、使わないウィジェットを畳んで画面を広く使うこともできます。
おわりに
Vertical Layoutウィジェットを使用すると、チェックボックス1つでウィジェットの高さを利用者が動的に変更できるようになります。
スクリプトを記述する必要もないため、既存のアプリケーションにも手軽に組み込めます。
一覧の表示件数や入力欄の広さについて要望が挙がった際の選択肢として、ぜひお試しください。