|
|
|
|
- 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ú.
30 min 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 - Vaya a la página de inicio de WEBDEV (Ctrl +<).
- En la página de inicio, haga clic en "Tutorial", luego en "Tutorial - WEBDEV layouts", haga doble clic en "Layouts - Exercise".
- Abra la página PAGE_NavigationBar.
El control Barra de navegación es el control ubicado en la parte superior de la página PAGE_NavigationBar, que contiene el menú.
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: - En la pestaña " Página ", en el grupo " Layouts ", despliegue " Layouts " y seleccione "Agregar un layout".
- En la ventana que aparece, se muestra un layout adaptado a teléfonos y tabletas. Valide la ventana.
- 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.
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. - Si es necesario, seleccione el control Barra de navegación en el layout Móvil.
- Abra la ventana de descripción del control Barra de navegación (Alt + Entrar).
- En la pestaña "UI", en "Modo de visualización", haga clic en para disociar el modo de visualización por layout.
- En la ventana que aparece, marque la opción "Disociar valor por layout" y, a continuación, en "Móvil", seleccione "Compacto".Confirme los cambios.
- Valide la ventana de descripción del control.
- 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: - Haga clic en el control Barra de navegación para seleccionarlo: el área central está sombreada.
- Haga clic en el área sombreada del centro. La ventana emergente aparece en modo de edición.
El contorno amarillo indica que el control está en modo de edición.
- 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 para disociar la orientación del menú.
- En la ventana que aparece:
- Seleccione la opción "Disociar valor por layout".
- Para el layout Móvil, seleccione "Vertical para móviles".
- Valide.
- Confirme los cambios y cierre la ventana de descripción.
- 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. - Seleccione la barra de navegación.
Utilice los cuadrados rojos para cambiar el tamaño de las áreas del control Barra de navegación. - 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 en los botones de acceso rápido). - La página se muestra en el navegador.
- Redimensione el navegador: el layout Móvil se muestra en el navegador.
- Cierre el navegador.
Ahora, podemos probar el sitio en un teléfono o tableta: - Despliegue la opción en el área de acceso rápido y seleccione "Probar desde un teléfono (acceso mediante un código QR)".
- Una ventana aparece con un código QR que se puede escanear desde el teléfono.
- Una vez escaneado el código QR, el sitio se muestra en el teléfono.
- El layout "Móvil" aparece automáticamente.
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".
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|