BAWで画面を作成する際には入力フィールドなどを様々なレイアウトで配置することになります。BAWではレイアウトを行うための様々な方法が提供されます。この記事では基本的なレイアウト方法とその使い分けについて説明します。
１．グリッド
BAWで画面を作成する際の、最も便利で洗練された手法がグリッドです。基本的にはグリッドを使用すれば十分であるケースは多いです。
bootstrapのGridシステムと同様に、横幅を12カラムに分割し、コンテナーを配置することが可能です。
実際に表示される際に横幅は自動で調整されます。
コンテナー内のレイアウトを縦方向、横方向に指定することが可能です。また、水平スパンを指定することで明示的に横幅の割合を指定することもできます。
２．垂直レイアウト、水平レイアウト
水平セクション、垂直セクションを用いることで配置することも可能です。以前はグリッドシステムが存在しなかったため、この方法を用いてレイアウトを行っている人も多いのではないでしょうか？
垂直レイアウト、水平レイアウトを配置し、その中に画面部品を配置することで水平、垂直にレイアウトすることが可能です。
垂直レイアウト、水平レイアウトのもっとも大きな特徴は、配列側の変数をバインドできるという事です。つまり、表示する数が動的に決定される要素を表示する際に適しているという事です。例えば社員情報をカードのように縦に複数表示するようなケースでは垂直レイアウト内に、顔写真や氏名を表示する画面を配置し、社員型の変数の配列をバインドすることで効率よく表示することが可能です。
なお、グリッド上に配置したい際に、垂直レイアウトの中に水平レイアウトを配置（1行目はそのままテキストを配置、2行目は水平レイアウトを配置し、その中に2つのテキストを配置）すると、以下のようにマージンがずれます。これをそろえるにはマージンを調整するか、必要のない水平レイアウトを1行目に追加する必要があるので、このような使い方はあまりお勧めしません。
３．テーブル・レイアウト
テーブル・レイアウトを使用することで、HTMLのTableタグを用いるのと同等にレイアウトを行うことも可能です。グリッドや垂直・水平レイアウトを用いるのとは異なり、各セルの横幅などを細かく指定し、rowspanやcolspanを指定し、複数セルを結合したいというケースには有効です。
以下のようにテーブル・レイアウトを配置し、その中に、テーブル・レイアウトの行、テーブル・レイアウトのセルを配置することでテーブル上の表示が可能です。
エディタ上ではいわゆるWYSIWYG表示とならないことに注意してください。
HTML属性としてcolspanやrowspanを指定することでセルの結合が可能です。
4．CSSによるレイアウト
当然ですが、CSSを用いることで、通常のWebページをデザインするのと同様に細かくレイアウトを調整できます。その際にCSSライブラリなどを使用することも可能です。既に手組で開発している他のアプリケーションとレイアウト方法を共有化したい場合などに利用することは考えられますが、基本的にはCSSを細かく調整するのは全体のレイアウトの調整というよりは、細かい表示の調整や、色、フォントなどの調整に利用することが多いでしょう。
なお、画面にCSSを読み込むには、様々な方がありますが、CSS読み込み用の表示部品を作成し、画面に配置することが一般的です。
また、既存の部品の基本的な表示の変更にはテーマという仕組みを活用することも可能です。テーマについてはこちらのマニュアルの説明を参照してください。
まとめ
いかがでしたでしょうか？BAWでは画面レイアウトを効率的に行うための様々な仕組みが提供されます。
目的や用途に応じて適切に使い分けることで、より効率的に、また、保守性の高い画面を開発することが可能になります。これまで、垂直・水平レイアウトしか使ってこなかったという人は是非一度他の方法も試してみてください。
#BusinessAutomationWorkflow(BAW)#baw