Dojo

2009年6月14日 (日)

Dojoのインストール (Dojo 1.3.1)

Dojoは http://dojotoolkit.org/downloads からダウンロードできます。基本機能のみで画面部品を含まないDojo Baseのみのパッケージと、すべてを含むパッケージ(Dojo + Dijit + DojoX)がダウンロードできます。

http://download.dojotoolkit.org/ からは、圧縮されていないコメント付きのソースコード(dojo-release-xxx-src.zip)、ドキュメント(dojo-release-xxx-doc.zip)、デモアプリ(dojo-release-xxx-demos.zip)もダウンロードできます。

Dojoを利用するときは、dojo/dojo.jsのロードが必要となります。

以下にDojoを利用した簡単な例を示します。

<html>
<head>
	<script type="text/javascript" src="./dojo/dojo.js"
			djConfig="isDebug: false, parseOnLoad: true"></script>

	<link id="themeStyles" rel="stylesheet" href="./dojo/resources/dojo.css">
	<link id="themeStyles" rel="stylesheet" href="./dijit/themes/tundra/tundra.css">

	<script type="text/javascript">
		dojo.require("dijit.dijit");
		dojo.require("dijit.form.Button");
		dojo.require("dojo.parser");

        function helloPressed(){
			alert('Hello World!');
		}

		function init(){
  			var helloButton = dijit.byId('helloButton');
			dojo.connect(helloButton, 'onClick', 'helloPressed');
		}

		dojo.addOnLoad(init);
   </script>
</head>
<body class="tundra">
	<button dojoType="dijit.form.Button" id="helloButton">Press Me</button>
</body>
</html>

Dojo 1.3.1のまとめ

Dojo 1.3.1について少しずつ書いていきます。ここはまとめページにします。

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

Dojoは、Ajax呼び出しから、イベント処理、タブやツリーなどの各種GUI部品など、広範な機能を提供しており、機能ごとにファイルが分かれていて必要な機能だけを動的にロードする仕組みとなっているのが特徴となっている。ブラウザは、Safari 3.1, Opera 9.6 (Dojo Coreのみ), IE(Windows) 6.0~8.0, Firefox 1.5~3.0(DijitはFirefox 2以上のみ), Konqueror 3.5~(Dojo Coreのみ)に対応している。

概要

2008年6月19日 (木)

洋書ですが今月Dojoの本が3冊出てました。

Developing With Dojoは日本のAmazon.co.jpで4,781円ですが、米国のAmazon.comでは  $26.39  に日本への送料が $8.98で、合計 $35.37と米国のAmazon.comで買った方が安いです。他の2冊もだいたい同じですね。

Developing With Dojo Book Developing With Dojo

著者:Matthew Russell
販売元:Oreilly & Associates Inc
Amazon.co.jpで詳細を確認する

Mastering Dojo: Javascript and Ajax Tools for Great Web Experiences Book Mastering Dojo: Javascript and Ajax Tools for Great Web Experiences

著者:Craig Riecke,Rawld Gill,Alex Russell
販売元:Pragmatic Bookshelf
Amazon.co.jpで詳細を確認する

Dojo: Using the Dojo Javascript Library to Build Ajax Applications (Developer's Library) Book Dojo: Using the Dojo Javascript Library to Build Ajax Applications (Developer's Library)

著者:James Harmon
販売元:Prentice Hall Ptr
Amazon.co.jpで詳細を確認する

2007年8月21日 (火)

ページコンテナ

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

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

このdiv要素の子要素に、各ページに配置するコンテナ要素を指定する。各ページの要素には、dojoType="ContentPane" 属性を指定する。以下の例では、3つのページを作成している。また、属性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>

 

    page1  

 

    page2  

 

    page3  

以下に、表示した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>

2007年8月 8日 (水)

アコーディオン

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

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

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

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

属性概要
labelNodeClassタイトルに適用するCSSのクラス名
containerNodeClass中身に適用するCSSのクラス名
durationブロックの開閉にかかる時間

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

属性概要
labelタイトルに表示する文字列
href表示するHTMLのURLを指定する。
selected最初に開いた状態で表示するブロックに対してtrueを指定する
<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>

Page1

Page2

Page3

2007年8月 5日 (日)

タイトルペイン

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

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

属性概要
labelタイトルに表示する文字列
labelNodeClassタイトルに適用するCSSのクラス名
containerNodeClass中身に適用するCSSのクラス名
href表示するHTMLのURLを指定する。
openfalseを指定すると、初期表示時に非表示となる。

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>

Dojo 0.4.2について少しずつ書いていきます。ここはまとめページ。

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

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

2007年8月 3日 (金)

トースター

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によりメッセージを発行する方法の2つがある。

setContent

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

<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}););

2007年8月 1日 (水)

角丸

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>

てすと

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

属性概要
radius 角の半径。デフォルトは14
corners 4つの角のうち、どれを丸くするか。"TR,TL,BR,BL"のように指定する。"TR,BR"だと右上と右下の角がくなる
antiAlias アンチエリアス処理をするかtrueまたはfalseを指定する

ツールチップ

マウスを指定した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>
text
てすと

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

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

属性概要
connectId Tooltipを付けるHTML要素のID
caption Tooltipとして表示する説明文。captionを指定したときは、Tooltip要素の子要素は不要
showDelay マウスを置いてからTooltipを表示するまでの時間
hideDelay マウスが外れてからTooltipを隠すまでの時間
toggle Tooltipの表示方法として、"plain", "wipe", "fade", "explode"のいずれかを指定できる
toggleDuration toggleで指定した効果の実行時間をミリ秒単位で指定する
href Tooltipに表示する内容としてHTMLのURLを指定する
executeScripts hrefでURLを指定したときにHTML内のJavaScriptを有効にするか、true/falseで指定する

2007年7月30日 (月)

ヘルプ付きのテキストボックス

div要素にdojoType="dropdowncontainer"を指定すると、ヘルプ付きのテキストボックスが作成される。 テキストボックスの右側にはアイコンが配置され、アイコンを押すと指定したヘルプ内容のHTML要素が表示される。 利用するときは、DropdownContainerをrequireする。

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

DropdownContainerのdiv要素は以下の属性を指定できる。その子要素にヘルプとして表示する内容を指定する。

属性概要
inputWidth テキストボックスのサイズ
inputId テキストボックスのId
inputName テキストボックスのname
iconURL アイコンのURL
iconAlt アイコンのalt属性
containerToggleDuration アイコンを押してからヘルプが表示されるまでの時間

 
<style type="text/css">
.popup {
  border: 3px solid blue;
  background-color: white;
  text-align:left;
}
</style>
<div dojoType="dropdowncontainer" id="foo">
  <div class="popup">
    入力フォームに名前を入力して下さい。<br/>
    必須入力です。
  </div>
</div>

より以前の記事一覧

その他のカテゴリー