< Anterior | Siguiente >

Lección 4: Creación del manejador de UI enriquecida

Comience a construir el manejador utilizando los asistentes EGL y, a continuación, el editor de UI enriquecida.

Puede añadir widgets en una página web arrastrando el contenido a la superficie de diseño del editor de UI enriquecida. El sistema de arrastrar y soltar y la interacción posterior con el editor actualizan el código fuente del manejador de UI enriquecida que se está desarrollando.

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

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

En esta lección, va a crear un manejador de UI enriquecida y va a añadir una cuadrícula de datos para visualizar todas las filas de la base de datos. Más adelante, añadirá un diseño de cuadrícula para visualizar los campos en un registro seleccionado.

Creación del diseño inicial

Para crear el manejador:

  1. En el proyecto PaymentClient, seleccione la carpeta EGLSource y haga clic en Nuevo > Manejador de UI enriquecida.
    El icono del nuevo manejador de UI enriquecida es el tercero de un total de cuatro en el segundo grupo de iconos de la barra de menús.
  2. En la ventana Componente de Manejador de UI enriquecida nuevo, escriba la información siguiente:
    1. En el campo Nombre de archivo de origen EGL, escriba el nombre siguiente:
      PaymentFileMaintenance
    2. En el campo Paquete, escriba el nombre siguiente:
      manejadores
    3. Pulse Finalizar.
    Se abre el nuevo manejador en la vista Diseño del editor UI enriquecida. EGL crea el paquete manejadores en la carpeta EGLSource.
    Se abre el editor de la UI enriquecida en la vista Diseño de forma predeterminada y muestra una paleta de widgets en la parte de la derecha.

    EGL ha creado automáticamente un diseño de cuadrícula como UI inicial. De forma predeterminada, este widget tiene cuatro filas y tres columnas. Compare este diseño con el esbozo de la lección 1, que utiliza solamente cuatro células.

  3. Para reducir el tamaño del diseño, pulse en él y vaya a la vista Propiedades que, de forma predeterminada, es una de varias páginas con pestañas debajo del panel del editor. En la página General, establezca la propiedad de las filas en 2 y la propiedad de las columnas en 2 y, a continuación, pulse la superficie de diseño.
    Se abrirá el editor de la UI enriquecida en la vista Diseño de forma predeterminada y mostrará una paleta de widgets en la parte de la derecha.

    En un paso posterior se va a mostrar una forma distinta de cambiar el número de filas y columnas en un diseño de cuadrícula.

    El diseño principal de este manejador de UI enriquecida tiene ahora una primera fila, donde el manejador mostrará dos conjuntos de botones, y una segunda fila, donde el manejador mostrará el contenido siguiente: en la parte de la izquierda, una lista de registros y en la parte de la derecha, un diseño para mostrar los detalles de un registro.

Creación de una cuadrícula de datos que conserve el contenido de un conjunto de filas de base de datos

Cree una cuadrícula de datos arrastrando una variable de matriz de registro en el editor de UI enriquecida.

Para crear la cuadrícula de datos:

  1. Cree una variable de matriz de registro.
    1. La vista Datos EGL que, de forma predeterminada, se halla en la esquina inferior izquierda del entorno de trabajo, lista 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 el espacio vacío de debajo de la entrada del archivo PaymentFileMaintenance. Pulse Nuevo > Variable EGL.
      La vista Datos EGL
    2. En el asistente Campos nuevos de Datos de UI enriquecida EGL, solicite una variable de registro nuevo basada en el registro paymentRec:
      • Asegúrese de que Selección de tipo se haya establecido en Registro.
      • Seleccione el registro paymentRec. Este registro debería ser el único de la lista.
      • En la sección Propiedades de matriz, marque el recuadro de selección Matriz. Deje el campo Tamaño vacío.
      • Para Especifique el nombre del campo, escriba el nombre siguiente:
        allPayments
      • Pulse Finalizar.
        El asistente Campos nuevos de Datos de UI enriquecida EGL
    Este proceso crea la siguiente declaración de registro en el código fuente para el manejador:
    allPayments paymentRec[0];
    En la vista Datos EGL habrá ahora una variable de registro que podrá arrastrar al editor.
    La vista Datos EGL muestra la variable inputRec.
  2. Arrastre la variable de registro allPayments de la vista Datos EGL a la celda inferior izquierda del diseño.
    Arrastre de un registro desde la vista Datos al widget de diseño.
    EGL muestra la página Configurar widgets de datos del asistente Insertar datos. Utilice esta página para configurar los widgets que EGL crea. Los tipos de widget dependen del tipo de campos de la matriz de registro que haya arrastrado a la superficie de diseño.
  3. Realice los cambios siguientes en el asistente Insertar datos:
    1. En Crear Widgets para, deje el valor predeterminado de Datos de solo lectura.
    2. Los recuadros de selección de la variable allPayments indican los campos que se deben utilizar como columnas en la visualización. Borre todos los campos pulsando Ninguno.
    3. Compruebe los campos siguientes:
      • categoría
      • descripción
      • cantidad
    4. Cambie las etiquetas de estos campos:
      • Cambie categoría por Tipo.
      • Cambie descripción por Descripción.
      • Cambie cantidad por Cantidad debida.
      El asistente utiliza estas etiquetas como cabeceras de columna para la cuadrícula.
    5. Desmarque Añadir soporte para formateo y validación. Estos son los valores completados:
      El asistente Configurar widgets de datos completado
    6. Pulse Finalizar. Aparecerá la cuadrícula vacía:
      La cuadrícula vacía tiene una cabecera de tres columnas.
  4. Pulse en la vista Propiedades:
    • Asegúrese de que aparezca el siguiente título: DataGrid (allPayments_ui). Si no aparece, pulse en la cuadrícula de datos, asegúrese de que aparezca el título y pulse de nuevo en la vista Propiedades.
    • En la página General, cambie la propiedad selectionMode por SINGLE. Esta propiedad indica que el usuario solamente puede seleccionar una fila de la cuadrícula cada vez.
    • En la página Diseño, cambie la propiedad verticalAlignment por TOP.
      Página de propiedades de diseño de DataGrid
      Esta propiedad garantiza que la cuadrícula de datos allPayments_ui se alineará con la cuadrícula de detalles que el usuario añadirá posteriormente.
  5. Pulse la pestaña Código fuente en la parte inferior del editor para ver el código que ya ha creado. Con esta oportunidad podrá reducir el ancho de dos columnas en la cuadrícula de datos. Específicamente, considere las declaraciones de DataGridColumn para las columnas categoría y cantidad y cambie la propiedad del ancho del valor predeterminado de 120 píxeles a 90 píxeles. He aquí la declaración de la cuadrícula de datos tras realizar el cambio:
    allPayments_ui DataGrid {
                   layoutData = new GridLayoutData
                                {row = 2, column = 1
                                 verticalAlignment = GridLayoutLib.VALIGN_TOP},
                   columns =[
                      new DataGridColumn{name = "category", 
                                         displayName = "Type", 
                                         width = 90},
                      new DataGridColumn{name = "description", 
                                         displayName = "Description", 
                                         width = 120},
                      new DataGridColumn{name = "amount", 
                                         displayName = "Amount due", 
                                         width = 90}
                   ],
                   data = allPayments as any[],
                   selectionMode = DataGridLib.SINGLE_SELECTION};
  6. Añada datos de prototipo a la función start, a la que se hace referencia en la propiedad onConstructionFunction del manejador y que se ejecuta antes de que el usuario acceda por primera vez a la página web. Específicamente, asigne una matriz de registros a la propiedad data de la cuadrícula de datos:
    function start()
       allPayments_ui.data = 
          [
             new paymentRec{category = 1, description = "test01", amount = 100.00},
             new paymentRec{category = 2, description = "test02", amount = 200.00},
             new paymentRec{category = 3, description = "test03", amount = 300.00}
          ];	end	
  7. Para formatear el archivo, pulse Control-Mayús-F.
  8. Pulse la pestaña Vista previa.
    Página web con datos de prototipo
  9. Guarde el archivo.

Adición del primer conjunto de botones

Para crear los botones Añadir, Suprimir y Ejemplo en la superficie de diseño:

  1. Pulse la pestaña Diseño.
  2. En la vista Paleta, vaya al cajón Diseño y busque el tipo de widget GridLayout. Arrastre un diseño de cuadrícula nuevo a la esquina superior izquierda del diseño principal. Asigne el nombre siguiente al widget nuevo:
    buttonLayout
    El diseño de la cuadrícula nuevo dentro del manejador
  3. Pulse en el nuevo diseño, pulse con el botón derecho del ratón en una celda y fíjese que es posible insertar o suprimir contenido del menú.
  4. Pulse Suprimir > Fila.
  5. Pulse de nuevo en el nuevo diseño, pulse con el botón derecho del ratón en un celda y pulse Suprimir > Fila. Se conserva una sola fila con tres columnas.
  6. Cree el botón Añadir:
    1. En la vista Paleta, vaya al cajón Visualizar y Entrada y, a continuación, a Botón (Dojo). Arrastre un widget Botón Dojo a la celda de más a la izquierda de buttonLayout.
      Arrastre de un botón al widget GridLayout nuevo
    2. Asigne el nombre siguiente al botón:
      addButton
    3. Vaya a la vista Propiedades:
      • En la página General, cambie la propiedad texto por Añadir.
      • En la página Sucesos, seleccione la fila para el suceso onClick. Aparecerá un signo más (+) en la parte más alejada de la derecha de la línea. Pulse el signo más y especifique el nombre siguiente para una función que se invocará cuando el usuario pulse el botón Añadir:
        addRow
    Se abrirá la vista Código fuente para mostrar la función addRow. En lugar de completar ahora la función, termine de diseñar esta sección de la página web. Pulse la pestaña Diseño para volver a la superficie de diseño.
  7. Cree el botón Suprimir:
    1. En la vista Paleta, vaya al cajón Visualizar y Entrada y, a continuación, a Botón (Dojo). Arrastre un widget Botón Dojo a la celda del medio de buttonLayout.
    2. Asigne el nombre siguiente al botón:
      deleteButton
    3. Vaya a la vista Propiedades del botón:
      • En la página General, cambie la propiedad texto por Suprimir.
      • En la página Sucesos, asigne el siguiente nombre de función al suceso onClick:
        deleteRow
    4. Cuando aparezca la función deleteRow, pulse la pestaña Diseño.
  8. Mediante el mismo proceso que en los pasos anteriores, cree un botón Dojo en la celda de más a la derecha de buttonLayout. Dé al botón el nombre de sampleButton, cambie la propiedad texto por Ejemplo y utilice el nombre siguiente para la función onClick: sampleData. Aparecerá la función sampleData.
  9. Inspeccione el código fuente, anotando el código proporcionado para cada uno de los botones.
  10. Pulse la pestaña Vista previa.
    Página web con los botones y datos de prototipo
  11. Guarde el archivo.

Adición de una variable y diseño para manejar una sola fila

Anteriormente ha creado una matriz para conservar las filas de base de datos. Ahora declare una variable para una sola fila y, a continuación, arrastre esa variable a la superficie de diseño para crear un diseño para visualizar la fila.

Para crear la variable:

  1. Pulse la pestaña Diseño para visualizar la superficie de diseño.
  2. Pulse con el botón derecho del ratón en el fondo de la vita Datos EGL, que probablemente estará en la parte inferior izquierda del entorno de trabajo. Pulse Nuevo > Variable.
  3. En el asistente Crear una variable de datos EGL nueva, solicite una nueva variable de registro basada en el registro paymentRec:
    1. Asegúrese de que Selección de tipo se haya establecido en Registro.
    2. Seleccione el registro paymentRec.
    3. En la sección Propiedades de matriz, asegúrese de que se haya desmarcado el recuadro de selección Matriz.
    4. Para Especifique el nombre del campo, escriba el nombre siguiente:
      selectedPayment
      El asistente de la nueva variable
    5. Pulse Finalizar.
    Tal como se comentaba en la sección Vista previa de la página que se ha mostrado, se creará la siguiente declaración de registro en el código de origen para el manejador de contexto:
    selectedPayment paymentRec;

Para crear el diseño de la cuadrícula:

  1. En la vista Paleta, vaya al cajón Diseño y busque el tipo de widget TitlePane (Dojo). Arrastre un panel de título nuevo a la celda inferior derecha del diseño principal de la cuadrícula, junto a la celda que conserva la cuadrícula allPayments_ui.
    El widget TitlePane widget se suelta en la última celda.
  2. Asigne el nombre siguiente al panel de título:
    editPane
    Pulse Aceptar.
  3. Realice los cambios siguientes en las propiedades del widget editPane:
    • En la página General, cambie la propiedad título por Registro de pagos
    • En la página Posición, cambie la propiedad ancho por 350. Este valor deja espacio para los mensajes de error.
    • En la página Diseño, cambie la propiedad verticalAlignment por TOP.
    La página web ahora debería tener el aspecto de la imagen siguiente:
    La página web con el panel de registro de pagos
  4. Guarde el archivo.
  5. Desde la vista Datos EGL, arrastre la variable selectedPayment al área delimitada del interior del panel de registro de pagos.
    El área delimitada en el interior del panel.
    Aparecerá el asistente Configurar widgets de datos.
  6. Realice los cambios siguientes:
    1. En Crear Widgets para, seleccione Datos editables.
    2. Asegúrese de que el Tipo de widget del registro selectedPayment sea GridLayout.
    3. Cambie los campos de Etiqueta tal como se muestra en la tabla siguiente. Estas etiquetas se utilizan para identificar los campos en la pantalla:
      Tabla 1. Nombre revisados para los campos selectedPayment
      Nombre predeterminado Nombre revisado
      paymentID Clave:
      categoría Categoría:
      descripción Descripción:
      cantidad Cantidad:
      fixedPayment Pago Fijo:
      dueDate Fecha de vencimiento:
      payeeName Beneficiario:
      payeeAddress1 Dirección 1:
      payeeAddress2 Dirección 2:
      Debe especificar los signos de dos puntos explícitamente, puesto que no se añaden automáticamente a las etiquetas.
    4. Para el campo categoría, en la columna Tipo de widget, pulse DojoTextField. Aparecerá una flecha hacia abajo. Pulse la flecha y, a continuación, pulse DojoComboBox.
    5. Para el campo cantidad, en la columna Tipo de widget, pulse DojoTextField. Aparecerá una flecha hacia abajo. Pulse la flecha y, a continuación, pulse DojoCurrencyTextBox. Este widget proporciona algunos formatos básicos de moneda.
    6. Asegúrese de que Añadir soporte para formateo y validación esté marcado. La selección crea un Administrador de formularios, que utiliza la infraestructura MVC (Modelo Vista Controlador) de la UI enriquecida de EGL para gestionar la validación y el formateo de la UI enriquecida.

      Estos son los valores:

      El asistente Configurar widgets de datos con los valores correctos.
    7. Pulse Finalizar.
    El nuevo diseño de cuadrícula contiene un formulario.
    La nueva cuadrícula selectedPayment tiene una fila para cada campo del registro.
    Nota: Puede que tenga que pulsar el botón Renovar en la esquina superior derecha del Editor de UI enriquecida para ver este cambio:
    El botón Renovar muestra dos flechas amarillas.
  7. Haga que el campo Clave sea se sólo lectura:
    1. Pulse repetidas veces el campo de texto Dojo junto a la etiqueta Clave hasta que solamente quede ese campo rodeado de una línea de puntos.
      El campo Categoría se resalta.
    2. En la vista Propiedades, página General, marque el recuadro de selección readOnly.
      El recuadro de selección readOnly
  8. Para un aspecto más uniforme, realice lo siguiente:
    1. Pulse el widget DojoCurrencyTextBox para Cantidad hasta que solamente quede ese widget rodeado de una línea de puntos.
    2. En la página Posición de la vista Propiedades, establezca la propiedad ancho en 166.

Adición del segundo conjunto de botones

Para añadir los botones Borrar y Guardar:

  1. En la vista Paleta, vaya al cajón Diseño y busque el tipo de widget GridLayout. Arrastre un diseño de cuadrícula nuevo a la esquina superior izquierda del diseño principal y asigne el nombre siguiente.
    detailButtonLayout
    Arrastre de un diseño de cuadrícula a la esquina superior derecha de la página web
  2. con el nuevo diseño seleccionado, actualice la cantidad de filas y columnas de la forma que prefiera: en la vista Propiedades o suprimiendo las filas y las columnas o cambiando el código fuente. En cualquier caso, asegúrese de que el diseño tenga 1 fila y 2 columnas.
  3. En la superficie de diseño, cree el botón Borrar:
    1. En la vista Paleta, vaya al cajón Visualizar y Entrada y, a continuación, a Botón (Dojo). Arrastre un botón Dojo a la primera celda del nuevo diseño.
    2. Mediante el mismo proceso que se utilizó anteriormente, dé al botón el nombre de clearButton, cambie la propiedad texto por Borrar y utilice el nombre siguiente para la función onClick: clearAllFields. Aparecerá la función clearAllFields.
  4. Cree el botón Guardar:
    1. Pulse la pestaña Diseño.
    2. En la vista Paleta, vaya al cajón Visualizar y Entrada y, a continuación, a Botón (Dojo). Arrastre un botón Dojo a la segunda celda del nuevo diseño.
    3. Dé al botón el nombre de saveButton y cambie la propiedad texto por Guardar.
    4. En la página Sucesos, seleccione el suceso onClick y pulse la flecha hacia abajo en la segunda para ver los nombres de funciones disponibles. Pulse selectedPayment_form_Submit, que es una función que EGL ha creado automáticamente cuando se ha arrastrado la variable de registro selectedPayment a la interfaz de usuario.
    5. Pulse la pestaña Vista previa.
      Página web con cinco botones, datos de prototipo y un formulario
    6. Guarde el archivo, que debería coincidir con el código finalizado en Código para PaymentFileMaintenance.egl después de la lección 4.

Punto de comprobación de lección

En esta lección, ha llevado a cabo las tareas siguientes:
  • Creación de un manejador de UI enriquecida.
  • Creación de variables en la vista Datos EGL.
  • Creación de una cuadrícula de datos arrastrando una variable de matriz de registro en el editor.
  • Ajuste de widgets en la vista Propiedades utilizando un menú.
  • Ha trabajado en las tres pestañas del Editor de UI enriquecida actualizando el código fuente y previsualizando la página web.

En la próxima lección creará el servicio que accederá a la base de datos.

< Anterior | Siguiente >

Comentarios