En esta lección se inserta su widget Dojo personalizado en una página web que se representa utilizando un widget de diseño Dojo. Puede utilizar las API de Dojo para conectar el widget ael campo de salida y visualizar los resultados.
<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
<div>Pago mensual: <span id="monthlyPayment"></span></div>
[ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput" ],
function(dojo, registry) {
dojo.ready(function() {
});
});
var payment = loanWidget.monthlyPayment;
if (payment == NaN) {
payment = 0;
}
// actualizar el campo de resultados
var formattedValue = dojo.currency.format(payment, {currency: "USD"});
dojo.attr("monthlyPayment", "innerHTML", formattedValue);
dojo.ready(function() {
// obtener el widget LoanInput
loanWidget = registry.byId('LoanInput');
// manejar "calculate" desde el widget "LoanInput"
dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
var payment = loanWidget.monthlyPayment;
if (payment == NaN) {
payment = 0;
}
// actualizar el campo de resultados
var formattedValue = dojo.currency.format(payment, {currency: "USD"});
dojo.attr("monthlyPayment", "innerHTML", formattedValue);
});
});
<!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(
// Conjunto de identificadores de módulo
[ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput", "dojo/currency" ],
// Función de devolución de llamada, invocada en resultado de evaluación de dependencias
function(dojo, registry) {
dojo.ready(function() {
// obtener el widget LoanInput
loanWidget = registry.byId('LoanInput');
// manejar "calculate" desde el widget "LoanInput"
dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
var payment = loanWidget.monthlyPayment;
if (payment == NaN) {
payment = 0;
}
// actualizar el campo de resultados
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'">Calculadora de pagos de préstamos</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
<div>Pago mensual<span id="monthlyPayment"></span></div>
</div>
</div>
</body>
</html>
Ha añadido su widget Dojo personalizado a la página y lo ha probado en un servidor.