新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


マークアップを用いないDijitプログラミング

http://journal.mycom.co.jp/series/dojo/004/index.html
上記URLからお勉強


マークアップを用いない = JavaScriptのみを用いる
ということ。



ボタンウィジェットでいうとー

■マークアップの場合


<div id="button" dojoType="dijit.form.Button" label="クリック!></div>


■JavaScriptの場合

var elem = dojo.byId("button");
var button = new dijit.form.Button({label:"クリック!"}, elem);


マークアップの方がすっきりしているのでいいのではないかと感じる。
しかーし
JavaScriptによってウィジェットを生成・操作できるようになると
「任意のタイミングでウィジェットを生成できる」
「ウィジェットの振る舞い(イベントハンドラなど)も、動的に差し替えることができる」
などの利点があるのだ。


なのでここからはマークアップを用いないDijitプログラミングのお勉強です


■マークアップを用いずにDijitプログラミングを行う手順

1.ウィジェットを貼り付けるDOMの確保

<div id="button"></div>

と貼り付ける場所を作成しておきます


2.ウィジェット作成

var button = new dijit.form.Button({label:"クリック"}, elem);

buttonがボタンウィジェットを実装
labelにクリックを設定
id="button"のとこの変数を作るってことです

以上ウィジェット完了!!!!!!







次に上記さんサンプルにちいさな機能を加えてみよう

dojo.require("dojo.parser");
 dojo.require("dijit.form.Button");

 dojo.addOnLoad(function() {
  var button = new dijit.form.Button({label:"クリック"}, dojo.byId("button"););
  button.onClick = function() {
   button.setLabel("こんにちは!");
  };
 });


botton.onClickのfunctionに
button.setLabel("こんにちは!");
を設定しています。


以上です!!!!





ここで補足としてよく使うdojo.connect()について勉強します。

dojo.connect()とはー
イベントに対して、イベントハンドラを『接続』するメソッドです

dojo.connect(target, event, context, method)
引数の意味は以下の通り。

target : イベント処理のターゲットとなるオブジェクト。nullを指定するとwindowオブジェクトとなる
event : イベントハンドラの接続先を文字列で指定する
context : method実行中のthisコンテキスト
method : イベントが発生した際呼び出されるメソッドを、関数名を表す文字列もしくは関数オブジェクトで渡す

という使い方をします。

※contextは省略できる

サンプル

dojo.connect(null, "alert", null, function(msg) {
console.debug("アラートメッセージ:" + msg);
});

alert()が実行されると次のfunctionも実行され

console.debug("アラートメッセージ:" + msg);

これも実行されるようなります


また、

var connection = dojo.connect(...);
dojo.disconnect(connection);

これで
登録したイベントハンドラからconnectを除去します。



以上でとりあえず今回は終わりにしまーす。
スポンサーサイト

テーマ:dojo.js - ジャンル:コンピュータ

次のページ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。