Dojo道場 ～ 第9回「ウィジェット・レイアウト詳解」

「Dojo道場」～実用アプリ構築のためのベストプラクティス

BorderContainerの持つプロパティ

　BorderContainerにはいくつかの重要なプロパティがあり、レイアウトの仕方や挙動を制御することができます。例えばDesignプロパティにはheadlineかsidebarのどちらかを指定することで、レイアウトのスタイルを切り替えられます。 先ほどの例では、designを指定していないのでheadlineデザインになり、topの領域が幅いっぱいにレイアウトされているのが分かるかと思います。

表1：BorderContainerのプロパティ

プロパティ	値	初期値	説明
design	"headline"か"sidebar"	"headline"	左右と上下の領域のぶつかる四隅のレイアウトを切り替える
gutters	true/false	true	trueだと子ウィジェット間に隙間が作られ、さらにボーダーで仕切られる
liveSplitters	true/false	true	trueだと、子ウィジェットがサイズ変更可能な場合、ドラッグ中にウィジェットのサイズを変更する
persist	true/false	false	trueだと、サイズ変更の情報をCookieに保存

　子ウィジェットにはregionプロパティ（必須）とsplitterプロパティ（任意）を指定することができ、regionプロパティにはleft, right, top, bottom, centerに加えてleadingとtrailingが指定できます。leadingとtrailingは、通常はそれぞれleftとrightと変わりませんが、アラビア語などの環境で画面の左右が反転する際には自動的に左右を切り替えてくれます。splitterプロパティは、trueを指定するとそのウィジェットに隣接してsplitter（枠）が現れ、これをドラッグすることでサイズ変更できるようになります。

　center領域は若干特殊で、各BorderContainerに必ず一つ存在している必要があります。つまり、leftとrightのような組み合わせはできません。また、center領域にはsplitterプロパティやサイズを指定できません。center領域は「上下左右を配置して残った領域」と考えると分かりやすいかと思います。

　以下に、様々なプロパティの組み合わせの例を示します。

※領域の境目がわかるように、gutters=falseの場合のみ背景色をつけています。