Al finalizar esta Etapa usted deberá estar familiarizado con los siguientes conceptos:
Nociones de Modelado:
Reutilización, Proceso
Técnicas de Modelado:
Recibir información de la base de datos y mostrarla en una tabla
Plantillas de procesos útiles:
Acción, Find
Plantillas de vista útiles:
Table Simple
En esta Etapa usted modelará la lista de las solicitudes recibidas desde la base de datos que se mostrará en la pantalla.
La aplicación web resultante lucirá como sigue:
El modelado de esta etapa puede ser ejecutado en el proyecto Tutorial 3-4 que usted importó al final de la etapa previa.
En la Etapa previa estudiamos como mostrar un formulario utilizado para ingresar información y guardarla en una base de datos.
A continuación querremos ser capaces de mostrar la información previamente ingresada de forma tabular -una fila por registro.
La tabla formará parte de la vista Open Requisitions he hemos creado previamente.
Agrande la vista Open Requisitions:
Haciendo doble clic en ella dentro del editor
o
Ubicándola en el outline y haciendo doble clic en ella ahi
La tabla se ubicará a continuación del botón New Requisition, debemos asegurarnos que haya suficiente lugar para el nuevo modelo que estamos a punto de crear dentro del modelo Open Requisitions:
Redimensione el botón New Requisition y ubíquelo cerca del borde superior de la vista Open Requisitions.
Debemos comenzar por añadir una Tabla a Open Requisitions.
Seleccione la plantilla Display/Simple Table () de la paleta, e introdúzcala dentro de Open Requisitions.
Llámela Requisition List.
La plantilla Simple Table incluye por defecto el elemento <Selected Row>. Ignoremos este elemento por el momento, ya lo utilizaremos en la Etapa 6 de este tutorial.
La vista Open Requisitions debería lucir ahora similar a la siguiente:
Queremos que la tabla sea tan sencilla como sea posible y muestre los campos de Requisition (Id, Description, Date, Status), entonces simplemente reutilizaremos la estructura de datos Requisition:
Reutilizar modelos previamente definidos es una parte integral del proceso de modelado, y aumenta significativamente tanto la velocidad del desarrollo como la claridad del modelo. Cuando usted reutiliza un modelo, cualquier cambio que haga afectará a todas sus ocurrencias (todos los lugares en los que usted ha reutilizado el modelo). Esto asegura la consistencia del modelo. Se puede reutilizar cualquier tipo de modelo (modelo de datos, de vista o procesos).
Ubique la estructura de datos Requisition dentro de la lengüeta Repository.
O en el Outline.
Agrande la tabla Requisition List.
Arrastre la estructura dentro del editor de modelos.
y colóquela dentro del elemento Requisition List.
Ahora, como la tabla contiene varias filas, cada una repitiendo la misma estructura de datos (Requisition), necesitamos definir la estructura de datos como repetitiva:
Haga clic derecho sobre el elemento Requisition que acabamos de crear, y seleccione del menu la opción repetitive.
Puede verificar que el elemento Requisition ha sido definido como repetitivo: 1. Haciendo clic derecho en él nuevamente y verificando que la opción repetitive tiene una marca. 2. Verificando la propiedad repetitive en el panel Properties. 3. Verificando que el elemento Requisition en el editor de modelos, aparece apilado. (vea la captura de pantalla a continuación)
El modelo de la tabla Requisition List debería ahora lucir como sigue:
Guarde su trabajo y eche un vistazo a la aplicación en el navegador. Este debería lucir similar al siguiente:
Note que la tabla Requisition List está vacía – la columna de títulos aparece, pero no hay filas en la tabla. Aún es necesario modelar la recepción de datos desde la base de datos para rellenar las filas de la tabla Requisition List.
Modelaremos ahora la recepción de información de la base de datos y el llenado de la tabla con ella:
Seleccione la plantilla Basic/Action (), y arrástrela dentro del modelo Open Requisitions.
Llámelo Populate Open Requisitions List (Llenar la lista de solicitudes).
La plantilla Action es un contenedor para definir procesos compuestos. Ya que Populate Open Requisitions List no tiene un trigger definido, será ejecutado automaticamente cuando su padre (Open Requisitions) es ejecutado. El nombre Populate Open Requisitions List fue elegido porque explica el proceso. No tiene ningún efecto en tiempo de ejecución, y usted puede decidir darle otro nombre sin que ello signifique un cambio en el comportamiento de la aplicación.
El modelo Open Requisitions debería lucir ahora como sigue:
Note que Populate Open Requisitions List no es un modelo de vista, sino un modelo de proceso. No es parte de lo que se muestra en la pantalla (como el elemento Requisition de Requisition List), pero algunos procesos toman lugar para que la tabla sea desplegada correctamente. Como se explicó antes, no tiene triggers y, por lo tanto, se ejecuta automáticamente, por lo que lo llamaremos un proceso de inicialización. Cualquier modelo de vista puede contener uno o varios procesos de inicialización.
El proceso Populate Open Requisitions List generará un elemento de datos Requisition List (creado de la lectura de la tabla Requisitions de la base de datos). La lista de solicitudes generada será enviada a la pantalla.
Para generar el elemento de datos Requisition List, crearemos un sub-proceso que llena el proceso Populate Open Requisitions List:
Agrande el modelo Populate Open Requisitions List.
Seleccione la plantilla Basic/Action (), y arrástrela dentro del modelo Populate Open Requisitions List.
Llámelo Generate Requisition List.
El proceso Generate Requisition List comienza recibiendo la información de la base de datos. Esto se lleva a cabo utilizando la plantilla Find.
Seleccione la plantilla Database/Find (), e insértela dentro de Generate Requisition List.
El modelo de acción Populate Open Requisitions List debería lucir ahora como sigue:
La plantilla Find incluye dos salidas, <None> y <Records>, que se "activan" (y exponen el resultado) dependiendo de que Find encuentre algun registro o no. Si no se encontraron registros, la salida <None> se activa. Si por lo menos un registro fue encontrado, el resultado se expone por medio de la salida <Records>.
Si mira de cerca la salida <Records>, notará que está marcada como repetitiva (), significa que Find puede devolver varios registros.
Aún debemos definir la tabla de la base de datos de la cual Find Requisitions debe recibir los registros. Esto se lleva a cabo definiendo el Tipo de Dato de la salida <Records> - la estructura de datos que la salida devuelve. Lo haremos a continuación.
Los registros recibidos por medio de Find deben ser guardados en la estructura de datos correcta, en nuestro caso debe ser una estructura de datos que represente la Requisition List que hemos creado previamente.
Arrastre el modelo Requisition List desde la lengüeta outline, y colóquela cerca del elemento Find Requisitions.
Esto crea un elemento de datos de vista de Requisition List, que representa al modelo Requisition List.
Note que el Elemento de Datos de Vista que acabamos de crear es similar, pero no idéntico al Elemento de Datos de Vista que creamos mediante la función Add Ancestor Reference (en la Etapa 3). La similitud se debe a que ambos son representaciones de modelos de vista. La diferencia es que mediante Add Ancestor Reference, usted crea una referencia a la vista en tiempo de ejecución actual (que provee un acceso a los datos mostrados en pantalla), mientras que en la situación actual estamos creando un nuevo elemento de datos de vista en memoria que tiene la misma estructura que el mostrado, pero que no es lo que se muestra actualmente en pantalla. Otra manera de decirlo es que hemos creado un elemento de datos de vista lógico (o en memoria).
A continuación agregaremos un Conector que creará la tabla Requisition List de los registros provistos por Find Requisitions:
Expanda el elemento Requisition List (haciendo clic en el signo de la equina superior derecha) para revelar su contenido.
Seleccione la herramienta Conector (Flow) para unir el trigger <Records> de Find con el elemento de datos repetitivo Requisition en Requisition List.
Creando la conección anterior usted ha hecho dos cosas: 1. Explicitamente definió a dónde debe llenar el resultado de Find (al elemento Requisition de la tabla Requisition List); 2. Implicitamente definió el tipo de datos de la salida <Records> de Find, es decir Requisition. Ya que el tipo de dato Requisition esta basado en la plantilla Database Record, Find sabe a qué tabla en la base de datos debe acceder (la tabla Requisition).
El modelo de acción Generate Requisition Listd debe lucir ahora como el siguiente:
Se supone que el sub-proceso Generate Requisition List devuelva datos (el elemento de datos Requisition List), entonces necesitamos definir que información será devuelta y dónde será guardada.
Seleccione la ranura de Salida () de la paleta y haga clic en el borde del elemento Generate Requisition List.
Seleccione la herramienta Conector para unir el elemento de datos Requisition List a la Salida que acabamos de crear.
El sub-proceso Generate Requisition List debe lucir como el siguiente:
En la etapa previa mostramos cómo utilizar un elemento de datos Ancestor Reference para recibir la información ingresada por el usuario desde la pantalla. Ahora usaremos la misma técnica para realizar lo contrario, es decir, desplegar la información en la pantalla.
Agrande el elemento Populate Open Requisitions List.
Haga clic derecho en el elemento Populate Open Requisitions List, seleccione Add Ancestor Reference del menú, y seleccione Open Requisitions.
Ahora podemos usar la referencia al ancestro Open Requisitions que hemos creado como destino al cual Generate Requisition List enviará la tabla de salida.
Haga doble clic en el elemento de datos Open Requisitions para agrandarlo.
Expanda el elemento Requisition List (haciendo clic en el signo de la esquina superior derecha) para mostrar su contenido.
Use la herramienta Conector para unir la salida de Generate Requisition List a Open Requisitions/Requisition List.
El modelo Populate Open Requisitions List debería lucir ahora como sigue:
Guarde su trabajo y regrese al navegador para ver la aplicación. Debe lucir como el siguiente:
Los datos que se muestran en la tabla son aquellos que usted ingresó previamente (o información ingresada con la aplicación de ejemplo del Tutorial 3-4).
Ahora crearemos una nueva solicitud:
Haga Clic en el botón New Requisition.
En la ventana emergente Enter New Requisition, ingrese una Descripcion, y haga clic en Submit.
Note que la tabla no se actualizó, a pesar de que la información fue guardada, como puede verificar actualizando el navegador.
Pedir al usuario actualice el navegador manualmente es inaceptable; la tabla debe ser actualizada automáticamente cuando una nueva solicitud es ingresada.
Actualizar la pantalla significa rellenar la tabla Requisition List con la información más actual de que disponemos, que es exactamente lo que acabamos de modelar, entonces podemos reutilizar el proceso Populate Open Requisitions List.
Ya que la actualización debe ser ejecutada cuando la solicitud es enviada, debe ser modelada dentro del botón Submit Requisition:
Agrande el botón Submit que hemos creado en una etapa previa.
En esta etapa, el modelo Submit debería lucir como sigue:
Las flechas gris claro que aparecen en la captura de pantalla anterior (que apuntan a Requisition), significan que el origen o destino de la flecha no se muestra (porque su padre ha sido contraído)
Agregue un nuevo proceso de acción al botón para ejecutar la actualización requerida, después que la solicitud ha sido correctamente ingresada:
Seleccione la plantilla Basic/Action (), arrástrela dentro de Submit Requisition.
Llámela Refresh Requisition List.
Seleccione la ranura Trigger () de la paleta y haga clic en el borde del elemento Refresh Requisition List.
Seleccione la herramienta Conector, y conecte la salida <Inserted> de Insert a la ranura Trigger de Refresh Requisition List.
Note que el trigger agregado a Refresh Requisition List demuestra un método alternativo para agregar un trigger que controla el orden en que los procesos ocurren. El otro método (utilizando la opción Add Element del menú contextual) fue demostrado en el elemento Close Window que agregamos anteriormente (ver Etapa 3). Esto también demuestra que el nombre Control en si mismo, no tiene efecto en la manera en que el trigger actúa. Sólo hace que el modelo sea más legible (exponiendo el propósito del trigger por medio de su nombre).
Su modelo debería lucir similar al siguiente:
Note que las ranuras pueden servir como origen/destino de varios conectores. En nuestro caso, cuando la inserción concluye con éxito, tanto Close Window como Refresh Requisition List son ejecutados.
Ahora reutilicemos el proceso Populate Open Requisitions List:
Arrastre el proceso Populate Open Requisitions List del Repository (o del Outline) y ubíquelo dentro de Refresh Requisition List.
El modelo Refresh Requisition List debe lucir como sigue:
Puede sorprenderse de por qué hemos ‘envuelto’ el proceso Populate Open Requisitions List dentro de otro proceso (Refresh Requisition List), en vez de ubicarlo directamente en el modelo del botón Submit, y creado un conector desde Insert directamente en el. La razón es que en este caso necesitaremos agregar un trigger al proceso Populate… , y como el proceso es reutilizado en la vista Open Requisitions, el trigger también aparecerá allí, y dejará de funcionar, puesto que el trigger no recibe conectores en ese escenario.
Guarde su trabajo y vaya al navegador para ver su aplicación.
Ingrese nuevas solicitudes y verifique que aparecen en la lista.
Importe el proyecto ejemplo Requisition Management system (4-5) y utilícelo como base para la próxima etapa del tutorial}.
Para recordar cómo importar un proyecto ejemplo, vaya a la sección Importando un Proyecto Ejemplo al final de la Etapa 2.
Este proyecto ejemplo contiene todas las funcionalidades modeladas hasta ahora.
El ejemplo también incluye una funcionalidad adicional como sigue:
1. Ubique el área de texto Description y la etiqueta en un nuevo elemento fila, para mejorar el formato de la ventana emergente
Cómo modelarlo
Ubicado en
Agregar un Display/Row. Llámelo Description Row.
Ventana emergente Enter New Requisition
Arrastre el área de texto Description desde repository/outline.
Arrastre la etiqueta Description: desde repository/outline.
Description Row
Borre el área de texto Description.
Borre la etiqueta Description:.
2. Arregle las flechas en el modelo Submit Requisition
Haga clic en la flecha roja. Arrastre el origen a Enter New Requisition/Description Row/Description/<Value>
Botón Submit Requisition
Usted puede proceder ahora a la Etapa 5, en la que agregaremos el tratamiento para un campo de Urgencia a la solicitud.
To use the full functionality of this web site, JavaScript needs to be turned on.
For best results, use the Firefox browser..
Copyright © 2003-2017 - Tersus Software Ltd., All rights reserved. Terms of Use License Graphic design by EmaraDesign
