< Anterior | Siguiente >

Lección 3: Añadir el widget Dojo personalizado a una página web

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.

Después de crear un widget Dojo personalizado, el widget se añade al cajón Otros widgets Dojo de la Paleta, lo que permite añadir fácilmente el widget a la página web.
  1. Pulse el botón derecho del ratón en la carpeta WebContent y seleccione Nuevo > Página web.
  2. Ponga el nombre index.html a la página y pulse Finalizar.
  3. Pulse la pestaña Diseño para visualizar la página en la vista Diseño.
  4. En la paleta, abra el cajón Widgets de diseño Dojo y deje en la página un BorderContainer. Se abre el diálogo Insertar contenedor de bordes para que pueda personalizar el widget BorderContainer.
    1. Marque los recuadros de selección Superior y Central.
    2. Pulse Aceptar.
  5. Ahora se visualiza una vista visual del widget BorderContainer en la vista Diseño. Pulse la visualización BorderContainer y, a continuación, pulse la pestaña Propiedades para que se abra la vista Propiedades.
    Vista Propiedades del contenedor de bordes
  6. Pulse la pestaña Estilos y en el campo Propiedades actualice los valores siguientes para el contenedor de bordes:
    • Cambie la altura de 500 px a 700 px.
    • Cambie el ancho a 600 px.
  7. Efectúe una doble pulsación en la región para que se abra un recuadro de texto. Teclee en la Calculadora de pagos de prestamos y, a continuación, pulse fuera del recuadro de texto para que se aplique el cambio.
    Parte superior de BorderContainer
  8. En la paleta, expanda el cajón Otros widgets Dojo.
  9. Arrastre el widget Dojo LoanInput a la parte central del contenedor de bordes.
  10. Pulse la pestaña Origen para conmutar a la vista Origen.
  11. En el código div del widget LoanInput, defina el atributo de ID en "LoanInput":
    <div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
  12. Añada un código div nuevo debajo del widget LoanInput para mostrar los resultados. Puede copiar el texto siguiente:
    <div>Pago mensual: <span id="monthlyPayment"></span></div>
  13. Añada un nuevo requisito de módulo para dijit/registry inmediatamente después del requisito existente de dojo
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput" ],
  14. Añada un parámetro de registro a la función de devolución de llamadas de requisito.
    function(dojo, registry) {
    		dojo.ready(function() {
    	});
    });
  15. En la función dojo.ready, lleve a cabo los pasos siguientes:
    1. Escriba var loanWidget = registry.b e invoque la asistencia de contenido. Seleccione la sugerencia byId(id) que se inserta en la página.
    2. Escriba "LoanInput" como parámetro para la función byId.
    3. Escriba un punto y coma después del paréntesis de cierre para el parámetro LoanInput.
    4. En la línea debajo de la llamada a registry.byId, escriba dojo.c e invoque la asistencia de contenido. Aquí puede seleccionar otra plantilla predeterminada para dojo.connect. Hay dos versiones de esta plantilla. Elija la versión que utiliza dijit.registry.byId e insértela en su página.
    5. Establezca el primer parámetro como LoanInput y el segundo como calculate.
    6. En el parámetro de función de la función de conexión, añada el código siguiente:
      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);
    7. Los módulos necesarios se añaden a la función require como una matriz de las series, en que cada módulo es una serie de segmentos de módulos separada por barras inclinadas. Dentro de la función require, añada "dojo/currency" a la matriz de dependencia de requisito.
    8. El código final para la función dojo.ready debe tener un aspecto similar al siguiente:
      		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);
      		});
      	});
  16. Guarde la página. El origen del archivo index.html tiene un aspecto similar al siguiente:
    <!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>
  17. Ahora es el momento de probar la aplicación en el servidor. En la vista Explorador empresarial, pulse el botón derecho del ratón en index.html y seleccione Ejecutar como > Ejecutar en servidor.
  18. Seleccione Servidor de vista previa web y pulse Finalizar. La página se abre en un navegador web.
  19. Escriba un importe del préstamo y verifique que el campo de resultados se actualiza.
    pago mensual

Punto de comprobación de la lección

Ha añadido su widget Dojo personalizado a la página y lo ha probado en un servidor.

Ha aprendido:
  • Cómo añadir un widget personalizado a una página web desde la paleta
  • Cómo ejecutar una aplicación Dojo en un servidor
  • Cómo probar los widgets Dojo que ha creado
< Anterior | Siguiente >
Icono que indica el tipo de tema Tema de lección de guía de aprendizaje
Términos y condiciones para centros de información | Comentarios

Icono de indicación de fecha y hora Última actualización: 22 de abril de 2014

Nombre de archivo: loan_lesson3.html