< 上一课 | 下一课 >

课程 3:将定制 Dojo 窗口小部件添加至 Web 页面

在本课程中,您将定制 Dojo 窗口小部件插入到使用 Dojo 布局窗口小部件进行布置布局的 Web 页面。您将使用 Dojo API 将窗口小部件连接至输出字段并显示结果。

创建定制 Dojo 窗口小部件后,该窗口小部件会添加至“选用板”的“其他 Dojo 窗口小部件”抽屉,以便易于将该窗口小部件添加至 Web 页面。
  1. 右键单击 WebContent 文件夹,然后选择新建 > Web 页面
  2. 将页面命名为 index.html,然后单击完成
  3. 单击设计选项卡以在“设计”视图中显示该页面。
  4. 在选用板中,打开 Dojo 布局窗口小部件抽屉并将 BorderContainer 拖放到该页面上。这时,“插入边框容器”对话框将打开以允许您定制 BorderContainer 窗口小部件。
    1. 选中顶部中心复选框。
    2. 单击确定
  5. 现在,BorderContainer 窗口小部件的视觉视图会显示在“设计”视图中。单击 BorderContainer 可视化,然后单击属性选项卡以打开“属性”视图。
    “边框容器属性”视图
  6. 单击样式选项卡并在属性字段中,更新边框容器的以下值:
    • 将高度从 500px 更改为 700px。
    • 将宽度更改为 600px。
  7. 双击该区域以打开文本框。输入 Loan Payment Calculator,然后单击该文本框外部以应用更改。
    BorderContainer 的顶部区域
  8. 在选用板中,展开其他 Dojo 窗口小部件抽屉。
  9. LoanInput Dojo 窗口小部件拖到边框容器的中心区域。
  10. 单击源代码选项卡以切换至“源代码”视图。
  11. LoanInput 窗口小部件的 div 标记中,将标识属性设置为 "LoanInput"
    <div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
  12. LoanInput 窗口小部件下添加新的 div 标记以显示结果。您可以复制以下文本:
    <div>Monthly Payment: <span id="monthlyPayment"></span></div>
  13. 在紧跟着现有 Dojo 需求后面添加对 dijit/registry 的新模块需求。
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput" ],
  14. 将注册表参数添加至 require 回调函数。
    function(dojo, registry) {
    	dojo.ready(function() {
    	});
    });
  15. dojo.ready 函数内,执行下列步骤:
    1. 输入 var loanWidget = registry.b 并调用内容辅助。选择 byId(id) 建议,以便它会插入到您的页面中。
    2. 输入 "LoanInput" 作为 byId 函数的参数。
    3. LoanInput 参数的右括号后面输入一个分号。
    4. 在该行中针对 registry.byId 的调用的下方,输入 dojo.c 并调用内容辅助。在这里,您可以为 dojo.connect 选择另一个缺省模板。 此模板有两个版本。选择使用 dijit.registry.byId 的版本并将其插入到页面中。
    5. 将第一个参数设置为 LoanInput 并将第二个参数设置为 calculate
    6. 在 connect 函数的 function 参数内,添加以下代码:
      var payment = loanWidget.monthlyPayment;
      if (payment == NaN) {
      	payment = 0;
      }
      
      // update the result field
      var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    7. 必需模块已作为字符串的数组添加至 require 函数,在该数组中,每一个模块都是由斜杠分隔的模块分段字符串。在 require 函数内,将 "dojo/currency" 添加至需求依赖关系数组。
    8. dojo.ready 函数的最终代码应该与下列内容相似:
      dojo.ready(function() {
      		// get the LoanInput widget
      		loanWidget = registry.byId('LoanInput');
      		
      		// handle "calculate" from widget "LoanInput"
      		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
      			var payment = loanWidget.monthlyPayment;
      			if (payment == NaN) {
      				payment = 0;
      			}
      
      			// update the result field
      			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
      		});
      	});
  16. 保存页面。 index.html 文件的源代码类似于以下内容:
    <!DOCTYPE HTML>
    <html>  
    <head>
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/dijit.css">
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/claro/claro.css">
    <title>t1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
    	data-dojo-config="isDebug: false, async: true, parseOnLoad: true"
    	src="dojo/dojo/dojo.js"></script>
    <script type="text/javascript">
    require(
    	// Set of module identifiers
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput", "dojo/currency" ],
    	// Callback function, invoked on dependencies evaluation results
    function(dojo, registry) {
    	dojo.ready(function() {
    		// get the LoanInput widget
    		loanWidget = registry.byId('LoanInput');
    		
    		// handle "calculate" from widget "LoanInput"
    		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
    			var payment = loanWidget.monthlyPayment;
    			if (payment == NaN) {
    				payment = 0;
    			}
    
    			// update the result field
    			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
    			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    		});
    	});
    });
    </script>
    </head>
    <body class="claro">
    	<div id="BorderContainer" style="height: 500px; width: 500px"
    		data-dojo-type="dijit.layout.BorderContainer"
    		data-dojo-props="design:'headline'">
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'top'">Loan Payment Calculator</div>
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'center'">
    			<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
    			<div>Monthly Payment: <span id="monthlyPayment"></span></div>
    		</div>
    	</div>
    
    	</body>
    </html>
  17. 现在,可以在服务器上测试应用程序。 在“企业资源管理器”视图中,右键单击 index.html,然后选择运行方式 > 在服务器上运行
  18. 选择 Web 预览服务器,然后单击完成。这时,将在 Web 浏览器中打开您的页面。
  19. 输入贷款金额并验证结果字段是否会更新。
    每月付款

课程复习要点

您已将定制 Dojo 窗口小部件添加至页面,并且已在服务器上测试此窗口小部件。

您了解了以下内容:
  • 如何将定制窗口小部件从选用板添加到 Web 页面
  • 如何在服务器上运行 Dojo 应用程序
  • 如何测试您创建的 Dojo 窗口小部件
< 上一课 | 下一课 >
指示主题类型的图标 教程课程主题
信息中心的条款和条件 | 反馈

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

文件名:loan_lesson3.html