継承
次に継承を試します。sample02.htmlでは、dijit.form.Buttonクラスを継承しています。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラスの定義：1ファイルバージョン</title>
<script type="text/javascript" src="../dojo-release-1.1.1/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.declare(
"yone.MyButton",
dijit.form.Button,
{
}
);
</script>
</head>
<body>
<div dojoType="yone.MyButton" id="button1">米持のボタン</div>
</body>
</html>
このように宣言すると「MyButton」クラスは、dijit.form.Buttonと同じ機能を持ちますので、dojoTypeに指定することができます。これでボタンが表示されるようになります。
クラスを別ファイルに分ける
クラスは一旦作成したらさまざまなアプリケーションで共有して使いたいものです。となると、同じファイルに定義されているだけでなく、別のjsファイルから読み込むことができなければいけません。
Dojoツールキットでは、クラスが定義されているjsファイルをdojo.requireで読み込みますが、このとき読み込むファイルの検索方法に一定のルールがあります。
例えば、先ほどのyone.MyButtonクラスを読み込む場合、名前をピリオドで分解し、Dojoツールキットのルート（dojoディレクトリの一つ上のディレクトリ）からフォルダ名として探しにいきます。yone.MyButtonなら、dojoフォルダと横並びのyone\MyButton.js というファイルを探します。
もう一つのルールとして、クラスが定義されているファイルを読み込むとき、「このファイルでyone.MyButtonが宣言されるよ」ということを名言しなければいけません。これは、クラス宣言のされたファイルを一度読み込んだら二度と読み込まないように、クラス名を登録するためです。そのための関数がdojo.provideです。
dojo.provide("yone.MyButton");
dojo.require("dijit.form.Button");
dojo.declare(
"yone.MyButton",
dijit.form.Button,
{
}
);
このファイルを、dojoフォルダと同じ並びの「yone」フォルダを作ってその下に「MyButton.js」というファイル名で保存します。そして、このクラスを使いたい時は「dojo.require("yone.MyButton");」としてあげると、見つけ出して読み込んでくれます。
：
<script type="text/javascript" src="../dojo-release-1.1.1/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("yone.MyButton");
</script>
</head>
<body>
<div dojoType="yone.MyButton" id="button1">米持のボタン</div>
</body>
：
自分のクラスをdojo.requireするのは、なんかうれしい瞬間です。
別の場所に配置する
dojoフォルダと並ぶ箇所に自分のクラスを配置する、ということになると、アプリケーションとDojoツールキットをまぜてしまうことになるため、あまり望ましくありません。例えば、Dojoツールキットを取り替えたりするときにフォルダごとごっそり、ってのができなくなりますからね。
では、Dojoツールキットのルートフォルダより外へ自分のクラスを置く方法をお教えしましょう。
Dojoのルートにクラスを置く場合、置く側が工夫するのではなく使う側が工夫する、という考えかたに基づいています。これは、一度作ったクラスファイルはそのままでよく、使うときに「どこに置いてあるよ」と宣言して使う、という考え方と思えばよいです。
「どこに置いてあるよ」と宣言する方法は2つあります。一つ目はdojo.registerModulePath関数を使う方法です、引数としてクラスの接頭辞とdojo.jsからの相対パスを指定します。
例えば、MyButton.js をDojoツールキットのルート（dojoフォルダの上のフォルダ）と横並びにある「yone2」フォルダに置いてあり、yone2.MyButtonを提供しているとすると、使う時にsample04.htmlのようにファイルの場所を設定します。
：
<script type="text/javascript" src="../dojo-release-1.1.1/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.registerModulePath("yone2", "../../yone2");
dojo.require("yone2.MyButton");
</script>
</head>
<body>
<div dojoType="yone2.MyButton" id="button1">米持のボタン</div>
：
この指定は、dojo.js（Dojoのブートローダー）の読み込み引数であるdjConfigに指定することもできます。文法は次のとおりです。
djConfig="parseOnLoad: true, modulePaths:{yone2: '../../yone2'}"
