- PR -

Dojoの編集

1
投稿者投稿内容
未記入
大ベテラン
会議室デビュー日: 2008/07/11
投稿数: 182
投稿日時: 2008-09-04 11:35
こんいちは。

struts2とDojo0.4.3で画面とデータのやり取りを行いたいのですが、Dojoの文献が少なく、どのようにカスタマイズしてよいのか分かりません。

DojoのzipファイルをDLすると多くのサンプルがあるのですが、独自すぎてどう読んでよいのかも分かりません。

今、サンプルの中にTitlePaneと言うのを利用した画面レイアウトに挑戦しています。

■sample.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>HTML Effects</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div.TitlePane {
padding: 0px;
margin: 0px;
}

div.TitlePane.label {
background: #999999;
font-size: 16px;
color: #ffffff;
height: 20px;
border: 1px solid black;
width:250px;
}

div.TitlePane.content {
background: #eeeeee;
border-left: 1px solid black;
border-right: 1px solid black;
width:250px;
}

div.TitlePane.innerLabel {
background: #eeeeee;
font-size: 15px;
color: #ffffff;
height: 20px;
border-bottom: 1px solid black;
width: 250px;
}

div.TitlePane.innerContent {
width: 250px;
border-bottom: 1px solid black;
}
</style>
<script type="text/javascript" src="dojo/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.TitlePane");
dojo.hostenv.writeIncludes();
</script>
</head>
<body>
<div dojoType="TitlePane" label="Sample" labelNodeClass="label" containerNodeClass="content" open="false">
<div dojoType="TitlePane" label="Sample1" labelNodeClass="innerLabel" containerNodeClass="innerContent" href="other/doc0.html" open="false"></div>
<div dojoType="TitlePane" label="Sample2" labelNodeClass="innerLabel" containerNodeClass="innerContent" href="other/doc0.html" open="false"></div>
</div>
</body>
</html>

■デフォルトにあるTitlePane.js
dojo.provide("dojo.widget.TitlePane");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.html.style");
dojo.require("dojo.lfx.*");
dojo.widget.defineWidget("dojo.widget.TitlePane", dojo.widget.ContentPane, {labelNodeClass:"", containerNodeClass:"", label:"", open:true, templateString:"<div dojoAttachPoint=\"domNode\">\n<div dojoAttachPoint=\"labelNode\" dojoAttachEvent=\"onclick: onLabelClick\"></div>\n<div dojoAttachPoint=\"containerNode\"></div>\n</div>\n", postCreate:function () {
if (this.label) {
this.labelNode.appendChild(document.createTextNode(this.label));
}
if (this.labelNodeClass) {
dojo.html.addClass(this.labelNode, this.labelNodeClass);
}
if (this.containerNodeClass) {
dojo.html.addClass(this.containerNode, this.containerNodeClass);
}
if (!this.open) {
dojo.html.hide(this.containerNode);
}
dojo.widget.TitlePane.superclass.postCreate.apply(this, arguments);
}, onLabelClick:function () {
if (this.open) {
dojo.lfx.wipeOut(this.containerNode, 250).play();
this.open = false;
} else {
//＠ここ
dojo.lfx.wipeIn(this.containerNode, 250).play();
this.open = true;
}
}, setLabel:function (label) {
this.labelNode.innerHTML = label;
}});

動作としては、dojoType="TitlePane"のバーをクリックした時に同じ<div>タグにある内容を表示・非表示にするというものですが、これをlabelNodeClass="innerLabel"の時は他のものは閉じると言うロジックに修正したいと思ってます(現状全て開きっぱなし)。

「＠ここ」と表示された箇所が追記する箇所なんですが、そもそもどのように他の値が取れるのか分からず・・。

お分かりになる方ございましたら、よろしくお願いします。
(Dojoの日本語版リファレンスも紹介いただけたら幸いです。)

もうひとつお聞きしたいのが、prototype.js、jQueryなどはある程度クロスブラウザを意識していますが、このDojoは意識しているのでしょうか？FireFox3でほとんど実行されません。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-09-04 13:44
どじょチュートリアル：
http://journal.mycom.co.jp/special/2008/dojo/002.html

以下、IE6 で実行すると、下の方に dojoType が確認できます。
残念ですが、Firefox で実行すると dojoType が見えません。
<削除>もしかしたら、取る方法があるのかもしれませんが、
documentElement.innerHTML から
解析すれば取れそうだけど、めんどくさそう。</削除>

追記：getAttribute("dojoType") で普通に取れるんですね；；

コード:



<body>

<div dojoType="どーじょ" href="http://ok.jp/" id="CustomTags" />



<script>

window.onload = function() {

	var o = document.getElementById("CustomTags");

	var s = [];

	var r = /^dojoType$/;

	for (var a in o) {

		if (r.test(a))

			s.push("'" + a  + "'" + " => " + o[a]);

		else

			s.push("'" + a  + "'" );

	}

	alert(s.join(" , "));

}

</script>

</body>



追記：ということで、IE でも Firefox でも問題無いんじゃないかと。


[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-09-04 14:56 ]
未記入
大ベテラン
会議室デビュー日: 2008/07/11
投稿数: 182
投稿日時: 2008-09-04 16:18
ありがとうございます。

紹介いただいたサイト(貴重ですねありがとうございます)を見るとdojo.byId();での取得が紹介されてました。

教えていただいたdocument.getElementByIdですが、これってFireFoxはダメではなかったでしたっけ？？下記サンプルコードからこのようにしてみました(document.getElementByIdでもやりましたがダメでした)。

■html部
<div dojoType="TitlePane" label="Sample" labelNodeClass="label" containerNodeClass="content" open="false">
<div dojoType="TitlePane" label="Sample1" labelNodeClass="innerLabel" containerNodeClass="innerContent" href="other/qrcode.html" open="false" id="child1"></div>
<div dojoType="TitlePane" label="Sample2" labelNodeClass="innerLabel" containerNodeClass="innerContent" href="other/qrcode.html" open="false" id="child1"></div>
</div>

■js部(前述部抜粋)
}, onLabelClick:function () {

var o = dojo.byId("child1");
for (var a in o) {
alert(o[a]);
}

if (this.open) {
dojo.lfx.wipeOut(this.containerNode, 10).play();
this.open = false;
} else {
dojo.lfx.wipeIn(this.containerNode, 10).play();
this.open = true;
}


このようにテストしてみましたが、未だ取れない状態です(IE6)･･。
1

スキルアップ／キャリアアップ（JOB@IT）