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
  • Elegir una resolución de pantalla en función del dispositivo
  • Orientación de la ventana
  • Ejemplo práctico
  • Gestos táctiles
  • Ejemplo práctico
  • Tipos de controles disponibles
Lección 2.3. Interfaz (UI)
Esta lección abarcará los siguientes temas
  • Elegir una resolución de pantalla en función del dispositivo.
  • Orientación de ventanas.
  • Gestos táctiles.
Duración de la lección

Tiempo estimado: 30 min
Lección anteriorTabla de contenidoSiguiente lección
Presentación
WINDEV Mobile permite crear fácilmente interfaces que se adaptan al dispositivo utilizado:
  • Para Android, las aplicaciones pueden utilizarse tanto en teléfonos como en tabletas.
  • En el caso de iOS, las aplicaciones pueden utilizarse en teléfonos (iPhone), tabletas (iPad) y iPods.
Elegir una resolución de pantalla en función del dispositivo
Al crear un proyecto, debe elegir la resolución de las ventanas. Se pueden presentar varios casos:
  • Tiene un solo dispositivo de destino: en este caso, solo tiene que crear un proyecto iOS o Android específico para el dispositivo de destino. Podrá seleccionar el dispositivo de destino deseado en el asistente de creación del proyecto. El asistente de creación de ventanas propondrá ventanas solo para este dispositivo.
  • Aún no conoce el dispositivo de destino: en este caso, seleccione "Generar una aplicación para teléfonos y tabletas" en el asistente de creación del proyecto. Al crear las ventanas, puede elegir una de las siguientes opciones:
    • desarrollar las ventanas para teléfonos. El contenido se adaptará a las tabletas gracias a los anclajes establecidos en los controles de la ventana (recomendado).
    • utilizar layouts para crear diferentes interfaces en función de la plataforma de ejecución y la resolución.
    • desarrollar 2 conjuntos de ventanas, uno para teléfonos y otro para tabletas.
Orientación de la ventana
En Android o iOS, las ventanas pueden tener una de las siguientes orientaciones:
  • Libre: la ventana sigue la orientación del dispositivo,
  • Bloqueada en modo vertical,
  • Bloqueada en modo horizontal.
Esta orientación puede definirse en la pestaña "UI" de la descripción de la ventana (opción "Descripción" en el menú contextual de la ventana).
Descripción de la ventana
En los dos últimos casos, no se requiere ninguna acción específica.
Para una ventana libre, la disposición y el tamaño de los controles deben adaptarse a la orientación. Se recomienda utilizar anclajes para obtener el resultado deseado.

Ejemplo práctico

  • Abra el proyecto "My_iOS_Android_Project" (el proyecto que creamos en la lección 2.1):
    1. Vaya a la página de inicio de WINDEV (Ctrl + <).
    2. En la página de inicio, haga clic en "Abrir un proyecto", luego en "Proyectos recientes", haga doble clic en "My_iOS_Android_Project".

      Corregido

      Hay un proyecto corregido disponible. Este proyecto le permite continuar con la lección. Para abrir el proyecto corregido, vaya a la página de inicio y haga clic en "Tutorial", luego en "Part 2 - Lesson 2.1 - My first Android/iOS application", haga doble clic en "My Android/iOS project (Answers)".
En nuestro ejemplo, el proyecto se creó para un teléfono y se probó en modo vertical en el simulador.
Ahora vamos a probarlo en modo horizontal en el simulador.
  • Inicie la prueba del proyecto en modo simulador:
    1. Seleccione la configuración Android o iOS (las imágenes de esta lección se tomaron en la configuración Android).
    2. En la sección de botones de acceso rápido, despliegue "GO" y seleccione la opción "Prueba en modo simulador Depurar en simulador XXX".
      Prueba en modo simulador

      Nota

      De forma predeterminada, la prueba del proyecto en un dispositivo móvil está disponible en los botones de acceso rápido. Después de seleccionar la opción "Depurar en simulador Depurar en simulador", el ícono correspondiente (Depurar en simulador) se propondrá automáticamente en los botones de acceso rápido.
    3. Valide la ventana que se abre.
    4. La ventana se muestra en modo vertical.
    5. El simulador muestra un menú con íconos: Menú del simulador.
    6. Cambie la orientación de la ventana con la opción "Rotación" (Cambiar orientación de la ventana).
    7. La orientación de la ventana cambia en la pantalla. En nuestro ejemplo, la ubicación del botón no cambia: no se adapta a la orientación de la pantalla.
      Ventana en modo vertical
      Ventana en modo horizontal
  • Vamos a modificar la ventana para centrar el botón "Show", y que permanezca centrado independientemente de la orientación del dispositivo.
  • Detenga la prueba y vuelva al editor.
  • Para centrar el control Botón en la ventana:
    1. Seleccione el control (haga clic en el control Botón).
    2. En la pestaña "Alineación", en el grupo "Centrar y distribuir", haga clic en "Centrar en el padre (Horz.)".
  • Para que el control Botón permanezca centrado en la ventana, vamos a definir un anclaje:
    1. Seleccione el control.
    2. Haga clic derecho para abrir el menú contextual.
    3. Seleccione la opción "Anclaje": la ventana de selección de anclajes se abre:
      Anclajes
    4. Seleccione "Centrado horizontalmente" y valide (botón "OK").

      Nota

      En la ventana que se muestra en el editor, verá las pequeñas flechas rojas en el control. Estas flechas indican que el control está anclado.
  • Pruebe el proyecto en el simulador (haga clic en Probar proyecto en los botones de acceso rápido):
    • El botón está centrado en modo vertical.
    • Cambie la orientación del simulador.
    • El botón permanece centrado en modo horizontal.
Gestos táctiles
Uno de los aspectos importantes de la interfaz de una aplicación móvil es el manejo de gestos táctiles.
La tecnología "multitáctil" permite a los usuarios interactuar con un dispositivo a través de múltiples puntos táctiles.
La manipulación de imágenes es uno de los usos más comunes de la tecnología multitáctil. Dado que los dispositivos móviles suelen tener pantallas más pequeñas, a veces es necesario hacer zoom y/o moverse en una imagen.
Los gestos Multi-Touch le permiten acercar una imagen separando dos dedos, por ejemplo.
Para utilizar los gestos "Multi-Touch", WINDEV Mobile incluye:
  • Opciones específicas disponibles en el control Imagen.
  • Funciones WLanguage específicas.
  • Eventos WLanguage específicos opcionales.
Para obtener más información, consulte Tecnología multitáctil.

Ejemplo práctico

  • Abra el proyecto "My_iOS_Android_Project" (el proyecto que creamos en la lección 2.1):
    1. Vaya a la página de inicio de WINDEV (Ctrl + <).
    2. En la página de inicio, haga clic en "Abrir un proyecto", luego en "Proyectos recientes", haga doble clic en "My_iOS_Android_Project".

      Corregido

      Hay un proyecto corregido disponible. Este proyecto le permite continuar con la lección. Para abrir el proyecto corregido, vaya a la página de inicio y haga clic en "Tutorial", luego en "Part 2 - Lesson 2.1 - My first Android/iOS application", haga doble clic en "My Android/iOS project (Answers)".
  • En la ventana "WIN_Welcome", cree un control Imagen:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Imagen".
    2. El control Imagen aparece en modo de creación bajo el cursor.
    3. Desplace el cursor hacia la posición en la que desea crear el control. Para soltar el control en la ventana, haga clic de nuevo.
    4. Haga doble clic en el control Imagen: la ventana de descripción del control se abre.
    5. En la pestaña "General", seleccione una imagen del disco mediante la opción "Imagen" (haga clic en el botón Menú contextual de la imagen, opción "Examinar").
    6. Si la imagen se encuentra en un directorio distinto al del proyecto, WINDEV Mobile propone copiar el archivo de imagen en el directorio del proyecto. Acepte haciendo clic en "Copiar archivo en el directorio sugerido".
    7. Vaya a la pestaña "Detalles": los gestos Multi-Touch disponibles se muestran en esta pestaña:
      Descripción del control Imagen
    8. Seleccione la opción "Desplazamiento y zoom automáticos".
    9. Valide la ventana de descripción del control.
    10. Guarde la ventana (haga clic en Guardar elemento en los botones de acceso rápido).

      Nota

      Los gestos Multi-Touch no se pueden probar en el simulador. Para probar esta funcionalidad, la aplicación debe probarse (o implementarse) en el dispositivo móvil.
    11. Cierre el proyecto.
Tipos de controles disponibles
WINDEV Mobile ofrece varios controles. Estos controles permiten mostrar o introducir datos. Algunos controles están diseñados específicamente para la interfaz de un dispositivo móvil.
Para desarrollar aplicaciones, puede utilizar controles estándar (controles Campo de entrada, Imagen, Botón de opción y Casilla de verificación, entre otros), pero también controles más específicos, como por ejemplo:
  • el control Zona multilínea para crear interfaces (UI) similares a las ventanas nativas de Android o iOS,
  • el control Mapa para ver una ubicación en un mapa o un itinerario,
  • el control Publicidad (solo en Android) para mostrar un banner publicitario,
  • el menú en forma de "Action Bar".
Veremos algunos de estos controles en la lección "Desarrollo de una aplicación para Android e iOS".
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 27
Comentarios
Haga clic en [Agregar] para publicar un comentario