< Anterior | Siguiente >

Lección 2: Crear un widget Dojo personalizado

Dojo Toolkit incluye zonas de widgets estándar; entre ellos, los campos de entrada, los recuadros combinados y los botones de selección. También puede crear widgets personalizados para encapsular elementos de la UI reutilizables o una parte específica de funcionalidad. En esta lección se crea un nuevo widget de Dojo personalizado.

Los widgets Dojo están compuestos por tres archivos que crea el asistente Widget Dojo nuevo: Posteriormente, edite la plantilla HTML y el archivo JavaScript:
  1. En la vista Explorador empresarial, pulse el botón derecho del ratón en la carpeta WebContent/dojo y seleccione Nuevo > Widget Dojo. Aparece el asistente Nuevo widget de Dojo.
  2. En el campo Nombre de módulo, escriba préstamo.
  3. En el campo Nombre de widget, escriba LoanInput. Las vías de acceso relativas de la plantilla HTML y la hoja de estilo del widget se rellenan automáticamente.
    Asistente Nuevo widget de Dojo
  4. Pulse Finalizar. Se crean tres archivos en una carpeta denominada dojo/loan:
    templates/LoanInput.html
    La plantilla UI para el widget.
    themes/LoanInput.css
    Proporciona el estilo al widget.
    LoanInput.js
    Proporciona la parte de lógica empresarial y de fondo de JavaScript del widget.
  5. En el editor se abre el archivo de origen JavaScript LoanInput del widget.
  6. Debajo del campo templateString, añada tres campos adicionales que se utilizarán para conservar los resultados de sus cálculos de principal, interestPaid y monthlyPayment. Deberían tener todos los valores predeterminados de 0. No olvide poner una coma tras cada campo.
    templateString : dojo.cache("loan", "templates/LoanInput.html"),
    principal: 0,
    interestPaid: 0,
    monthlyPayment: 0,
  7. Debajo de la función postCreate, añada una función nueva denominada calculate. No olvide poner una coma tras la función postCreate. Deje la nueva función calculate vacía por ahora.
    				postCreate : function() {
    },
    // esta función llevará a cabo los cálculos para el pago de su préstamo
    calculate: function() {
    }
  8. En la vista Explorador empresarial, efectúe una doble pulsación en templates/LoanInput.html para que se abra la plantilla HTML del widget.
  9. Pulse Siguiente y acepte los valores predeterminados. Pulse Finalizar.
  10. En la sentencia div existente, cree tres códigos div hijo adicionales. Puede utilizar la asistencia de contenido escribiendo <d y, a continuación, pulse Control+Barra espaciadora. En la ventana emergente, seleccione < div > para insertar el código.
  11. En cada nuevo código div añada una etiqueta de texto – Cantidad del préstamo:, Tipo de interés: y Plazo (años):. Cuando complete el código debería tener un aspecto similar al siguiente:
    <div class="LoanInput">
    <div>Cantidad del préstamo: </div>
    <div>Tipo de interés: </div>
    <div>Plazo (años): </div>
    </div>
  12. Ahora añada widgets de Dojo para cada uno de los campos de entrada:
    1. En el espacio de trabajo, pase por encima de la paleta y pulse la pestaña correspondiente. Debería ver varios cajones que contengan widgets de Dojo.
    2. Expanda el cajón Widgets de formulario de Dojo pulsando en él.
      Cajón Widgets de formulario de Dojo
    3. Seleccione CurrencyTextBox y suéltelo junto a la etiqueta Cantidad del préstamo dentro del código div.
    4. En el elemento de entrada acabado de crear, escriba data- y utilice la asistencia de contenido (Control+Barra espaciadora) para ver una lista de los atributos. Pulse data-dojo-props para insertarla. Para cumplir la normativa HTML5, empezando en Dojo Toolkit, los atributos de SDK 1.7 se establecer de forma predeterminada mediante data-dojo-props.
    5. En el atributo data-dojo-props, escriba cu y utilice la asistencia de contenido (Control+Barra espaciadora) para ver una lista de los atributos. Pulse currency para insertarla.
    6. En el atributo currency, escriba USD. El código debe ser parecido a lo siguiente:
      <div>Cantidad de préstamo: <input type="text"
      				data-dojo-type="dijit.form.CurrencyTextBox"
      				data-dojo-props="currency: 'USD'">
      </div>
    7. A continuación, inserte el formato del widget de Dojo para el campo Tipo de interés. Coloque el cursor en el segundo código div después de la etiqueta, escriba <input d> y con el cursor junto a la d, utilice la asistencia de contenido (Control+Barra espaciadora) para que aparezca una lista de atributos. Pulse data-dojo-type para insertarlo.
    8. En el atributo data-dojo-type, invoque la asistencia de contenido de nuevo para ver una lista de los widgets de dojo disponibles. Empiece a escribir dijit.form.N hasta que vea NumberSpinner. Pulse NumberSpinner para insertarlo en su página.
    9. Añada el atributo data-dojo-props. En el atributo, defina las siguientes propiedades, separadas por comas:
      1. value : 5
      2. smallDelta : .05
      3. intermediateChanges : true
      4. constraints : {min: 0}
      Puede utilizar la asistencia de contenido para insertar estas propiedades del mismo modo que ha añadido el atributo currency anteriormente. Cuando haya terminado de definir las propiedades para el atributo, el código debería ser similar al siguiente:
      <div>Tipo de interés: <input data-dojo-type="dijit.form.NumberSpinner"
      			data-dojo-props="value: 5, smallDelta:= 0.05, intermediateChanges: true, constraints: {min: 0}"> </input></div>
    10. Desde la paleta, suelte el widget ComboBox en la sentencia div Plazo (años).
    11. Hay disponible configuración adicional para algunos widgets cuando se sueltan desde la paleta como, por ejemplo, ComboBox. En el recuadro de diálogo Insertar recuadro combinado, puede añadir valores para ComboBox. Añada valores para 1, 2, 3, 4, 5, 10, 15, 30.
    12. Defina 15 como valor predeterminado estableciéndolo en True. Pulse Aceptar.
  13. A continuación, añada los atributos data-dojo-attach-point y data-dojo-attach-event a cada uno de sus widgets de entrada. El valor especificado para el atributo data-dojo-attach-point es el nombre con el que se puede hacer referencia a la instancia del widget desde el archivo LoanInput.js. El atributo data-dojo-attach-event añade la posibilidad de gestión de sucesos en los widgets.
    1. Utilice la asistencia de contenido para añadir un atributo data-dojo-attach-point a cada widget. Nómbrelos amount, rate y term respectivamente.
    2. añada data-dojo-attach-event="onChange: calculate" a cada widget. Cada vez que se produzca un suceso onChange en este widget invoca a la función de cálculo que se ha añadido en el archivo LoanInput.js. El resultado final del archivo LoanInput.html debería tener un aspecto similar al siguiente:
      <div class="LoanInput">
      <div>Cantidad de préstamo: <input type="text"
      data-dojo-type="dijit.form.CurrencyTextBox"
      data-dojo-props="currency: 'USD'"
      data-dojo-attach-point="amount"
      data-dojo-attach-event="onChange: calculate"></div>
      <div>Tipo de interés: <input data-dojo-type="dijit.form.NumberSpinner"
      data-dojo-props="value:5,
      smallDelta:0.05,
      intermediateChanges:true,
      constraints:{min: 0}"
      data-dojo-attach-point="rate"
      data-dojo-attach-event="onChange: calculate">
      		</div>
      <div>Term (years): <select name="select"
      data-dojo-type="dijit.form.ComboBox"
      data-dojo-props="autocomplete:false"
      data-dojo-attach-point ="term"
      data-dojo-attach-event="onChange: calculate">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>10</option>
      <option selected="selected">15</option>
      <option>30</option>
      </select>
      		</div>
      </div>
  14. Guarde y cierre LoanInput.html y vuelva a abrir LoanInput.js.
  15. Añada dependencias de módulo Dojo para los tres widgets utilizados en el archivo html. Estas dependencias cargarán los recursos necesarios para crear los widgets al ejecutar la página. El segundo argumento de la función define es una matriz de dependencias. Directamente después de la dependencia "dijit/_WidgetsInTemplateMixin",, añada las siguientes vías de acceso al módulo, separadas por comas:
    1. "dijit/form/CurrencyTextBox"
    2. "dijit/form/NumberSpinner"
    3. "dijit/form/ComboBox"
    El código debe ser parecido a lo siguiente:
    define("loan/LoanInput",
    [ "dojo", "dijit", "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/form/CurrencyTextBox",
    "dijit/form/NumberSpinner",
    "dijit/form/ComboBox",
    "dojo/text!loan/templates/LoanInput.html"
    ],
  16. Ahora añada el código siguiente para calcular la función que ha creado anteriormente en el Paso 7. Puede experimentar con la asistencia de contenido, si lo desea. Fíjese que los objetos JavaScript estándar como, por ejemplo, el objeto Matemáticas están disponibles en la asistencia de contenido. Las variables que se han definido anteriormente, principal, interestPaid y monthlyPayment están todas también disponibles.
    // esta función llevará a cabo los cálculos para el pago de su préstamo
    	calculate: function() {
    		this.principal = this.amount.attr('value');
    		if(this.principal == NaN) {
    			this.monthlyPayment = 0;
    			this.principal = 0;
    			this.interestPaid = 0;
    		} else {
    			var interestRate = this.rate.attr('value') / 1200;
    			var termInMonths = this.term.attr('value') * 12;
    			
    			this.monthlyPayment = Math.pow(1 + interestRate, termInMonths) - 1;
    			this.monthlyPayment = interestRate + (interestRate / this.monthlyPayment);
    			this.monthlyPayment = this.monthlyPayment * this.principal;
    			
    			this.interestPaid = (this.monthlyPayment * termInMonths) - this.principal;
    		}
    }
    La función de cálculo almacena el principal del préstamo, calcula el pago mensual y la cantidad de interés a pagar.
  17. Guarde y cierre todos los archivos que componen el widget personalizado.
LoanInput.js debería tener un aspecto similar al siguiente:
define("loan/LoanInput", [ "dojo", "dijit", "dijit/_Widget",
		"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dijit/form/CurrencyTextBox", "dijit/form/NumberSpinner", "dijit/form/ComboBox",
		"dojo/text!loan/templates/LoanInput.html" ], function(dojo, dijit,
		_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, CurrencyTextBox, NumberSpinner, ComboBox) {
	dojo.declare("loan.LoanInput", [ dijit._Widget, dijit._TemplatedMixin,
			dijit._WidgetsInTemplateMixin ], {
				// Ruta a la plantilla
		templateString : dojo.cache("loan", "templates/LoanInput.html"),
		principal: 0,
		interestPaid: 0,
		monthlyPayment: 0,

    // Sustituir este método para un comportamiento personalizado durante la construcción dijit.
				// Operaciones comunes para el constructor:
				// 1) Inicializar tipos no primitivos (p.ej. objetos y matrices)
  		// 2) Añadir propiedades adicionales necesarias para que los métodos de ciclo de vida sean satisfactorios
				constructor : function() {
			
		},

  // Cuando se llama a este método, todas las variables heredadas de superclase se 'combinan'.
						// Operaciones comunes para postMixInProperties
		// 1) Modifique o asigne valores a las variables de las propiedades del widget definidas en el archivo HTML de plantillas
				postMixInProperties : function() {
		},

				// Se llama a postCreate() después de buildRendering(). Resulta útil alterarlo temporalmente cuando
  		// tiene que acceder y/o manipular nodos DOM incluidos en el widget.
  		// Es posible acceder directamente a los nodos y widgets DOM con el atributo dojoAttachPoint especificado
				// como campos de "this".
				// Operaciones comunes para postCreate
  		// 1) Acceder y manipular nodos DOM creados en buildRendering()
				// 2) Añadir nuevos nodos o widgets DOM
				postCreate : function() {
		},
// esta función llevará a cabo los cálculos para el pago de su préstamo
		calculate: function() {
			this.principal = this.amount.attr('value');
			if(this.principal == NaN) {
				this.monthlyPayment = 0;
				this.principal = 0;
				this.interestPaid = 0;
} else {
				var interestRate = this.rate.attr('value') / 1200;
				var termInMonths = this.term.attr('value') * 12;
				
				this.monthlyPayment = Math.pow(1 + interestRate, termInMonths) - 1;
				this.monthlyPayment = interestRate + (interestRate / this.monthlyPayment);
				this.monthlyPayment = this.monthlyPayment * this.principal;
				
				this.interestPaid = (this.monthlyPayment * termInMonths) - this.principal;
			}
}
	});
});

Punto de comprobación de la lección

Ha creado un widget Dojo personalizado.

Ha aprendido:
  • Cómo utilizar la asistencia de contenido y las plantillas para escribir rápidamente código Dojo
  • Cómo modificar la plantilla HTML para un widget Dojo personalizado
  • Cómo modificar el archivo JavaScript para un widget Dojo personalizado
< 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_lesson2.html