Dojo BorderContainer レイアウト

Dojo に手を出し始めた。ので、API ドキュメントを確認しながら、少しずつつくっていこうかな。

ということで、先ずは、レイアウト。スタートラインとして、BorderContainer を試してみる。

BorderContainer

概要

BorderContainer は、 style="width: 500px; height: 500px;"のように、サイズを指定するボックス
region="center"(オプションで、"top"、"bottom"、"leading"、"trailing"、"left"、"right")でマークされた子ウィジェットを含むことができる
子要素は、幅および高さおよびオプションのスプリッター(ユーザーによりリサイズ可能)にあわせてレイアウトされる
残りのスペースは、center 領域のため使用される

外側のサイズはBorderContainer ノードを規定する。幅は、両側および高さを規定する
centerのサイズを指定しないと、残りのスペースで埋められる
"leading" および "traling" 領域は、"left"および"right"のどちらかのみ使用する

複雑なレイアウトの場合、複数の子要素を一つの領域に設定できる
子要素の layoutPrioryty(レイアウト優先度) フラグはどの子供がより端に近い(レイアウト優先度が低い)か、より中心に近いか(レイアウト優先度が高い)を決定する
layoutPrioryty(レイアウト優先度)は、コントロールレイアウトの水平、垂直優先順位属性の代わりにも使用できる

例

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="js/dijit/themes/claro/claro.css"/>
  <style type="text/css">
  html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow:hidden;
  }
  #border_container{
    width:100%;
    height:100%;
  }
  </style>
  <title></title>
</head>
<body class="claro">

  <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters: true" id="border_container">
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">
    top
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'leading', splitter: true" style="left: 100px;">
    leading
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true">
    contents
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'trailing', splitter: true" style="left: 100px;">
    trailing
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', splitter: true">
    bottom
    </div>
  </div>

  <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true">
  </script>
  <script type="text/javascript">
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.addOnLoad(function(){
    
    
  });
  </script>
</body>
</html>

ふーん。

Follow me!

@pppiroto