< Anterior | Siguiente >

Lección 9: Cómo completar el código que da soporte a la interfaz de usuario

A continuación, llevará a cabo un diseño de una sola fila, así como el código que da soporte a los botones Borrar y Guardar.

Cómo llevar a cabo el diseño que muestra una sola fila

Para llevar a cabo el diseño de una sola fila:

  1. Pulse la pestaña Código fuente, si es necesario.
  2. Localice la declaración selectedPayment_category_comboBox. En el bloque set-values, en lugar de los paréntesis para la propiedad values, especifique la matriz PaymentLib.categories. La lista de valores del recuadro combinado mostrará ahora los valores de la matriz categories que ha creado en la biblioteca PaymentLib. Ésta es la declaración que ha modificado:
    selectedPayment_category_comboBox DojoComboBox{   values = PaymentLib.categories,
       layoutData = new GridLayoutData{row = 2, column = 2}};    
  3. Para establecer el valor de este recuadro combinado en una descripción de categoría en lugar de un entero, actualice la función cellClicked para acceder a una función de biblioteca que haya codificado anteriormente:
    function cellClicked(myGrid DataGrid in)
       selectedPayment = allPayments_ui.getSelection()[1] as paymentRec;
       selectedPayment_form.publish();
       selectedPayment_category_comboBox.value = 
          PaymentLib.getCategoryDesc(selectedPayment.category);
    end
  4. Guarde el archivo pero no lo cierre.

Pruebe el código nuevo

Revise el efecto del último cambio.
  1. Pulse la pestaña Vista previa.
  2. Pulse en la primera línea de los datos de ejemplo. El diseño de registro único ahora mostrará el nombre de la categoría en lugar de un entero.

Cómo completar el código para el segundo conjunto de botones

Cuando el usuario pulsa Borrar para eliminar el contenido no predeterminado del diseño de registro único, se ejecutará la función clearAllFields. La función configura el diseño de forma que cuando el usuario escribe datos y pulsa Guardar, los datos que se acaban de escribir actualizan una fila de la base de datos existente.
  1. Pulse la pestaña Código fuente.
  2. Busque la función clearAllFields y déjela como se indica a continuación:
    function clearAllFields(event Event in)
       saveID INT = selectedPayment.paymentID;  // conservar la clave
       selectedPayment = new PaymentRec{};
       selectedPayment.paymentID = saveID;
       selectedPayment_form.publish();
    end
    El código conserva la clave de registro para utilizarla en una actualización posterior de la base de datos. A continuación, el código crea un registro, lo asigna a la variable selectedPayment, asigna el valor de clave guardado en esa variable y publica la variable en el diseño de registro único.
  3. Complete la función que se ha invocado cuando el usuario pulsa Guardar:
    1. Busque la función, que se denomina selectedPayment_form_Submit.
    2. Deje la función tal como se indica a continuación:
      function selectedPayment_form_Submit(event Event in)
         selectedPayment_category_comboBox.value 
            = PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);
            	
         if (selectedPayment_form.isValid())
            selectedPayment_form.commit();
            selectedPayment_category_comboBox.value = 
               PaymentLib.getCategoryDesc(selectedPayment_category_comboBox.value);
      
            // actualizar allPayments con la versión nueva de selectedPayment
            for(i INT from 1 to allPayments.getSize())
               if(allPayments[i].paymentID == selectedPayment.paymentID)
                  allPayments[i] = selectedPayment;
                  exit for;
               end
            end
      
            call dbService.editPayment(selectedPayment) 
               returning to recordRevised
               onException serviceLib.serviceExceptionHandler;
         end
      end
      La cláusula siguiente busca la validez de copiar el contenido del widget en el campo relacionado:
       if (selectedPayment_form.isValid())

      Con el recuadro combinado Dojo se da un problema para Descripción, porque el contenido del widget es del tipo STRING (serie) y el campo relacionado es selectedPayment.category, que es del tipo INT. La validación del recuadro combinado Dojo requiere que el recuadro combinado incluya enteros o series como, por ejemplo, “1” o “20,” que se puedan convertir a enteros.

      Para resolver el problema, utilice el widget del recuadro combinado EGL o asegúrese de que el recuadro combinado Dojo incluya un entero válido antes de la validación. El código anterior muestra la segunda opción y comienza asignado el entero:
      selectedPayment_category_comboBox.value 
            = PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);
      La función, a partir de entonces, comprobará la validez de los datos en el diseño de registro único y, si los datos son válidos, hará lo que se indica a continuación:
      1. Confirmar los datos de validación en el registro selectedPayment. Esta “confirmación” forma parte del proceso de MVC y no tiene nada que ver con una confirmación de la base de datos.
      2. Actualizar el recuadro combinado Dojo en el diseño de registro único de forma que el valor de este campo sea de nuevo una serie.
      3. Revisar el elemento de matriz allPayments que contiene el valor de clave guardado. En este punto, el elemento de matriz incluye una copia de los datos que desea el usuario en la base de datos.
      4. Llamar al servicio para actualizar una sola fila de la base de datos. La función de devolución de llamada relacionada asigna la matriz allPayments a la matriz de datos de la cuadrícula de datos y esta asignación vuelve a representar la cuadrícula con los datos actualizados. La cuadrícula se volverá a representar con los datos asignado a la función selectedPayment_form_Submit, no con los datos recuperados de la base de datos.
  4. Guarde el archivo pero no lo cierre. Si detecta errores en el archivo de origen, compare el código con el contenido del archivo en Código finalizado para PaymentFileMaintenance.egl.

Prueba del código nuevo

Ahora puede probar la aplicación completada.
  1. Pulse la pestaña Vista previa. Se visualizarán los datos de ejemplo que ha indicado anteriormente.
  2. Seleccione el registro en blanco en la parte inferior de los datos de ejemplo. Ha creado este registro en una lección anterior. La cuadrícula de registro Pago muestra los campos en blanco, con las excepciones siguientes:
    • Aparece un número clave.
    • El campo Cantidad muestra un valor de cero.
    • La fecha actual se utiliza como valor predeterminado porque el valor de la variable DATE es nulo.
    Aparecerá el nuevo registro en blanco
  3. Complete el registro con datos como los siguientes:
    • Para Categoría, indique Automovilística.
    • Para Descripción, indique Gas.
    • Para Cantidad, indique 80,00€.
    • Deje el recuadro de selección Pago fijo vacío.
    • Pulse en la fecha actual en el campo Fecha de vencimiento y seleccione una fecha del calendario que aparece.
      Aparecerá un calendario emergente cuando pulse en el campo de entrada de fecha.
    • Para Beneficiario, indique Estación de Gas Esquina.
    • Para Dirección 1, indique Calle Mayor, 101
    • Para Dirección 2, indique Miami, FL.
  4. Pulse Guardar. Los datos nuevos se almacenarán en la base de datos y aparecerán en la cuadrícula de datos.
    La primera cuadrícula muestra tres registros y el diseño muestra los detalles del tercero.


  5. Pulse Borrar. El diseño de registro único se restablece en los valores iniciales.

Punto de comprobación de lección

Ha aprendido a realizar las tareas siguientes:
  • Asignar una matriz de series preestablecida como conjunto de valores que proporciona un recuadro combinado Dojo.
  • Utilizar funciones de conversión si ha de relacionar un campo del tipo INT con una recuadro combinado Dojo que contenga series.
  • Utilizar las funciones isValid y commit del Administrador de formularios.

En la siguiente lección, instalará Apache Tomcat en el sistema de forma que pueda ejecutar la aplicación en un servidor web.

< Anterior | Siguiente >

Comentarios