< 前へ | 次へ >

レッスン 2: カスタム Dojo ウィジェットを作成する

Dojo toolkit には、入力フィールド、コンボ・ボックス、およびラジオ・ボタンなど、多数の標準ウィジェットが含まれます。さらに、 再利用可能な UI エレメントや特定の機能パーツをカプセル化するカスタム・ウィジェットを 作成できます。このレッスンでは、新規カスタム Dojo ウィジェットを作成します。

Dojo ウィジェットは、「新規 Dojo ウィジェット」ウィザードが作成する 3 つのファイルで構成されています。 それから、HTML テンプレートと JavaScript ファイルを編集します。
  1. 「エンタープライズ・エクスプローラー」ビューで、WebContent/dojo フォルダーを右クリックして、「新規」 > 「Dojo ウィジェット」を選択します。 「新規 Dojo ウィジェット」ウィザードが表示されます。
  2. 「モジュール名」フィールドに、loan と入力します。
  3. 「ウィジェット名」フィールドに、LoanInput と入力します。 ウィジェット・パスの関連 HTML テンプレートとスタイル・シートが自動的に取り込まれます。
    「新規 Dojo ウィジェット」ウィザード
  4. 「終了」をクリックします。 次の 3 つのファイルが dojo/loan フォルダーの下に作成されます。
    templates/LoanInput.html
    ウィジェットの UI テンプレート。
    themes/LoanInput.css
    ウィジェットのスタイルを指定します。
    LoanInput.js
    ウィジェットの JavaScript バックエンドおよびビジネス・ロジック部分を実現します。
  5. ウィジェットの LoanInput JavaScript ソース・ファイル がエディターに開きます。
  6. templateString フィールドの下に、計算結果を保持するために使用される 3 つのフィールド (principalinterestPaid、および monthlyPayment) をさらに追加します。すべてデフォルト値は 0 です。必ず各フィールドの後にコンマを追加する必要があります。
    templateString : dojo.cache("loan", "templates/LoanInput.html"),
    principal: 0,
    interestPaid: 0,
    monthlyPayment: 0,
  7. postCreate 関数の下に、calculate という新しい関数を追加します。必ず postCreate 関数の後ろにコンマを追加します。この時点では新しい calculate 関数を空のままにします。
    postCreate : function() {
    },
    // this function will perform the calculations for our loan payment
    calculate: function() {
    }
  8. 「エンタープライズ・エクスプローラー」ビューで、templates/LoanInput.html をダブルクリックして、 ウィジェットの HTML テンプレートを開きます。
  9. 「次へ」をクリックし、デフォルトを受け入れます。 「終了」をクリックします。
  10. 既存の div 内で、3 つの子 div タグを作成します。 コンテンツ・アシストは、<d を入力してから Ctrl + Space を押して、使用できます。 ポップアップ・ウィンドウで、<> div を選択してタグを挿入します。
  11. それぞれの新しい div タグ内に、テキスト・ラベルを追加します。– Loan Amount:Interest Rate:、および Term (years): です。 完了すると、コードは次のようになります。
    <div class="LoanInput">
    <div>Loan Amount: </div>
    <div>Interest Rate: </div>
    <div>Term (years): </div>
    </div>
  12. ここで、入力フィールドそれぞれの Dojo ウィジェットを追加します。
    1. ワークスペースで、適切なタブをクリックすると、 パレットの表示が変わります。 Dojo ウィジェットを含む複数のドロワーが表示されるはずです。
    2. 「Dojo フォーム・ウィジェット」ドロワーをクリックして、 展開します。
      「Dojo フォーム・ウィジェット」ドロワー
    3. CurrencyTextBox を選択して、 div タグ内で Loan Amount ラベルの隣にドロップします。
    4. 新しく作成された入力エレメント内で、data- という文字を入力して、コンテンツ・アシスト (Ctrl + Space) を使用すると、属性のリストが表示されます。 data-dojo-props をクリックしてそれを挿入します。HTML5 標準に従うために、Dojo Toolkit SDK 1.7 以降では、デフォルトで data-dojo-props によって属性が設定されます。
    5. data-dojo-props 属性内で、cu という文字を入力して、コンテンツ・アシスト (Ctrl + Space) を使用すると、属性のリストが表示されます。currency をクリックしてそれを挿入します。
    6. currency 属性内で、USD と入力します。 コードは次のようになります。
      <div>Loan Amount: <input type="text"
      				data-dojo-type="dijit.form.CurrencyTextBox"
      				data-dojo-props="currency: 'USD'">
      </div>
    7. 次に、Dojo ウィジェット・マークアップを Interest Rate フィールドに挿入します。ラベルの後ろの 2 番目の div タグの中にカーソルを置き、<input d>と入力し、カーソルが d の横にある状態でコンテンツ・アシスト (Ctrl + Space) を使用すると、属性のリストが表示されます。 data-dojo-type をクリックしてそれを挿入します。
    8. data-dojo-type 属性内で、再びコンテンツ・アシストを起動して、利用可能な Dojo ウィジェットのリストを表示します。NumberSpinner が表示されるまで、dijit.form.N と入力していきます。 NumberSpinner をクリックして、ページに挿入します。
    9. data-dojo-props 属性を追加します。属性内で、次のプロパティーをコンマで区切って設定します。
      1. value : 5
      2. smallDelta : .05
      3. intermediateChanges : true
      4. constraints : {min: 0}
      コンテンツ・アシストを使用して、上の currency 属性を追加する同じ方法でこれらのプロパティーを挿入できます。属性のプロパティーの設定を完了すると、コードは次のようになります。
      <div>Interest Rate: <input data-dojo-type="dijit.form.NumberSpinner"
      			data-dojo-props="value: 5, smallDelta:= 0.05, intermediateChanges: true, constraints: {min: 0}"> </input></div>
    10. パレットから、ComboBox ウィジェットを Term (years) div にドロップします。
    11. ComboBox など、一部のウィジェットでは、パレットからドロップするときに利用できる追加の構成があります。 「コンボ・ボックスの挿入」ダイアログ・ボックスで、ComboBox の値を追加できます。 1、2、3、4、5、10、15、30 の値を追加します。
    12. 15 に対して True を設定して、デフォルト値にします。 「OK」をクリックします。
  13. 次に data-dojo-attach-point および data-dojo-attach-event 属性を ユーザーの入力ウィジェットのそれぞれに追加します。data-dojo-attach-point 属性に指定した値は、LoanInput.js ファイルからウィジェット・インスタンスが参照される際の名前です。data-dojo-attach-event 属性は ウィジェットにイベント処理を追加します。
    1. コンテンツ・アシストを使用して、data-dojo-attach-point 属性を各ウィジェットに追加します。amountrate、 および term という名前をそれぞれに付けます。
    2. 各ウィジェットに、data-dojo-attach-event="onChange: calculate" を追加します。このウィジェットで onChange イベントが発生するたびに、LoanInput.js ファイルに追加した計算関数が呼び出されます。LoanInput.html ファイルの最終結果は 次のようになります。
      <div class="LoanInput">
      <div>Loan Amount: <input type="text"
      data-dojo-type="dijit.form.CurrencyTextBox"
      data-dojo-props="currency: 'USD'"
      data-dojo-attach-point="amount"
      data-dojo-attach-event="onChange: calculate"></div>
      <div>Interest Rate: <input data-dojo-type="dijit.form.NumberSpinner"
      data-dojo-props="value:5,
      smallDelta:0.05,
      intermediateChanges:true,
      constraints:{min: 0}"
      data-dojo-attach-point="rate"
      data-dojo-attach-event="onChange: calculate">
      </div>
      <div>Term (years): <select name="select"
      data-dojo-type="dijit.form.ComboBox"
      data-dojo-props="autocomplete:false"
      data-dojo-attach-point ="term"
      data-dojo-attach-event="onChange: calculate">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>10</option>
      <option selected="selected">15</option>
      <option>30</option>
      </select>
      </div>
      </div>
  14. LoanInput.html ファイルを保存してから閉じ、LoanInput.js を再び開きます。
  15. html ファイルで使用される 3 つのウィジェットに、Dojo モジュールの依存関係を追加します。 これらの依存関係は、ページを実行するときに、ウィジェットを作成するために必要なリソースをロードします。define 関数の 2 番目の引数は、依存関係の配列です。 "dijit/_WidgetsInTemplateMixin", 依存関係のすぐ後ろに、次のモジュール・パスをコンマで区切って追加します。
    1. "dijit/form/CurrencyTextBox"
    2. "dijit/form/NumberSpinner"
    3. "dijit/form/ComboBox"
    コードは次のようになります。
    define("loan/LoanInput",
    [ "dojo", "dijit", "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/form/CurrencyTextBox",
    "dijit/form/NumberSpinner",
    "dijit/form/ComboBox",
    "dojo/text!loan/templates/LoanInput.html"
    ],
  16. ここで、先ほど手順 7 で作成した計算関数のコードを以下のように追加します。必要に応じてコンテンツ・アシストを利用することもできます。 Math オブジェクトなど標準 JavaScript オブジェクトが、 コンテンツ・アシストで利用できます。 以前に定義した principalinterestPaid、および monthlyPayment 変数もすべて利用できます。
    // this function will perform the calculations for our loan repayment
    	calculate: function() {
    		this.principal = this.amount.attr('value');
    		if(this.principal == NaN) {
    			this.monthlyPayment = 0;
    			this.principal = 0;
    			this.interestPaid = 0;
    		} else {
    			var interestRate = this.rate.attr('value') / 1200;
    			var termInMonths = this.term.attr('value') * 12;
    			
    			this.monthlyPayment = Math.pow(1 + interestRate, termInMonths) - 1;
    			this.monthlyPayment = interestRate + (interestRate / this.monthlyPayment);
    			this.monthlyPayment = this.monthlyPayment * this.principal;
    			
    			this.interestPaid = (this.monthlyPayment * termInMonths) - this.principal;
    		}
    }
    この計算関数は、ローンの元本を保管し、毎月の支払額、支払い利子の総額を計算します。
  17. カスタム・ウィジェットを構成するすべてのファイルを保存し、閉じます。
ここで LoanInput.js は次のようになります。
define("loan/LoanInput", [ "dojo", "dijit", "dijit/_Widget",
		"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dijit/form/CurrencyTextBox", "dijit/form/NumberSpinner", "dijit/form/ComboBox",
		"dojo/text!loan/templates/LoanInput.html" ], function(dojo, dijit,
		_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, CurrencyTextBox, NumberSpinner, ComboBox) {
	dojo.declare("loan.LoanInput", [ dijit._Widget, dijit._TemplatedMixin,
			dijit._WidgetsInTemplateMixin ], {
		// Path to the template
		templateString : dojo.cache("loan", "templates/LoanInput.html"),
		principal: 0,
		interestPaid: 0,
		monthlyPayment: 0,


		// Override this method to perform custom behavior during dijit construction.
		// Common operations for constructor:
		// 1) Initialize non-primitive types (i.e. objects and arrays)
		// 2) Add additional properties needed by succeeding lifecycle methods
		constructor : function() {
			
		},

		// When this method is called, all variables inherited from superclasses are 'mixed in'.
		// Common operations for postMixInProperties
		// 1) Modify or assign values for widget property variables defined in the template HTML file
		postMixInProperties : function() {
		},

		// postCreate() is called after buildRendering().  This is useful to override when 
		// you need to access and/or manipulate DOM nodes included with your widget.
		// DOM nodes and widgets with the dojoAttachPoint attribute specified can now be directly
		// accessed as fields on "this". 
		// Common operations for postCreate
		// 1) Access and manipulate DOM nodes created in buildRendering()
		// 2) Add new DOM nodes or widgets 
		postCreate : function() {
		},
		//this function will perform the calculations for our loan payment
		calculate: function() {
			this.principal = this.amount.attr('value');
			if(this.principal == NaN) {
				this.monthlyPayment = 0;
				this.principal = 0;
				this.interestPaid = 0;
			} else {
				var interestRate = this.rate.attr('value') / 1200;
				var termInMonths = this.term.attr('value') * 12;
				
				this.monthlyPayment = Math.pow(1 + interestRate, termInMonths) - 1;
				this.monthlyPayment = interestRate + (interestRate / this.monthlyPayment);
				this.monthlyPayment = this.monthlyPayment * this.principal;
				
				this.interestPaid = (this.monthlyPayment * termInMonths) - this.principal;
			}
}
	});
});

演習のチェックポイント

カスタム Dojo ウィジェットを作成しました。

この演習では以下のことを学習しました。
  • Dojo コードを素早く記述するためにコンテンツ・アシストやテンプレートを使用する方法
  • カスタム Dojo ウィジェットに合わせて HTML テンプレートを変更する方法
  • カスタム Dojo ウィジェットに合わせて JavaScript ファイルを変更する方法
< 前へ | 次へ >
トピックのタイプを示すアイコン チュートリアルの演習のトピック
インフォメーション・センターのご利用条件 | フィードバック

タイム・スタンプ・アイコン 最終更新: May 29, 2014 10:20

ファイル名: loan_lesson2.html