Dojo/JavaScript Toolkitのメモ

PageContainerを用いることで、ページを切り替えるようなレイアウトを作成できる。

まず、配置する場所に、属性 dojoType="PageContainer" を持つdiv要素を作成する。

このdiv要素の子要素に、各ページに配置するコンテナ要素を指定する。各ページの要素には、dojoType="ContentPane" 属性を指定する。以下の例では、３つのページを作成している。また、属性selected="true"を指定したページ要素がデフォルトの表示ページとなる。

<script type="text/javascript">
  dojo.require("dojo.widget.PageContainer");
  dojo.require("dojo.widget.ContentPane");
</script>

<style>
  .mycontainer {width:300px; height:200px; border:3px dashed aqua; margin: 1em;}
</style>

<div id="myPageContainer" dojoType="PageContainer" class="mycontainer">
  <p id="page1" dojoType="ContentPane" label="page 1">
    page1
  </p>
  <p id="page2" dojoType="ContentPane" selected="true" label="page 2">
    page2
  </p>
  <p id="page3" dojoType="ContentPane" label="page 3">
    page3
  </p>
</div>

以下に、表示したPageContainerのページを切り替える例を示す。

<

>

PageControllerを作ることで、前ページのインデックスを作成できる。また、PageContainerのwidgetに対して、back()、forward()メソッドを呼ぶことで、ページを切り替えることもできる。

<script type="text/javascript">
  dojo.require("dojo.event.topic");

  function selected(page){
    dojo.byId("previous").disabled = page.isFirstChild;
    dojo.byId("next").disabled = page.isLastChild;
  }
  dojo.addOnLoad(function(){
    dojo.event.topic.subscribe("myPageContainer-selectChild", selected);
  });
</script>

<style>
  .dojoPageController .item { margin: 0px 5px 0px 5px; }
  .dojoPageController .selectButton { text-decoration: underline; cursor: pointer; margin-right: 3px;}
  .dojoPageController .closeButton { cursor: pointer; };
  .dojoPageController .item { color: #333366; }
  .dojoPageController .current { color: blue; font: bold;}
</style>

<button id="previous" onClick="dojo.widget.byId('myPageContainer').back()"><</button>
<div dojoType="PageController" containerId="myPageContainer"></div>
<button id="next" onClick="dojo.widget.byId('myPageContainer').forward()">></button>

AccordionContainerは、複数のタイトル付きブロックを作成する。このとき、常に表示されるブロックは１つのみとなる。 AccordionContainerの一つのブロックのみを見るとTitlePaneに似ている。

いずれかのタイトルをクリックすると、アコーディオンのように表示されていたブロックが閉じられ、クリックしたタイトルのブロックが表示される。

AccordionConpainerを利用するときは、dojo.widget.AccordionContainerをrequireする。まず、属性dojoType="AccordionContainer"を付けたdiv要素を作成し、その子要素としてContentPaneを並べる。このContentPaneがブロックになる。

AccordionContainerの属性として以下を指定できる。

ContentPaneの属性として以下を指定できる。また、ContentPaneは onShow, onHideのイベントを指定できる。

<script type="text/javascript">
  dojo.require("dojo.widget.AccordionContainer");
  dojo.require("dojo.widget.ContentPane");
</script>

<div dojoType="AccordionContainer" duration="200" 
     labelNodeClass="label" containerNodeClass="accBody"
     style="float:left; width:300px; height:300px; overflow:hidden">

  <div dojoType="ContentPane" selected="true" label="Pane 1" style="overflow: scroll;">
    <p>Page1</p>
  </div>

  <div dojoType="ContentPane" label="Pane 2" style="display:none;">
    <p>Page2</p>
  </div>

  <div dojoType="ContentPane" label="Pane 3" style="display:none;">
    <p>Page3</p>
  </div>
</div>

TitlePaneは、タイトルとその内容を表示し、タイトルをクリックすることで、その内容の表示/非表示を切り替えできる。

TitlePaneを作るときは、dojo.widget.TitlePaneをrequireし、属性 dojoType="TitlePane"を付けたdiv要素を作成する。TitlePaneのdiv要素には以下の属性を設定できる。

TitlePaneのdiv要素の子要素がTitlePaneの内容となる。内容を子要素で指定するのではなく、href属性でURL指定することもできる。

<style type="text/css">
.label {
  width: 300px;
  background: #ffa500;
  border-top: 1px solid #dc143c;
  border-bottom: 1px solid #dc143c;
}
.content {
  width: 300px;
  background: #fff8dc;
}
</style>

<script type="text/javascript">
dojo.require("dojo.widget.TitlePane");
</script>

<div dojoType="TitlePane" label="タイトル" 
     labelNodeClass="label" containerNodeClass="content">
Dojo 0.4.2について少しずつ書いていきます。ここはまとめページ。

<p>Dojo http://dojotoolkit.org/ は、The Dojo Foundationにより
提供されているオープンソースのJavaScriptツールキットである。</p>

<p>Dojoは、Ajax呼び出しから、イベント処理、タブやツリーなどの
各種GUI部品など、広範な機能を提供しており、機能ごとにファイル
が分かれていて必要な機能だけを動的にロードする仕組みとなって
いるのが特徴となっている。ブラウザは、Safari 2.0.x, Opera 9.0+,
 IE(Windows) 6.0+, Firefox 1.0+/Mozilla, Konqueror 3.5+に対応
している。 </p>
</div>

Toasterは、ブラウザの端からポップアップされるメッセージを表示する。Toasterを利用するときは、dojo.widget.Toasterをrequireする。

Toasterを作成するには、dojoType="toaster"を指定したdiv要素を作成する。positionDirection属性により表示する位置を指定できる。表示位置は、"br-up", "br-left", "bl-up", "bl-right", "tr-down", "tr-left", "tl-down", "tl-right"のように指定できる。

Toasterを表示する方法は、setContentメソッドを用いる方法と、dojo.event.topic.publishによりメッセージを発行する方法の２つがある。

setContent

Toaster widgetに対して、setContentメソッドを実行することでメッセージが表示される。setContentは、メッセージとして表示する文字列、メッセージの種類、メッセージの表示時間の３つの引数を指定して実行する。メッセージの種類には"MESSAGE", "WARNING", "ERROR", "FATAL"の４つのいずれかを指定できる。指定したメッセージの種類によって表示されるメッセージの背景色が変わる。

<script type="text/javascript">
dojo.require("dojo.widget.Toaster");

function showToasterMessage(){
  var toast = dojo.widget.byId("toast");
  toast.setContent('てすと', "MESSAGE", 500);
}
</script>

<div dojoType="toaster" id="toast" positionDirection="br-left"></div>
<button type="submit" onclick="showToasterMessage();">click</button>

publich

dojoType="toaster"を指定したdiv要素において、messageTopic属性としてtopic名を指定したとき、同じtopic名でメッセージを発行することで、Toasterのメッセージを表示することもできる。

<script type="text/javascript">
function showToasterMessage2(){
  dojo.event.topic.publish("testTopic", "てすと");
}
</script>

<div dojoType="toaster" id="toast2" positionDirection="br-left" showDelay="4000" messageTopic="testTopic"></div>
<button type="submit" onclick="showToasterMessage2();">click</button>

publishするメッセージは、文字列だけでなく、次のようなオブジェクトも指定できる。

  dojo.event.topic.publish("testTopic", {message: "てすと", type: "ERROR", delay: 500}););

dojo.widget.Roundedを用いてHTML要素の角を丸くできる。

角を丸くしたいHTML要素にdojoType="rounded"を指定する。

<script type="text/javascript">
dojo.require("dojo.widget.Rounded");
</script>

<div dojoType="rounded" style="width:150px;background-color:#EAF2FF;">てすと</div>

以下の属性を指定することもできる。

マウスを指定したHTML要素の上に置いたときに、説明などの情報をポップアップ表示するTooltipを作成できる。 Tooltipを作成するときは、dojo.widget.Tooltipをrequireする。

dojo.require("dojo.widget.Tooltip");

TooltipはdojoType="tooltip"を指定して作成する。このとき、connectId属性としてTooltipを付けるHTML要素のIDを指定する。dojoType="tooltip"を指定したHTML要素の子要素に、Tooltipとして表示する内容を指定する。

以下の例では、文字列「text」にマウスを置くと「てすと」とポップアップ表示される。

<div id="one">text</div>
<div dojoType="tooltip" connectId="one" toggle="explode">
  <div style="color: blue;">てすと</div>
</div>

Tooltipとして表示する内容は、子要素として指定するだけでなく、caption属性として文字列、href属性としてURL指定することもできる。

その他、Tooltipは以下の属性を指定できる。