• Configuración necesaria.
• Crear un proyecto Android/iOS.
• Crear una ventana.

	Tiempo estimado: 1 h

Configuración necesaria para Android

• 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 que permiten compilar aplicaciones para Android.
  Atención: El SDK de Android incluye grupos de archivos que corresponden a las versiones de la plataforma en los dispositivos (6, 7, etc.).
  La descarga e instalació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 descargarse e instalarse al generar la aplicación Android desde WINDEV Mobile.

Configuración para iOS

Crear un proyecto

	Corregido	Hay un proyecto corregido disponible. Para abrir el proyecto: Vaya a la página de inicio de WINDEV Mobile (Ctrl + <). Haga clic en "Tutorial", luego en "Part 2 - Lesson 2.1 - My first Android/iOS application", haga doble clic en "My Android/iOS project (Answers).

• Para crear un proyecto multiplataforma Android/iOS:
  1. Inicie WINDEV Mobile 28.
  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" (ícono ) y seleccione "Aplicación Android o iOS".
     
  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 el asistente se podrá modificar más adelante.
     

     	Nota	Consejo: Otro método para crear un proyecto: Haga clic en en los botones de acceso rápido del menú de WINDEV Mobile. La ventana de creación de nuevos elementos se abre: haga clic en "Proyecto".
  5. La primera etapa del asistente permite definir la plataforma de ejecución del proyecto:
     
     En este caso, seleccione "Multiplataforma Android y iOS" y pase a la siguiente etapa.
  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:
     • 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.3 Interfaz (UI) y Lección 4.2 Desarrollar una aplicación) 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. El asistente le pide que introduzca el nombre, la ubicación y la descripción del proyecto. En nuestro caso, introduzca "My_iOS_Android_Project" para el nombre del proyecto. 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 [...].
     
  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 cambie las opciones sugeridas. Pase a la etapa siguiente.
  14. Esta etapa permite definir el tema gráfico de la aplicación. Elija "Phoenix".
      
  15. Las otras etapas del asistente no son importantes para nuestro primer proyecto. Haga clic en "Finalizar" directamente. El proyecto se crea automáticamente. Dos configuraciones de proyecto se crean automáticamente:
      • una configuración "Aplicación iOS", que se selecciona automáticamente.
      • una configuración "Aplicación Android".
      Los asistentes de creación y generación de ventanas mostrarán automáticamente las opciones que corresponden a la configuración actual en el editor.
  16. La ventana de creación de nuevos elementos se abre. Esta ventana permite crear los elementos del proyecto.

Presentación

Crear una ventana

• Para crear la ventana:
  1. En la ventana "Nuevo", 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, haga clic en en los botones de acceso rápido de WINDEV Mobile:
  2. El asistente de creación de ventanas se abre.
  3. En la lista de ventanas, seleccione "En blanco para iPhone genérico". Dado que la configuración "iOS" está seleccionada de forma predeterminada, el asistente le pide que cree una ventana para iPhone. El nombre de la plantilla utilizada aparece en la parte inferior derecha del asistente. La plantilla "Phoenix" que elegimos al crear el proyecto está seleccionada de forma predeterminada.
     

     	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. 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 que corresponde al nombre de la ventana. Este nombre se utilizará en el código.
     • 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. Introduzca el título del elemento: "Welcome". El nombre del elemento se completa automáticamente: "WIN_Welcome".
     
     
     

     	Nota	Veamos el nombre de la ventana que propone WINDEV Mobile de forma predeterminada: 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 está compuesta por varias áreas:
     • La barra del sistema, que muestra la hora.
     • El Action Bar. Los "Action Bar" reemplazan la barra de título de una ventana y muestran diferente 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.
     • El área de contenido de la ventana, que contendrá los diferentes controles de la aplicación.

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 . 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.
  3. Haga clic derecho en el control que acaba de crear. 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.

• Defina la siguiente información del control:
  
  1. El nombre del control: "BTN_Display".
  2. El título del control: "Display".

	Nota	Anteriormente, cambiamos el nombre y título del control Botón desde su ventana de descripción (también llamada "ventana de 7 pestañas"). También es posible cambiar el nombre y título del control directamente desde la ventana: Haga clic en el control para seleccionarlo. Presione la tecla Entrar o la Barra espaciadora: el texto pasa a modo de edición. Introduzca el nuevo texto y valide.

• 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.

	Nota	WINDEV Mobile incluye varias opciones de alineación. 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.

• Vamos a mostrar un mensaje en una ventana de diálogo (una ventana pequeña del sistema). Para ello, utilizaremos nuestra primera función WLanguage: Info.
  

  	Nota	WLanguage es el lenguaje de programación de WINDEV Mobile. Es un lenguaje de quinta generación con comandos altamente sofisticados.

  1. Seleccione el 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")
     

	Nota	Al escribir el código WLanguage en el editor de código, probablemente notó que los elementos usan colores diferentes . 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 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").

• Guarde los cambios haciendo clic en 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.