PC SOFT

AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV Mobile 27!
  • Esta lección abarcará los siguientes temas...
  • Presentación
  • Uso de anclajes
  • Probar la aplicación
Lección 4.3. Definir la orientación de las ventanas utilizando layouts
Esta lección abarcará los siguientes temas...
  • Ventaja de los anclajes.
  • Crear un layout.
  • Utilizar un layout.
Duración de la lección

Tiempo estimado: 15 min
Lección anteriorTabla de contenidoSiguiente lección
Presentación
En la mayoría de los casos, una aplicación móvil puede utilizarse en modo vertical y horizontal.
La interfaz de una ventana en modo vertical puede modificarse para ser utilizada en modo horizontal.
WINDEV Mobile gestiona los cambios de orientación del dispositivo mediante anclajes.
La mayoría de las veces, solo es necesario definir los anclajes para adaptar la pantalla a las diferentes orientaciones.
Sin embargo, si la interfaz debe cambiar según la orientación (por ejemplo, cambiar la posición de los controles en modo vertical y horizontal), los anclajes no son suficientes.
Para adaptar la interfaz al modo vertical y horizontal, WINDEV Mobile le permite utilizar layouts.

  • Para seguir esta lección, abra el proyecto "WM Product Management" en el que trabajó en la lección anterior.
    1. Vaya a la página de inicio de WINDEV Mobile (Ctrl + <).
    2. En la página de inicio, haga clic en "Tutorial", luego en "Part 4 - Development of an Android/iOS application", haga doble clic en "Android/iOS product management (Exercise)".
    3. Un cuadro de diálogo le pide que abra el proyecto en el que trabajó en la lección anterior. Puede abrir la copia local o el proyecto original. Seleccione "Abrir la copia local".

      Corregido

      Hay un proyecto corregido disponible. Este proyecto contiene las ventanas que crearemos en esta lección. Para abrir el proyecto corregido, vaya a la página de inicio y haga clic en "Tutorial", luego en "Part 4 - Development of an Android/iOS application", haga doble clic en "Android/iOS product management (Answers)".
Uso de anclajes
  • Ya hemos definidos los anclajes en la ventana "WIN_Product_form". En modo de prueba, las interfaces se muestran de la siguiente manera:
    Modo Vertical
    Modo Horizontal
Todos los controles en modo vertical también se muestran en modo horizontal. Sin embargo, se desperdicia mucho espacio y hay que desplazar la ventana para acceder a todos los controles.
Vamos a mejorar la visualización en modo horizontal mediante layouts.

Nota

Los layouts se utilizan para definir varias vistas de una ventana en el mismo proyecto sin tener que duplicarla.
Esto permite definir:
  • una vista específica para el modo vertical,
  • una vista específica para el modo horizontal,
  • una vista específica del teléfono,
  • una vista específica de la tableta,
  • ...


  • Para crear un nuevo layout:
    1. Abra la ventana "WIN_Product_form".
    2. En la pestaña "Ventana", en el grupo "Layouts", despliegue "Layouts" y seleccione "Agregar layouts".
      Agregar layouts
    3. El asistente para crear layouts se abre.
    4. Pase a la etapa siguiente del asistente.
    5. El asistente le pide que seleccione una opción para gestionar las diferencias entre teléfonos y tabletas. En este ejemplo no utilizaremos tabletas. Conserve la opción "Esta ventana solo se mostrará en un teléfono".
      Diferencias teléfono/tableta
    6. Pase a la etapa siguiente del asistente.
    7. El asistente le pide que seleccione una opción para gestionar la orientación Vertical/Horizontal de la aplicación. Eso es lo que vamos a hacer en este ejemplo: seleccione la opción "Crear layouts".
      Diferencias Vertical/Horitzontal
    8. Pase a la etapa siguiente del asistente.
    9. El asistente le permite elegir un layout por cada plataforma utilizada. En este ejemplo, utilizaremos la misma interfaz para Android y iOS. Seleccione la opción "No crear layouts específicos por cada sistema operativo (OS)".
      Sistema operativo
    10. Valide el asistente.
  • En nuestro ejemplo se crearon dos layouts. Estos layouts se muestran como miniaturas a la derecha de la ventana "WIN_Product_form".
  • Vamos a modificar el layout del modo horizontal:
    1. Haga doble clic en la miniatura del layout "Horizontal - MultiOS Teléfono": la ventana que corresponde a este layout se muestra en el centro del editor.
    2. La opción Disociación automática (en la esquina superior derecha de la ventana principal, en la barra de título) indica si el modo "Disociación automática" está activado. Si este modo está activado, los cambios realizados en una de las ventanas del layout no se aplicarán a las demás ventanas. Conserve el modo "Disociación automática" activado..
    3. Vamos a cambiar la posición de los controles en el layout:
      • Seleccione el control Imagen que contiene la foto del producto, así como los dos controles Botón y desplácelos a la izquierda de la ventana. Ubique los dos controles Botón debajo del control Imagen.
        Desplazamiento de controles
      • Seleccione los controles "Caption" y "Description" y muévalos a la derecha del control Imagen. Cambie el tamaño de los controles si es necesario.
        Desplazamiento de controles
      • Seleccione los controles "Price" y "Quantity" y ubíquelos a la izquierda, debajo del control Imagen.
        Desplazamiento de controles
      • Seleccione el control "Bar code" y el control Botón asociado y ubíquelos debajo de la descripción.
        Desplazamiento de controles
      • Seleccione:
        • el control "Reference" y desplácelo a la derecha del control Capion.
        • el control "Reorder" y desplácelo a la derecha de "Quantity".
      • Reduzca la altura de los controles si es necesario.
        Desplazamiento de controles
  • Seleccione el control Imagen. El control Imagen y los dos controles Botón tienen una línea roja a su alrededor. Hay conflictos de anclaje con el control Caption.
  • Vamos a cambiar los anclajes de estos controles:
    1. Seleccione el control Imagen y los dos controles Botón.
    2. Abra el menú contextual y seleccione "Layouts .. Disociar anclaje".
      Opción de menú
    3. Defina un nuevo anclaje para los controles:
      • Abra el menú contextual de los controles y seleccione la opción "Anclaje".
      • En la ventana que aparece, seleccione Anclaje.
  • Obtendrá la siguiente interfaz:
    Interfaz final
Probar la aplicación
  • Para probar el proyecto:
    1. Haga clic en Probar proyecto en los botones de acceso rápido.
    2. El proyecto inicia con la ventana de menú.
    3. Haga clic en la lista de productos.
    4. Haga clic en un producto. La ficha del producto aparece en modo vertical.
    5. Cambie la orientación de la ventana haciendo clic en Girar simulador en el menú del simulador.
    6. El layout definido para el modo horizontal se muestra automáticamente:
      Layout en modo horizontal
    7. Cierre la ventana de prueba de la aplicación.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 27
Comentarios
Haga clic en [Agregar] para publicar un comentario