AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WEBDEV 2024!
Ayuda / Tutorial WEBDEV / Tutorial - Layouts WEBDEV
  • Lección 2 - Layouts: Gestión de menús
  • Presentación
  • Ejemplo práctico
  • Crear el layout
  • Configurar el control Barra de navegación
  • Prueba de la página
  • En resumen

Tutorial - Layouts WEBDEV

Lección 2 - Layouts: Gestión de menús
Abordaremos los siguientes temas:
  • Control Barra de navegación con menú "Hamburguesa".
  • Disociar el menú y las opciones de menú.
Durée de la leçon 30 min
Presentación
WEBDEV proporciona un control específico para los layouts: el control Barra de navegación.
El control Barra de navegación permite crear un área de menú que puede adaptarse fácilmente al tamaño del navegador. Esta área puede contener todo tipo de controles.
En esta lección, agregaremos un layout en una página que contiene un control Barra de navegación. Veremos la configuración necesaria para que la barra de navegación se adapte al tamaño del navegador.
Abrir el proyecto de ejemplo
  1. Vaya a la página de inicio de WEBDEV (Ctrl +<).
  2. En la página de inicio, haga clic en "Tutorial", luego en "Tutorial - WEBDEV layouts", haga doble clic en "Layouts - Exercise".
  3. Abra la página PAGE_NavigationBar.
Ejemplo práctico
El control Barra de navegación es el control ubicado en la parte superior de la página PAGE_NavigationBar, que contiene el menú.
Control Barra de navegación
El control Barra de navegación está dividido en 3 secciones:
  • A la izquierda, un botón de menú de hamburguesa.
  • En el medio, el menú del sitio.
  • A la derecha, un cuadro de búsqueda con un ícono de búsqueda.

Crear el layout

Vamos a crear un layout Móvil en la página PAGE_NavigationBar:
  1. En la pestaña " Página ", en el grupo " Layouts ", despliegue " Layouts " y seleccione "Agregar un layout".
  2. En la ventana que aparece, se muestra un layout adaptado a teléfonos y tabletas. Valide la ventana.
  3. En nuestro ejemplo se crearon dos layouts. Estos layouts se muestran como miniaturas, a la derecha de la página "PAGE_NavigationBar". El layout Móvil se selecciona automáticamente y se muestra en el editor.
    Control Barra de navegación
El control Barra de navegación tiene características avanzadas. La disociación automática no está disponible para este control. Se deben configurar algunas opciones específicas para realizar la disociación.

Configurar el control Barra de navegación

Primero, vamos a configurar el control Barra de navegación para que se muestre en los dispositivos móviles.
  1. Si es necesario, seleccione el control Barra de navegación en el layout Móvil.
  2. Abra la ventana de descripción del control Barra de navegación (Alt + Entrar).
  3. En la pestaña "UI", en "Modo de visualización", haga clic en Disociar para disociar el modo de visualización por layout.
    Control Barra de navegación
  4. En la ventana que aparece, marque la opción "Disociar valor por layout" y, a continuación, en "Móvil", seleccione "Compacto".
    Disociación por layout
    Confirme los cambios.
  5. Valide la ventana de descripción del control.
  6. El control Barra de navegación aparece en modo compacto en el layout Móvil.
Ahora, veamos el control Barra de navegación en los diferentes layouts en el editor.
  • Abra el layout "Escritorio": la barra de navegación se muestra completa.
  • Abra el layout "Móvil": la barra de navegación se muestra en modo "Compacto".
Veamos más de cerca el layout Móvil para entender el modo compacto.
En el layout Móvil, el area central del control Barra de navegación está oculta. El menú de "hamburguesa" despliega una ventana emergente con los controles que suelen aparecer en el área central. Para personalizar la ventana emergente, simplemente haga clic en el panel central. A continuación, puede realizar los cambios deseados en la ventana.
Analicemos el contenido del área central:
  1. Haga clic en el control Barra de navegación para seleccionarlo: el área central está sombreada.
    Control Barra de navegación
  2. Haga clic en el área sombreada del centro. La ventana emergente aparece en modo de edición.
    Área central del control Barra de navegación
    El contorno amarillo indica que el control está en modo de edición.
  3. El menú del sitio aparece. Este menú está dispuesto horizontalmente. Para que se muestre verticalmente, es necesario disociar la orientación del menú:
    • Abra la ventana de descripción del menú (Alt + Entrar).
    • En la pestaña "General", haga clic en Disociar para disociar la orientación del menú.
      Área central del control Barra de navegación
    • En la ventana que aparece:
      • Seleccione la opción "Disociar valor por layout".
      • Para el layout Móvil, seleccione "Vertical para móviles".
      • Valide.
  4. Confirme los cambios y cierre la ventana de descripción.
  5. Para salir del modo de edición de la ventana emergente, presione "Esc".
La última modificación consiste en cambiar el tamaño de las diferentes áreas de la barra de navegación para que se muestren todos los elementos.
  1. Seleccione la barra de navegación.
    Utilice los cuadrados rojos para cambiar el tamaño de las áreas del control Barra de navegación.
  2. Cambie el tamaño del área del menú y amplíe el área de búsqueda. Obtendrá el siguiente resultado:
Guarde la página (Ctrl + S).

Prueba de la página

Pruebe la página (haga clic en Probar página en los botones de acceso rápido).
  1. La página se muestra en el navegador.
  2. Redimensione el navegador: el layout Móvil se muestra en el navegador.
  3. Cierre el navegador.
Ahora, podemos probar el sitio en un teléfono o tableta:
  1. Despliegue la opción en el área de acceso rápido y seleccione "Probar desde un teléfono (acceso mediante un código QR)".
  2. Una ventana aparece con un código QR que se puede escanear desde el teléfono.
  3. Una vez escaneado el código QR, el sitio se muestra en el teléfono.
  4. El layout "Móvil" aparece automáticamente.
En resumen
En este tutorial, abordamos varios aspectos de los layouts, y vimos cómo utilizarlos. Los layouts son una solución relativamente sencilla para adaptar sitios WEBDEV a dispositivos móviles.
Proyecto completado:
Si desea comprobar el resultado final de los pasos descritos en este tutorial, puede abrir una versión finalizada del proyecto. En este proyecto, ya se completaron todos los ejercicios presentados en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Tutorial - WEBDEV layouts", haga doble clic en "Layouts - Answers".
Lección anteriorTabla de contenido
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 13/12/2023

Señalar un error o enviar una sugerencia | Ayuda local