< Previous | Next >

Lesson 3: Add the custom Dojo widget to a web page

In this lesson you insert your custom Dojo widget into a web page that is laid out using a Dojo layout widget. You use Dojo APIs to connect your widget to the output field and display the results.

About this task

After you create a custom Dojo widget, the widget is added to the Other Dojo Widgets drawer of the Palette, making it easy to add the widget to the web page.

Procedure

  1. Right-click the WebContent folder and select New > Web Page.
  2. Name the page index.html and click Finish.
  3. Click the Design tab to display the page in the Design view.
  4. In the palette, open the Dojo Layout Widgets drawer and drop a BorderContainer onto the page. The Insert Border Container dialog opens to allow you to customize the BorderContainer widget.
    1. Select the Top and Center check boxes.
    2. Click OK.
  5. A visual view of the BorderContainer widget is now displayed in the Design view. Click the BorderContainer visualization and then click the Properties tab to open the Properties view.
    Border Container Properties view
  6. Click the Styles tab and in the Properties field, update the following values for the border container:
    • Change the height from 500px to 700px.
    • Change the width to 600px.
  7. Double-click the region to open a text box. Type Loan Payment Calculator and then click outside the text box to apply your change.
    Top region of BorderContainer
  8. In the palette, expand the Other Dojo Widgets drawer.
  9. Drop the LoanInput Dojo widget into the center region of the border container.
  10. Click the Source tab to switch to the Source view.
  11. In the LoanInput widget div tag, set the id attribute to "LoanInput":
    <div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
  12. Add a new div tag beneath the LoanInput widget to show the results. You can copy the following text:
    <div>Monthly Payment: <span id="monthlyPayment"></span></div>
  13. Add a new module require for dijit/registry immediately after the existing dojo require.
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput" ],
  14. Add a registry parameter to the require callback function.
    function(dojo, registry) {
    	dojo.ready(function() {
    	});
    });
  15. Inside the dojo.ready function, perform the following steps:
    1. Type var loanWidget = registry.b and invoke content assist. Select the byId(id) suggestion so that it inserts into your page.
    2. Type "LoanInput" as the parameter for the byId function.
    3. Type a semicolon after the closing parenthesis for the LoanInput parameter.
    4. On the line under your call to registry.byId, type dojo.c and invoke content assist. Here you can select another default template for dojo.connect. There are two versions of this template. Choose the version that uses dijit.registry.byId and insert it into your page.
    5. Set the first parameter as LoanInput and the second as calculate.
    6. Inside the function parameter of the connect function, add the following code:
      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. Required modules are added to the require function as an array of strings, where each module is a slash separated string of module segments. Inside the require function, add "dojo/currency" to the require dependencies array.
    8. Your final code for the dojo.ready function should look like this:
      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. Save the page. The source for the index.html file looks like the following:
    <!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. Now it is time to test your application on the server. In the Enterprise Explore view, right-click index.html and select Run As > Run on Server.
  18. Select the Web Preview Server and click Finish. Your page opens in a web browser.
  19. Enter a loan amount and verify that the results field updates.
    monthly payment

Lesson checkpoint

You added your custom Dojo widget to the page and tested it on a server.

You learned:
  • How to add a custom widget to a web page from the palette
  • How to run a Dojo application on a server
  • How to test the Dojo widgets that you created
< Previous | Next >
Icon that indicates the type of topic Tutorial lesson topic
Timestamp icon Last updated: July 17, 2017 21:58

File name: loan_lesson3.html