< Anterior | Siguiente >

Lección 4: Crear la interfaz de usuario para la calculadora

Empiece a construir la calculadora utilizando los asistentes EGL y después el editor de IU enriquecida.

Puede añadir widgets a una página web arrastrando el contenido a la superficie Diseño del editor de IU enriquecida. Las acciones de arrastrar y soltar así como la interacción subsiguiente con el editor actualiza el código fuente para el manejador de IU enriquecida que está desarrollando.

Están disponibles dos fuentes de contenido de arrastrar y soltar:
  • Una paleta de tipos de widgets
  • La vista Datos EGL, que proporciona definiciones de tipos de datos como por ejemplo componentes Record de EGL. Primero arrastre el contenido de esta vista y después elija entre los tipos de widgets que pueden visualizar el tipo de datos que ha seleccionado.

De forma predeterminada, la paleta de widgets se encuentra en la parte derecha del editor, y la vista Datos está en la esquina inferior izquierda del entorno de trabajo.

Crear un manejador de IU enriquecida.

  1. En el proyecto MortgageUIProject, seleccione la carpeta EGLSource y pulse el botón Nuevo manejador de IU enriquecido en la barra de menús.
    El icono de nuevo manejador nuevo de IU enriquecida es el tercero de cuatro en el segundo grupo de iconos de la barra de menús.
  2. En la ventana “Componente de manejador de IU enriquecido nuevo”, especifique la siguiente información:
    1. En el campo Paquete, escriba el nombre siguiente:
      handlers
    2. En el campo Nombre de archivo fuente EG, escriba el nombre siguiente:
      MortgageCalculatorHandler
    3. Pulse Finalizar.
    El manejador nuevo se abrirá en la vista Diseño del editor de IU enriquecida. EGL crea automáticamente el paquete handlers en la carpeta EGLSource.
    El editor de IU enriquecida se abre de forma predeterminada en la vista Diseño y muestra una paleta de widgets a la derecha.

Construir la interfaz de usuario

Para construir la IU para la calculadora:

  1. Cree una variable de registro.
    1. La vista Datos EGL, que se encuentra de forma predetermina en la esquina inferior izquierda del entorno de trabajo, muestra una lista de todas las variables primitivas y de registro para el manejador que está actualmente abierto en el editor. Pulse con el botón derecho del ratón en el espacio vacío debajo de la entrada correspondiente al manejador MortgageCalculatorHandler. Pulse Nueva > Variable EGL.
    2. En el asistente Crear una variable de datos EGL nueva, solicite una nueva variable de registro basada en el componente de registro MortgageCalculationResult:
      • Asegúrese de que Selección de tipo está establecido en Registro.
      • Seleccione el registro MortgageCalculationResult. Este registro debe ser el primer tipo de la lista.
      • En la sección Propiedades de matriz, deje la opción Matriz deseleccionada.
      • En el campo Especifique el nombre del campo, escriba el texto siguiente:
        inputRec
      • Pulse Finalizar.
    El asistente Crear una variable de datos EGL nueva.
    Este proceso crea la siguiente declaración de registro en el código fuente del manejador:
    inputRec MortgageCalculationResult;
    El proceso también muestra la nueva variable de registro en la vista Datos EGL para que pueda arrastrar la variable al editor.
    La vista Datos EGL muestra la variable inputRec.
  2. EGL ha creado automáticamente un widget GridLayout como IU inicial. De forma predeterminada, este widget tiene cuatro filas y tres columnas. Puede utilizar diferentes mecanismos para variar el número de filas y columnas, como se muestra a continuación:
    1. Pulse el botón derecho del ratón en el widget GridLayout para resaltar una casilla.
    2. Pulse Suprimir > Fila
    3. Una vez más, pulse el botón derecho del ratón en el widget GridLayout para resaltar una casilla.
    4. Pulse Suprimir > Columna
    5. Ahora vaya a la vista Propiedades, que de forma predeterminada es una de las páginas tabuladas que hay debajo del panel del editor.
    6. En la página General, establezca la propiedad rows en 1 y la propiedad columns en 1.
      La vista Propiedades.
    El widget GridLayout modificado sigue siendo la IU inicial de la página web, pero ahora tiene un única casilla en la que añadirá otro contenido.
  3. Pulse la variable inputRec en la vista Datos EGL y arrastre dicha variable desde la vista Datos EGL a la única casilla del widget GridLayout del editor.
    Arrastrar un registro desde la vista Datos al widget GridLayout.
    EGL muestra la página Configurar widgets de datos del asistente Insertar datos. Utilice esta página para configurar los widgets que EGL crea en función de los campos del registro que ha arrastrado al editor.
  4. En la página Configurar widgets de datos, realice los cambios siguientes:
    1. En la sección Crear Widgets para, pulse Datos editables. Esta opción determina los widgets predeterminados que EGL muestra en el asistente, ninguno de los cuales tiene la restricción de sólo lectura.
    2. En la columna Tipo de widget para el campo loanAmount, pulse en el valor actual de la columna Tipo de widget, pulse la flecha hacia abajo y seleccione DojoCurrencyTextBox. Este widget proporciona formato y validación para importes monetarios.
    3. Deje el widget DojoTextField predeterminado para el widget interestRate.
    4. En la columna Tipo de widget para el campo term, pulse en el valor actual de la columna Tipo de widget, pulse la flecha hacia abajo y seleccione DojoComboBox.
    5. Desmarque el recuadro de selección para los campos monthlyPayment e interest. Más tarde, añadirá un widget para el campo de cuota mensual; el campo de interés no forma parte de esta interfaz de usuario.
    6. Cambie los valores de la columna Etiqueta como se indica a continuación, incluidos los dos puntos:
      • Cambie "loanAmount" por "Loan amount:"
      • Cambie "interestRate" por "Interest rate:"
      • Cambie "term" por "Term:"

      Acaba de personalizar las solicitudes para cada uno de los primeros campos de entrada de datos en el formulario que se está construyendo.

    7. Asegúrese de que la opción Añadir soporte para formato y validación está seleccionada. Esta opción añade una etiqueta y un controlador para cada widget, junto con un gestor de formularios y las funciones relacionadas que se aplican a todo el contenido del nuevo diseño de la cuadrícula. No seleccione Utilizar etiqueta de error para dar soporte al mensaje de error. Esta opción proporciona una etiqueta de error para cualquier mensaje de error específico del controlador, pero esta guía de aprendizaje utiliza otros mecanismos para indicar que se ha producido un error.
    8. Vea la imagen siguiente. Cuando la página sea básicamente la misma, pulse Finalizar.
    La página Configurar widgets de datos con todos los campos corregidos.
    Se visualizará la vista Diseño, incluido un nuevo diseño de la cuadrícula interna que está dentro del diseño de la cuadrícula original y que incluye el nuevo contenido.
    Un diseño de cuadrícula se visualiza dentro de otro.
  5. Para guardar el trabajo, pulse Ctrl+S.
  6. Ajuste el tamaño del segundo y tercer campo de entrada para obtener un aspecto más uniforme:
    1. Resalte el campo de entrada para el tipo de interés. La línea de puntos sólo debe englobar dicho campo.
      Sólo se resalta el cuadrado que sigue a la etiqueta Tipo de interés.
    2. En la vista Propiedades, en la página Posición, escriba el siguiente valor para la propiedad width:
      100
      Este valor es el mismo que la anchura predeterminada para el widget DojoCurrencyTextBox que ha utilizado para el importe del préstamo.
    3. Repita los pasos a y b para el campo Plazo. Pulse la superficie Visualizar para ver el cambio.
  7. Establezca los valores válidos y el valor predeterminado para el recuadro combinado Dojo:
    1. Con el campo Plazo resaltado, pulse la página General de la vista Propiedades.
    2. Junto a la propiedad values, pulse los puntos suspensivos (...) para visualizar la ventana de valores.
      La ventana de valores.
    3. Escriba el número siguiente en el campo Añadir o eliminar series de la lista:
      5
    4. Pulse Añadir.
    5. Escriba cada uno de los siguientes números, pulsando Añadir después de cada adición:
      101530
      La ventana de valores debería tener un aspecto parecido a la siguiente imagen:
      Cada número de la ventana de valores se visualiza en una línea nueva.
    6. Pulse Aceptar.
  8. Para asegurarse de que la visualización inicial del recuadro combinado incluye el valor 30, realice lo siguiente:
    1. Pulse la pestaña Fuente del editor de IU enriquecida.
    2. Establezca un valor predeterminado para el plazo. Vaya a la línea donde está declarado el registro inputRec y añada un bloque de valores establecidos a la declaración, como se muestra a continuación:
      inputRec MortgageCalculationResult {term = 30};
      Está incorporando el valor predeterminado en la declaración, ya que es lo más fácil. Sin embargo, podía haber actualizado la función start() del modo siguiente, con el mismo efecto:
      function start()
         inputRec.term = 30;
      end
  9. Mientras examina el código fuente, revise la siguiente declaración de controlador, que relaciona la variable inputRec.term con el recuadro combinado de Dojo:
    inputRec_term_controller Controller 
       { @MVC {model = inputRec.term, view = inputRec_term_comboBox as Widget}};
    La declaración del controlador asegura que el valor que ha asignado a la variable inputRec.term se utilizará para inicializar el recuadro combinado.
  10. Para guardar el trabajo, pulse Ctrl+S.
  11. Pulse la pestaña Vista previa del editor de IU enriquecida. La página web muestra la pantalla de tiempo de ejecución y debería tener un aspecto parecido a la imagen siguiente:
    Los campos se visualizan y el recuadro combinado tiene el valor de inicialización.
    Si necesita renovar la pantalla, pulse el icono que está más a la derecha en la barra de herramientas de la IU enriquecida, que está en la parte superior derecha de la página Vista previa y que se muestra aquí:
    La barra de herramientas de la IU enriquecida
  12. Añada el contenido nuevo al widget GridLayout interno, que contiene el detalle del registro:
    1. Pulse la pestaña Diseño del editor de IU enriquecida.
    2. Pulse con el botón derecho del ratón en el widget GridLayout interno, que se denomina inputRec_ui. Dicho nombre se visualiza en la parte superior de la vista Propiedades.
    3. En la página General de la vista Propiedades, cambie la propiedad rows al siguiente valor:
      6
      Después de pulsar la superficie Diseño, las filas nuevas se visualizan por debajo de la fila Plazo.
      El widget GridLayout interno ahora tiene seis filas.
  13. Añada un segundo widget GridLayout interno para que contenga un botón Someter.
    1. Desde la bandeja Diseño de la paleta, arrastre un widget GridLayout a la primera casilla de la primera fila en blanco.
      Arrastrar el diseño de cuadrícula (GridLayout).
      Utilizará el widget GridLayout para colocar el botón Someter y una imagen de proceso animada. Ponga el siguiente nombre al widget:
      buttonLayout
    2. Pulse con el botón derecho del ratón en el nuevo widget para visualizar el menú que se muestra aquí.
      Supresión de una fila.
    3. Seleccione Suprimir y, a continuación, pulse Fila. La página General de la vista Propiedades ahora indica que el diseño de la cuadrícula tiene 2 filas.
    4. Utilice la vista Propiedades o el menú que acaba de utilizar para modificar buttonLayout para tener una columna. Si comete una equivocación y desea volver a una pantalla anterior, pulse Ctrl+Z.
    5. Cuando la opción buttonLayout esté activa, vaya a la página Diseño de la vista Propiedades. Realice lo siguiente para que el diseño esté centrado en un fila en blanco:
      • Cambie la propiedad horizontalAlignment a CENTER.
      • Cambie la propiedad horizontalSpan a 2.
      El nuevo widget GridLayout está centrado en la fila vacía.
  14. Para guardar el trabajo, pulse Ctrl+S.
  15. Cree un botón Someter y enlácelo con una función de apéndice:
    1. Desde la bandeja Visualizar e introducir de la paleta, arrastre un botón Dojo a la casilla superior de buttonLayout.
      Arrastre el botón sobre la primera de las dos casillas.
    2. Ponga el siguiente nombre al botón:
      calculationButton
    3. En la página General de la vista Propiedades, cambie la propiedad text a la siguiente etiqueta:
      Calculate
      A continuación, debe enlazar el botón a una función que se ha creado cuando ha arrastrado la variable inputRec sobre el editor.
    4. En la pestaña Eventos, seleccione la fila con el evento onClick Pulse el espacio en blanco en la columna Función para visualizar un botón de flecha. Pulse el botón de flecha y seleccione inputRec_form_Submit. En la lección siguiente, completará el código para esta función.
      El menú muestra dos funciones disponibles.
      Observe el signo más (+) en la última columna de la fila. Podía haber pulsado este botón para crear una nueva función que enlace con el botón Calcular. El entorno de trabajo le habría llevado a la vista Fuente y habría creado automáticamente una función de apéndice, que es una función que no tiene código pero está lista para entrada.
  16. Añada una imagen animada que indique que el cálculo de la hipoteca está en curso.
    1. Desde la bandeja Visualizar e introducir de la paleta, arrastre un widget Image a la casilla vacía que hay debajo del botón Calcular.
    2. En la ventana Variable nueva, asigne el siguiente nombre a la imagen:
      processImage
    3. En la vista Propiedades, en la página General, asigne un fuente para la imagen en el campo src:
      tools/spinner.gif

      La imagen se encuentra en la carpeta com.ibm.egl.rui.dojo.samples/WebContent. El entorno de desarrollo trata las carpetas WebContent de todos los proyectos del espacio de trabajo como una única carpeta virtual.

    4. Además en la vista Propiedades, en la página Aspecto, desmarque el recuadro de selección visible. La imagen permanece oculta hasta que se pulsa el botón Calcular.
    5. Además, en la vista Propiedades, en la página Diseño, establezca la propiedad horizontalAlignment en CENTER.
  17. Para guardar el trabajo, pulse Ctrl+S.
  18. Añada un widget para visualizar los resultados del cálculo.
    1. Arrastre un widget TextLabel desde la bandeja Visualizar e introducir de la paleta a la primera casilla de la quinta fila, que está por debajo del nuevo gráfico. Asigne el siguiente nombre al widget:
      paymentLabel
      Utilice aquí un widget de etiqueta porque el usuario no cambia este campo. La aplicación calcula y actualiza el contenido.
    2. En la vista Propiedades, en la página General, especifique el siguiente valor para la propiedad text (incluido el signo de dólar):
      $0.00
    3. En la misma página, establezca la propiedad fontSize en 18.
    4. Además, en la vista Propiedades, en la página Diseño, establezca las siguientes propiedades:
      • Establezca horizontalAlignment en CENTER.
      • Establezca horizontalSpan en 2.
      Cuando se pulsa la superficie Diseño, la página web tiene un aspecto similar a esta imagen:
      El campo de cuota mensual se muestra en un font grande.
  19. Añada un campo de error para errores generales, como por ejemplo problemas de conexión con el servicio.
    1. Arrastre un widget TextLabel desde la bandeja Visualizar e introducir de la paleta a la primera casilla de la última fila vacía y asígnele el siguiente nombre:
      errorLabel
    2. Cambie las siguientes propiedades para el widget TextLabel:
      • En la página General, suprima el valor predeterminado de la propiedad text que indica "TextLabel".
      • Además, en la página General, pulse el botón en blanco que está junto a la propiedad color y, a continuación, pulse Formato del nombre y desplácese hacia abajo en la lista y seleccione Rojo. Pulse Aceptar. Esta establece el color de font de los mensajes visualizados en la etiqueta.
      • En la página Posición, establezca la propiedad width en 250.
      • En la página Diseño, cambie la propiedad horizontalSpan a 2.
    3. Pulse en cualquier lugar del área de diseño y pulse Ctrl+S para guardar el manejador.
La interfaz completada debería tener un aspecto parecido a la siguiente imagen:
La interfaz completa incluye tres campos de entrada, el botón Calcular y el campo Cuota.
Para revisar el código fuente, pulse la pestaña Fuente en la parte inferior del panel del editor. El código debe coincidir con el contenido del archivo en Código terminado para MortgageCalculatorHandler.egl después de la Lección 4.

Punto de comprobación de lección

Ha aprendido a realizar las tareas siguientes:
  • Crear un manejador de IU enriquecida.
  • Crear una variable en la vista Datos EGL.
  • Actualizar una interfaz de usuario arrastrando una variable de registro al editor de IU enriquecida.
  • Utilizar el editor de IU enriquecida de EGL para cambiar una interfaz.
  • Utilizar la vista Propiedades para formatear la interfaz.

En la próxima lección, añadirá código para dar soporte a la interfaz que acaba de crear.

< Anterior | Siguiente >

Comentarios