Dojo Dijit を拡張してカスタム・ウィジェットを作成する

この記事では、Dojo Toolkit の特定の dijit では完全には要件に対応することができず、独自のカスタム・ウィジェットを作成しなければならない場合、どのようにすればよいかについて説明します。この記事を最後まで読むと、一連の要件とそれらを満たす方法についての取り組みの例を通じて、dijit や Dojo のその他のコア機能の使い方、そして独自のウィジェットを宣言する方法を理解できるようになります。この記事の内容は IBM WebSphere 開発者向け技術ジャーナルから引用したものです。

Kareem Weller, Staff Software Engineer, IBM

Kareem Weller は IBM のスタッフ・エンジニアであり、現在は IBM Software Group に所属し、フロリダ州オーランドで働いています。彼は IBM のいくつかの組織で働いたことがあり、Web アプリケーション開発に 5 年間の経験があります。また、多くの政府関係プロジェクトや商用プロジェクトに従事してきましたが、そこで使用した Web 技術や製品には、Dojo Toolkit、JSON、XML、IBM Web Content Management、Websphere Application Server などがあります。



2012年 10月 11日

はじめに

Dojo Toolkit は強力な JavaScript ライブラリーであり、Web 開発者はこのツールキットを使用することで、最小限の開発時間と作業でオブジェクト指向のウィジェットを使用して RIA (Rich Internet Application) を作成することができます。Dojo Toolkit には、Dojo (コア)、Dijit (UI フレームワーク)、dojox (dojo 拡張機能)、util という 4 つのパッケージが含まれています。Dojo Toolkit に用意された機能はそのまま使用することも、拡張して独自のウィジェットを作成することもできます。Dojo Toolkit に用意されている機能には、DOM を操作するための機能や、Ajax、イベント、データ・ストアを使用した開発のための機能などがあります。

Dojo による独自の UI ライブラリーである Dijit (Dojo ウィジェット) パッケージには、一連の Dojo クラスが含まれており、開発者はこれらのクラスを使用してリッチで強力なクロスプラットフォームの Web 2.0 インターフェースを最小限の作業で作成することができます。これらの Dijit ウィジェット、つまり dijit にはテーマがあり、これらのテーマは容易に操作することができます。このパッケージに含まれている dijit の例には、ボタン、テキスト・フィールド、エディター、プログレス・バーなど数多くあります。

これらの dijit を使用すると、例えば送信フォームを作成することができます。そのフォームには、名前、e-メール・アドレス、電話番号などのためのテキスト・フィールドに加え、日付フィールド、チェックボックス、ボタン、そして入力検証機能を含めることができます。しかも JavaScript について最低限の知識があれば、これらすべてをものの数分で作成することができます。

dijit の中で最も豊富な機能を持つものの 1 つが Calendar dijit です。この dijit を使用すると 1 ヶ月のカレンダーを表示することができます。ユーザーは容易に月を変更したり、年を変更したり、同じ年の任意の月にジャンプしたりして特定の日付を選択することができます。

RIA を作成する多くの場合、dijit をそのまま使用することができます。しかし、異なるスタイル (色やテーマの変更など) が必要な場合や、機能、テンプレート、スタイルをそれぞれ変更することが求められるといった、より複雑な変更が必要になる場合があります。こうした要件を満たすには、新しいカスタム・ウィジェットをゼロの状態から作成することも、既存の dijit を拡張してカスタム・ウィジェットを作成することもできます。

この記事では演習として、通常とは異なるバリエーションの Calendar ウィジェットを Web サイトで使用する、という要件がある場合について説明します。この要件を満たすために、複数の要件を満たす新しいクラスを作成します。この演習では Dojo バージョン 1.7 を使用して、Calendar dijit について詳しく探るとともに、既存の dijit を最小限の変更で再利用して作成時間を節約する方法についても説明します。また、Dojo 1.7 で宣言された新しいクラスの実例や、Dojo の基本機能の一部 (日付操作、関連付け (hitch)、パブリッシュ/サブスクライブなど) についても学びます。

課題

この演習では Calendar dijit をカスタマイズします。カスタマイズの要件は以下のとおりです。

  • カレンダーは現在の月の日付のみを表示する必要があります (現在の月以外の日付を非表示にして無効にする必要があります)。
  • カレンダーは下の部分に現在の年のみを表示する必要があります (前年や翌年のカレンダーは表示しません)。
  • カレンダーは Calendar ウィジェット上部に現在の月の名前を表示する必要があります。
  • ユーザーは他のどの月にもジャンプすることはできません (上部にある、月を選択するためのドロップダウン・ボタンを無効にします)。
  • 月を (前月または翌月に) 変更するための矢印をカレンダー上部から削除し、代わりにカレンダーの脇に矢印を dijit ボタンとして表示します。この 2 つの新しいボタンを使用しない限り、ユーザーは月を変更することができません。
  • 最小境界日と最大境界日があります。つまり、この境界外の日付はすべて無効にし、アクセスできないようにする必要があります。
  • 境界日に達した場合には、月を変更するためのナビゲーション・ボタンを無効にします。
  • カレンダー内の選択された日付に特別なスタイル設定を追加します。
  • ある日付をユーザーが選択したら、その選択された新しい値を処理する関数に日付を渡します。

これらの要件を満たすソリューションとして、JavaScript と CSS を使用して Calendar dijit を編集し、カスタム・ウィジェットを作成します。図 1 に上記の要件を適用する前 (左) と後 (右) の Calendar ウィジェットを示します。

図 1. 標準的な Calendar dijit とカスタムの Calendar ウィジェットとの比較
標準的な Calendar dijit とカスタムの Calendar ウィジェットとの比較

このソリューションを実現するためには、以下の 3 つのファイルを作成する必要があります。

  • dijit テンプレート: カスタム・ウィジェットのコンポーネントを表示するマークアップ。
  • dijit クラス: 宣言 (JavaScript) を使用して作成されたウィジェット・クラス。
  • CSS ファイル: 必要なスタイルシート・クラスをすべて含んでいます。

図 2 に、このカスタム・ウィジェットのディレクトリーの場所と構造を示します。出発点は、この例のウィジェットのコントローラーとして動作する index.html です。simple.css ファイルにはすべてのスタイルが含まれています。

図 2. ディレクトリー構造
ディレクトリー構造

ウィジェットを作成する

dijit テンプレート

JavaScript の div 要素を 3 つ作成します。1 つはカレンダー用、残りの 2 つは月を前月または翌月に移動するための矢印ボタン用です (リスト 1)。これらの div はアタッチ・ポイント (data-dojo-attach-point) を使用して参照を行います。ここでの参照には、id を使用するよりもアタッチ・ポイントを使用した方が適切です。アタッチ・ポイントを使用すると同じページ上に同じウィジェットのインスタンスを複数持つことができ、id の競合を気にする必要がないからです。

リスト 1. dijit テンプレート
<div class="CalendarArrow">
<div data-dojo-attach-point="calendarPreviousMonthButtonAP"></div>
</div>

<div class="CalendarDijit">
<span data-dojo-attach-point="calendarMonthOneAttachPoint"></span>
</div>

<div class="CalendarArrow">
<div data-dojo-attach-point="calendarFollowingMonthButtonAP"></div>
</div>

dijit クラス

このアプリケーションの要件から、以下の変数を定義する必要があります。

  • selectedDate: カレンダーの初期値
  • currentFocusDate: どの月を表示するのかを認識するためにカレンダーが参照する値。初期値は selectedDate と同じ値に設定されます。
  • calendarInstance: Dijit カレンダーのインスタンス
  • bookingWindowMaxDate: カレンダーの中で許可される最後の日付
  • bookingWindowMinDate: カレンダーの中で許可される最初の日付
  • onValueSelectedPublishIDString: pub/sub チャネル (つまりトピック) を表現するストリング

JavaScript 関数

まず、以下のスタイルシート要素を変更します。

  • constructor

    constructor をオーバーライドし、コントローラーから渡された変数をコピーします。dojo/_base/lang/mixin を使用して変数名を突き合わせ、それらの変数の値をカスタム・ウィジェットの変数にコピーします (リスト 2)。

    リスト 2. constructor
    constructor: function (args){
    	if(args){
    		lang.mixin(this,args);
    	}
    }
  • postCreate

    すべての日付は en-us での短縮形フォーマット mm/dd/yyyy のストリングとして渡されます。日付のストリング (selectedDate、bookingWindowMaxDate、bookingWindowMinDate) をすべて、dojo/date/locale 関数を使用して date オブジェクトに変換します (リスト 3)。

    リスト 3. dojo/date/locale を使用する
    this.bookingWindowMinDate = locale.parse(this.bookingWindowMinDate, {formatLength:
    'short', selector:'date', locale:'en-us'});

    Calendar オブジェクトのインスタンスを作成します (リスト 4)。インスタンスを作成するためのロジックは createCalendar 関数の中にあります。dijit カレンダーのインスタンスをプログラムで作成し、dojo/dom-construct (Dojo の古いバージョンの dojo.create に相当) を使用して作成される div にそのインスタンスをアタッチします。この方法はカレンダーを破棄してもアタッチ・ポイントが失われないため、一般に適切なプラクティスです。

    リスト 4. dijit/Calendar のインスタンスを返す
    return new Calendar({
    	value : selectedDate,
    	currentFocus : selectedDate	},  domConstruct.create("div", {}, 
    	calendarAttachPoint));
    }

    Calendar dijit の中で currentFocus の値を設定していることに注意してください。Calendar dijit は必ずローカルの現在の日付を使用して最初に起動される画面を表示するので、カレンダーに別の画面 (日付) を表示したい場合には、currentFocus を設定する必要があります。従って、このカスタム・ウィジェットでは (要件に従って) カレンダーの初期値を設定するために、currentFocus を selectedDate に設定する必要があります。この例では (記事を執筆していたのが 2012年 8月なので)、その日付は 2012年 8月のいずれかの一日となります。

他の要件を満たすために、Calendar dijit の以下の 3 つの関数をオーバーライドする必要があります。

  • isDisabledDate

    Calendar dijit がビューをロードしているときには、現在のビューに表示されている日付の 1 つひとつ (42 日すべて) に対して繰り返し処理が行われ、isDisabledDate 関数と getClassForDate 関数 (次に説明) がすべての日付に対して呼び出されます。

    isDisabledDate 関数はカレンダーの特定の日付を無効にするために使用されます (リスト 5)。この関数が真を返すと、その日付は無効になります。カレンダーが更新されるたびに、この関数が呼び出され、カレンダー内のすべての日付がこの関数に渡されます。この記事のカスタム・ウィジェットの場合には以下のことをする必要があります。

    • 現在の月に含まれない日付をすべて無効にする: そのためには dojo/date/difference 関数を使用します。この関数はあるインターバルで 2 つの日付オブジェクトを比較し、2 つが等価な場合には 0 を返します。ここでは “month” インターバルを指定して currentFocusDate 変数を現在のビューにあるすべての日付比較し、等価でない場合には真を返し、その日付を無効にします。
    • 最小境界日と最大境界日による境界外の日付を無効にする: この場合も dojo/date/difference を使用しますが、インターバルを "day" に設定します。戻り値が bookingWindowMinDate よりも小さい場合、または bookingWindowMaxDate よりも大きい場合には真を返し、その日付を無効にします。
      リスト 5. isDisabledDate をオーバーライドする
      isDisabledDate: function(date) {
       //disable any day that doesn't belong to current month
      	if(dojoDate.difference(parent.currentFocusDate, date, "month")!==0){
      		return true;
      	}
      	if(dojoDate.difference(parent.bookingWindowMinDate, date, "day" || 
      dojoDate.difference(parent.bookingWindowMaxDate, date, "day")<0){
      		return true;
      	}
      	else {
      		return false;
      	}
      }
  • getClassForDate

    現在の月のビューに含まれない日付を isDisabledDate によって無効にしましたが、無効にした日付を非表示にする必要もあります。getClassForDate 関数を使用して CSS クラスの名前を返し、無効にした日付をカレンダー上の他の日付とは異なる表示にします。この記事のカスタム・ウィジェットで selectedDate を表示する際には、その日付に対し、黒枠の付いた青のボックスを追加して表示する必要があります (リスト 6)。また、最小境界日と最大境界日による境界外の日付を灰色で示す必要があり、現在の月に含まれない日付を非表示にする必要があります。

    スタイルの変更が必要な日付を特定するには dojo/date/compare を使用することができます。この関数は、日時の値を表す 2 つの date オブジェクトと、比較する部分 (日付 (“date”)、時刻 (“time”)、あるいは日付と時刻の両方 (“datetime”)) を示すストリングを引数に取り、2 つの値の比較する部分が等しい場合には「0」を返します。ここでは引数として、繰り返し処理で指定される日付、選択状態にある日付、そして比較する部分を示す "date" を渡します。こうする理由は、ここではタイムスタンプを除いた日付を比較することにのみ関心があるからです。この比較によって「0」が返された場合には、この関数は (リスト 7 の) CSS ファイルで定義される Available クラスを返します。ここでは変更対象とする具体的な要素を指定するために CSS の .class セレクターを使用しています。

    リスト 6. getClassForDate をオーバーライドする
    getClassForDate: function(date) {	
    	if ( dojoDate.compare(date,selectedDate,"date") === 0) {
    		return "Available";
    	} // apply special style
    }
    リスト 7. 操作の対象となっている日付に対して設定する CSS クラス
    .AvailabilityCalendars .Calendars .CalendarDijit .Available 
    	.dijitCalendarDateLabel
    {
            background-color: #bccedc !important;
            border: 1px solid #000000 !important;
    }

    境界外の日付と現在の月に含まれない日付を特定するには、同じく isDisabledDate の if 条件を使用しますが、この場合は CSS クラス名が返されます (リスト 8 と 9)。

    リスト 8. 日付を非表示にして無効にする
    if(dojoDate.difference(parent.currentFocusDate, date, "month")!==0){ 
    	return "HiddenDay";
    }
    if(dojoDate.difference(parent.bookingWindowMinDate, date, "day")<0 || 
    	dojoDate.difference(parent.bookingWindowMaxDate, date, "day")>0){
    	return "Disabled";
    }
    リスト 9. 非表示の日付と無効な日付に対して設定する CSS クラス
     .AvailabilityCalendars .Calendars .CalendarDijit .HiddenDay 
    	.dijitCalendarDateLabel
    {
        background-color: #ffffff !important;
        border-color: #ffffff;
        color: #ffffff;
    }
    
     .AvailabilityCalendars .Calendars .CalendarDijit .Disabled 
    	.dijitCalendarDateLabel
    {
    	background-color: #9c9c9c;
    }
  • onChange

    この関数はカレンダーに新しい値を設定した場合、またはカレンダー上で有効となっている日付を選択した場合にのみ呼び出されます (リスト 10)。この関数は選択状態にある日付の date オブジェクトを返します。このオブジェクトを使用して、その日付を処理する別のメソッドにその日付をパブリッシュします。カスタム・ウィジェットの中で定義された関数 (onValueSelected) を呼び出すと、必要なすべての処理を行った後にコントローラーにパブリッシュすることができます (リスト 11)。この例では、dojo/_base/connect/publish を使用して単純にコントローラーに日付をパブリッシュします。チャネル (つまりトピック) のストリングは onValueSelectedPublishIDString 変数に格納されます。

    リスト 10. Calendar の onChange と hitch を使用する
    onChange : lang.hitch(this, function(date){
    	this.onValueSelected(date);
    })
    リスト 11. publish を使用する
    onValueSelected : function (date){
    	connect.publish(this.onValueSelectedPublishIDString, [date]);
    }

    onValueSelected 関数を呼び出すためのスコープの指定に dojo/_base/lang/hitch を使用していることに注意してください (リスト 10)。コントローラー (このシナリオでは index.html) には、そのチャネルをサブスクライブして日付を処理するサブスクライバーがあります (リスト 12)。この例ではログに記録しているにすぎません。この部分は必要に応じて他の任意のロジックと置き換えることができます。

    リスト 12. publish に対するサブスクライバー
    connect.subscribe("selectedValueID", function(date){
      //Do some processing 
      console.log("New Selected Date: ", date);
    });

Calendar dijit にはヘッダーに monthDropDownButton が含まれています。このボタンですべての月のリストが表示され、ユーザーはこのボタンを使用して任意の月にジャンプすることができます。要件を満たすには、monthWidget を “disabled” に設定し、このボタンを無効にする必要があります (リスト 13)。

リスト 13. Calendar ヘッダーのドロップダウン・ボタンを無効にする
this.calendarInstance.monthWidget.set("disabled", true);

ユーザビリティーの観点で見ると、ユーザーが矢印をクリックできないように、矢印も非表示にする必要があります。そのためには、操作の対象としたい要素を指定する CSS クラスを追加します (リスト 14)。

リスト 14. ドロップダウン・ボタンの矢印を非表示にするための CSS クラス
 .AvailabilityCalendars .Calendars .CalendarDijit .dijitDropDownButton 
	.dijitArrowButtonInner
{
    visibility: hidden;
}

次に、カレンダーの下に前年と翌年の数字が表示されないように、CSS クラスを使用してそれらの数字を非表示にする必要があります (リスト 15)。

リスト 15. カレンダーの下に前年と翌年の数字を表示しないようにするための CSS クラス
 .AvailabilityCalendars .Calendars .CalendarDijit .dijitCalendarPreviousYear, 
	.dijitCalendarNextYear
    {
padding: 1px 6px;
visibility: hidden;
    }

また、ユーザーが前月や翌月に変更できないように、カレンダーの上部に表示される矢印を非表示にする必要があります (リスト 16)。

リスト 16. 月を変更する矢印をカレンダーの上部に表示しないようにするための CSS クラス
 .AvailabilityCalendars .Calendars .CalendarDijit .dijitCalendarArrow
{
     visibility: hidden;
}

続いて、ユーザーが他の月に変更できるようにするための 2 つの新しいボタンを作成します。そのためには dijit/form/Button を使用して 2 つのボタンをプログラムで作成します。最初のボタン (戻る) の場合には、ラベルを “<<” と設定し、onClick 関数をオーバーライドします (リスト 17)。onClick のロジックは goToPreviousMonth 関数の中にあります。

リスト 17. dijit/form/bottom のインスタンスを作成する
this.calendarPreviousMonthButton = new Button({
       label: "<<",	
       onClick: lang.hitch(this, function(){
    	   this.goToPreviousMonth(this.calendarInstance);
       })
}, this.calendarPreviousMonthButtonAP);

ユーザーがこのボタンをクリックするたびに、カレンダーをひと月前に戻す必要があります。goToPreviousMonth の中で、最初に currentFocusDate の月を currentFocusDate - 1 の月に変更してから、カレンダーのビューを更新する必要があります。最後に、この月よりも前に表示対象の月があるかどうかを確認する必要があり、表示対象の月がない場合には、このボタンを無効にします。

そのために dojo/date/add 関数を使用します。この関数は引数として、date オブジェクト、間隔 (ストリング)、数量 (整数) を取ります。この場合には、date は currentFocusDate オブジェクト、間隔は “month”、数量は -1 です (リスト 18)。

リスト 18. カレンダー・ビューをひと月前にする
this.currentFocusDate = dojoDate.add(this.currentFocusDate,"month",-1);
calendarInstance.set("currentFocus",this.currentFocusDate);

カレンダーに新しいビューを設定するために、currentFocus に新しい日付の値を設定します。(するとカレンダーが自動的に更新され、新しいビューが表示されます)。

最後に、currentFocusDate を最小境界日と比較することにより、これより前に表示対象の月があるかどうかを確認します。表示対象の月がない場合には「戻る」ボタンを無効にします。また、(「進む」ボタンが無効になっている場合や、現在が最大境界日ではない場合のために) 「進む」ボタンを有効にする必要があるかどうかも確認します (リスト 19)。

リスト 19. 新しいナビゲーション・ボタンを無効にする必要があるかどうかを確認する
if(this.isLastCalendarMonth(this.bookingWindowMinDate, this.currentFocusDate)){
	this.calendarPreviousMonthButton.set("disabled", true);
}
if(!this.isLastCalendarMonth(this.bookingWindowMaxDate, this.currentFocusDate)){
	this.calendarFollowingMonthButton.set("disabled", false);
}

2 番目のボタンの動作も同じです。ラベルは “>>” であり、onClick によって goToNextMonth を呼び出します。goToNextMonth も同じ関数を使用しますが、currentFocusDate にプラス 1 をする点が異なります (リスト 20)。

リスト 20. 翌月に変更されるようにボタンを制御する関数
goToNextMonth : function (calendarInstance){
	this.currentFocusDate = dojoDate.add(this.currentFocusDate,"month",1);
	calendarInstance.set("currentFocus",this.currentFocusDate);
	if(this.isLastCalendarMonth(this.bookingWindowMaxDate, this.currentFocusDate)){
		this.calendarFollowingMonthButton.set("disabled", true);
	}	
	if(!this.isLastCalendarMonth(this.bookingWindowMinDate, this.currentFocusDate)){
		this.calendarPreviousMonthButton.set("disabled", false);
	}
}

最後に、リスト 21 にコントローラー・クラスに含まれるものの例を示しています。これらが新しい customCalendar を呼び出してインスタンス化します。

リスト 21. 新しいカスタム・カレンダー・ウィジェットのインスタンスを作成する方法のスナップショット
require(["myUtil/customCalendar","dojo/_base/connect"], function(myCalendar, connect){
	var params = {
		"bookingWindowMinDate":"10/9/2011",
		"bookingWindowMaxDate":"10/9/2012",
		"selectedDate":"8/15/2012",
		"onValueSelectedPublishIDString":"selectedValueID"
	};
	var myTest = myCalendar(params);
	myTest.placeAt("nodeId", "last");
		
	connect.subscribe("selectedValueID", function(date){
	  //Do some processing 
	  console.log("I got: ", date);
	});	
	
});

これを見るとわかるように、カスタム・カレンダー・ウィジェットに渡す必要がある値を持つ params オブジェクトを作成し、そのチャネルをサブスクライブしています。

他の関数

他にも、このシナリオで役に立つであろう以下のような関数やプロパティーがあります。

  • date オブジェクトとロケールを dojo/date/locale/isWeekend に渡すと、その日付が週末 (en-us ロケールの場合は土曜日と日曜日) の場合、真が返されます。この機能を利用して必要に応じて週末の日付を無効にしたり、週末の日付のスタイルを変更したりすることができます。
  • また Calendar dijit には、ストリングを値として引数に取る dayWidth プロパティーも含まれています。このプロパティーはデフォルトで “narrow” に設定されているため、曜日は省略形で表示されます (例えば、「Monday」ではなく「M」など)。他の値としては、完全に曜日を表示する “wide”、短縮形 (「Mon」など) で表示する “abbr” などがあります。

カスタム・ウィジェットに対する要件のバリエーションとして、2 つのカレンダーを表示し、ユーザーが次の月を見ようとしてクリックすると両方のカレンダーが共に次の月に進むようなウィジェットが要求されることがあるかもしれません (図 3)。これはウィジェットの変数を、値が 1 つの変数ではなく配列に変更することで容易に実現することができます。

図 3. 複数のカレンダーを 1 つのビューに表示する
複数のカレンダーを 1 つのビューに表示する

まとめ

JavaScript と CSS をそれぞれ変更することで、プロジェクトの要件をより適切に満たすカスタム・ウィジェットを容易に作成することができます。そのためのプラクティスとして、この記事では Calendar dijit を拡張するクラスを Dojo 1.7 を使用して宣言する方法について説明しました。また、日付操作、関連付け (hitch)、パブリッシュ/サブスクライブといった Dojo の機能や、Dojo のその他の基本的な関数について説明しました。読者の皆さんが、この記事で説明した手順を適用して Dojo dijit を拡張できるようになり、皆さん独自の新しいウィジェットを作成できるようになることを願っています。


ダウンロード

内容ファイル名サイズ
Sample applicationcustomCalendar17.zip4 KB

参考文献

学ぶために

製品や技術を入手するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=WebSphere, Mobile development, Web development
ArticleID=839777
ArticleTitle=Dojo Dijit を拡張してカスタム・ウィジェットを作成する
publish-date=10112012