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
Procedure
- Right-click the WebContent folder and select New > Web Page.
- Name the page index.html and click Finish.
- Click the Design tab to display the page in the Design view.
- 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.
- Select the Top and Center check boxes.
- Click OK.
- 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.
- 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.
- Double-click the region to open a text box. Type Loan
Payment Calculator and then click outside the text box
to apply your change.
- In the palette, expand the Other Dojo Widgets drawer.
- Drop the LoanInput Dojo widget into the center region of the border container.
- Click the Source tab to switch to the Source view.
- In the LoanInput widget div tag,
set the id attribute to "LoanInput":
<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
- 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>
- 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" ],
- Add a registry parameter to the require callback function.
function(dojo, registry) { dojo.ready(function() { }); });
- Inside the dojo.ready function, perform
the following steps:
- Type var loanWidget = registry.b and invoke content assist. Select the byId(id) suggestion so that it inserts into your page.
- Type "LoanInput" as the parameter for the byId function.
- Type a semicolon after the closing parenthesis for the LoanInput parameter.
- 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.
- Set the first parameter as LoanInput and the second as calculate.
- 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);
- 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.
- 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); }); });
- 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>
- 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.
- Select the Web Preview Server and click Finish. Your page opens in a web browser.
- Enter a loan amount and verify that the results field updates.
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

