CodeZine(コードジン)

特集ページ一覧

Dojoツールキットで始めるオブジェクト指向

渋谷テクニカルナイト講師陣が語る新技術動向 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/02 14:01

目次

ウィジェットレイアウトの再利用

 先ほどの例でdijit.form.Buttonクラスを継承していたように、Dojoツールキットが提供するウィジェットを継承して新しい挙動をするクラスを作ることは可能です。しかし、より大きな部品に複数のウィジェットが組み込まれているような「複合部品」を作るには便利な方法ではありません。

 複数の部品が組み込まれている部品を作るには「テンプレート・ウィジェット」という機能を使うと便利です。ここでのテンプレートとは、ウィジェットをHTML構造=DOMから生成していく方法、と考えてください。

テンプレートの指定

 テンプレート・ウィジェットを作るにはdijit._Widget(Dijitのベースクラス)とdijit._Templated、2つのクラスを多重継承します。dojo.declareの継承元クラスを2つ以上指定するには、配列にします。

 また、テンプレートとなるHTMLは、次の2つの方法で定義することができます(DOMで設定する方法もありますが、ここでは割愛します)。

 内包

 クラスを定義するときにtemplateStringというクラス変数を定義します。

 外部提供

 templatePathに指定したURLからファイルを読み込みます。

 文字を直接書く場合、リスト8のようになります(※templateStringの後ろは、実際には改行せずに一行で書くか、+でつなぎます)。

リスト8 HelloWorld.js
dojo.provide("yone.HelloWorld");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare(
    "yone.HelloWorld",
    [dijit._Widget,dijit._Templated],
    {
        templateString:
        "<table border='1'><tr><td>Hello</td><td>World</td></tr></table>"
    }
);

 外部にファイルを置く場合、リスト9のようになります。

リスト9 HelloWorld2.js
dojo.provide("yone.HelloWorld2");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare(
    "yone.HelloWorld2",
    [dijit._Widget,dijit._Templated],
    {
        templatePath: dojo.moduleUrl("yone", "templates/HelloWorld.html")
    }
);

変数の埋め込み

 テンプレートに、クラスの変数を埋め込むには${変数名}を使います。

 例えば、クラスにtextという変数があるとき、そのtextの初期値をテンプレートに埋め込むには、次のような記述をします。

リスト10 変数の埋め込み(クラス変数とテンプレート)
text : "",
templateString "${text}さん、こんにちは。"
リスト11 埋め込んだ変数の利用(属性として指定することで変数の初期値を書き換えられます)
<div dojoType="yone.MyDijit" text="米持"></div>

子要素を内包する

 子要素に指定された内容を包含するにはdojoAttachPointを使います。自分が定義しているテンプレートの中で、子要素をはめ込みたい場所のノードにdojoAttachPoint='containerNode'を指定します。

リスト12  子要素の埋め込み(テンプレート)
<table border='1'>
<tr><td>
<span dojoAttachPoint='containerNode' ></span>さんこんにちは
</td></tr>
</table>
リスト13  子要素の埋め込み(利用時)
<div dojoType="yone.MyDijit">米持</div>

まとめ

 もう少し詳しく説明すれば、細かいところでJavaやC++と挙動が違うところはありますが、以上の知識があれば、とりあえずはオブジェクト設計をしてクラスと継承関係を作ってJavaScriptでプログラミングができるようになります。また、Dojoツールキットが提供する既存コンポーネントなどを継承し、改造して部品を作って行ったり、再利用したりすることができるので、開発効率がグンとアップするはずです。

関連資料

 この記事は、IBM developerWorks主催の渋谷テクニカルナイトで2008年10月10日に実施したセミナーの内容を記事に起こしたものです。講演資料およびMP3音声ファイルがサイトからダウンロードできます。

参考文献



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:渋谷テクニカルナイト講師陣が語る新技術動向

もっと読む

著者プロフィール

  • 米持 幸寿(ヨネモチ ユキヒサ)

    日本アイ・ビー・エム公認 ソフトウェア・エバンジェリスト。alphaWorks、developerWorks、インキュベーション系製品、アセットなどのテクノロジーの推進をしつつ、テクノロジー戦略、エバンジェリストチームをリードしている。講演や執筆も多数。主な著書に「かんたんサーバーサイドJava」(...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5