Tutorial: Menú Horizontal

En este tutorial, se creará un menú de tipo horizontal. Servirá para agrupar las llamadas de las aplicaciones desarrolladas.

Creando una aplicación de menú

1. Cree una nueva aplicación de tipo Menú

Crear los Items del menú

2. Para crear los items que formarán parte del menú, en el menú de la aplicación haga clic en la opción “Items del menú“.

En el menú que vamos a crear, hay una jerarquía, por lo que tendremos items y subitems. Inicialmente insertaremos los items del menú principal.

3. Haga clic en el icono “+” para agregar un nuevo Item de Menú e ingrese Formulario en la propiedad Texto.

4. Repita el paso anterior para crear los items de Consultas e Informes.

5. Agregaremos un item con la funcionalidad para cerrar la aplicación. Aún en la misma pantalla, agregue un item más en la aplicación, ingrese “Salir” en la propiedad Texto y en la propiedad Ambito seleccione Dejar.

Crear subitems en el menú

6. Para crear subitems es necesario crear un nuevo item y luego hacer clic en el botón “>” para insertar el nuevo item después del item anterior, como se muestra en el ejemplo siguiente.

7. Crearemos un subitem en el formulario del artículo. En este subitem, se informará el enlace, la pista y el icono. Vea la imagen a continuación.

Los íconos se pueden insertar cargando una imagen desde su computadora, a través de nuestras bibliotecas de imágenes o usando la biblioteca de items Font Awesome.

8. Con cada inclusión de subitems, los artículos tendrán diferentes niveles.

9. Una vez creado el menú, es posible cambiar la posición así como los niveles usando los botones de dirección.

10. Para completar la creación del menú, hay una tabla que informa qué items y subitems se utilizaron para crear este ejemplo. El procedimiento será el mismo que se vio anteriormente.

Item (Label)Aplicación
Formulario
– Maestro/Detalleform38
– Múltiples Registrosform40
– Grid editableform39
– Validación de clave únicaform44
– Pedidosform53
Grid
– Desglose – Clientes x Estadosgrid05
– Resumen de la Matrizgrid29
– Submenu
– – Desglose simplegrid14
– – Clientesgrid20
Reportes
– Nota Fiscalpdf03
– Tarjeta de visitapdf02

Habilitación de la barra de herramientas con atajos de menú

11. Accede a la opción “Barra de herramientas” en el menú lateral de Scriptcase.

12. Dentro de la opción de la barra de herramientas, agregue los items que desea mostrar como un “acceso directo” debajo del menú horizontal.

La configuración de la barra de herramientas del menú es similar a la configuración del item,

13. Puede utilizar los items en formato de botón, enlace o imagen. En este ejemplo, usaremos la opción “botón”.

También es posible configurar la etiqueta, los iconos (también compatibles con la biblioteca de iconos Font Awesome), la sugerencia, la posición, el objetivo y la clase CSS, donde puede personalizar los colores, el formato y la fuente y otros aspectos del diseño.

14. Después de finalizar la configuración del item y la barra de herramientas, nuestro menú está listo para ver y probar, haga clic en la opción del menú principal de Scriptcase “Ejecutar aplicación”.


Compartir este tutorial

Tutoriales en la misma categoria

Menú con Font-Awesome

Para que los ítems del menú cuenten con iconos de la nueva funcionalidad y diseño Font-Aweso...

Menú Dinámico

Este ejemplo muestra cómo montar dinámicamente los elementos y sub-elementos de una aplicación d...

Tutorial: Menú utilizando Aplicación Inicial

En este tutorial veremos cómo configurar el menú para que esté abierto con una aplicación carga...

Menu Breadcrumb (Ruta de Navegación)

En este tutorial veremos cómo configurar el menú para que muestre una ruta de navegación con los...

Comentar este post