Dojo Toolkit 包括许多标准窗口小部件,其中包括输入字段、组合框和单选按钮。您还可以创建定制窗口小部件以包含可复用的 UI 元素或特定的功能部分。在本课程中,您将创建新的定制 Dojo 窗口小部件。
Dojo 窗口小部件由“新建 Dojo 窗口小部件”向导为您创建的三个文件组成:
- HTML 文件
- JavaScript 文件
- CSS 文件
然后,编辑 HTML 模板和 JavaScript 文件。
- 在“企业资源管理器”视图中,右键单击 WebContent/dojo 文件夹并选择。 将显示“新建 Dojo 窗口小部件”向导。
- 在模块名称字段中,输入 loan。
- 在窗口小部件名称字段中,输入 LoanInput。 将自动填充相对于窗口小部件路径的 HTML 模板和样式表。
- 单击完成。 这时,将在名为 dojo/loan 的文件夹下面创建三个文件:
- templates/LoanInput.html
- 窗口小部件的 UI 模板。
- themes/LoanInput.css
- 为窗口小部件提供样式。
- LoanInput.js
- 提供窗口小部件的 JavaScript 后端和业务逻辑部分。
- 将在编辑器中打开窗口小部件的 LoanInput JavaScript 源文件。
- 在 templateString 字段下,添加三个将用于存放计算结果的额外字段:principal、interestPaid 和 monthlyPayment,这些字段都应该具有缺省值 0。确保在每一个字段后面都添加一个逗号。
templateString : dojo.cache("loan", "templates/LoanInput.html"),
principal: 0,
interestPaid: 0,
monthlyPayment: 0,
- 在 postCreate 函数下,添加一个名为 calculate 的新函数。请确保在 postCreate 函数后面添加一个逗号。将新的 calculate 函数暂时留空。
postCreate : function() {
},
// this function will perform the calculations for our loan payment
calculate: function() {
}
- 在“企业资源管理器”视图中,双击 templates/LoanInput.html 以打开窗口小部件的 HTML 模板。
- 单击下一步并接受缺省值。单击完成。
- 在现有的 div 内,创建三个额外的子代 div 标记。您可以通过输入 <d 并随后按 Ctrl+空格键来使用内容辅助。在弹出窗口中,选择 <>div 以插入该标记。
- 在每一个新 div 标记内,添加文本标签 Loan
Amount:、Interest Rate: 和 Term
(years):。完成时,代码应该与下列内容相似:
<div class="LoanInput">
<div>Loan Amount: </div>
<div>Interest Rate: </div>
<div>Term (years): </div>
</div>
- 现在,为每一个输入字段添加 Dojo 窗口小部件:
- 在工作空间中,通过单击相应的选项卡来显示选用板。您应该看到包含 Dojo 窗口小部件的几个抽屉。
- 通过单击来展开 Dojo 表单窗口小部件抽屉。
- 选择 CurrencyTextBox 并将其拖放到 div 标记内 Loan Amount 标签的旁边。
- 在新创建的输入元素内,输入 data- 并使用内容辅助(Ctrl+空格键)来显示属性的列表。单击 data-dojo-props 以将其插入。为了遵循 HTML5 标准,从 Dojo Toolkit SDK
1.7 开始,缺省情况下将通过 data-dojo-props 来设置属性。
- 在 data-dojo-props 属性内,输入 cu 并使用内容辅助(Ctrl+空格键)来显示属性的列表。单击 currency 以将其插入。
- 在 currency 属性内,输入 USD。
代码应该与下列内容相似::
<div>Loan Amount: <input type="text"
data-dojo-type="dijit.form.CurrencyTextBox"
data-dojo-props="currency: 'USD'">
</div>
- 接下来,为 Interest Rate 字段插入 Dojo 窗口小部件标记。将光标放在第二个 div 标记内的标签后,输入 <input d> 并将光标放在 d 旁边,使用内容辅助(Ctrl+空格键)来显示属性的列表。单击 data-dojo-type 以将其插入。
- 在 data-dojo-type 属性内,再次调用内容辅助以显示可用的 Dojo 窗口小部件的列表。开始输入 dijit.form.N,直到您看到 NumberSpinner 为止。单击 NumberSpinner 以将其插入到您的页面中。
- 添加 data-dojo-props 属性。在该属性内,设置以下属性(用逗号分隔):
- value : 5
- smallDelta : .05
- intermediateChanges : true
- 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>
- 从选用板中,将 ComboBox 窗口小部件拖放到 Term (years) div 中。
- 当您从选用板拖放它们时(例如 ComboBox),某些窗口小部件将有其他配置可用。在“插入组合框”对话框中,您可以添加 ComboBox 的值。
添加值 1、2、3、4、5、10、15 和 30。
- 通过将 15 设置为 True 以将其设置为缺省值。
单击确定。
- 接下来,向每一个输入窗口小部件添加 data-dojo-attach-point 和 data-dojo-attach-event 属性。为 data-dojo-attach-point 属性指定的值是可从 LoanInput.js 文件引用的窗口小部件实例的名称。
data-dojo-attach-event 属性会将事件处理程序添加至窗口小部件。
- 使用内容辅助向每一个窗口小部件添加 data-dojo-attach-point 属性。分别将其命名为 amount、rate 和 term。
- 为每一个窗口小部件添加 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>
- 保存并关闭 LoanInput.html,然后重新打开 LoanInput.js。
- 为该 HTML 文件中使用的三个窗口小部件添加 Dojo 模块依赖关系。当该页面运行时,这些依赖关系将装入创建窗口小部件时所需的资源。define 函数的第二个自变量是依赖关系的数组。
直接在 "dijit/_WidgetsInTemplateMixin", 依赖关系后面,添加以下模块路径(用逗号分隔):
- "dijit/form/CurrencyTextBox"
- "dijit/form/NumberSpinner"
- "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"
],
- 现在,为您先前在步骤 7 中创建的计算函数添加以下代码。如果需要,您可以使用内容辅助进行试验。请注意,内容辅助中提供了标准 JavaScript 对象(例如 Math 对象)。也提供了我们先前定义的变量 principal、interestPaid 和 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;
}
}
计算函数会存储贷款的本金,计算月度付款额以及支付的利息金额。
- 保存并关闭构成该定制窗口小部件的所有文件。
现在,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;
}
}
});
});