< Anterior | Siguiente >

Lección 8: Crear el manejador de historial de cálculos

Cree una tabla donde pueda pulsar en una fila para visualizar un cálculo anterior.

En esta lección, utilice el widget DataGrid para crear una tabla. El widget DataGrid tiene prestaciones avanzadas para la interacción y la presentación visual que hacen que sea preferible al widget GridLayout para visualizar una matriz de registros.

En la lección 4, ha arrastrado una variable de registro al editor para crear un widget GridLayout. En esta lección, va a arrastrar una matriz de registros al editor, que de forma predeterminada crea un widget DataGrid.

Crear el manejador

  1. En el paquete handlers, cree un manejador de IU enriquecida llamado CalculationHistoryHandler. El manejador se abrirá en la vista Diseño del editor de IU enriquecida.
  2. Suprima el widget GridLayout predeterminado.
  3. Cree una variable para contener una matriz de registros MortgageCalculationResult.
    1. Pulse con el botón derecho del ratón en el fondo de la vista Datos EGL y, a continuación, pulse Nueva > Variable EGL.
    2. En el asistente Crear una variable de datos EGL nueva, en la sección Creación de tipo, seleccione el registro MortgageCalculationResult, tal como hizo en la Lección 4.
    3. Para Especifique el nombre del campo, escriba el nombre siguiente:
      historyResults
    4. Bajo Propiedades de matriz, marque el recuadro de selección Matriz. No especifique un tamaño.
      El asistente está configurado para crear una matriz de registros.
    5. Pulse Finalizar.
  4. Arrastre la nueva variable a la superficie Visualizar del editor de IU enriquecida. EGL muestra el asistente Insertar datos. Este asistente es el mismo asistente que aparecía en la Lección 4, aunque con diferentes valores predeterminados ya que la variable que ha arrastrado al editor es una matriz dinámica.
  5. Realice los cambios siguientes en el asistente Insertar datos:
    1. En Crear Widgets para, deje el valor predeterminado Datos de sólo lectura.
    2. Desmarque el cuadro de selección para el campo Interés.
    3. Cambie las etiquetas para el resto de campos, tal como se indica a continuación:
      • Cambie loanAmount a Principal.
      • Cambie interestRate a Tipo.
      • Cambie term a Años.
      • Cambie monthlyPayment a Cuota.
      El asistente utiliza estas etiquetas como cabeceras de columna para la cuadrícula.
    4. Desmarque el recuadro de selección Añadir soporte para formato y validación. El asistente completado tiene un aspecto parecido a la siguiente imagen:
      La página del asistente muestra los datos que ha seleccionado para visualizarse en la cuadrícula.
    5. Pulse Finalizar. La página web tiene el siguiente aspecto.
      La cuadrícula vacía tiene una cabecera con cuatro columnas.
    Codificará el resto del manejador de historial de cálculos en la vista Fuente.
  6. En la parte inferior del editor, pulse la pestaña Fuente.
  7. En la declaración para el widget historyResults_ui DataGrid, añada el siguiente contenido antes de la propiedad columns:
    selectionMode = DataGridLib.SINGLE_SELECTION,
    El valor especificado asegura que el usuario sólo puede seleccionar una fila de la cuadrícula y no varias filas.
  8. En la línea después de establecer selectionMode, escriba el código siguiente:
    selectionListeners ::= cellClicked,

    Acaba de actualizar una propiedad de escucha, que acepta una matriz de funciones ejecutadas en orden de elemento de matriz. Concretamente, ha añadido una función a la matriz de funciones asociadas con la propiedad selectionListeners. Más adelante en esta lección, codificará la nueva función.

    Las funciones de escucha se ejecutan como respuesta a una acción de usuario, como por ejemplo una pulsación o, en algunos casos, como respuesta a una llamada de función que selecciona o deselecciona una fila o que actualiza un recuadro de selección.

  9. Cambie los anchos predeterminados de las columnas para que encajen en la ventana más pequeña del portlet:
    • Establezca el ancho de la columna Principal en 80.
    • Establezca el ancho de la columna Tipo en 80.
    • Establezca el ancho de la columna Años en 50.
    • Establezca el ancho de la columna Cuota en 70.
  10. Después de cada uno de los valores de anchura que acaba de especificar, en el bloque de valores establecidos (el área con las llaves), establezca una propiedad alignment para alinear a la derecha los números de cada columna:
    , alignment = DataGridLib.ALIGN_RIGHT
    Por ejemplo, la declaración para la columna Principal ahora se parece al siguiente código:
    new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
                        alignment = DataGridLib.ALIGN_RIGHT},
  11. Añada la propiedad formatter a tres de las declaraciones de columna, como se indica a continuación:
    1. Para la columna Principal, haga referencia a la función formatDollars personalizada, que escribirá más adelante en esta lección:
      , formatters = [ formatDollars ]
      La declaración completa ahora se parece al siguiente código:
      new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
      				alignment = DataGridLib.ALIGN_RIGHT, formatters = [ formatDollars ]},
    2. Añada el siguiente código para la columna Tipo:
      , formatters = [ DataGridFormatters.percentage ]
    3. No es necesario un formato especial para la columna Años.
    4. Añada el siguiente código para la columna Cuota:
      , formatters = [ formatDollars ]
      El código ahora tiene el siguiente contenido:
      Instantánea del código historyResults_ui

      En general, la propiedad formatters acepta una matriz de nombres de función. Las funciones pueden estar predefinidas, o bien puede escribir funciones personalizadas. Por ejemplo, la función percentage se proporciona en la biblioteca DataGridFormatters que está incluida en el proyecto com.ibm.egl.rui.widgets.

  12. Añada el siguiente código a la función start:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", addResultRecord);
    Como antes, utilice el InfoBus para invocar una función que el servicio devuelva un nuevo cálculo.
  13. Añada la función addResultRecord después de la función start():
    // Actualizar la cuadrícula para incluir el cálculo más reciente de la hipoteca
    function addResultRecord(eventName STRING in, dataObject ANY in)
       resultRecord MortgageCalculationResult = dataObject as MortgageCalculationResult;
       historyResults.appendElement(resultRecord);
       historyResults_ui.data = historyResults as ANY[];
    end
    Aquí, convierte un valor entrante en un registro MortgageCalculationResult. A continuación, añade los nuevos resultados a la matriz de resultados y actualiza la propiedad data. Dicha actualización hace que se renueve el widget.
  14. Añada la siguiente función de escucha:
    // Publicar un evento en el InfoBus siempre que el usuario selecciona un cálculo antiguo
    function cellClicked(myGrid DataGrid in)
       updateRec MortgageCalculationResult = myGrid.getSelection()[1] 
                                             as MortgageCalculationResult;
       InfoBus.publish("mortgageApplication.mortgageResultSelected", updateRec);
    end
    La función recupera la fila de la cuadrícula de datos que ha seleccionado el usuario y proporciona dicha fila al Infobus. A su vez, el Infobus invoca una función en cualquier manejador que se haya suscrito al evento llamado “mortgageApplication.mortgageResultSelected.”
  15. Añada la siguiente función para formatear importes monetarios:
    function formatDollars(class string, value string, rowData any in)
       value = mortgageLib.formatMoney(value);
    end
    El valor del segundo parámetro está disponible en el código de tiempo de ejecución EGL ya que, de forma predeterminada, el modificador de parámetro es InOut.

    Tenga en cuenta que está reutilizando la función formatMoney de la biblioteca mortgageLib.

  16. Vuelva a formatear el archivo pulsando Ctrl+Mayús+F. A continuación, elimine las marcas de error pulsando Ctrl+Mayús+O y guarde el archivo. Si ve errores en el archivo fuente, compare el código con el contenido del archivo en Código terminado para CalculationHistoryHandler.egl después de la Lección 8.
  17. Cierre el archivo.

Punto de comprobación de lección

Ha aprendido a realizar las tareas siguientes:
  • Arrastrar y soltar una matriz de registros para crear una cuadrícula de datos.
  • Desencadenar un evento cuando se pulsa en una casilla de la cuadrícula de datos.
  • Formatear columnas de la cuadrícula de datos.

En la lección siguiente, integrará este manejador con el resto de la aplicación.

< Anterior | Siguiente >

Comentarios