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 le enseñará los conceptos siguientes
  • Presentación
  • Configuración necesaria para iOS
  • Mi primer proyecto
  • Creación del proyecto
  • Mi primera ventana
  • Presentación
  • Creación de la ventana
  • Visualización de un mensaje
  • Primera prueba
  • Primera implementación en el dispositivo
  • Principio
  • Implementación
  • Transferencia del proyecto WINDEV Mobile a Mac
  • Compilación del proyecto en Xcode
Lección 3.1. Mi primer proyecto iOS
Esta lección le enseñará los conceptos siguientes
  • Configuración necesaria.
  • Creación de un proyecto iOS (iPhone o iPad).
  • Mi primera ventana.
  • Mi primera prueba.
  • Primer despliegue.
Duración de las clases

Tiempo estimado: 40 mn
Lección anteriorTabla de contenidoSiguiente lección
Presentación
Para empezar a desarrollar con WINDEV Mobile para una plataforma iOS, 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 iOS con WINDEV Mobile.
Antes de crear nuestro primer proyecto para iOS, el ordenador de desarrollo debe estar configurado.
Configuración necesaria para iOS
Para desarrollar una aplicación WINDEV Mobile para iPhone/iPad, usted debe poseer:
  • 1 PC,
  • 1 Mac,
  • 1 iPhone y/o iPad (opcional).
¿Por qué un PC?
WINDEV Mobile 25 es una aplicación de Windows que puede ser utilizada en Windows 7, 10, ....
La aplicación se creará en el PC antes de ser compilada en Mac.
Este PC no requiere ninguna configuración de las herramientas de Mac/Apple.
¿Por qué un Mac?
Se necesita un Mac porque el proyecto generado en PC debe compilarse en un compilador específico para generar aplicaciones iOS.. La versión mínima del sistema operativo debe ser iOS 11.
Xcode es un entorno de desarrollo que se utiliza para desarrollar aplicaciones iOS (iPhone y iPad). Esta herramienta será utilizada para compilar las aplicaciones generadas con WINDEV Mobile.
La versión mínima de Xcode debe ser la versión 11.
Ver Compilación de un proyecto WINDEV Mobile en Xcode para más detalles (direcciones de descarga, ....).
Mi primer proyecto

Creación del proyecto

Ahora vamos a crear nuestro primer proyecto para iOS.
Imagen:ejemplo-WM.png Imagen:ejemplo-WM.png

Respuesta

Un proyecto corregido está disponible. Para abrir este proyecto, en la página de inicio de WINDEV Mobile (Ctrl + <), haga clic en "Tutorial" y seleccione "Mi proyecto iOS (Respuesta)".
  • Para crear un proyecto:
    1. Iniciar WINDEV Mobile 25 (si no lo ha hecho ya).
    2. Mostrar la página de inicio de WINDEV Mobile si es necesario (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. Se inicia el asistente para la creación de proyectos. Los diferentes pasos del asistente le ayudarán a crear su proyecto. La información especificada en este asistente puede modificarse posteriormente.
      Imagen:nota.png Imagen:nota.png

      Observación

      Consejo: Otro método para crear un proyecto:
      1. Haga clic en Crear un documento entre los botones de acceso rápido del menú WINDEV Mobile.
      2. Aparece la ventana para crear un nuevo elemento: haga clic en "Proyecto".
    5. El primer paso del asistente permite definir la plataforma de ejecución del proyecto:
      Plataforma de ejecución
      IEn nuestro caso, seleccione "iOS only" y vaya al siguiente paso del asistente.
    6. El asistente propone crear un proyecto en blanco o un proyecto basado en un ejemplo. Seleccione "Crear un proyecto en blanco" y vaya al paso siguiente
    7. El asistente propone elegir el tipo de dispositivos afectados por el proyecto:
      • Generar una aplicación para todos los iPhones y iPads.
      • Generar una aplicación para todos los iPhones.
      • Generar una aplicación para todos los iPads.
      • Generar una aplicación para un dispositivo específico.
        Imagen:nota.png Imagen:nota.png

        Observación

        Si la aplicación está destinada a funcionar en varios dispositivos iOS (por ejemplo, teléfonos de diferentes tamaños o con diferentes resoluciones), le aconsejamos que utilice una de las siguientes opciones;
        • "Generar una aplicación para todos los iPhones y iPads",
        • "Generar una aplicación para todos los iPhones".
        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 (ver Lección 3.2 Interfaz (UI) y Lección 5.2 Desarrollo de la aplicación) permitirá que la aplicación funcione en todos los dispositivos..
        Asistente de creación de proyectos
    8. Para este ejemplo, seleccione "Generar una aplicación para todos los iPhones" y vaya al siguiente paso.
    9. El asistente propone escribir el nombre del proyecto, su ubicación y su descripción.
      Asistente de creación de proyectos
      En nuestro caso, este proyecto se llamará "My_iOS_Project" (Mi_proyecto_iOS). WINDEV Mobile propone crear este proyecto en el directorio "\My Mobile projects\My_iOS_Project. Puede conservar esta ubicación o modificarla mediante el botón [...].
    10. Vaya al siguiente paso (botón"Siguiente").
    11. En la sección izquierda del asistente, haga clic en "Pautas".. Este paso se utiliza para definir el estilo de código. No modifique las opciones sugeridas. Vaya al siguiente paso.
    12. Este paso se utiliza para definir la tema gráfico de aplicación. Escogeremos "Ninja"..
      Selección de la tema gráfico
    13. Los otros pasos del asistente no son importantes para nuestro primer proyecto, así que haga clic en "Finalizar".. El proyecto se crea automáticamente.
    14. Aparece la ventana para crear un nuevo elemento. Esta ventana se utiliza para crear todos los elementos que se pueden asociar a un proyecto.
Mi primera ventana

Presentación

La primera ventana que vamos a crear permite al usuario mostrar un mensaje de bienvenida a través del botón "Mostrar".
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 iOS con WINDEV Mobile.

Creación de la ventana

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

      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 Creación de un elemento entre los botones de acceso rápido de WINDEV Mobile:
      Botones de acceso rápido
    2. Se inicia el asistente de creación de ventanas.
    3. En la lista de las ventanas propuestas, seleccione "Blank".. El plantilla utilizado se muestra en la parte inferior derecha del asistente.. "Ninja", la plantilla que se seleccionó al crear el proyecto, se selecciona por defecto. Puede seleccionar otra plantilla propuesta en la lista.
      Imagen:nota.png Imagen:nota.png

      Observación

      Las plantillas Tema le permiten crear rápidamente interfaces excepcionales. Un plantilla define el estilo de la ventana así como el estilo de todos los controles que se utilizarán en esta ventana.. Por lo tanto, no hay riesgo de obtener una interfaz fea.
    4. Validar. La ventana se crea automáticamente en el editor. Se muestra la ventana para guardar un elemento. Esta ventana de guardar se muestra:
      • 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 fichero físico correspondiente al elemento. La ventana es un archivo "WDW", guardado en el directorio del proyecto.
    5. Especifique el título del elemento: "Bienvenido". El nombre del elemento se propone automáticamente: "WIN_Welcome".
      Imagen:nota.png Imagen:nota.png

      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 quieres usar este estilo de código, puedes simplemente desactivarlo.: en el panel "Proyecto", en el grupo "Otras acciones", amplíe "Estilo de código" y desactive la casilla "Usar estilo de código".
    6. Guarde la ventana haciendo clic en "Aceptar".

Visualización de un mensaje

Ahora va a crear un control Botón utilizado para visualizar un mensaje.
  • Para crear la control Botón:
    1. En el panel "Creación", en el grupo "Controles habituales", haga clic en Creación de una control Botón. El control aparece en modo de creación bajo el puntero del ratón.
    2. Mueva el ratón 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, todo lo que tiene que hacer es hacer un nuevo clic con el botón izquierdo del ratón.
    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. Este control se llama: "BTN_Display".
    2. El título de control es: "Mostrar".
Imagen:nota.png Imagen:nota.png

Observación

Para modificar el nombre y la leyenda de la control Botón, hemos estado utilizando la ventana de descripción del control (también llamada "ventana 7-tab").
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.
  • Validar 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, utilizaremos nuestra primera función WLanguage: Info.
    Imagen:nota.png Imagen:nota.png

    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. Muestre el menú emergente de control (haga clic con el botón derecho del ratón en el control).
    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..
      Imagen:nota.png Imagen:nota.png

      Observación

      El editor de código propone diferentes eventos para cada tipo de control. Estos son los eventos relacionados con el control.
      Por lo tanto, se visualizan dos eventos para el control "Button":
      • Inicializando, ejecute al visualizar la ventana.
      • Haga clic, ejecute cuando el usuario haga clic en el control.
      Observación: Si es necesario, se pueden añadir eventos adicionales.
    4. Escriba el siguiente código En el evento "Click" del control "BTN_Display":
      Info("Hello")
Note sobre el insumo asistido: 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.
Imagen:nota.png Imagen:nota.png

Observación

Al escribir este código de WLanguage en el editor de código, probablemente notó que los diferentes elementos usan diferentes colores. Este es el colorante sintáctico. 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.
Estos colores se pueden modificar elemento por elemento en las opciones del editor de código (en el panel "Inicio", en el grupo "Entorno", expanda "Opciones" y seleccione "Opciones del editor de código").
Info muestra el mensaje pasado en el parámetro.
  • Guarde las modificaciones haciendo clic en Grabe el elemento entre los botones de acceso rápido (a la izquierda de la cinta) o pulsando Ctrl + S.
  • Cerrar el editor de código (cruz en la parte superior derecha del editor de código). La ventana vuelve a aparecer.
Primera prueba
Para una aplicación iOS, WINDEV Mobile ofrece varios tipos de pruebas:
  • Proyecto Proyecto o ventana de prueba en el ordenador de desarrollo utilizando el modo de simulación. Esta prueba simula un dispositivo iOS en el ordenador de desarrollo. Esta prueba es útil cuando el desarrollador no tiene un dispositivo Mac o iOS para compilar la aplicación.. Sin embargo, esta prueba no le permite utilizar los componentes de hardware del dispositivo (GPS, SMS, cámara, etc.)..
  • Prueba del proyecto Project directamente en el dispositivo. Esta prueba es útil cuando el desarrollador no tiene un Mac para compilar la aplicación.. Todos los componentes del dispositivo son accesibles.
  • 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. Validar (si es necesario) el mensaje de información sobre el modo simulador.
    3. La ventana creada se inicia en ejecución, en un shell correspondiente al dispositivo seleccionado (iPad o iPhone).
    4. Haga clic en el botón "Mostrar".
    5. Validar la ventana del sistema que se muestra.
      Prueba de ventana
    6. Haga clic en el botón "x" que se encuentra en el intérprete de comandos del simulador para cerrar la ventana.
    7. El editor WINDEV Mobile se vuelve a mostrar.
  • ¿Tienes un iPhone? Ahora, vamos a probar el proyecto directamente en el dispositivo.
  • En primer lugar, asegúrese de que se cumplan todas las siguientes condiciones:
    • el iPhone/iPad y la estación de trabajo de desarrollo deben estar en la misma red (Wifi, por ejemplo).
    • WMDev debe descargarse en el iPhone/iPad (https://itunes.apple.com/us/app/WMDev/id1437792304).
    • los siguientes puertos de red deben estar abiertos:
      • 64000 (64000 à 64005 si varios móviles WINDEV funcionan simultáneamente).
      • 27280
      Si se utiliza un firewall, debe estar configurado para permitir el uso de estos puertos.
  • Entre los botones de acceso rápido, seleccione " Depuración en un dispositivo móvil Debug on a mobile device".. Aparece la ventana para la conexión a un dispositivo iOS. Esta ventana contiene un código QR específico.
    Conexión a un dispositivo iOS
    1. Iniciar WMDev en el dispositivo móvil (iPhone o iPad).
      • Haga clic en "+" y luego en el botón que muestra el código de barras.
      • Escanee el código de barras que aparece en WINDEV Mobile en la ventana de conexión de un dispositivo iOS..
    2. La aplicación móvil se inicia en el dispositivo iOS.
Primera implementación en el dispositivo

Principio

Para ejecutar la aplicación en modo autónomo en el dispositivo, debe hacerlo:
  • Generar la aplicación iOS (o proyecto Xcode) en WINDEV Mobile.
  • Transfiera el proyecto Xcode generado a Mac para compilarlo.
  • Compilar el proyecto en Xcode para generar el programa.
  • Luego, el programa puede ser instalado en el dispositivo conectado o iniciado en el emulador Xcode. Se ejecutará en modo autónomo.
Echemos un vistazo a estos diferentes pasos.

Implementación

  • Generar la aplicación iOS:
    1. En el panel "Proyecto", en el grupo "Generación", haga clic en "Generar" (también puede hacer clic en Generación de iOS entre los botones de acceso rápido).
    2. WINDEV Mobile propone seleccionar la primera ventana del proyecto. En nuestro ejemplo, seleccione la ventana "WIN_Welcome" y valide (Botón "OK").
      Primera ventana del proyecto
    3. Se inicia el asistente para la generación de una aplicación para iPhone/iPad.
      Asistente de generación de aplicaciones iOS
    4. El primer paso del asistente está acostumbrado a:
      • definir el nombre de la aplicación, la empresa y los derechos de autor.
      • Introducir el identificador de la concatenación.
        Imagen:nota.png Imagen:nota.png

        Observación

        Este identificador es el único identificador de tu aplicación junto a Apple.. Se define y se guarda en la cuenta de desarrollador de Apple.
        Este identificador se utilizará para guardar su aplicación con el fin de ejecutar su prueba y desplegarla.. Por defecto, WINDEV Mobile propone automáticamente un identificador que respeta el estándar de desarrollo de Apple. Este identificador puede ser modificado.
      • escriba la dirección de correo electrónico que se utilizará por defecto para enviar los informes de error generados por la aplicación.
    5. Ir al siguiente paso. Tiene la posibilidad de especificar la ruta de los diferentes iconos de la aplicación.. Se pueden suministrar varios iconos:
      • para iPad y iPad Retina (sólo si la aplicación propone ventanas para iPad),
      • para todos los modelos de iPhone (por ejemplo, iPhone 4S y iPhone 6 Plus tienen resoluciones diferentes).
    6. Ir al siguiente paso.
    7. Especifique las características de la pantalla de inicio.
    8. Ir al siguiente paso. Especifique el número de versión de la aplicación generada.
    9. Ir al siguiente paso. Este paso se utiliza para incluir archivos específicos (archivos de datos, imágenes,...). Esta posibilidad no se utilizará en nuestro ejemplo. Mantenga las opciones predeterminadas.
    10. Ir al siguiente paso. Este paso se utiliza para especificar:
      • Si se permite cambiar el tamaño de la aplicación o no (Vista dividida).. La opción permite al usuario final mostrar dos ventanas de dos aplicaciones diferentes una al lado de la otra en algunos dispositivos.
      • si los archivos se pueden compartir con iTunes. Si esta opción está seleccionada, tendrá la posibilidad de recuperar los archivos de la aplicación en Mac durante la sincronización.. Por ejemplo, si se han suministrado archivos de datos con la aplicación, la aplicación iTunes le permitirá recuperarlos.
      • la versión mínima de iOS necesaria para ejecutar la aplicación.
    11. Ir al siguiente paso. Este paso se utiliza para definir las opciones de firma.
      Vea Firma de las aplicaciones iOS para más detalles.
    12. Validar el asistente ("Finalizar"). La generación se realiza en la carpeta EXE del directorio del proyecto. El directorio que contiene el código fuente que se utilizará en Mac se llama "Project_name.xcode.gen" ("My_iOS_Project.xcode.gen" en nuestro ejemplo).. Este es el directorio que debe ser copiado en Mac. Haga clic en el botón "Abrir el directorio de generación".
Las otras operaciones deben realizarse en Mac. Debes hacerlo:
  • Transfiera el proyecto WINDEV Mobile a Mac.
  • Compilar el proyecto en Xcode.

Transferencia del proyecto WINDEV Mobile a Mac

  • Para transferir el proyecto WINDEV Mobile a MAC:
    1. Copiar toda la carpeta generada en el directorio EXE en un medio externo (llave USB, disco duro externo, directorio compartido con MAC en red).. Este directorio se llama <Nombre del proyecto>.xcode.gen.
    2. Pegue esta carpeta en el MAC que compilará la aplicación.
    3. Abra la carpeta en la MAC y abra el archivo "Nombre_del_proyecto.xcodeproj".
    4. El proyecto se abre en Xcode.

Compilación del proyecto en Xcode

WINDEV Mobile genera automáticamente un proyecto Xcode para sus compilaciones iOS. Para simplificar la implementación de aplicaciones, WINDEV Mobile genera un "Scheme" para Xcode.
  • Compilar el proyecto en Xcode:
    1. En la lista desplegable que se encuentra en la esquina superior izquierda, seleccione las opciones de compilación. Seleccione el esquema (correspondiente a su aplicación) y luego el objetivo de compilación (dispositivo actualmente conectado o un simulador).
    2. Para iniciar la compilación, seleccione "Product .... Clean" y luego "Product... Build".
    3. Aparece un status de compilación reporte en la parte superior ("Con éxito" o el número de advertencias y errores).. Puede hacer clic en estos símbolos para ver la lista de errores/avisos.
    4. Una vez compilado el programa sin errores, puede iniciar la simulación ("Producto... Ejecutar").
      • Si el objetivo de la compilación es el simulador, la aplicación se inicia en la ventana del simulador..
      • Si el objetivo de compilación es el dispositivo conectado, la aplicación se inicia en el dispositivo.
Entonces, usted tiene la capacidad de ejecutar la prueba de su aplicación en su iPhone o iPad.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario