Flujos de trabajo

Y aquí llegamos al momento clave de la creación de aplicaciones web. Al fin y al cabo, todo lo que hemos hecho hasta ahora ha sido simplemente crear una imagen. Bastante bonito, probablemente, pero bastante inútil. Ahora tenemos que hacer lo principal. Revivirlo, y añadir una reacción a nuestras acciones.

Cada componente tiene una Workflow pestaña para esta tarea. En ella se pueden crear procesos de negocio y definir condiciones (triggers) para su lanzamiento. Vamos a crear un proceso de negocio de este tipo para el botón Calculate.

Disparadores

Crear un proceso de negocio es muy similar a lo que ya vimos en el módulo 4 cuando creamos un proceso de negocio para el backend. Hay un lienzo común, bloques que se añaden allí, y las conexiones entre ellos determinan la secuencia de acciones. Una diferencia importante es que el flujo de trabajo del front-end tiene muchos bloques diferentes para iniciar un proceso de negocio. Estos son los desencadenantes que inician el proceso de negocio. Los desencadenantes en sí pueden ser diferentes para cada componente (un botón tiene un clic, una tabla tiene una actualización de datos en ella, y una lista tiene una elección de alguna opción), pero la lógica general de trabajo es la misma en cualquier caso. Se produce un evento, y este evento inicia el proceso de negocio correspondiente.

Decidamos un plan general. Qué tenemos que hacer cuando se pulsa el botón:

• Averiguar los valores X e Y. Obtenerlos de los campos de entrada correspondientes.
• Lanzar un endpoint para los cálculos y pasarle los parámetros X e Y.
• Hacer visible el contenedor de resultados.
• Ponga el resultado del cálculo en los campos requeridos de Label.
  

Bloques de procesos de negocio

El primer paso requiere un bloque InputFloat Get Properties bloque. Éste lee los valores actuales del componente, no sólo lo que el usuario ha introducido sino también otros ajustes (por ejemplo, los ajustes de apariencia o el rango de valores permitido). Necesitamos obtener Valueexactamente los datos introducidos por el usuario. Cada valor de su campo de entrada y necesitamos dos bloques para esto (para X y para Y). En ellos, es necesario seleccionar el Component ID valor en la entrada. Si no se olvidó de especificar su nombre al crear, no será difícil encontrar y seleccionar el componente requerido.

El siguiente paso es lanzar el endpoint. Aquí es donde tiene lugar la conexión entre el front-end y el back-end, y se transmite la orden de cálculo desde el navegador al servidor. Cada endpoint de nuestra aplicación está representado como un bloque separado. Sólo tienes que seleccionar el que necesitas y conectarlo. A este endpoint se le asignó un GET método y un module4-basic URL durante el quinto módulo. Estará bajo este nombre en la lista de bloques - Server request GET /module4-basic/

A diferencia de los componentes, los endpoints no necesitan establecer su Endpoint ID (se establece correctamente por defecto). Sólo es necesario aplicar a la entrada X e Y obtenida en el paso anterior.

La siguiente tarea es hacer visible el contenedor de resultados. Para ello, utilice el bloque Container Update Properties bloque. En el propio bloque, seleccione el ID del contenedor deseado y ponga Visible = true.

Lo último que queda por hacer es distribuir los 5 elementos de resultado del array a los componentes correspondientes de la aplicación web. Sabemos que el resultado debe venir siempre en un orden estrictamente definido, por lo que sólo tenemos que coger secuencialmente el elemento con el índice deseado y asignar su valor al componente Label. Para ello, utilizamos los bloques Array Element (con un índice de 0 a 4), toString (para convertir Float datos a String), y Label Update Properties para cambiar el texto de Label y mostrar el resultado.

Habrás notado que hay dos opciones de bloques para actualizar las propiedades de cualquier componente - Update Properties y Set Properties. La diferencia entre ellas es la misma que entre las opciones Patch y Put de la API Rest. El primero sólo modifica las propiedades especificadas explícitamente, mientras que el segundo las sobrescribe todas.

Resultado final

Esto completa la creación del proceso de negocio. Puede guardar, publicar y comprobar el resultado final.

Si todo se ha hecho correctamente, el resultado final debería tener este aspecto: