< Anterior | Siguiente >

Lección 6: Crear el manejador de resultados de cálculo

El siguiente manejador que va a crear, CalculationResultsHandler, crea un gráfico circular para ilustrar los detalles que ha emitido la lógica creada previamente, MortgageCalculatorHandler.

El código que actúa como intermediario entre los dos manejadores es un Infobus, que es una biblioteca EGL en el proyecto com.ibm.egl.rui.

El Infobus funciona de la manera siguiente:
  • Un manejador, como por ejemplo CalculationResultsHandler, se suscribe a un evento de un nombre especificado. En el momento de realizar la suscripción, el manejador también asigna el nombre de una función que recibirá datos cuando se produzca el evento especificado. Como resultado de esta suscripción, el Infobus registra la función, manteniendo los detalles necesarios para invocar más tarde la función.
  • En el momento adecuado, el mismo manejador u otro distinto publica el evento. Este manejador especifica tanto el nombre de evento como los datos específicos del evento y dirige el Infobus para invocar la función registrada.

Empiece esta lección ocupándose del segundo de estos dos pasos. Actualice el manejador MortgageCalculatorHandler escrito previamente para invocar la función publish del Infobus cuando se devuelve un nuevo cálculo del servicio remoto. A continuación, asegúrese de que el manejador CalculationResultsHandler se ha suscrito al evento.

La acción de publicación y suscripción permite visualizar el gráfico circular.

Publicar los resultados del servicio

  1. Busque la función displayResults() que ha creado en la lección anterior. Añada la línea siguiente antes de la sentencia end:
    InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
    El primer argumento es el nombre de evento y el segundo es el registro que se está pasando a las funciones que están registradas para dicho evento. Recuerde que la estructura de dicho registro es la siguiente:
    record MortgageCalculationResult
       // entrada de usuario
       loanAmount money;
       interestRate decimal(10, 8);
       term int;
    
       // campos calculados
       monthlyPayment money;
       interest money;
    end

    Se visualiza una marca de error porque la biblioteca del Infobus no se está importando. Para añadir la sentencia import necesaria, pulse Ctrl+Mayús+O. Para eliminar la marca de error, guarde el archivo.

    La función displayResults() ahora tiene el siguiente aspecto:
    function displayResults(retResult MortgageCalculationResult in)
       paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
       inputRec_form.publish();
       hideProcessImage();
       InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
    	end

    Igual que antes, este código muestra el importe de la cuota en el campo Cuota y utiliza el mecanismo MVC de la IU enriquecida para publicar los resultados del cálculo en el registro retResult. La nueva sentencia implica un tipo distinto de publicación, haciendo que el registro esté disponible para cualquier widget que se suscribe al evento mortgageApplication.mortgageCalculated.

    Nota: Los nombres de evento del Infobus son sensibles a mayúsculas y minúsculas. Por ejemplo, “mortgageApplication” es diferente de “MortgageApplication.”
  2. Guarde y cierre el archivo.

Crear el manejador CalculationResultsHandler

  1. En el proyecto MortgageUIProject, pulse con el botón derecho del ratón en el paquete handlers y pulse Nuevo > Manejador de IU enriquecida. Estas acciones aseguran que la página Nuevo manejador de IU enriquecida de EGL hará referencia al paquete.
  2. Especifique el nombre del archivo fuente como CalculationResultsHandler y pulse Finalizar. El manejador se abrirá en la vista Diseño del editor de IU enriquecida.
  3. Del mismo modo que hizo cuando codificó la calculadora, reduzca el tamaño del widget GridLayout inicial a una sola casilla. En la página General de la vista Propiedades, cambie la propiedad rows a 1 y la propiedad columns a 1.
  4. Arrastre el widget PieChart desde la bandeja Visualización de la paleta a la única casilla del diseño de cuadrícula y asigne el siguiente nombre al widget:
    interestPieChart
    EGL muestra un gráfico circular predeterminado.
    El gráfico circular predeterminado muestra modelos de coches.
  5. En la parte inferior del editor, pulse la pestaña Fuente.
  6. En la declaración del widget interestPieChart, cambie la propiedad de altura a 250.
  7. Sólo necesita dos secciones en el gráfico circular. En la declaración interestPieChart, en el campo data, sustituya las cuatro líneas que declaran los registros PieChartData. A continuación se muestra el código nuevo:
    new PieChartData{ y=1, text="Principal", 	color="#99ccbb"},
    new PieChartData{ y=0, text="Interest", 		color="#888855"}
    Para calcular qué cantidad de gráfico circular ocupa un determinado registro, divida el valor del campo y correspondiente a dicho registro por la suma de los valores del campo y. En este caso, la división es 1/1, y la pantalla inicial muestra el principal de la hipoteca en el 100%. La visualización durante el desarrollo sólo es un marcador de posición hasta que la aplicación realiza el primer cálculo predeterminado en tiempo de ejecución.
  8. Suscríbase al evento de Infobus mencionado anteriormente añadiendo la línea siguiente a la función start:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", displayChart);
    Este código asegura que el Infobus invoca la función displayChart siempre que se produce el evento especificado. El paso siguiente eliminará las marcas de error.
  9. Después de la función start, añada la función displayChart como se indica a continuación y organice las sentencias de importación escribiendo Ctrl+Mayús+O:
    function displayChart(eventName STRING in, dataObject ANY in)
       localPieData PieChartData[2];
    
       resultRecord MortgageCalculationResult = 
          dataObject as MortgageCalculationResult;
       localPieData = interestPieChart.data;
       localPieData[1].y = resultRecord.loanAmount;
       localPieData[2].y = resultRecord.interest;
       interestPieChart.data = localPieData;
    end
    Cuando se produzca el evento, la función displayChart recibe los datos de entrada en el parámetro dataObject. El uso de ANY como tipo de parámetro asegura que se puede utilizar el mecanismo Infobus para transferir cualquier tipo de registro.
    A continuación, la función actúa de la manera siguiente:
    • Crea la matriz localPieData, que es de tipo PieChartData[], ya que es apropiada para la propiedad data del gráfico circular.
    • Asigna el valor recibido a un registro de tipo MortgageCalculationResult, en una sentencia que convierte el segundo parámetro de entrada al tipo de datos que es apropiado para el uso del Infobus:
      resultRecord MortgageCalculationResult = 
         dataObject as MortgageCalculationResult;
    • Asigna la propiedad data del gráfico circular, incluido el detalle de color, a la nueva matriz localPieData.
    • Asigna el importe del préstamo recibido y el valor del tipo de interés a dicha matriz.
    • Fuerza la renovación del gráfico circular actualizando su propiedad data. Concretamente, asigne la matriz localPieData a dicha propiedad.
  10. Guarde el archivo.Si ve errores en el archivo fuente, compare el código con el contenido del archivo en Código terminado para CalculationResultsHandler.egl después de la Lección 6.

Probar el gráfico circular

  1. Vaya a la vista Vista previa. EGL visualiza un gráfico circular predeterminado que muestra el 100% del principal.
    El círculo entero es de color aguamarina y muestra la palabra "Principal" en blanco.
  2. Cierre el archivo.

Punto de comprobación de lección

Ha aprendido a realizar las tareas siguientes:
  • Utilizar la biblioteca del InfoBus para pasar información entre manejadores.
  • Crear un gráfico circular.

En la lección siguiente, creará el manejador principal, que utiliza los demás.

< Anterior | Siguiente >

Comentarios