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 iOS
  • 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
  • Transferencia del proyecto WINDEV Mobile a Mac
  • Compilación del proyecto en Xcode
Lección 3.1. Mi primer proyecto iOS
Esta lección abarcará los siguientes temas
  • Configuración necesaria.
  • Creación de un proyecto iOS (iPhone o iPad).
  • Mi primera ventana.
  • Mi primera prueba.
  • Primera implementación.
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 funciona en Windows Vista, 7, 8, 10.
La aplicación se creará en PC antes de ser compilada en Mac (proyecto, análisis, ventanas, ...).
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 requerida es MacOs Catalina.
Xcode es el compilador de Mac para generar programas que se ejecutan en iOS (es decir, en el iPhone y el iPad).
La versión mínima recomendada de Xcode es 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.

Respuesta

Un proyecto corregido está disponible. Para abrir el proyecto, en la página de inicio de WINDEV Mobile (Ctrl + <), haga clic en "Curso de autoformación" y seleccione "My iOS project (Answer)".
  • Para crear un proyecto:
    1. Iniciar WINDEV Mobile 25 (si no lo ha hecho ya).
    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. El asistente de creación de proyectos se abre. 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 documento 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 nuestro caso, seleccione "sólo iOS" y vaya al siguiente paso de la asistente.
    6. La asistente propone crear un proyecto en blanco o un proyecto basado en un ejemplo. Seleccione "Crear un proyecto en blanco" y pase a la etapa siguiente
    7. La 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.

        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 anclas (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. La 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". WINDEV Mobile propone crear este proyecto en el directorio "\My Mobile projects\My_iOS_Project. Puede conservar la ubicación o modificarla haciendo clic en el botón [...].
    10. Vaya al siguiente paso (botón"Siguiente").
    11. En la sección izquierda de la asistente, haga clic en "Directrices". Este paso se utiliza para definir el estilo de código. No modifique las opciones sugeridas. Pase a la etapa siguiente.
    12. Esta etapa permite definir el tema gráfico de la aplicación. Escogeremos "Ninja"..
      Seleccionando a el tema gráfico
    13. Los otros pasos de la asistente no son importantes para nuestro primer proyecto, así que haz clic en "Finalizar". El proyecto se crea automáticamente.
    14. 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 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.

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 mostrar la ventana de creación de un nuevo elemento, sólo hay que pulsar Crear un 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. "Ninja", la plantilla que se seleccionó al crear el proyecto, se selecciona por defecto. Puede seleccionar otra plantilla propuesta en la lista.

      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 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 archivo físico del 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".

      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 la control Botón:
    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 de nuevo.
    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: "Mostrar".

Observación

Anteriormente, el nombre y título del control Botón se modificó 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 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, utilizaremos nuestra primera función 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. Mostrar el menú contextual de control (clic derecho del ratón sobre 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..

      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:
      • 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")
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 pulsando Grabe el elemento en el botón de acceso rápido (a la izquierda de la cinta) o pulsando Ctrl + S.
  • Cierre el editor de código (con la "X" 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. Si es necesario, valide 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 "Display".
    5. Valide la ventana del sistema que se muestra.
      Prueba de la ventana
    6. Haga clic en "x" en el menú encima del cuadro del simulador para cerrar la ventana.
    7. El editor WINDEV Mobile aparece de nuevo.
  • ¿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 ser descargado al 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 de Depuración en un dispositivo móvil en un dispositivo móvil". 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. 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. 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 la pestaña "Proyecto", en el grupo "Generación", haga clic en "Generar" (también puede hacer clic en Generación de iOS en los botones de acceso rápido).
    2. Se inicia la asistente para generar una aplicación para el iPhone/iPad.
      Generación de aplicaciones iOS asistente
    3. La primera etapa del asistente permite:
      • definir el nombre de la aplicación, la empresa y los derechos de autor.
      • Introducir el identificador de la concatenación.

        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.
    4. Pase a la etapa siguiente. 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).
    5. Pase a la etapa siguiente.
    6. Especifique las características de la pantalla de inicio.
    7. Pase a la etapa siguiente. Especifique el número de versión de la aplicación generada.
    8. Pase a la etapa siguiente. Este paso se utiliza para incluir archivos específicos (archivos de datos, imágenes,...). Esta posibilidad no se utilizará en nuestro ejemplo. Conserve las opciones predeterminadas.
    9. Pase a la etapa siguiente. 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.
    10. Pase a la etapa siguiente. Este paso se utiliza para definir las opciones de firma.
      Para obtener más información, consulte Firma de las aplicaciones iOS.
    11. Validar la 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. Es necesario:
  • 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