< 上一课 | 下一课 >

课程 2:创建定制 Dojo 窗口小部件

Dojo Toolkit 包括许多标准窗口小部件,其中包括输入字段、组合框和单选按钮。您还可以创建定制窗口小部件以包含可复用的 UI 元素或特定的功能部分。在本课程中,您将创建新的定制 Dojo 窗口小部件。

Dojo 窗口小部件由“新建 Dojo 窗口小部件”向导为您创建的三个文件组成: 然后,编辑 HTML 模板和 JavaScript 文件。
  1. 在“企业资源管理器”视图中,右键单击 WebContent/dojo 文件夹并选择新建 > Dojo 窗口小部件 将显示“新建 Dojo 窗口小部件”向导。
  2. 模块名称字段中,输入 loan
  3. 窗口小部件名称字段中,输入 LoanInput 将自动填充相对于窗口小部件路径的 HTML 模板和样式表。
    “新建 Dojo 窗口小部件”向导
  4. 单击完成 这时,将在名为 dojo/loan 的文件夹下面创建三个文件:
    templates/LoanInput.html
    窗口小部件的 UI 模板。
    themes/LoanInput.css
    为窗口小部件提供样式。
    LoanInput.js
    提供窗口小部件的 JavaScript 后端和业务逻辑部分。
  5. 将在编辑器中打开窗口小部件的 LoanInput JavaScript 源文件。
  6. templateString 字段下,添加三个将用于存放计算结果的额外字段:principalinterestPaidmonthlyPayment,这些字段都应该具有缺省值 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 内,创建三个额外的子代 div 标记。您可以通过输入 <d 并随后按 Ctrl+空格键来使用内容辅助。在弹出窗口中,选择 <>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+空格键)来显示属性的列表。单击 data-dojo-props 以将其插入。为了遵循 HTML5 标准,从 Dojo Toolkit SDK 1.7 开始,缺省情况下将通过 data-dojo-props 来设置属性。
    5. 在 data-dojo-props 属性内,输入 cu 并使用内容辅助(Ctrl+空格键)来显示属性的列表。单击 currency 以将其插入。
    6. 在 currency 属性内,输入 USD。 代码应该与下列内容相似::
      <div>Loan Amount: <input type="text"
      				data-dojo-type="dijit.form.CurrencyTextBox"
      				data-dojo-props="currency: 'USD'">
        </div>
    7. 接下来,为 Interest Rate 字段插入 Dojo 窗口小部件标记。将光标放在第二个 div 标记内的标签后,输入 <input d> 并将光标放在 d 旁边,使用内容辅助(Ctrl+空格键)来显示属性的列表。单击 data-dojo-type 以将其插入。
    8. 在 data-dojo-type 属性内,再次调用内容辅助以显示可用的 Dojo 窗口小部件的列表。开始输入 dijit.form.N,直到您看到 NumberSpinner 为止。单击 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 以将其设置为缺省值。 单击确定
  13. 接下来,向每一个输入窗口小部件添加 data-dojo-attach-pointdata-dojo-attach-event 属性。为 data-dojo-attach-point 属性指定的值是可从 LoanInput.js 文件引用的窗口小部件实例的名称。 data-dojo-attach-event 属性会将事件处理程序添加至窗口小部件。
    1. 使用内容辅助向每一个窗口小部件添加 data-dojo-attach-point 属性。分别将其命名为 amountrateterm
    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 文件中使用的三个窗口小部件添加 Dojo 模块依赖关系。当该页面运行时,这些依赖关系将装入创建窗口小部件时所需的资源。define 函数的第二个自变量是依赖关系的数组。 直接在 "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 中创建的计算函数添加以下代码。如果需要,您可以使用内容辅助进行试验。请注意,内容辅助中提供了标准 JavaScript 对象(例如 Math 对象)。也提供了我们先前定义的变量 principalinterestPaidmonthlyPayment
    // 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 文件
< 上一课 | 下一课 >
指示主题类型的图标 教程课程主题
信息中心的条款和条件 | 反馈

时间戳记图标 最近一次更新时间: 2014 年 4 月 17 日

文件名:loan_lesson2.html