SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「Dojo道場」~実用アプリ構築のためのベストプラクティス

Dojo道場 ~ 第7回「カスタム・ウィジェット作成のためのウィジェット・ライフサイクル詳説」

「Dojo道場」~実用アプリ構築のためのベストプラクティス


startup

メソッド名 説明
startup 自分自身、および、子供のウィジェットが存在する場合は全ての子供が、HTML ドキュメントに挿入された後に実行されます。

 以下の例では、まずthis._startedプロパティをチェックしています。このプロパティは一度startupが呼ばれるとtrueがセットされるので、重複呼び出しを避けるための作法です。その後、this.inherited(arguments)の後に、postCreateでnewしたthis.tooltipのstartupを呼び出しています。カスタム・ウィジェットがdijit.Tooltipやdijit.Dialogのような補助的なウィジェットを持つ場合、それらのstartupはカスタム・ウィジェットのstartupから呼ぶ必要があります。

リスト14. startup の実装例
startup: function(){
	if(this._started){
		return;
	}
	this.inherited(arguments);
        //postCreate内で生成したツールチップウィジェットのstartupを呼ぶ
	if(this.tooltip){
		this.tooltip.startup();
	}
 },

 この例以外にも、自分自信のサイズを計算する場合や、子ウィジェットにアクセス(this.getChildren())する必要がある場合もstartupに実装します。

 サンプル・ファイル中では、ProfileCard2ウィジェットを子供として持つProfileCardTabContainer.jsがその例です。startupの中でgetChildren()し、子供のonShowイベントでアニメーションをさせるという例になっています。

destroy

メソッド名 説明
destroy ウィジェットが廃棄される時に実行されます。特にIEなどで起こるメモリリークなどを避けるために必要な処理を行います。

 destroyメソッドは、プログラムの中から明示的に呼ばれる場合と、ブラウザのウィンドウが閉じたときに暗黙的に呼ばれる場合があり、主にメモリの開放などを行います。カスタム・ウィジェットが保持する子ウィジェットのdestroyは、自分自身のdestroyに連鎖して自動的に呼ばれますが、dijit.Tooltipやdijit.Dialogのような補助的なウィジェットは明示的にdestroyする必要があります。

リスト15. destroy の実装例
destroy: function(){
        //ウィジェット内で生成したツールチップウィジェットを破棄する
	if(this.tooltip){
		this.tooltip.destroy();
	}
	this.inherited(arguments);
}

 最終的に出来上がった ProfileCard2 をブラウザ上で表示させると以下のようになります。

図2. ProfileCard2 表示例
図2. ProfileCard2 表示例

まとめ

 Dojo を使って比較的規模の大きなアプリケーションを構築する場合、再利用可能な部品をカスタム・ウィジェットとして実装することは、開発の生産性や保守性を向上するために重要な要素となります。

 今回は、カスタム・ウィジェット実装に必要な知識となるテンプレート・システム、および、ライフサイクル・メソッドとその実装例を解説しました。カスタム・ウィジェットの実装は、実はそれほど難しい事ではないことをご理解いただけたと思います。

修正履歴

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

手島 拓也(テジマ タクヤ)

日本アイ・ビー・エム株式会社ソフトウェア開発研究所に勤務。現在は、検索およびテキスト解析ソフトウェア製品のUI開発を担当。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

井上 基晴(イノウエ モトハル)

日本アイ・ビーエム株式会社 ソフトウェア開発研究所。現在は主にDojoを用いた製品開発を担当。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/5879 2012/01/30 11:47

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー