Introducción a App Builder - Lección 5: Controles

Esta es la quinta lección de la serie de tutoriales Introducción a App Builder.

Controles de lista

Cuando aprendimos sobre objetos de negocio, o reglas, en la Lección 3, discutimos dos tipos: objetos fuente y objetos de lista. Para recapitular brevemente, aprendimos que los objetos fuente están destinados a mostrar el contenido de una tabla dada en la capa de datos. Los objetos de lista, por otro lado, se utilizan para crear menús desplegables en nuestras aplicaciones. Ahora que hemos creado varias páginas, usemos los objetos de lista que tenemos para agregar menús a ellas.

1. En App Workbench > Páginas, encuentra Producto, una de las páginas emergentes que creamos en la lección anterior. Haz clic en el ícono de lápiz para editarla.

2. En el panel Diseño del Panel de Página, haz clic en Controles.

3. Aquí, puedes ver una lista de todos los controles que se muestran actualmente en esta ventana emergente. Cuando dejamos que App Builder eligiera automáticamente las columnas del objeto de negocio que usaría para esta página, eligió todas las columnas excepto las creadas por audit lite y aquellas en formato UUID, que no son legibles para los humanos. Agregaremos otro control. Haz clic en + Control. Aparece el cuadro de diálogo Agregar un Control:

   

4. En el menú Columna, selecciona SupplierID. Un nuevo campo, Nombre, aparece automáticamente debajo de él, ya conteniendo el nombre Supplier. El campo Tipo de Control selecciona automáticamente Lista.

5. Haz clic en Siguiente.

6. En el siguiente paso del asistente, usa el menú Fuente para seleccionar Supplier (Lista), el objeto de lista que hemos creado previamente. Si los campos de Tipo de Uso del objeto de lista han sido seleccionados correctamente, los siguientes dos campos se completarán automáticamente y puedes omitir los Pasos 7 y 8.

7. Usa el menú Clave (Columna) para seleccionar Supplier ID (PK).

8. Usa el menú Título (Columna) para seleccionar Proveedor.

9. Haz clic en Siguiente, luego en Finalizar.

10. Navega a la página de Productos y haz clic en Ver Página. Elige cualquiera de las entradas en la lista y haz clic en el botón al final de la fila. Ten en cuenta que la página emergente de Producto ahora tiene un nuevo campo de Proveedor. Si haces clic en el botón Editar, verás que es un menú desplegable.

Tiempo de práctica: Agregar otro control de lista

Repite el mismo proceso que hemos realizado arriba para agregar una lista de Categoría a la página de Producto. Nuestra aplicación Northwinds necesitará ambas listas.

Agregar relaciones entre tablas

En Lección 2, creamos una tabla llamada Región. Sin embargo, actualmente está aislada, lo que significa que no se conecta a ninguna de nuestras otras tablas, por lo que no podemos usar la información que contiene. Vamos a solucionar eso creando una relación entre ella y la tabla de Empleado. De esta manera, podremos hacer un seguimiento de dónde trabaja cada empleado.

Primero, necesitamos agregar una nueva columna a la tabla de Empleado.

1. En App Workbench > Tablas, encuentra la tabla de Empleado y ábrela.

2. Haz clic en + Columna.

3. Asigna a la nueva columna el nombre RegionID. En el panel de Tipos de Datos, asegúrate de que el menú Lógico tenga seleccionada la opción ID Único y el menú Físico se ajustará automáticamente a UUID.

4. Haz clic en Guardar.

5. Como buena práctica, haz clic en Resultados para verificar que la columna RegionID se haya agregado.

6. La nueva columna RegionID ahora aparece en la lista. App Builder la ha identificado como una clave externa basada en el análisis del esquema de datos, y es una buena práctica hacer cumplir esta restricción haciendo clic en el símbolo + que aparece en la columna FK. Aparecerá un mensaje de confirmación. Haz clic en Continuar.

El siguiente paso es asegurarnos de que la nueva columna también se agregue a la regla que construimos basada en esta tabla.

1. En App Workbench > Reglas, encuentra la regla de Empleado (Fuente) y ábrela.

2. En el panel de Tablas, verás la lista de columnas de la tabla Empleado utilizada por la regla. Encuentra la columna RegionID que has creado recientemente y selecciona su casilla para incluirla.

Ahora, podemos agregar un control de lista a la página emergente de Empleado para indicar dónde trabaja cada empleado.

1. En App Workbench > Páginas, encuentra la página Empleado y ábrela.

2. En el panel de Diseño de Página, haz clic en Controles.

3. Haz clic en + Control.

4. En el menú de Columna, selecciona RegionID y haz clic en Siguiente.

5. En Fuente, selecciona Región (Lista). La selección de Clave (Columna) debe ser RegionID (PK) y el Título (Columna) debe ser Región.

6. Haz clic en Siguiente, y luego en Finalizar.

7. Cuando el Constructor de Aplicaciones termine de crear el nuevo control, volverás a la lista de controles. Alterar la columna Orden para que el nuevo control se muestre antes de la información de ubicación del empleado:

   

8. Para comenzar a usar el nuevo control, navega a la página de Empleados, haz clic en Ver Página y abre los detalles de cualquier empleado. Asegúrate de que el campo Región esté mostrando donde esperas que esté. Los campos deben estar vacíos, así que revisa varios empleados y asígnales una región, eligiendo Región de la Costa Este para algunos y Región de la Costa Oeste para otros. Esto será importante cuando avancemos a temas más avanzados más adelante.

Controles HTML

Si navegas nuevamente a la página de Empleados y haces clic en el botón para ver detalles sobre la empleada llamada Laura Callahan, notarás que el campo Notas está mostrando texto HTML sin procesar. Vamos a repasar los pasos para que el HTML se muestre correctamente.

1. Navega a la página de Empleados y haz clic en Ver Página.

2. Haz clic en el botón que muestra detalles sobre un empleado y espera a que aparezca la ventana emergente de Empleado.

3. Haz clic en el ícono de hamburguesa en la parte superior derecha de la página para abrir el panel de acciones y haz clic en Diseñador en Vivo.

4. Cuando se abra el menú lateral del diseñador en vivo, haz clic en el campo Notas para resaltarlo. Al hacerlo, el diseñador en vivo mostrará opciones de edición para ese campo.

5. En la pestaña Propiedades del Control, el menú Tipo de Control actualmente muestra Texto. Esto significa que el Constructor de Aplicaciones simplemente está mostrando lo que hay en la columna sin ningún cambio. Selecciona HTML en su lugar. Esto hará que el Constructor de Aplicaciones trate el contenido correctamente, interpretando el código HTML.

6. Haz clic en Guardar. El campo Notas ahora muestra texto estilizado y formateado:

   

Crear, Actualizar y Eliminar controles

Los paneles en el Constructor de Aplicaciones ofrecen la opción de crear, actualizar o eliminar registros. Sin embargo, no siempre deseas dar a los usuarios todas estas opciones. Otras veces, hay limitaciones de espacio y deseas eliminar algunas de las opciones porque sus íconos ocupan espacio en las pantallas de tu aplicación. Aprendamos cómo hacer cambios en estas características.

Editar las opciones de crear y actualizar

El Constructor de Aplicaciones te permite cambiar la forma en que funcionan los íconos de crear y actualizar, específicamente qué áreas se vuelven disponibles para editar al hacer clic en uno de los íconos. Aprendamos cómo modificando cómo funcionan las opciones en nuestra página de Clientes.

1. Navega a la página de Clientes y haz clic en Ver Página para previsualizarla.

2. Haz clic en el ícono de hamburguesa en la parte superior derecha de la página para abrir el panel de acciones y haz clic en Diseñador en Vivo.

3. Haz clic en el panel de Clientes para que el diseñador en vivo muestre opciones de edición para él.

4. En la pestaña Métodos de Actualización, cambia tanto las opciones de Método de Edición como de Método de Inserción a Vincular a Página. Esto significa que cuando un usuario intente editar una entrada o agregar una nueva, será vinculado a una página de tu elección, en lugar de la interfaz de edición en línea que se muestra por defecto. Elige la página emergente de Cliente que ya hemos creado:

   

5. Haz clic en Guardar. Una vez que App Builder guarde, sal del diseñador en vivo y prueba tus cambios. Intenta hacer clic en Crear o en el ícono de edición y verifica que se muestre la página emergente de Cliente.

Tiempo de práctica: Edita las opciones de crear y actualizar para otras páginas

Repite el proceso que hemos realizado arriba en la página de Clientes para las páginas de Empleados, Proveedores, Transportistas y Productos, utilizando sus respectivas páginas emergentes.

Desactivar eliminar y crear en una página

Vamos a desactivar las funciones de eliminar y crear en la página de Parámetro, que creaste al final de Lección 4. Este es un buen ejemplo para usar porque los parámetros que rigen toda la aplicación nunca deben ser eliminados ni debe haber más de un conjunto.

1. Navega a la página de Parámetro y haz clic en Ver Página para previsualizarla.

2. Haz clic en el ícono de hamburguesa en la parte superior derecha de la página para abrir el panel de acciones y haz clic en Diseñador en Vivo.

3. Haz clic en el panel de Parámetro para que el diseñador en vivo muestre las opciones de edición para él.

4. En la pestaña de Métodos de Actualización, encuentra la opción de Método de Inserción. Selecciona No, ya que no queremos que se agreguen nuevos conjuntos de parámetros.

5. En la misma pestaña, encuentra la opción de Eliminar Soportado. Si Sí está resaltado, un botón de Eliminar será visible en la ventana emergente. Haz clic en No para asegurarte de que el botón no se muestre.

   

6. Cuando App Builder guarde los cambios, nota que el botón de Eliminar desaparece.

Usar un control de moneda

Echa un vistazo a la página de Productos. La columna de Precio Unitario está mostrando valores como números sin formato, pero se supone que son cifras monetarias. Editaremos ese control para que formatee los valores de la manera que esperamos. Hay varias formas de hacerlo, pero lo haremos desde la capa de negocio.

1. En App Workbench > Rules, encuentra la regla Product (Source), ya que es la base de la página de Products, y haz clic para editarla.

2. En la pestaña Columns, localiza la fila que apunta a la columna UnitPrice y haz clic en el ícono de edición .

3. En la sección Cast Options, utiliza el campo Logical Data Type para seleccionar Currency. Haz clic en Save:

   

   Nota

   También puedes editar el campo sin el popup, haciendo clic en el ícono de lápiz o haciendo clic directamente en el campo bajo Logical en línea.

4. Regresa a la vista previa de la página de Products. Los precios deberían mostrarse correctamente ahora.

Additional control settings

Hay configuraciones adicionales que puedes usar para personalizar la apariencia y funcionamiento de tus controles. Las secciones a continuación las describen.

Grid priority

Grid priority es una característica en App Builder que permite a los desarrolladores anular el comportamiento responsivo predeterminado de una página. Mientras que App Builder escala automáticamente el contenido para adaptarse a diferentes dispositivos, la prioridad de la cuadrícula te da control manual sobre qué puntos de datos específicos permanecen visibles cuando el espacio en pantalla es limitado.

Para demostrar la prioridad de la cuadrícula, te mostraremos cómo seleccionar los controles más importantes en uno de los paneles de la página de Customers.

1. Ve a App Workbench > Pages y abre la pantalla de edición de la página de Customers. Alternativamente, navega a la página de Customers en la vista previa de la aplicación.

2. Desde la pantalla de edición de la página de Customers, en el panel Page Panel Layout, haz clic en Controls en el panel de Customers. Aparece la lista de controles en el panel, y la columna Priority es donde configuras la prioridad de la cuadrícula. Alternativamente, si estás en la vista previa de la página de Customers, abre el cajón de acciones , selecciona el Live Designer y haz clic en una de las columnas (por ejemplo, Customer) en el panel de Customers. Una vez que el diseñador en vivo muestre la configuración para ese control, haz clic en la pestaña Position & Width y localiza el campo Grid Priority (ver captura de pantalla).

   

Ahora, para cada uno de los controles, haz clic para seleccionar un valor de prioridad entre 1 y 4. Cuanto menor sea el número, mayor será la prioridad. Típicamente, un teléfono en modo vertical puede mostrar tres campos, mientras que un teléfono en modo horizontal o una tableta pueden mostrar cinco campos. Por lo tanto, decide cuáles son los tres campos más importantes y asígnales prioridad 1. A continuación, selecciona otros dos campos y asígnales prioridad 2.

Es una buena práctica recomendada asignar prioridades de cuadrícula en cada panel que tenga varios controles.

Ordenación de columnas

La ordenación de columnas es cómo App Builder ordena las entradas en las listas mostradas en la capa de UI. Típicamente, App Builder ordenará una lista en orden ascendente del control con el Orden más alto, es decir, el valor numérico más bajo. En el ejemplo a continuación, el control Cliente tiene el Orden más alto (primer captura de pantalla), por lo tanto, la UI (segunda captura de pantalla) utiliza eso para listar las entradas en la tabla.

Desde la UI, los usuarios finales pueden hacer clic en el título de cualquier columna para reordenar la lista según la columna en la que hicieron clic. Hacer clic en el título nuevamente revierte la dirección de ordenación.

Los desarrolladores pueden anular o personalizar el comportamiento predeterminado. Para cambiar la columna de ordenación predeterminada, asigna otro control con el orden más alto. Para revertir la dirección de ordenación predeterminada, sigue estos pasos:

• Para realizar el cambio desde App Workbench > Páginas:

  1. Localiza y abre la pantalla de edición de la página con el panel que deseas reordenar.

  2. En Diseño del panel de página, localiza el panel que contiene los elementos que deseas reordenar y haz clic en Controles.

  3. Encuentra el control con el orden más alto y haz clic en su icono .

  4. Ve a la pestaña Posición y ancho y en el campo Dirección de ordenación, haz clic en ASC para orden ascendente o DESC para orden descendente.

• Para realizar el cambio desde la vista previa de la aplicación:

  1. Abre la página con los paneles que deseas reordenar.

  2. Abre el cajón de acciones y selecciona el Diseñador en Vivo.

  3. Selecciona el control que se utiliza como la columna de orden predeterminada y sus detalles aparecerán en el diseñador. Haz clic en la pestaña Posición y Ancho y en el campo Dirección de Orden, haz clic en ASC para orden ascendente o DESC para orden descendente.

Ancho

Ancho es un recurso que permite a los desarrolladores determinar cuán grande aparecerá un control dado en la interfaz de usuario de la aplicación. El campo Ancho permite ingresar un valor numérico. Sin embargo, estos valores son tratados por App Builder como relativos, no absolutos. Por ejemplo, si un control tiene un Ancho de 10 y otro tiene 20, el segundo siempre será el doble de ancho que el primero, pero el tamaño específico variará según el dispositivo y el espacio de pantalla disponible. App Builder calcula el total de todos los números en la columna de ancho y divide el espacio de pantalla en consecuencia.

1. Navega a la vista previa de la página que deseas configurar.

2. Abre el Cajón de Acciones y selecciona Diseñar esta página.

3. Selecciona el panel con los controles que deseas ajustar. Sus detalles se mostrarán en el Cajón de Acciones.

4. Localiza la columna Ancho en la sección Controles.

   Ingresa valores numéricos:

   • Asigna números más altos a las columnas que necesitan más espacio.

   • Asigna números más bajos a las columnas que necesitan menos espacio (por ejemplo, números de identificación o abreviaturas de estado).

5. Guarda y actualiza el navegador para ver los cambios en la interfaz de usuario.

Revisión y conclusión

En esta lección, hemos aprendido sobre varios tipos diferentes de controles. Hemos trabajado con controles de lista, archivo, HTML, crear, actualizar, eliminar y de moneda. También creamos relaciones entre tablas. Continuaremos explorando las características de App Builder para mejorar nuestra aplicación en las próximas lecciones. Continúa con Lección 6: Vinculación.