PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad WINDEV Mobile 25!
Este contenido proviene de una traducción automática.. Haga clic aquí para ver la versión original en inglés.
  • Esta lección abarcará los siguientes temas
  • Presentación
  • Configuración necesaria para Android
  • Mi primer proyecto
  • Creación del proyecto
  • Mi primera ventana
  • Presentación
  • Crear ventana
  • Visualización de un mensaje
  • Primera prueba
  • Primera implementación en el dispositivo
  • Principio
  • Implementación
Lección 2.1. Mi primer proyecto Android
Esta lección abarcará los siguientes temas
  • Configuración necesaria.
  • Crear un proyecto Android.
  • Mi primera ventana.
  • Mi primera prueba.
  • Primera implementación.
Duración

Tiempo estimado: 1 h
Lección anteriorTabla de contenidoSiguiente lección
Presentación
Para empezar a desarrollar con WINDEV Mobile para una plataforma Android, vamos a crear un primer proyecto. Este proyecto contendrá una ventana utilizada para mostrar un mensaje.
Este primer ejemplo presentará los principales conceptos de desarrollo para Android con WINDEV Mobile.
Antes de crear nuestro primer proyecto Android, se debe realizar una configuración específica en el equipo de desarrollo.
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 (Java Development Kit) distribuido por Oracle se utiliza para compilar los archivos Java generados.
  • El SDK Android de Google: El SDK de Android (Software Development Kit) es un conjunto de archivos y aplicaciones distribuidos por Google para permitir la compilación de aplicaciones para el sistema operativo Android..
    Atención: El SDK de Android incluye secciones correspondientes a las versiones de las plataformas de dispositivos (5, 6, 7, ....).
    La descarga y la configuración del SDK de Android se proponen 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 ser descargado e instalado si es necesario al generar la aplicación Android desde WINDEV Mobile.
Ver Instalación de herramientas para el desarrollo de Android para más detalles (direcciones de descarga, ....).
Le recomendamos iniciar el equipo una vez instalado el JDK y SDK.
Mi primer proyecto

Creación del proyecto

Ahora vamos a crear nuestro primer proyecto para Android.

Respuesta

Un proyecto corregido está disponible. Para abrir este proyecto:
  1. Abra la página de inicio de WINDEV Mobile (Ctrl + <).
  2. Haga clic en "Curso de autoformación" y seleccione "My Android project (Answer)".
  • Para crear un proyecto:
    1. Inicie WINDEV Mobile 25 (si es necesario).
    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, a continuación, en "Aplicación Android o iOS"..
      Página de inicio
    4. La creación del proyecto asistente comienza. Las diferentes etapas del asistente le ayudarán a crear el proyecto. La información especificada en esta asistente puede ser modificada posteriormente.

      Observación

      Consejo: Otro método para crear un proyecto:
      1. Haga clic en Crear un elemento entre 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 este caso, seleccione "Solo Android" y pase a la etapa siguiente.
    6. La asistente propone crear un proyecto en blanco o un proyecto basado en un ejemplo. Seleccione "Crear un proyecto en blanco" y vaya a la etapa siguiente.
    7. El asistente propone elegir el tipo de dispositivos Android utilizados:
      • Generar una aplicación para teléfonos y tabletas.
      • Generar una aplicación para teléfonos.
      • Generar una aplicación para tabletas.
      • Generar una aplicación para un dispositivo específico.

        Observación

        Si la aplicación está diseñada para funcionar en varios dispositivos Android (por ejemplo, teléfonos con diferentes tamaños o resoluciones), le recomendamos que utilice una de las siguientes opciones: "Generar una aplicación para teléfonos y tabletas", "Generar una aplicación sólo para teléfonos" o "Generar una aplicación sólo para tabletas".Si la aplicación está diseñada para funcionar en varios dispositivos Android (por ejemplo, teléfonos con diferentes tamaños o resoluciones), le recomendamos que utilice 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 anclas (ver 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.

      Observación

      ¿Es propietario de un dispositivo Android y desea ejecutar la prueba de aplicación en este dispositivo? Seleccione "Generar una aplicación para un dispositivo específico".. El siguiente paso de la asistente permite seleccionar el dispositivo deseado.
    9. La asistente propone escribir el nombre del proyecto, su ubicación y su descripción. En nuestro caso, este proyecto se llamará "My_Android_Project".. WINDEV Mobile propone crear este proyecto en el directorio "\My Mobile projects\My_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. La asistente propone añadir documentos. Pase a la etapa siguiente.
    12. Este paso le permite utilizar el Administrador de Código Fuente (SCM). No lo usaremos en este ejemplo. Seleccione "No, no utilice 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. Este paso se utiliza para definir el estilo de código. No modifique las opciones sugeridas. Pase a la etapa siguiente.
    14. Esta etapa permite definir el tema gráfico de la aplicación. Mantendremos "Material Design Blue 2".
      Eligiendo el tema gráfico
    15. Los otros pasos de la asistente no son importantes para nuestro primer proyecto. Haga clic en "Terminar" directamente. El proyecto se crea automáticamente.
    16. La ventana para crear nuevos elementos se abre. Esta ventana se utiliza para crear todos los elementos que se pueden asociar a un proyecto.
Mi primera ventana

Presentación

La primera ventana permite al usuario mostrar un mensaje de bienvenida con el botón "Display".
Usted puede pensar que esto es demasiado básico, pero le aconsejamos que cree esta ventana. Se sorprenderá de lo intuitivo y fácil que es usar el editor de WINDEV Mobile. Además, esta ventana le permitirá descubrir conceptos que son fundamentales para el resto de este tutorial y ver todo el proceso de desarrollo de una aplicación Android con WINDEV Mobile.

Crear ventana

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

      Observación

      A medida que se crea un nuevo proyecto, se muestra automáticamente la ventana para crear un nuevo elemento.
      Para visualizar la ventana de creación de un nuevo elemento, 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. Comienza la creación de la ventana asistente.
    3. En la lista de las ventanas propuestas, seleccione "En blanco". La plantilla utilizada se muestra en la parte inferior derecha de la asistente. "Material Design Blue 2", la plantilla que se seleccionó al crear el proyecto se selecciona por defecto.

      Observación

      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í, se obtiene una interfaz homogénea.
    4. Valide. La ventana se crea automáticamente en el editor. A continuación, se abre una ventana para guardar el elemento. Esta ventana se utiliza para especificar:
      • el título del elemento. Para una ventana, este título se mostrará en el Action Bar de la ventana.
      • el nombre del elemento que corresponde al nombre de la ventana. Este nombre se utilizará en la 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", guardado 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

      Observación

      Echemos un vistazo al nombre de la ventana propuesta por WINDEV Mobile: este nombre comienza con las letras "WIN_". Este prefijo se añade automáticamente porque el proyecto utiliza un estilo de código.
      El estilo de código se utiliza para 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".

Visualización de un mensaje

Ahora va a crear un control Botón utilizado para visualizar 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 puntero del ratón.
    2. Mueva el cursor hacia la posición en la que se creará el control en la ventana (en la parte superior de la ventana, por ejemplo). Para soltar el control en la ventana, simplemente haga clic en la ventana.
    3. Haga clic con el botón derecho del ratón en el control que acaba de crear.. Aparece el menú emergente de control. Seleccione "Descripción" de este menú emergente. Aparece la ventana de descripción de la control Botón.
  • Modifique las características de control introduciendo la siguiente información:
    Descripción del control Botón
    1. El nombre del control: "BTN_Display".
    2. El título del control: "Display".

Observación

Para modificar el nombre y la leyenda de la control Botón, hemos utilizado la ventana de descripción de control (también llamada "ventana de 7 pestañas").
El nombre y el título del control también se pueden modificar desde la ventana que se está editando:
  1. Haga clic en el control para seleccionarlo.
  2. Presione la tecla Enter o Space: el título se vuelve editable.
  3. Escriba el nuevo título y valide.
  • Valide la ventana de descripción del control (botón "OK"). El nuevo título de control aparece en el editor de ventanas.
  • Vamos a mostrar un mensaje en una ventana de diálogo (una pequeña ventana propuesta por el sistema). Para ello, usaremos nuestra primera función de WLanguage: Info.

    Observación

    El lenguaje de programación suministrado con WINDEV Mobile se llama WLanguage. Es un lenguaje de quinta generación (5GL) que incluye comandos altamente sofisticados.
    1. Seleccione el control si es necesario.
      Observaciones:
      • Cuando se selecciona el control, aparecen varias manijas alrededor del control.
      • Para seleccionar la control Campo de entrada, sólo tiene que hacer clic con el ratón.
    2. Abra el menú contextual del control (clic derecho).
    3. Seleccione "Código". Esta opción abre el editor de código de WINDEV Mobile, en el que se pueden escribir todas las sentencias WLanguage..

      Observación

      El editor de código propone diferentes eventos para cada tipo de control. Estos son los eventos relacionados con el control.
      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 añadir 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 asistida: En cuanto se teclean los dos primeros caracteres, WINDEV Mobile propone todas las palabras del vocabulario de WLanguage que contienen estos caracteres. El desarrollo asistido es una característica muy poderosa. No más errores al introducir el nombre de un elemento: se reducen los errores de sintaxis. Todo lo que tiene que hacer es seleccionar la palabra solicitada y pulsar Intro para validarla.. Puedes concentrarte en el algoritmo.

Observación

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 le permite identificar fácilmente los diferentes elementos que maneja el código:
  • las funciones de WLanguage están coloreadas en azul,
  • las cadenas de caracteres (entre comillas) son de color púrpura,
  • los nombres de los controles están coloreados en cyan.
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").
Info muestra el mensaje pasado como parámetro.
  • Guarde las modificaciones haciendo clic en Guarde el elemento entre los botones de acceso rápido o pulsando Ctrl + S.
  • Cierre el editor de código (con la "X" en la parte superior derecha del editor de código). Se vuelve a visualizar el editor de ventanas.
Primera prueba
Para aplicaciones Android, WINDEV Mobile permite ejecutar directamente la prueba de la aplicación en el equipo de desarrollo mediante el modo de simulación. Esta prueba simula un dispositivo Android en el ordenador de desarrollo. Esta prueba es útil cuando el desarrollador no puede utilizar ningún dispositivo Android.. Sin embargo, esta prueba no le permite utilizar los componentes de hardware del dispositivo (GPS, SMS, cámara,...).

Observación

WINDEV Mobile también le permite ejecutar una prueba de la aplicación a través del emulador Android (AVD) suministrado con el SDK.
Para obtener más información, consulte Prueba con el emulador de Android.
  • Ahora ejecutaremos la prueba de la ventana en modo de simulación.
    1. Haga clic en Ejecutar la prueba de la ventana entre los botones de acceso rápido (o pulse F9).
    2. Si es necesario, valide el mensaje de información sobre el modo simulador.
    3. Elija (si es necesario) el modo de gestión del editor durante la prueba (editor minimizado o no).
    4. La ventana creada se inicia en ejecución.
    5. Haga clic en el botón "Display".
    6. Valide la ventana del sistema que se muestra.
      Prueba de la ventana
  • Cualquier desarrollador sabe que realizar una prueba de programa puede ser un trabajo largo y tedioso.. En WINDEV Mobile, un SOLO CLICK le permite ejecutar la prueba de ventana, reporte o procedimiento mientras la crea.. Esto es simple y rápido!
  • Haga clic en "x" en el menú encima del cuadro del simulador para cerrar la ventana.
  • El editor WINDEV Mobile aparece de nuevo.
Primera implementación en el dispositivo

Principio

Para ejecutar la aplicación de manera autónoma en el dispositivo Android, es necesario:
  • Conectar el dispositivo a través de un puerto USB.
  • Generar la aplicación. Se creará un archivo "apk. Este archivo contiene todos los elementos necesarios para ejecutar la aplicación en un dispositivo Android.
  • Seleccionar el dispositivo al final de la generación. La copia de la aplicación (archivo"apk") puede tardar varios segundos.
Echemos un vistazo a estos diferentes pasos.

Observación

Atención: Es necesario activar la depuración USB para realizar pruebas en el teléfono.. Si esta operación no se realiza, el teléfono no será detectado por WINDEV Mobile.
Para habilitar la depuración USB:
  1. En el teléfono, seleccione el menú "Parámetros".
  2. Seleccione "Acerca del dispositivo".
  3. Haga clic en "Build number" varias veces para activar el modo de desarrollador.
  4. Suba un nivel.
  5. Aparece la opción "Opción de desarrollo. Seleccione esta opción.
  6. Seleccione "Depuración USB".
Observación: Las operaciones a realizar pueden variar de acuerdo a la versión del teléfono y a su marca.. Por ejemplo, para un Samsung Galaxy Notes 3, debe "tocar" varias veces el control del "Número de versión" que se encuentra en la opción "Acerca del dispositivo" para habilitar la "Opción de desarrollo".. En cualquier caso, una búsqueda en Google con "usb debugging <device name>" permite adaptar el modo de funcionamiento al dispositivo utilizado.

Implementación

  • Para generar la aplicación Android:
    1. En la pestaña "Proyecto", en el grupo "Generación", haga clic en "Generar" (también puede hacer clic en generación Android en los botones de acceso rápido).
    2. WINDEV Mobile propone seleccionar la primera ventana del proyecto. En nuestro ejemplo, seleccione "WIN_Welcome" y valide (botón"OK").
      Primera ventana del proyecto
    3. Comienza la generación de la aplicación Android asistente.
    4. El primer paso de asistente permite seleccionar el modo de generación de la aplicación. De hecho, el formato de generación puede cambiar dependiendo del modo seleccionado.
      En este caso, seleccione "Generar para una implementación libre (tienda privada, flota corporativa, etc.)". Pase a la etapa siguiente.
    5. El siguiente paso de la asistente es comprobar las herramientas necesarias para generar la aplicación Android.
      Herramientas de generación
      El asistente propone:
      • Descargar e instalar automáticamente el SDK de Android y Gradle: en este caso, sólo tendrá que validar la licencia. WINDEV Mobile se encarga de todo. Si una actualización está disponible, la generación asistente propondrá automáticamente realizar las actualizaciones necesarias. Sólo se necesita una conexión a Internet. Esta opción está disponible sólo si Gradle no fue descargada e instalada con anterioridad.
      • Utilizar las herramientas instaladas automáticamente. Esta opción está disponible si las herramientas se han descargado e instalado durante una generación anterior.
      • Especificar la ubicación de las herramientas ya instaladas en el equipo. En este caso, todo lo que tienes que hacer es especificar las rutas de configuración de Gradle y el SDK de Android.
    6. Seleccione la opción correspondiente a su configuración y vaya al siguiente paso.
      Observación: Si ha elegido descargar e instalar las herramientas, el siguiente paso puede ser relativamente largo y requerir la validación de la licencia.
    7. El siguiente paso de la asistente le permite:
      • definir el nombre de la aplicación (que se muestra debajo del icono utilizado para iniciar la aplicación) y el paquete correspondiente.
      • seleccione el icono de la aplicación en el catálogo de imágenes de WINDEV Mobile.
        Información general
    8. Pase a la etapa siguiente. Este paso se utiliza para definir:
      • la pantalla de bienvenida de la aplicación,

        Express

        Observación: La pantalla de bienvenida de la aplicación no está disponible en la versión Express.
      • la información guardada en el manifiesto,
      • las opciones de la aplicación:
        • el modo de arranque de la aplicación (al arrancar el dispositivo o no).
        • la gestión de las ventanas maximizadas (gestión multi-ventana o no).
    9. Pase a la etapa siguiente. La asistente permite definir el número de versión de la aplicación.
    10. Pase a la etapa siguiente. Este paso se utiliza para firmar la solicitud. La asistente propone:
      • firmar la aplicación.
        Observación: Se requiere una firma específica para distribuir la aplicación.
      • utilizar una firma genérica que se puede utilizar para probar la aplicación.

        Express

        Observación: La firma de la aplicación no está disponible en la versión Express.
    11. Seleccione la opción "Utilizar una firma genérica".
    12. Pase a la etapa siguiente. Como hemos elegido generar la aplicación para una flota de dispositivos, la asistente propone elegir el tipo de dispositivos. Conserve las opciones predeterminadas.

      Observación

      Si tiene un dispositivo conectado al PC, utilice la opción "Detectar dispositivo automáticamente". Así, la próxima vez que se genere una aplicación, este tipo de dispositivo se seleccionará automáticamente.
    13. Pase a la etapa siguiente.
    14. La asistente permite incluir archivos específicos (archivos de datos, imágenes, ...). Esta posibilidad no se utilizará en nuestro ejemplo. Conserve las opciones predeterminadas.
    15. Pase a la etapa siguiente. La asistente permite incluir bibliotecas específicas. Conserve las opciones predeterminadas.
    16. Pase a la etapa siguiente. La asistente permite incluir las dependencias remotas utilizadas por el proyecto. Conserve las opciones predeterminadas.
    17. Pase a la etapa siguiente. La asistente permite definir los permisos de aplicación. Por defecto, según las funciones WLanguage utilizadas en la aplicación, WINDEV Mobile detecta los permisos necesarios.
    18. Pase a la etapa siguiente. Puede restringir la descarga de la aplicación en Google Play Store a los dispositivos equipados con las funciones utilizadas.. Conserve las opciones predeterminadas.
    19. Pase a la etapa siguiente. La asistente le permite configurar las opciones del SDK de Android. Conserve las opciones predeterminadas.
      Configuración avanzada
    20. Pase a la etapa siguiente.
    21. Finalice el asistente. La generación se realiza automáticamente en la tarea de fondo.. El icono de Generación de indica que la generación está en curso.
    22. Al finalizar la generación, aparece una ventana emergente en el editor:
      Generación completada

      Observación

      Esta ventana puede ser mostrada en cualquier momento haciendo clic en el icono de Generación.
    23. Para copiar y ejecutar la aplicación directamente en el dispositivo relacionado con el equipo o en un emulador, haga clic en "Implementar".
    24. Aparece una nueva ventana que le permite seleccionar el dispositivo en tiempo de ejecución. Si tiene un dispositivo Android conectado al ordenador de desarrollo, seleccione el dispositivo conectado al PC.
Eso es todo, nuestra primera aplicación se genera y se ejecuta en el dispositivo Android.

Observación

En esta lección, realizamos una prueba de ventanas en el simulador. WINDEV Mobile le permite ejecutar varios tipos de pruebas de toda la aplicación.
Puede probar su aplicación:
  • en el simulador propuesto por WINDEV Mobile: seleccione " Depurar en el simulador de teléfono Android Genérico Depurar en simulador XXX" en las opciones de acceso rápido. Esta opción le permite probar rápidamente el proyecto en el PC. Esta es la opción que usamos en este tutorial.
  • directamente en el teléfono móvil (opción por defecto): seleccione " Depurar en dispositivo móvil Depurar en dispositivo móvil" en los botones de acceso rápido: se realizará la generación y se copiará y ejecutará la aplicación en el teléfono conectado al equipo actual. Puede probar la aplicación directamente en su dispositivo.
Probar proyecto
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario