< Anterior | Siguiente >

Lección 5: Añadir código al manejador de calculadora de hipoteca

Añada funciones al manejador que ha creado en la lección anterior.

En esta lección, trabajará directamente con el código fuente EGL, empezando con una biblioteca EGL que escribirá. Una biblioteca puede contener constantes, variables y funciones, y diferentes unidades de lógica de la aplicación pueden acceder a cualquiera de ellas. Una característica importante de una biblioteca es que los cambios realizados en una variables están disponibles en cualquier unidad de lógica que accede a la biblioteca. Sin embargo, esta guía de aprendizaje se centra en las funciones, que se colocan en una biblioteca para no tener que mantener en varios lugares la misma lógica de uso habitual.

Para manejar algunos problemas comunes, puede utilizar la infraestructura MVC (Modelo Vista Controlador) de EGL, que proporciona el proyecto com.ibm.egl.rui. A pesar de que las iniciales "MVC" normalmente describen los diferentes componentes de una aplicación empresarial, la infraestructura MVC de la IU enriquecida sólo hace referencia a los componentes de una interfaz de usuario. Aquí, el modelo es un campo de variable o de registro, la vista es un widget y el controlador es una declaración que supervisa la transferencia de datos entre el modelo y la vista. Dicha transferencia de datos a veces es automática y a veces es una respuesta a una invocación de función, como se mostrará más adelante.

Las acciones de arrastrar y soltar de la lección anterior no sólo han añadido declaraciones de controlador, sino también un gestor de formularios, que es una declaración que le permite tratar otras declaraciones como componentes de un solo formulario. Un gestor de formularios incluye un conjunto de campos de formulario, cada uno de los cuales puede incluir una etiqueta, un controlador y un campo de error.

Crear una biblioteca EGL

Cree una biblioteca EGL para que contenga una función que proporciona formato de moneda de EE.UU. para una variable MONEY. Una versión más compleja podría permitir símbolos y separadores de monedas locales, así como diferentes tipos de entrada. Sin embargo, para esta guía de aprendizaje, una versión simple será suficiente.
  1. Seleccione el proyecto MortgageUIProject en el explorador de proyectos.
    MortgageUIProject está seleccionado.
  2. Pulse el botón Archivo fuente EGL nuevo.
    El botón Archivo fuente EGL nuevo es el segundo en un grupo de cuatro.
  3. En la ventana Componente EGL nuevo, especifique el paquete tal como se indica a continuación:
    libraries
  4. Ponga un nombre al archivo tal como se indica a continuación:
    MortgageLib
  5. Pulse Finalizar. El nuevo archivo fuente se abre en el editor EGL.
  6. Elimine el comentario del archivo y añada el código siguiente:
    library MortgageLib 
       function formatMoney(amount STRING in) returns(STRING)
          len int = strlib.characterLen(amount);
          index int = len - 6; // 2 dec places + decimal + 3 chars before separator
          while(index > 0)
             amount = amount[1 : index] :: "," :: amount[index + 1 : len];
             index -= 3;
             len += 1;
          end
          return("$" :: amount);
       end
    end

    Tal como se muestra, se especifica un nombre de biblioteca y se incorpora una nueva función, formatMoney(), que añade comas y un signo de dólar a una serie de entrada. Aquí se supone que el campo de entrada contiene un valor monetario con dos posiciones decimales.

  7. Guarde el archivo. La biblioteca se genera automáticamente una vez que se ha guardado el archivo.
Ahora la biblioteca MortgageLib está lista para usarse.

Cambiar el código en el manejador

Antes de añadir nuevas funciones, debe realizar algunos pequeños cambios:
  1. Pulse la pestaña Fuente para MortgageCalculatorHandler.
  2. Establezca valores predeterminados para los campos Importe del préstamo e Interés. Vaya a la línea donde está declarado el registro inputRec y añada las dos asignaciones a la declaración, tal como se muestra aquí:
    inputRec MortgageCalculationResult 
       {term = 30, loanAmount=180000, interestRate = 5.2};
    Guarde el archivo y pulse la pestaña Vista previa. La interfaz ahora muestra los valores predeterminados, incluido el valor que ha especificado en la lección anterior, para el campo de plazo:
    La interfaz ahora muestra un importe de préstamo y un tipo de interés.
  3. En la primera línea del manejador, antes de la declaración del widget de IU, declare una variable que el código utiliza para acceder al servicio dedicado:
    mortService MortgageCalculationService{@dedicatedService};
    La declaración mortService va antes de la declaración GridLayout de IU.
  4. Sitúe el cursor sobre la x roja o el subrayado rojo para saber que la causa del error es la siguiente: “No se puede resolver el tipo MortgageCalculationService.” El error podría ser desconcertante, ya que previamente había establecido la vía de acceso de construcción EGL en la que está trabajando de modo que el proyecto pueda acceder a la que contiene el servicio. El problema aquí es que el archivo fuente no importa el componente Service de ese otro proyecto.
  5. Para eliminar el error, escriba la siguiente sentencia import después de las demás sentencias import del archivo:
    import services.MortgageCalculationService;
    Al cabo de unos segundos, se eliminan las marcas de error aunque no haya guardado el archivo.
  6. En muchos casos, el entorno de desarrollo puede insertar automáticamente una sentencia import que falta. Para ver esta característica en acción, elimine la sentencia import que acaba de escribir. Cuando vea que vuelven las marcas de error, teclee Ctrl+Mayús+O para volver a insertar la sentencia.
  7. Guarde el archivo.

Completar la función inputRec_form_Submit

EGL ha creado una función inputRec_form_Submit de apéndice. El objetivo es que la función valide todos los campos del formulario y que los "comprometa". El compromiso forma parte de la implementación MVC y significa que el registro inputRec se actualiza con los valores de los widgets.

Añadirá código para llamar a otras dos funciones. La primera función hace visible la imagen processImage y, de esta manera, indica al usuario que la aplicación está operativa. La segunda función llama al servicio para calcular la cuota de la hipoteca.

Para completar la función inputRec_form_Submit, actualice la sentencia if de modo que muestre el siguiente código:
if(inputRec_form.isValid())
   inputRec_form.commit();
   showProcessImage();
   calculateMortgage();
else
   errorLabel.text = "Input form validation failed.";
end
No se preocupe por el formato de código; más tarde, una sección tratará este tema. Además, las secciones siguientes eliminarán las marcas de error que aparecen aquí:
La llamada completa a la función inputRec_form_Submit().

Añadir la función showProcessImage

Necesita la función showProcessImage para hacer visible la imagen processImage. Para codificar la función en el editor de IU enriquecida, añada las líneas siguientes antes de la sentencia end final en el manejador:
function showProcessImage()
   processImage.visible = yes;
end
Nota: La propiedad visible forma parte de cualquier widget Image. En la lección anterior, ha cambiado el valor inicial de esta propiedad cuando ha desmarcado el recuadro de selección visible para la imagen processImage.

Añadir la función hideProcessImage

Necesita la función hideProcessImage para ocultar la imagen cuando sea necesario. Añada las líneas siguientes después de la función showProcessImage:
function hideProcessImage()
   processImage.visible = no;
end

Añadir la función calculateMortgage

La función calculateMortgage llama a un servicio para realizar un cálculo de hipoteca basado en los valores que se visualizan en la IU. Para codificar la función en el editor de IU enriquecida, añada las líneas siguientes después de la función hideProcessImage e ignore las marcas de error:
function calculateMortgage()
   call mortService.amortize(inputRec) 
      returning to displayResults 
      onException handleException;
end	
Nota:
  1. La sentencia call en la IU enriquecida es una variación que se utiliza únicamente para acceder a los servicios. En este caso, la comunicación de tiempo de ejecución es asíncrona, lo que significa que el usuario puede seguir interaccionando con el manejador mientras el servicio está respondiendo.
  2. Un solicitante de servicio a menudo pasa un registro al servicio al que se está accediendo. En esta guía de aprendizaje, el manejador pasa la variable inputRec global y recibe, en el mismo registro, el valor devuelto desde el servicio.

Añadir la función displayResults

La función displayResults es una función callback que se ejecuta inmediatamente después de que el servicio devuelva satisfactoriamente datos empresariales al manejador de IU enriquecida. Para codificar la función, añada las líneas siguientes después de la función calculateMortgage:
function displayResults(retResult MortgageCalculationResult in)
   paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
   inputRec_form.publish();
   hideProcessImage();
end
Nota:
  • Utilice la función formatMoney del componente Library de EGL para añadir comas y un signo de dólar al importe de la cuota. Dado que ha creado la variable paymentLabel sin implicar la infraestructura MVC, debe manejar el formato usted mismo.
  • Como se ha indicado antes, un gestor de formularios incluye campos de formulario que, a su vez, pueden incluir controladores y otras declaraciones. La función publish está disponible en cualquier gestor de formularios e invoca las funciones publish específicas del controlador, una tras otra, para hacer lo siguiente:
    1. Recuperar los datos de la variable que sirve como modelo de controlador.
    2. Formatear dichos datos.
    3. Escribir los datos formateados en el widget que sirve como vista de controlador.

    A partir de esta secuencia de eventos, la función publish a nivel de formulario a menudo se invoca tal como está aquí: en una función callback que recibe datos de un servicio.

Escribir el manejador de excepciones

Si la invocación de servicio produce un error, no se invoca la función callback típica. Sin embargo, si ha decidido utilizar un manejador de excepciones, como es el caso, se invoca dicha función.

Realice lo siguiente:

  1. Después de la función displayResults, añada el código siguiente:
    	// manejador de excepciones catch-all
    	private function handleException(ae AnyException in)
    		errorLabel.text = "Error calling service: " + ae.message;
    	end
    Las funciones con el modificador private sólo pueden ser llamadas por el componente EGL donde reside la función; en este caso, por el manejador incorporado. La función coloca texto en el widget errorLabel que ha creado en la lección anterior.
  2. Actualice la función calculateMortgage inmediatamente antes de la sentencia call, como se indica a continuación:
    errorLabel.text = "";
    De esta manera, desmarque el campo errorLabel antes de invocar el servicio que realiza un cálculo de hipoteca. Si no añade este código, un error como la pérdida temporal de conexión de servicio mostrará un mensaje de error, incluso después de que el servicio se haya invocado satisfactoriamente.
  3. Pulse con el botón derecho del ratón en un espacio vacío del editor. Pulse Organizar importaciones. EGL añade sentencias import para todos los símbolos no definidos que puede.
  4. Guarde el archivo. Si ve errores en el archivo fuente, compare el código con el contenido del archivo en Código terminado para MortgageCalculatorHandler.egl después de la Lección 5.
  5. Después de resolver los errores, vuelva a formatear la entrada pulsando Ctrl+Mayús+F y guarde el archivo de nuevo.

Probar la calculadora

Ahora está listo para probar la calculadora.

  1. Vaya a la Vista previa pulsando la pestaña Vista previa que se encuentra en la parte inferior del editor. Puede probar completamente la aplicación en la Vista previa, incluida la interfaz de usuario y los servicios, tanto si los servicios se despliegan en un servidor o están disponibles sólo como código fuente EGL. EGL muestra los valores predeterminados que ha especificado al crear el manejador.
  2. Pulse Calcular. EGL muestra la cuota mensual.
    El importe de la cuota mensual aparece en el campo Cuota.
  3. Escriba una letra en el primer campo. Como ocurre en varios widgets EGL Dojo, se visualiza una marca roja en cuanto se produce un error, y se visualiza un mensaje de error en una ayuda contextual adyacente.
    El importe de la cuota mensual aparece en el campo Cuota.

    Cuando el widget pierde el foco, la ayuda contextual está oculta, y cuando el widget recupera el foco, se muestra la ayuda contextual.

  4. Cambie los valores para alguno de los tres campos y vuelva a pulsar Calcular. El campo Cuota cambia de forma correspondiente.

Punto de comprobación de lección

Ha aprendido a realizar las tareas siguientes:
  • Trabajar en la pestaña Fuente del editor de IU enriquecida
  • Crear un componente Library de EGL para funciones reutilizables
  • Utilizar la infraestructura Modelo-Vista-Controlador de EGL
  • Llamar un servicio EGL desde una función
  • Capturar y manejar errores

En la lección siguiente, creará un gráfico circular para comparar el principal total respecto al interés total de un determinado cálculo.

< Anterior | Siguiente >

Comentarios