dojoの基本的な方法の紹介
9973 ワード
一度だけmoduleUrl(module,url)
モジュール開発では、画像、cssファイルなどの外部のリソースファイルを参照する場合があります.通過するmoduleUrl(module,url)はモジュール内のモジュールに対するパスを実際のアクセスパスに変換することができ、パラメータmoduleはモジュール名を表し、urlはモジュールに対するパスであり、dojo._を返す.urlオブジェクト、例えばdojo.moduleUrl(「example」,「image/log.jpg」)はjs/example/image/logを表す.jpg.
二混入(mixin)とdojo.extend
あるJavaScriptオブジェクトで別のJavaScriptオブジェクトの機能を拡張する必要がある場合があります.すなわち、あるJavaScriptオブジェクトを別のオブジェクトに混入する必要があります.dojo.mixin()法はこのような能力を提供する.この方法は,複数のJavaScriptオブジェクトをパラメータとして受け入れ,パラメータが右から左の順に混入する.最初のパラメータが示すオブジェクトには、他のパラメータオブジェクトのすべてのプロパティが含まれます.同じ名前のプロパティでは、右パラメータオブジェクトの値が左パラメータオブジェクトの値を上書きします.dojo.mixin()の一般的な使い方の一つは、処理オプションのデフォルト値です.適用は一般的にオプションにデフォルト値を提供し、ユーザーはカスタム値を提供します.実際に使用した値は、ユーザーが指定した値がデフォルト値を上書きした後の結果である必要があります.コードリスト11にはdojoが示す.mixin()の一例です.
リスト11.dojo.mixin()の例
コードリスト11でdojo.mixin()の最初のパラメータは、新しく作成された空のJavaScriptオブジェクトです.このような利点は、返される結果が新しく作成されたオブジェクトであり、既存のオブジェクトに無意識に変更されないことです.
その他の方法
それ以外はdeclare()とdojo.mixin()のほか、Dojoベースライブラリでは、以下のような方法がいくつか用意されています.
dojo.extend(constructor,props):このメソッドはpropsのすべての属性とメソッドをconstructorのプロトタイプ(prototype)に追加します.これらのプロパティとメソッドはconstructorのすべてのインスタンスに表示されます.
dojo.delegate(obj,props):このメソッドは新しいオブジェクトを返します.このオブジェクトにはpropsのプロパティとメソッドが含まれます.オブジェクトに属性が見つからない場合、objオブジェクトで検索が続行されます.
dojo.getObject(name,create,context):このメソッドはcontextオブジェクトからnameという名前のプロパティを取得するために使用されます.name属性はcomに類似する.example.abcのような「.」区切りの形式.パラメータcreateの値がtrueであることを指定すると、属性nameが存在しない場合、その属性が作成され、その値が空のオブジェクトに設定されます.contextオブジェクトを指定しない場合、デフォルトはグローバルオブジェクトdojoです.global.
dojo.setObject(name,value,context):オブジェクトcontextに名前がname、値がvalueのプロパティを作成します.属性nameも「.」をサポート区切りの形式.contextオブジェクトを指定しない場合、デフォルトはグローバルオブジェクトdojoです.global.
dojo.exists(name,obj):オブジェクトobjに属性nameが含まれているかどうかを判断します.属性nameも「.」をサポート区切りの形式.objオブジェクトを指定しない場合、デフォルトはグローバルオブジェクトdojoです.global.
3日間connect
dojoを使うconnect()イベントプロセッサを追加するのは便利で、ブラウザ間での問題を考慮する必要はありません.しかし、この方法を正しく使用するには、いくつかの問題に注意しなければなりません.
1、dojoを使う.byId()はdom要素を取得しdijit.byId()はdojo widgetを取得しており、この2つの点は根本的に異なる.
2、イベント名の大文字と小文字が重要で、dom要素にイベントプロセッサを追加する場合、イベント名は小文字にし、例えばclickイベントはclickまたはonclickでもよいが、必ずc文字を小文字にしなければならない.dojo widgetにイベントプロセッサを追加する場合は、clickイベントなどのイベント名がdojoの仕様に合致する必要があります.onClickと書く必要があります.アルファベットoは小文字で、アルファベットcは大文字でなければなりません.
3、あるページ要素にイベントプロセッサを追加する場合は、必ずこの要素がdom要素なのかdojo widgetなのかによってdojoをそれぞれ使用する.byId()またはdijit.byId()を使用して要素参照を取得します.むやみに使用すると、結果が追加に失敗したり、異常な状況が発生したりする可能性があります.
以上のいくつかの問題に注意して、dojoを正しく使います.接続()メソッドは問題ありません.
四認識dojoのインタフェースコントロールdijit
ドロップダウン:dijit.form.FilteringSelect
http://dojotoolkit.iteye.com/blog/764797
dijit.form.ComboBox
http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro5/
5ページ部分マスク、DialogUnderlay
覚えてるよDialogバーは、Dialogを開くとページがすべて遮られ、ユーザーは操作できません.この間、あるネットユーザーが私に一部の遮蔽がどのように実現されるかという問題を提起しました.当時は書く時間がなかったので、今書いてください.
実はDialogの内容を使っています.このクラスはdijit.DialogUnderlay()
次の例を示します.
六dojopalce
dojo.place移動domノード
7 DojoのdojoAttachPoint
Dojo declarationやDojo templateでは、dojo AttachPoint=「xxx」という文をよく見かけますが、文書を調べてみると、やっと理性的な認識が得られました.
実はJavaScriptでthisを使うことができます.xxxはこの要素を参照します.
以下に例を示します.
jsでthead,trを変更する場合はdojoAttachPointで指定した別名head,headRowでthead,trを参照して操作できます.より深く理解すると,thead,trがページのDOMツリーにそれぞれDOMノードに対応しており,JSがDOMツリーを操作する場合,DOMノードのインスタンスを得る場合にのみ操作が行われる.
例えば、上記の例のテーブルでは、tdノードを1つ追加する場合、trのinstanceを取得し、操作します.JSで実装されるコードは以下の通りである.
実はこれを使ってもいいです.headRow引用
IDを設定してbyIdでdomノードを手に入れても何の違いもありませんが、これだけは便利です
八.これで終わりだinherited(arguments)
dojoではよくthisに遭遇しますinherited(arguments).これはdojoの内部メソッドで、ベースクラスにコードが存在するメソッドを検索し、知るまで呼び出すために使用されます.
九.dojo.Defered
dojoはdojoを提供します.Deferedは非同期操作を抽象化し、一つの方法が非同期であればdojoを使用することができる.Deferedは戻り値として,非同期動作に典型的な方法はコールバックメソッドを追加することである.非同期操作が完了すると、コールバックメソッドが呼び出され、特定の処理ロジックが実行されます.
十.dojo.formToObject
formaリクエスト全体のデータを取得するには、次の手順に従います.
Adding a new Player
モジュール開発では、画像、cssファイルなどの外部のリソースファイルを参照する場合があります.通過するmoduleUrl(module,url)はモジュール内のモジュールに対するパスを実際のアクセスパスに変換することができ、パラメータmoduleはモジュール名を表し、urlはモジュールに対するパスであり、dojo._を返す.urlオブジェクト、例えばdojo.moduleUrl(「example」,「image/log.jpg」)はjs/example/image/logを表す.jpg.
二混入(mixin)とdojo.extend
あるJavaScriptオブジェクトで別のJavaScriptオブジェクトの機能を拡張する必要がある場合があります.すなわち、あるJavaScriptオブジェクトを別のオブジェクトに混入する必要があります.dojo.mixin()法はこのような能力を提供する.この方法は,複数のJavaScriptオブジェクトをパラメータとして受け入れ,パラメータが右から左の順に混入する.最初のパラメータが示すオブジェクトには、他のパラメータオブジェクトのすべてのプロパティが含まれます.同じ名前のプロパティでは、右パラメータオブジェクトの値が左パラメータオブジェクトの値を上書きします.dojo.mixin()の一般的な使い方の一つは、処理オプションのデフォルト値です.適用は一般的にオプションにデフォルト値を提供し、ユーザーはカスタム値を提供します.実際に使用した値は、ユーザーが指定した値がデフォルト値を上書きした後の結果である必要があります.コードリスト11にはdojoが示す.mixin()の一例です.
リスト11.dojo.mixin()の例
var defaultOptions = {
lang : "zh_CN",
maxLength : 100
};
function getOptions(userOptions) {
return dojo.mixin({}, defaultOptions, userOptions);
}
getOptions({
lang : "en"
});コードリスト11でdojo.mixin()の最初のパラメータは、新しく作成された空のJavaScriptオブジェクトです.このような利点は、返される結果が新しく作成されたオブジェクトであり、既存のオブジェクトに無意識に変更されないことです.
その他の方法
それ以外はdeclare()とdojo.mixin()のほか、Dojoベースライブラリでは、以下のような方法がいくつか用意されています.
dojo.extend(constructor,props):このメソッドはpropsのすべての属性とメソッドをconstructorのプロトタイプ(prototype)に追加します.これらのプロパティとメソッドはconstructorのすべてのインスタンスに表示されます.
dojo.delegate(obj,props):このメソッドは新しいオブジェクトを返します.このオブジェクトにはpropsのプロパティとメソッドが含まれます.オブジェクトに属性が見つからない場合、objオブジェクトで検索が続行されます.
dojo.getObject(name,create,context):このメソッドはcontextオブジェクトからnameという名前のプロパティを取得するために使用されます.name属性はcomに類似する.example.abcのような「.」区切りの形式.パラメータcreateの値がtrueであることを指定すると、属性nameが存在しない場合、その属性が作成され、その値が空のオブジェクトに設定されます.contextオブジェクトを指定しない場合、デフォルトはグローバルオブジェクトdojoです.global.
dojo.setObject(name,value,context):オブジェクトcontextに名前がname、値がvalueのプロパティを作成します.属性nameも「.」をサポート区切りの形式.contextオブジェクトを指定しない場合、デフォルトはグローバルオブジェクトdojoです.global.
dojo.exists(name,obj):オブジェクトobjに属性nameが含まれているかどうかを判断します.属性nameも「.」をサポート区切りの形式.objオブジェクトを指定しない場合、デフォルトはグローバルオブジェクトdojoです.global.
3日間connect
dojoを使うconnect()イベントプロセッサを追加するのは便利で、ブラウザ間での問題を考慮する必要はありません.しかし、この方法を正しく使用するには、いくつかの問題に注意しなければなりません.
1、dojoを使う.byId()はdom要素を取得しdijit.byId()はdojo widgetを取得しており、この2つの点は根本的に異なる.
2、イベント名の大文字と小文字が重要で、dom要素にイベントプロセッサを追加する場合、イベント名は小文字にし、例えばclickイベントはclickまたはonclickでもよいが、必ずc文字を小文字にしなければならない.dojo widgetにイベントプロセッサを追加する場合は、clickイベントなどのイベント名がdojoの仕様に合致する必要があります.onClickと書く必要があります.アルファベットoは小文字で、アルファベットcは大文字でなければなりません.
3、あるページ要素にイベントプロセッサを追加する場合は、必ずこの要素がdom要素なのかdojo widgetなのかによってdojoをそれぞれ使用する.byId()またはdijit.byId()を使用して要素参照を取得します.むやみに使用すると、結果が追加に失敗したり、異常な状況が発生したりする可能性があります.
以上のいくつかの問題に注意して、dojoを正しく使います.接続()メソッドは問題ありません.
：
<button id=”btn”>Click Me!</button>
<script type=”text/javascript”>
dojo.connect(dojo.byId(‘btn’), ‘onclick’, null, handler);
</script>
：
<button id=”btn” dojoType=”dijit.form.Button” label=”Click Me!”></button>
<script type=”text/javascript”>
dojo.connect(dijit.byId(‘btn’), ‘onClick’, null, handler);
</script>四認識dojoのインタフェースコントロールdijit
ドロップダウン:dijit.form.FilteringSelect
http://dojotoolkit.iteye.com/blog/764797
dijit.form.ComboBox
http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro5/
5ページ部分マスク、DialogUnderlay
覚えてるよDialogバーは、Dialogを開くとページがすべて遮られ、ユーザーは操作できません.この間、あるネットユーザーが私に一部の遮蔽がどのように実現されるかという問題を提起しました.当時は書く時間がなかったので、今書いてください.
実はDialogの内容を使っています.このクラスはdijit.DialogUnderlay()
次の例を示します.
<html>
<head>
<title>Button Widget Dojo Tests</title>
<style type="text/css">
@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/tundra/tundra.css";
.tab1{
margin:0px;
padding:0px;
}
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true"
src="../js/dojo/dojo.js"></script>
<script language="javascript" src="../js/dijit/dijit.js"></script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
function bkifm(){
var d=dojo.byId("div1");
var pos=dojo.contentBox(d);
var bg=new dijit.DialogUnderlay();
// layout
bg.layout=function(){
var is = this.node.style,
os = this.domNode.style;
os.top = d.offsetTop + "px";
os.left = d.offsetLeft + "px";
is.width = 300 + "px";
is.height = d.offsetHeight + "px";
is.backgroundColor="#666666";
}
bg.show();
//
dojo.fadeOut({node:bg.domNode,duration:3000,onEnd:function(){bg.node.style.display="none";}}).play();
}
</script>
</head>
<body class="tundra">
<div id="div1">
<table id="tab1" width="300px" border="0" cellspacing="0" cellpadding="0" style="margin:0px;padding:0px;display:inline;">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
</tr>
</table>
</div>
<button onClick="bkifm()">ifrm</button>
</body>
</html>六dojopalce
dojo.place移動domノード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>dojo.place dom </title>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
<script type='text/javascript' src='../dojo/dojo.js'></script>
<script type='text/javascript'>
var handle = function() {
dojo.query('#btn').connect('onclick' , function(){
// 1 -
// 2 -
// 3 -
dojo.place('n2' , 'n1' , 'after') ;
});
dojo.query('#btn2').connect('onclick' , function(){
// 1 -
// 2 -
// 3 -
dojo.place('n2' , 'hr' , 'after') ;
});
};
dojo.addOnLoad(handle);
</script>
</head>
<body>
<button id='btn'> </button><br/><br/>
<button id='btn2'> </button>
<div id='n1'> 1</div>
<div id='n3'> 3</div>
<hr id='hr'/>
<div id='n2'> 2</div>
</body>
</html> 7 DojoのdojoAttachPoint
Dojo declarationやDojo templateでは、dojo AttachPoint=「xxx」という文をよく見かけますが、文書を調べてみると、やっと理性的な認識が得られました.
実はJavaScriptでthisを使うことができます.xxxはこの要素を参照します.
以下に例を示します.
<thead dojoAttachPoint="head">
<tr dojoAttachPoint="headRow"></tr>
</thead> jsでthead,trを変更する場合はdojoAttachPointで指定した別名head,headRowでthead,trを参照して操作できます.より深く理解すると,thead,trがページのDOMツリーにそれぞれDOMノードに対応しており,JSがDOMツリーを操作する場合,DOMノードのインスタンスを得る場合にのみ操作が行われる.
例えば、上記の例のテーブルでは、tdノードを1つ追加する場合、trのinstanceを取得し、操作します.JSで実装されるコードは以下の通りである.
var tth = document.createElement("th");
this.headRow.appendChild(tth); 実はこれを使ってもいいです.headRow引用
IDを設定してbyIdでdomノードを手に入れても何の違いもありませんが、これだけは便利です
八.これで終わりだinherited(arguments)
dojoではよくthisに遭遇しますinherited(arguments).これはdojoの内部メソッドで、ベースクラスにコードが存在するメソッドを検索し、知るまで呼び出すために使用されます.
九.dojo.Defered
dojoはdojoを提供します.Deferedは非同期操作を抽象化し、一つの方法が非同期であればdojoを使用することができる.Deferedは戻り値として,非同期動作に典型的な方法はコールバックメソッドを追加することである.非同期操作が完了すると、コールバックメソッドが呼び出され、特定の処理ロジックが実行されます.
十.dojo.formToObject
formaリクエスト全体のデータを取得するには、次の手順に従います.
Adding a new Player
var button = dijit.byId("addPlayerBtn");
dojo.connect(button, "onClick", function(event){
.... event.preventDefault();
event.stopPropagation();
var data = dojo.formToObject("addPlayerForm");
var team = teams[data.team];
data.team = team;
data = dojo.toJson(data);
var xhrArgs = {
postData: data,
handleAs: "json",
load: function(data) {
alert("Player added: " + data);
dojo.byId("gridContainer").innerHTML = "";
loadPlayers();
},
error: function(error) {
alert("Error! " + error);
},
url: "/SoccerOrg/resources/players",
headers: { "Content-Type": "application/json"}
};
var deferred = dojo.xhrPost(xhrArgs);
});