PC SOFT

AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV Mobile 26!
Este contenido se ha traducido automáticamente. Haga clic aquí para ver la versión en inglés.
  • Esta lección abarcará los siguientes temas
  • Presentación
  • Configuración necesaria
  • Configuración necesaria para Android
  • Configuración para iOS
  • Primer proyecto
  • Creación del proyecto
  • Primera ventana
  • Presentación
  • Creando la ventana
  • Mostrar un mensaje
Lección 2.1. Mi primer proyecto Android/iOS
Esta lección abarcará los siguientes temas
  • Configuración necesaria.
  • Creación de un proyecto Android/iOS.
  • Primera ventana.
Duration

Tiempo estimado: 1 h
Lección anteriorTabla de contenidoSiguiente lección
Presentación
Para empezar a desarrollar con WINDEV Mobile, simplemente crearemos nuestro primer proyecto. Será un proyecto multiplataforma destinado a Android e iOS. Por lo general, al desarrollar una aplicación para un dispositivo móvil, esta debe funcionar en ambos sistemas operativos.
Con WINDEV Mobile, no es necesario desarrollar dos proyectos diferentes, mantenerlos y hacerlos evolucionar al mismo tiempo. Basta con crear un único proyecto associated con varias plataformas, por ejemplo, Android e iOS: es un proyecto multiplataforma. Las plataformas se diferenciarán sólo cuando se genere y despliegue la aplicación.

Nota

En este tutorial, hemos elegido crear un proyecto multiplataforma. WINDEV Mobile también le permite crear:
  • Un proyecto sólo para Android,
  • Un proyecto sólo para iOS.
La creación de proyectos Android o sólo para iOS es similar a la de Process presentada en esta lección.
Crearemos un proyecto que contenga una ventana que sirva para mostrar un mensaje.
Pero antes de crear nuestro primer proyecto, veamos la configuración necesaria para desarrollar una aplicación Android y/o iOS.
Configuración necesaria

Configuración necesaria para Android

Para desarrollar una aplicación Android, se deben instalar los siguientes elementos en el equipo de desarrollo:
  • El JDK: El JDK (Kit de Desarrollo de Java) distribuido por Oracle se utiliza para compilar los archivos Java generados.
  • El SDK de Google Android: El SDK de Android (Software Development Kit) es un conjunto de archivos y aplicaciones distribuidos por Google que permiten compilar aplicaciones para Android.
    Atención: El SDK de Android incluye secciones correspondientes a las versiones de plataformas de dispositivos (5, 6, 7, ...).
    Se propone la descarga y instalación del SDK de Android si es necesario al generar la aplicación Android desde WINDEV Mobile.
  • Herramienta Gradle: Esta herramienta es necesaria para compilar y generar aplicaciones Android. Gradle puede descargarse e instalarse si es necesario al generar la aplicación Android desde WINDEV Mobile.
Consulte Instalación de herramientas de desarrollo Android para más detalles (direcciones de descarga, etc.).
Le recomendamos iniciar el equipo una vez instalado el JDK y SDK.

Configuración para iOS

Para desarrollar una aplicación WINDEV Mobile para iPhone/iPad, necesita:
  • 1 PC
  • 1 Mac
  • 1 iPhone y/o iPad (opcional)

¿Por qué un PC?
WINDEV Mobile 26 es una aplicación Windows que se ejecuta en Windows Vista, 7, 8, 10.
La aplicación se creará en PC antes de ser compilada en Mac (proyecto, análisis, ventanas, etc.).
No necesita instalar ninguna herramienta de Mac/Apple.

¿Por qué un Mac?
Se necesita un Mac porque el proyecto generado en el PC debe compilarse en un compilador específico para generar aplicaciones iOS. La versión mínima del sistema operativo debe ser MacOs Catalina.
Xcode es el compilador de Mac para generar programas que se ejecutan en iOS (es decir, en iPhone y iPad).
La versión mínima recomendada de Xcode es la versión 11.
Consulte Compilar un proyecto WINDEV Mobile en Xcode para más detalles (direcciones de descarga, etc.).
Primer proyecto

Creación del proyecto

Crearemos nuestro primer proyecto para Android e iOS.

Respuestas

Hay un proyecto corregido disponible. Para abrir este proyecto:
  1. Ir a la página de inicio de WINDEV Mobile (Ctrl + <).
  2. Haga clic en "Tutorial", luego en "Parte 2 - Lección 2.1 - Mi primera aplicación Android/iOS", haga doble clic en "Mi proyecto Android/iOS (Respuestas)".
  • Para crear un proyecto multiplataforma Android / iOS:
    1. Inicio WINDEV Mobile 26.
    2. Vaya a la página de inicio de WINDEV Mobile (Ctrl + <).
    3. En la página de inicio, haga clic en "Crear un proyecto" y luego en "Aplicación Android o iOS".
      Página de inicio
    4. El asistente de creación de proyectos se abre inmediatamente. Las diferentes etapas del asistente le ayudarán a crear el proyecto. La información especificada en el asistente se podrá modificar más adelante.

      Nota

      Consejo: Otro método para crear un proyecto:
      1. Haga clic en Crear un elemento en los botones de acceso rápido del menú de WINDEV Mobile
      2. La ventana para crear nuevos elementos se abre: haga clic en "Proyecto".
    5. La primera etapa del asistente permite definir la plataforma de ejecución del proyecto:
      Plataforma de ejecución
      En nuestro caso, seleccione "Android y iOS cross-platform" y vaya al siguiente paso.
    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. La asistente propone elegir el tipo de dispositivos objetivo del proyecto:
      • Generar una aplicación para teléfonos y tabletas.
      • Generar una aplicación para teléfonos.
      • Generar una aplicación para tabletas.

        Nota

        Si la aplicación está destinada a funcionar en varios 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 (consulte Lección 2.2 Interfaz (UI) y Lección 5.2 Desarrollo de la aplicación) permitirá que la aplicación funcione en todos los dispositivos.
        Seleccionar 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 etapa siguiente.
    9. El asistente le pide que introduzca el nombre, la ubicación y la descripción del proyecto. Llamaremos a nuestro proyecto "Mi_iOS_Android_Proyecto". WINDEV Mobile propone crear este proyecto en "\My Mobile projects\My_iOS_Android_Project". Puede conservar la ubicación o modificarla haciendo clic en el botón [...].
      Asistente de creación de proyectos
    10. Pase a la etapa siguiente.
    11. El asistente propone agregar documentos. Pase a la etapa siguiente.
    12. Esta etapa permite utilizar el Administrador de Código Fuente (SCM). No lo necesitaremos en este ejemplo. Seleccione "No, no utilizar el SCM". Pase a la etapa siguiente.

      Express

      Observación: El Administrador de Código Fuente (SCM) no está disponible en la versión Express.
    13. Esta etapa permite definir el estilo de código. No modifique las opciones sugeridas. Pase a la etapa siguiente.
    14. Este paso permite definir la el tema gráfico de la aplicación. Elegiremos "Material Design Blue 2".
      Selección de libros de estilo
    15. Los otros pasos de la asistente no son importantes para nuestro primer proyecto. Haga clic en "Finalizar" directamente. El proyecto se crea automáticamente.
    16. La ventana para crear nuevos elementos se abre. Esta ventana permite crear los elementos del proyecto.
Primera ventana

Presentación

La primera ventana permite al usuario mostrar un mensaje de bienvenida con el botón "Display".
Esta acción puede parecer demasiado básica, pero le recomendamos crear esta ventana. Le sorprenderá lo intuitivo y fácil que es el editor de WINDEV Mobile. Además, esta ventana le permitirá descubrir conceptos fundamentales para el resto de este tutorial y ver toda la Process para desarrollar una aplicación Android/iOS con WINDEV Mobile.

Creando la ventana

  • Para crear la ventana:
    1. En la ventana para crear un nuevo elemento, haga clic en "Ventana", y luego en "Ventana".

      Nota

      Al crear un nuevo proyecto, la ventana para crear nuevos elementos se abre automáticamente.
      Para abrir la ventana de creación de elementos, basta con hacer clic en Crear un nuevo elemento entre los botones de acceso rápido de WINDEV Mobile:
      Botones de acceso rápido
    2. El asistente de creación de ventanas se abre automáticamente.
    3. En la lista de las ventanas propuestas, seleccione "En blanco". La plantilla utilizada se muestra en la parte inferior derecha del asistente. "Material Design Blue 2", el plantilla seleccionado durante la creación del proyecto es seleccionado por Default.

      Nota

      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.
    4. Validar. La ventana se crea automáticamente en el editor. Aparece la ventana de guardado. Esta ventana permite especificar:
      • el título del elemento. En el caso de una ventana, este título se mostrará en el Action Bar.
      • el nombre del elemento que corresponde al nombre de la ventana. Este nombre se utilizará en programación.
      • la ubicación del elemento. Esta ubicación corresponde al directorio en el que se guarda el archivo físico del elemento. La ventana es un archivo "WDW" que se guarda en el directorio del proyecto.
    5. Especifique el título del elemento: "Welcome". El nombre del elemento se propone automáticamente: "WIN_Welcome".
      Guardar un elemento

      Nota

      Echemos un vistazo al nombre de la ventana propuesta por WINDEV Mobile: el nombre comienza con las letras "WIN_". Este prefijo se agrega automáticamente porque el proyecto utiliza un estilo de código.
      El estilo de código permite definir un prefijo para cada tipo de objeto, lo que le permite identificar rápidamente el elemento:
      • una ventana comienza con "WIN_",
      • un botón comienza con "BTN_",
      • etc.
      Si no desea utilizar este estilo de código, puede desactivarlo: en la pestaña "Proyecto", en el grupo "Otras acciones", despliegue "Estilo de código" y deseleccione la opción "Utilizar estilo de código"
    6. Guarde la ventana haciendo clic en "OK".
    7. La ventana se muestra en el editor de ventanas. Esta ventana se compone de varias áreas:
      • La barra del sistema, que muestra el Time.
      • La Action Bar. Las "Barras de Acciones" sustituyen a la barra de título de una ventana y se utilizan para mostrar múltiples informaciones: la aplicación Icon, el título de la ventana, algunas opciones del menú, el menú desplegable de la ventana.
      • El área de contenido de la ventana, que contendrá los diferentes controles de la aplicación.

Mostrar un mensaje

Vamos a crear 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 la Control en la ventana, simplemente haga clic en la ventana.
    3. Haga clic derecho en el control que acaba de crear. Enseguida aparece el menú contextual del control. Seleccione "description" en este menú contextual. Aparece la ventana de control Botón description.
  • Defina la siguiente información del control:
    description del control Botón
    1. El nombre del control: "BTN_Display".
    2. El título del control: "Display".

Nota

Anteriormente, el nombre y título del control Botón se modificaron en la ventana de descripción del control (también llamada "ventana de 7 pestañas").
El nombre y el título del control también se pueden modificar directamente desde la ventana:
  1. Haga clic en el control para seleccionarlo.
  2. Presione la tecla Enter o Space: el texto puede ser editado.
  3. Introduzca el nuevo título y valide.
  • Valide la ventana de descripción del control (botón "OK"). El nuevo título del control se muestra en el editor de ventanas.
  • Vamos a mostrar un mensaje en una ventana de diálogo (una ventana pequeña propuesta por el sistema). Para ello, usaremos una función WLanguage: Info.

    Nota

    El lenguaje de programación que viene con WINDEV Mobile es el WLanguage. Es un lenguaje de quinta generación con comandos altamente sofisticados.
    1. Seleccione la Control si es necesario.
      Observaciones:
      • Al seleccionar el control, aparecen varios controladores de tamaño.
      • Para seleccionar un control, simplemente haga clic en él.
    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.

      Nota

      El editor de código propone diferentes eventos para cada tipo de control. Estos eventos WLanguage están asociados a los controles.
      Para el control Botón, se muestran dos eventos:
      • "Inicialización": se ejecuta al abrir la ventana.
      • "Clic": se ejecuta cuando el usuario hace clic en el control.
      Observación: Si es necesario, se pueden agregar eventos adicionales.
    4. Escriba la siguiente línea de código WLanguage en el evento "Clic" del control "BTN_Display":
      Info("Hello")
Observación sobre la entrada predictiva: Cuando se teclean los dos primeros caracteres, WINDEV Mobile abre una List con todos los elementos de WLanguage que contienen estos caracteres. El autocompletado es una funcionalidad de gran ayuda. Ayuda a evitar errores al introducir el nombre de un elemento: los errores de sintaxis se reducen significativamente. Simplemente seleccione la palabra deseada y presione la tecla Entrar para validar. Esto le permite enfocarse en el algoritmo.

Nota

Al escribir este código de WLanguage en el editor de código, probablemente notó que los diferentes elementos usan diferentes colores. Esto es conocido como resaltado de sintaxis. El editor de código permite identificar fácilmente los diferentes elementos que se manipulan en el código:
  • las funciones WLanguage se muestran en azul,
  • las cadenas de caracteres (entre comillas) se muestran en color púrpura,
  • los nombres de los controles se muestran en cian.
Los colores se pueden modificar elemento por elemento en las opciones del editor de código (en la pestaña "Inicio", en el grupo "Entorno", despliegue "Opciones" y seleccione "Opciones del editor de código").

La función Info muestra el mensaje pasado como parámetro.

  • Guarde los cambios haciendo clic en Grabe el elemento en los botones de acceso rápido o pulsando Ctrl + S.
  • Cerrar el editor de código ("X" en la parte superior derecha de la Corner del editor de código). El editor de ventanas se vuelve a mostrar en pantalla.
En la siguiente lección pondremos a prueba este proyecto.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 26
Comentarios
Haga clic en [Agregar] para publicar un comentario