SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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の場合のみ背景色をつけています。

次のページ
実際にBorderContainerを利用してアプリケーション画面を作る

この記事は参考になりましたか?

「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

松岡 健介(マツオカ ケンスケ)

日本アイ・ビー・エム株式会社 ソフトウェア開発研究所勤務。 Dojo Toolkitを駆使したエンタープライズ・アプリケーションのフロントエンド開発を担当。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/6395 2012/02/17 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー