dojo Dijitコンポーネントによるレイアウトの設定

管理コンソール風レイアウト：LayoutContainer、ContentPane

図2 LayoutContainerによるレイアウトは管理コンソール風

　LayoutContainer全体をそれぞれのContentPaneで4分割し、図2のようなレイアウトで表示する。ContentPaneの表示位置は、リスト2-3に示すとおりlayoutAlign属性のtop/left/client/bottomで設定する。これらは図2で示した［top］などの位置に対応する。

　表示位置以外のデザインは、リスト2-2のようにCSSで設定することができる。これらのコンポーネントは、リスト2-1のようにあらかじめJavaScriptで読み込ませておかなくてはならない。なお、リスト2-1からリスト2-3はいずれも抜粋である。

リスト2-1 JavaScript

dojo.require( 'dojo.parser' );
dojo.require( 'dijit.layout.LayoutContainer' );
dojo.require( 'dijit.layout.ContentPane' );

リスト2-2 CSS

@import "js/dijit/themes/tundra/tundra.css";
@import "js/dojo/resources/dojo.css";

ul {
  margin-left  : 1em;
  padding-left : 1em;
}
div#ex1  {
  width  : 300px;
  height : 150px;
  margin : 10px;
}
div#ex1 div {
  border  : 1px solid #000;
  padding : 3px;
}
div#cp1  {   /* top */
  background-color : #fc9;
}
div#cp2  {   /* left */
  width : 100px;
}
div#cp3  {   /* client */
  background-color : #9fc;
}
div#cp4  {   /* bottom */
  background-color : #c9f;
}

リスト2-3 HTML

<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad : true"></script>
<div id="ex1" dojoType="dijit.layout.LayoutContainer">
   <div id="cp1"
       dojoType="dijit.layout.ContentPane" layoutAlign="top">
    JavaScriptライブラリ - dojo [top]
  </div>
  <div id="cp2"
       dojoType="dijit.layout.ContentPane" layoutAlign="left">
    dojo [left]
    <ul>
      <li>dojo Core</li>
      <li>Dijit</li>
      <li>DojoX</li>
    </ul>
  </div>
  <div id="cp3"
       dojoType="dijit.layout.ContentPane" layoutAlign="client">
    dojoは、画面コンポーネントDijit、拡張機能DojoXを含む、機能豊富なJavaScriptライブラリです。 [client]
  </div>
  <div id="cp4"
       dojoType="dijit.layout.ContentPane" layoutAlign="bottom">
    LayoutContainerによるレイアウト [bottom]
  </div>
</div>

　これ以外にも、タブ（TabContainer）や画面分割（SplitContainer）などのレイアウトが用意されているので、Dijit at a Glanceを参照して使いこなしていただきたい。

　次回はdojoの拡張機能であるDojoXを紹介したい。