エスブレイン » dojo http://www.esbrain.com 高い技術力・創造力・機動力でお客様のビジネスをさらに加速させます Wed, 25 Aug 2010 07:34:27 +0000 ja hourly 1 http://wordpress.org/?v=3.0 dijitコンテンツをネストしたときにイベントを親に渡したくない http://www.esbrain.com/2009/06/dijit%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%92%e3%83%8d%e3%82%b9%e3%83%88%e3%81%97%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ab%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%82%92%e8%a6%aa%e3%81%ab/?utm_source=rss&utm_medium=rss&utm_campaign=rss http://www.esbrain.com/2009/06/dijit%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%92%e3%83%8d%e3%82%b9%e3%83%88%e3%81%97%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ab%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%82%92%e8%a6%aa%e3%81%ab/#comments Fri, 05 Jun 2009 10:46:02 +0000 admin http://www.esbrain.com/?p=552 そんなとき、dojo.stopEvent(event)一発で可能です。

以下、ContentPaneをネストしたときに、onClickイベントを親に渡さない例です。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
 @import "/js/dojo/resources/dojo.css";
 @import "/js/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="/js/dojo/dojo.js"
 djConfig="parseOnLoad: false, isDebug: true"></script>
<script type="text/javascript">
 dojo.require("dojo.parser");

 dojo.require("dijit.layout.BorderContainer");
 dojo.require("dijit.layout.ContentPane");

 dojo.addOnLoad(function() {
  dojo.parser.parse();
 });

</script>
<style type="text/css">
.nest {
 border: 1px solid #CCCCCC;
 margin: 5px;
}
</style>
</head>
<body class="tundra" id="body">
<div dojoType="dijit.layout.BorderContainer" design="screenDesign" style="width:100%;height:100%">

<div dojoType="dijit.layout.ContentPane" region="center" class="nest">
 topのトップ<br/>
 <script type="dojo/connect" event="onClick" args="event">
  alert("topのオンクリック");
 </script>
 <div dojoType="dijit.layout.ContentPane" class="nest">
  1つネスト
  <script type="dojo/connect" event="onClick" args="event">
   alert("1つネストのオンクリック");
   dojo.stopEvent(event);
  return false;
  </script>
  <div dojoType="dijit.layout.ContentPane" class="nest">
   2つネスト
   <script type="dojo/connect" event="onClick" args="event">
    alert("2つネストのオンクリック");
    dojo.stopEvent(event);
   return false;
   </script>
  </div>
 </div>
 topのボトム
</div>

</div>

</body>
</html>
]]> http://www.esbrain.com/2009/06/dijit%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%92%e3%83%8d%e3%82%b9%e3%83%88%e3%81%97%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ab%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%82%92%e8%a6%aa%e3%81%ab/feed/ 0 dijit.Treeが変わってしまった http://www.esbrain.com/2009/06/dijittree%e3%81%8c%e5%a4%89%e3%82%8f%e3%81%a3%e3%81%a6%e3%81%97%e3%81%be%e3%81%a3%e3%81%9f/?utm_source=rss&utm_medium=rss&utm_campaign=rss http://www.esbrain.com/2009/06/dijittree%e3%81%8c%e5%a4%89%e3%82%8f%e3%81%a3%e3%81%a6%e3%81%97%e3%81%be%e3%81%a3%e3%81%9f/#comments Fri, 05 Jun 2009 04:11:30 +0000 admin http://www.esbrain.com/?p=546 久々にdijit.Treeを使ってみたら、FireBug上にエラーが・・・

dijit.Treeにdojo.data.ItemFileWriteStoreなどStoreを直結するのは古いらしい。

Modelというアダプタ？を使って、StoreとTreeを接続するのだそうだ。

Modelを調べてみると、dijit.tree.TreeStoreModelとdijit.tree.ForestStoreModelの2種類見つかりました。

TreeStoreModelはルートが1つだけ定義されているStoreに接続するのに対して、

ForestStoreModelはルートが複数あっても良いらしいです。

しかも、dojo1.1系からはStore用のデータがネストノードのものは推奨されないとも記述がありました。

ネストノードの場合、子ノードはユニークになってしまうので、

例えばファイルシステムのエイリアスをStoreで表現できません。

新しい方法では、子ノードの記述にリファレンスIDで指定できるため、ネストノードが要らなくなります。

スマートではありますが、通信用のXMLやJsonデータ自体の可読性は下がります。

将来性を考えると、dojo1.1系に合わせライブラリ作り直し・・・

]]> http://www.esbrain.com/2009/06/dijittree%e3%81%8c%e5%a4%89%e3%82%8f%e3%81%a3%e3%81%a6%e3%81%97%e3%81%be%e3%81%a3%e3%81%9f/feed/ 0 dojo tabContainer内のコンテンツのロード方法 http://www.esbrain.com/2009/02/dojo-tabcontainer%e5%86%85%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%81%ae%e3%83%ad%e3%83%bc%e3%83%89%e6%96%b9%e6%b3%95/?utm_source=rss&utm_medium=rss&utm_campaign=rss http://www.esbrain.com/2009/02/dojo-tabcontainer%e5%86%85%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%81%ae%e3%83%ad%e3%83%bc%e3%83%89%e6%96%b9%e6%b3%95/#comments Fri, 06 Feb 2009 03:11:11 +0000 admin http://www.esbrain.com/?p=111 dojoのtabContainerは実装は簡単ですが、子供となるContentPaneの中にiframeなどがあると、

表示がうまくいかないことがあります。

表示されているContentPaneでないとうまく動作しないことが原因です。

よって複雑なページをタブ化する場合以下のようにするとうまく動作します。

1.タブコンテナにselectChildイベントハンドラをコネクト

2.ContentPaneを作るときにはcontentは空にしてタブコンテナに追加

3.selectChildイベントハンドラが呼ばれたときに、表示するContentPaneのcontentを設定(この中にiframeが含まれる)

これで外部のdojoページでもタブ化できます。

参考)タブコンテナにselectChildイベントハンドラを設定する方法

<div dojoType=”dijit.layout.TabContainer” id=”tab”>
<script type=”dojo/connect” event=”selectChild” args=”contentPane”>
var url = 適当なURL;
if(contentPane.contentLoaded != true) {
var contents = ‘<iframe src=”‘+url+’” frameborder=”0″ style=”width:100%; height:100%;” scrolling=”no”/>’;
contentPane.setContent(contents);
contentPane.setAttribute(“contentLoaded”, true);
}
</script>
</div>

]]> http://www.esbrain.com/2009/02/dojo-tabcontainer%e5%86%85%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%81%ae%e3%83%ad%e3%83%bc%e3%83%89%e6%96%b9%e6%b3%95/feed/ 0