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 de negocio y objetos de lista. Para recapitular brevemente, aprendimos que los objetos de negocio 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 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. Nota que la página emergente de Producto ahora tiene un nuevo campo 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 hecho arriba para agregar una lista de Categoría a la página de Producto. Nuestra aplicación Northwinds necesitará ambas listas.

Seleccionable por el usuario

El tipo de uso Seleccionable por el usuario, introducido en Lección 2, determina qué valores están disponibles para selección en los controles de lista. Cuando mejoraste las tablas en la Lección 2, la función Audit lite creó automáticamente la columna IsActive con este tipo de uso. Esto significa que los controles de lista en tu aplicación solo mostrarán registros donde IsActive sea verdadero, filtrando las entradas inactivas de las opciones que un usuario ve al editar o crear registros.

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 se ha añadido la columna RegionID.

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 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 asegurarse de que la nueva columna también se añada a la regla que construimos basada en esta tabla.

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

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

Ahora, podemos añadir 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 Diseño del Panel de Página, haz clic en Controles.

3. Haz clic en + Control.

4. En el menú 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 App Builder termine de crear el nuevo control, serás devuelto a la lista de controles. Modifica 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 los detalles sobre la empleada llamada Laura Callahan, notarás que el campo de Notas está mostrando texto HTML en bruto. 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 el popup 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 de Notas para resaltarlo. Al hacerlo, el diseñador en vivo mostrará opciones de edición para ese campo.

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

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

   

Crear, Actualizar y Eliminar controles

Los paneles en App Builder 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 están ocupando espacio en las pantallas de tu aplicación. Aprendamos cómo hacer cambios en estas funciones.

Editar las opciones de crear y actualizar

App Builder 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 modificar el funcionamiento de 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 Live Designer.

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

4. En la pestaña de Update Methods, cambia tanto las opciones de Edit Method como de Insert Method a Link To Page. 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 Customer que ya hemos creado:

   

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

Tiempo de práctica: Edita las opciones de creación y actualización para otras páginas

Repite el proceso que hemos realizado arriba en la página de Customers para las páginas de Employees y Products, utilizando sus respectivas páginas emergentes. Las páginas de Suppliers y Shippers fueron creadas por el acelerador en Lesson 4, que ya configura el Edit Method y el Insert Method a Link To Page.

Deshabilitar eliminar y crear en una página

Vamos a deshabilitar las funciones de eliminar y crear en la página de Parameter, que creaste al final de Lesson 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 Parameter y haz clic en View Page 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 Live Designer.

3. Haz clic en el panel de Parámetro para que el diseñador en vivo muestre 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 el popup. Haz clic en No para asegurarte de que el botón no se muestre.

   

6. Cuando App Builder guarda los cambios, ten en cuenta 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 simples, pero se supone que son cifras monetarias. Editaremos ese control para que formatee los valores como esperamos. Hay varias formas de hacerlo, pero lo haremos desde la capa de negocio.

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

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

3. En la sección de Cast Options, utiliza el campo de 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 Productos. Los precios deberían mostrarse correctamente ahora.

Configuraciones adicionales del control

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

Prioridad de la cuadrícula

La prioridad de la cuadrícula 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 Clientes.

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 de Page Panel Layout, haz clic en Controls en el panel de Customers. Aparecerá la lista de controles en el panel, y la columna de 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 de Position & Width y localiza el campo de 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 Retrato puede mostrar tres campos, mientras que un teléfono en modo Paisaje o una tableta pueden mostrar cinco campos. Por lo tanto, decide cuáles son los tres campos más importantes y asígnales la prioridad 1. A continuación, selecciona otros dos campos y asígnales la prioridad 2.

Se recomienda como buena práctica 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 de Cliente tiene el Orden más alto (primera captura de pantalla), por lo tanto, la UI (segunda captura de pantalla) utiliza eso para listar las entradas en la tabla.

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

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

• Para realizar el cambio desde App Workbench > Pages:

  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 la orden más alta y haz clic en su icono .

  4. Ve a la pestaña Posición y Ancho y en el campo Dirección de Ordenamiento, 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 ordenamiento 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 Ordenamiento, haz clic en ASC para orden ascendente o DESC para orden descendente.

También puedes aplicar ordenamiento por múltiples columnas estableciendo un Índice de Ordenamiento en dos o más controles. App Builder ordena primero por el control con el valor de índice de ordenamiento más bajo, luego por el siguiente más bajo, y así sucesivamente. Usar valores de índice en incrementos de 10 (por ejemplo, 10, 20, 30) es una buena práctica porque deja espacio para insertar criterios de ordenamiento adicionales más tarde sin tener que renumerar los controles existentes.

Para demostrar, configuremos la página de Clientes para ordenar primero por Estado, luego te permitirá practicar añadiendo una segunda columna de ordenamiento.

1. Ve a App Workbench > Pages, abre la pantalla de edición de la página de Clientes y haz clic en Controles en el panel de Clientes.

2. Encuentra el control de Estado y haz clic en su icono .

3. Ve a la pestaña de Posición y Ancho.

4. En el campo de Índice de Ordenación, ingresa 10.

5. En el campo de Dirección de Ordenación, haz clic en ASC.

6. Haz clic en Guardar.

Cuando visites la vista previa de la página de Clientes, la lista ahora estará ordenada alfabéticamente por estado en orden ascendente.

Tiempo de práctica: Agregar una segunda columna de ordenación

Siguiendo los mismos pasos, configura el control de Ciudad para que actúe como la segunda ordenación:

• Establece su Índice de Ordenación en 20.

• Establece su Dirección de Ordenación en DESC.

Después de guardar, la lista de Clientes se ordenará principalmente por estado (ascendente) y, dentro de cada estado, por ciudad en orden descendente.

Ancho

Ancho es un recurso que permite a los desarrolladores determinar qué tan grande aparecerá un control dado en la interfaz de usuario de la aplicación. El campo de 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 Panel de Acción y selecciona Diseñar esta página.

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

4. Localiza la columna de Ancho en la sección de 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 ID 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, 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.