< Anterior | Siguiente >

Lección 7: Crear el manejador de IU enriquecida principal

La página principal utiliza el widget del portal EGL para gestionar las comunicaciones entre los diferentes manejadores.
Como se ha indicado en una lección anterior, la IU enriquecida ofrece un significado nuevo a la tradicional noción de MVC (Modelo Vista Controlador), que se ha redefinido específicamente para la lógica que se ejecuta en el navegador. De forma parecida, la IU enriquecida proporciona un significado nuevo a las palabras portal y portlet.

En general, un portal es una página web que controla componentes independientes de la IU denominados portlets. En el uso tradicional de estos términos, un portal es código del lado del servidor. Los portlets incorporados por el portal son fragmentos de código de la página web, cada uno de los cuales podría estar almacenado en una ubicación remota distinta. La página web se construye en el servidor donde reside el código del portal, y la página web completada se transfiere del servidor al navegador.

En cambio, un portal de IU enriquecida es un widget que se ejecuta en el navegador y que hace referencia a un conjunto de widgets del portlet, cada uno de los cuales hace referencia a un manejador de IU enriquecida. Las secciones siguientes muestran cómo codificar un portal y portlets en la IU enriquecida.

Crear el manejador MainHandler

  1. Cree un nuevo manejador de IU enriquecida en el paquete handlers del proyecto MortgageUIProject, tal como hizo en la lección anterior. En este caso, el nombre del manejador es MainHandler. El manejador se abrirá en la vista Diseño del editor de IU enriquecida.
  2. Si no ve la bandeja Ejemplos en la vista Paleta, pulse el botón Renovar paleta a la izquierda de la vista Paleta.
    El botón Renovar paleta
  3. Seleccione el widget GridLayout inicial que se ha creado para el manejador. Asegúrese de que el todo el widget esté rodeado por la línea de puntos.
    El widget GridLayout inicial está seleccionado.
  4. Pulse la tecla Suprimir para eliminar el widget.
  5. Desde la bandeja Ejemplos de la paleta, arrastre un widget del portal al editor y asígnele el siguiente nombre:
    mortgagePortal
  6. En la parte inferior del editor, pulse la pestaña Fuente.
  7. En la declaración mortgagePortal, cambie el número de columnas a 2, y establezca los anchos de columna a 350 y 650. A continuación se muestra el contenido del archivo:
  8. Después de la declaración mortgagePortal, sáltese una línea y añada las siguientes declaraciones:
    	calculatorHandler MortgageCalculatorHandler{};
    	resultsHandler CalculationResultsHandler{};
    Estas sentencias declaran dos variables, cada una de las cuales se basa en un componente de manejador; en este caso, un componente de manejador desarrollado en esta guía de aprendizaje.
  9. Sáltese una línea añada el siguiente código:
    calculatorPortlet Portlet{children = [calculatorHandler.ui],
       title = "Calculator"};
    resultsPortlet Portlet{children = [resultsHandler.ui],
       title = "Results", canMove = TRUE, canMinimize = TRUE};
    Cada variable de portlet nueva se declara con una referencia a la IU inicial en el manejador incorporado.
  10. Para eliminar marcas de error, pulse Ctrl+Mayús+O.
  11. Codifique la función start de la manera siguiente:
    function start()
       mortgagePortal.addPortlet(calculatorPortlet, 1);
       mortgagePortal.addPortlet(resultsPortlet, 1);
    
       // Suscribirse a eventos de cálculo
       InfoBus.subscribe("mortgageApplication.mortgageCalculated", restorePortlets);
    
       // El estado inicial está minimizado
       resultsPortlet.minimize();
    end	
    El código actúa del modo siguiente:
    • Añade los portlets declarados previamente en el portal: uno para mostrar la calculadora y otro para mostrar el gráfico circular.
    • Asegura que el manejador principal está suscrito al mismo evento que CalculationResultsHandler, en este caso para asegurar que la función restorePortlets se ejecuta cuando el servicio remoto devuelve un cálculo de hipoteca.
    • Minimiza el segundo portlet de modo que en tiempo de ejecución, el gráfico circular no está visible inicialmente.
  12. Después de la función start, añada la función que se invocará cuando el servicio devuelva un cálculo:
    function restorePortlets(eventName STRING in, dataObject ANY in)
       if(resultsPortlet.isMinimized())
          resultsPortlet.restore();
       end
    end
    La función restore, que es específica del portlet, hace que se visualice el gráfico circular.
  13. Para eliminar las marcas de error, pulse 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 MainHandler.egl después de la Lección 7.

Probar el portal

Pruebe el portal principal para asegurarse de que el portlet de resultados recibe los cambios del portlet de cálculo.
  1. En la parte inferior del editor, pulse Vista previa. EGL muestra el manejador principal, en el lugar donde está declarado el portal. El manejador muestra los dos portlets subordinados.
    El portlet Calculadora muestra los valores predeterminados y el portlet Resultados está minimizado.
  2. Pulse Calcular. La imagen animada indica que el proceso está en curso. Cuando termina el cálculo, se visualiza el gráfico circular.
    El portlet Resultados restaurado muestra el gráfico circular.
  3. Mueva el cursor por encima de una de las secciones del gráfico circular para obtener una vista ampliada.
  4. Cambie alguno de los valores de cálculo y vuelva a pulsar Calcular. El gráfico circular refleja los cambios en la relación entre principal e interés.
  5. Cierre el archivo.

Punto de comprobación de lección

Ha aprendido a realizar las tareas siguientes:
  • Cree un widget de portal.
  • Añada portlets al portal y, de esta manera, haga que estén disponibles los manejadores que ha creado en las lecciones anteriores.

En la siguiente lección, añadirá un portlet para listar los cálculos de la hipoteca.

< Anterior | Siguiente >

Comentarios