AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV Mobile 2024!
Ayuda / Tutorial WINDEV Mobile / Tutorial - Crear una aplicación Android/iOS
  • Lección 1 - Crear un proyecto Android/iOS
  • Proyecto multiplataforma
  • Crear un proyecto
  • Crear una ventana: mostrar un mensaje
  • ¿Cómo crear la ventana?
  • Mostrar un mensaje
  • En resumen

Crear una aplicación Android/iOS

Lección 1 - Crear un proyecto Android/iOS
Abordaremos los siguientes temas:
  • Crear un proyecto Android/iOS.
  • Crear una ventana.
Durée de la leçon 1 h
Proyecto multiplataforma
Para empezar a desarrollar con WINDEV Mobile, vamos a crear nuestro primer proyecto. Será un proyecto multiplataforma destinado a Android e iOS. Este proyecto solo contendrá una ventana para mostrar un mensaje.
Las plataformas se diferenciarán solo cuando se genere e implemente la aplicación.
Veremos cómo implementar una aplicación en los siguientes tutoriales:
Crear un proyecto
Para comenzar a desarrollar con WINDEV Mobile, necesitamos crear un proyecto. Crearemos nuestro primer proyecto para Android e iOS.
Advertencia
Este proyecto se utilizará en las diferentes lecciones de este tutorial.
Para crear un proyecto, basta con seguir las diferentes etapas del asistente de creación de proyectos:
  1. Inicie WINDEV Mobile si es necesario.
  2. Vaya a la página de inicio de WINDEV Mobile (Ctrl + <).
  3. Haga clic en "Crear un proyecto" (ícono ) y seleccione "Aplicación Android o iOS".
    Página de inicio
  4. El asistente de creación de proyectos se abre.
    La información especificada en el asistente se podrá modificar más adelante.
  5. La primera etapa del asistente permite definir la plataforma de ejecución del proyecto:
    Plataforma de ejecución
    Crearemos una aplicación multiplataforma. Seleccione "Multiplataforma Android y iOS" y pase a la etapa siguiente.
  6. El asistente propone crear un proyecto en blanco o basado en un ejemplo. Seleccione "Crear un proyecto en blanco" y vaya a la etapa siguiente.
  7. El asistente le pide que elija el tipo de dispositivos a los que va dirigido el proyecto:
    Selección de dispositivos

    Si la aplicación se ejecutará en diferentes tipos de dispositivos Android y/o iOS (por ejemplo, teléfonos de diferentes tamaños o resoluciones), se recomienda utilizar una de las siguientes opciones:
    • "Generar una aplicación para teléfonos y tabletas",
    • "Generar una aplicación para teléfonos".
    En este caso, WINDEV Mobile propone la resolución más pequeña para crear las ventanas de la aplicación. El uso de anclajes permitirá que la aplicación funcione en todos los dispositivos.
  8. En este ejemplo, vamos a generar una aplicación para teléfonos. Seleccione "Generar una aplicación para teléfonos" y pase a la siguiente etapa.
  9. De forma predeterminada, WINDEV Mobile crea el proyecto en ".\My projects\My_iOS_Android_Project". Puede conservar la ubicación o cambiarla haciendo clic en el botón [...].
    Asistente de creación de proyectos
  10. Las etapas del asistente se muestran a la izquierda. Puede hacer clic en la etapa que desee. Dado que las demás etapas de la "Descripción" no son estrictamente necesarias, puede hacer clic directamente en "Normas".
  11. En esta etapa, puede elegir el estilo de código. No cambie las opciones predeterminadas. Pase a la etapa siguiente.
  12. A continuación, el asistente le permite elegir el tema gráfico. Seleccione "Phoenix".
    Selección del tema gráfico

    El tema gráfico se define a partir de plantillas. Las plantillas permiten crear rápidamente interfaces excepcionales. Una plantilla define el estilo de la ventana así como el estilo de todos los controles de la ventana. Así, la interfaz será coherente y mantendrá un aspecto homogéneo.
  13. Las otras etapas del asistente no son importantes para nuestro primer proyecto. Haga clic en "Finalizar" directamente.
Las siguientes acciones se realizan automáticamente:
  • El proyecto se crea automáticamente.
  • También se crean dos configuraciones de proyecto:
    • una configuración "Aplicación iOS", que se selecciona automáticamente.
    • una configuración "Aplicación Android".
    Más adelante, en este tutorial, examinaremos con más detalle estas configuraciones de proyecto.
  • La ventana de creación de nuevos elementos se abre. Esta ventana permite crear todos los elementos que pueden asociarse a un proyecto. No cierre esta ventana, la utilizaremos para crear la primera ventana de la aplicación.
Crear una ventana: mostrar un mensaje
La primera ventana permite al usuario mostrar un mensaje de bienvenida con el botón "Display".

¿Cómo crear la ventana?

Para crear la ventana, utilizaremos la ventana de creación de nuevos elementos:
  1. En la ventana "Nuevo", haga clic en "Ventana" y, a continuación, en "Ventana". El asistente de creación de ventanas se abre.
  2. En la lista de ventanas, seleccione "En blanco". Dado que la configuración predeterminada es "iOS", el asistente le pedirá que cree una ventana para iPhone. El nombre de la plantilla utilizada aparece en la parte inferior derecha del asistente.
  3. Valide.
La ventana se crea automáticamente en el editor. La ventana para guardar el elemento se abre. Esta ventana permite especificar:
  • el título del elemento. El título aparecerá en el Action Bar de la ventana.
  • el nombre del elemento (nombre de la ventana en este caso). Este nombre se utilizará en el código.
  • la ubicación del elemento. Esta ubicación corresponde al directorio en el que se guardará el elemento (de forma predeterminada, el directorio del proyecto)
En este ejemplo:
  1. Introduzca el título del elemento: "Welcome". El nombre del elemento se completa automáticamente: "WIN_Welcome".
    Guardar un elemento
  2. Valide.
    Información clave:
    El nombre de la ventana (que se utilizará en el código) se crea automáticamente a partir del título del elemento. Si lo desea, puede escribir un nombre diferente al título.
La ventana se muestra en el editor de ventanas. Esta ventana está compuesta por varias áreas:
  1. La barra del sistema, que muestra la hora.
  2. El Action Bar. Los Action Bar reemplazan a la barra de título de una ventana y muestran diferentes tipos de información: el ícono de la aplicación, el título de la ventana, algunas opciones de menú y el menú desplegable de la ventana.
  3. El área de contenido de la ventana, que contendrá los diferentes controles de la aplicación.

Mostrar un mensaje

Ya creamos la primera ventana. Ahora crearemos un control Botón para mostrar un mensaje.

Para crear el control Botón "Display":
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón. El control aparece en modo de creación bajo el cursor.
  2. Mueva el ratón a la ubicación en la que se va a crear el control (por ejemplo, en la parte superior de la ventana). Para soltar el control en la ventana, simplemente haga clic en la ventana. El control aparece con un recuadro y controladores de tamaño para indicar que está seleccionado.

    ¿Cómo seleccionar un control?
    Para seleccionar un control, solo tiene que hacer clic sobre él. Aparecerán controladores de selección alrededor del control. Si el control ya está seleccionado, puede volver a hacer clic en él para editar el título.
Vamos a cambiar las características de este control:
  1. Haga clic derecho en el control creado previamente. El menú contextual del control se abre. Seleccione "Descripción" en este menú contextual. La ventana de descripción del control Botón se abre.
  2. Defina la siguiente información del control:
    Descripción del control Botón
    • El nombre del control: "BTN_Display".
    • El título del control: "Display".
  3. Valide la ventana de descripción del control (botón "OK"). El nuevo texto del control se muestra en el editor de ventanas.
Para mejorar la UI de nuestra primera ventana, vamos a centrar el control Botón en la ventana:
  1. Haga clic en el control Botón para seleccionarlo.
  2. En la pestaña "Alineación", en el grupo "Centrar y distribuir", haga clic en "Centrar en el padre (Horz.)".
  3. El resultado aparece inmediatamente.
Si no está seguro de qué alineación elegir, pase el cursor por encima de las opciones de la pestaña "Alineación". Al pasar el cursor por encima de una opción, los controles seleccionados en la ventana se posicionan y/o cambian de tamaño automáticamente según la opción por la que se pasa el cursor.
Para aplicar la alineación, haga clic en la opción deseada.
Si no desea aplicar la alineación, simplemente salga de las opciones de alineación: los controles vuelven a su posición inicial.

En esta lección, mostraremos un mensaje en un cuadro de diálogo cuando se haga clic en el botón. Para ello, utilizaremos la función WLanguage Info.
  1. Seleccione el control (cuando se selecciona el control, aparecen controladores de tamaño a su alrededor).
  2. Haga clic derecho para abrir el menú contextual del control.
  3. Seleccione "Código". Esta opción abre el editor de código de WINDEV Mobile, en el que se pueden introducir todas las instrucciones WLanguage.
    El editor de código permite escribir todas las instrucciones WLanguage en eventos asociados a los controles.
  4. Introduzca el siguiente código WLanguage en el evento "Clic" de BTN_Display":
    Info("Hello")
    La función Info muestra el mensaje pasado como parámetro.

Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido o pulsando Ctrl + S.
Cierre el editor de código (haga clic en la "X" en la esquina superior derecha del editor de código). El editor de ventanas aparece de nuevo.
En resumen
En esta lección vimos cómo crear un proyecto, una ventana y un control: los principales elementos de una aplicación.
En la siguiente lección, probaremos la ventana.
Proyecto completado:
Si desea comprobar el resultado final de los pasos descritos en este tutorial, puede abrir una versión finalizada del proyecto. Este proyecto contiene la ventana que creamos en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Tutorial - My first Android/iOS application", haga doble clic en "My Android/iOS project - Answers".
Tabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 04/12/2023

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