Inicio Rápido Android

Esta Guía de Inicio Rápido Android te proporcionará una introducción sobre el entorno de desarrollo de Xojo y te guiará a través del desarrollo de una app funcional para Android: un navegador web simple. Completarlo debería de tomarte unos 15 minutos o menos.

../../_images/completed_app.png

Requerimientos de Desarrollo Android

Ejecutar, probar y depurar proyectos Android creados con Xojo requiere la instalación de la herramienta de desarrollo Android Studio de Google, pero no tendrás que usarla. Si aun no has descargado e instalado Android Studio, hazlo ahora antes de continuar con la Guía Rápida.

Important

Asegúrate de salir de Android Studio tras instalarlo y antes de ejecutar un proyecto de Android en Xojo. De otro modo no podrás ejecutar el proyecto Android.

Atajos

Proporcionamos un vídeo de la Guía Rápida, en el caso de que prefieras mirar un vídeo en vez de seguir los pasos tu mismo.

También puedes descargar el proyecto de Xojo completado si así lo prefieres.

Primeros Pasos

  1. Ejecuta Xojo. Una vez que haya terminado de cargar aparecerá el Selector de Proyecto.

../../_images/new_project_chooser.png

  1. Haz clic en Android para seleccionarlo.

Hay tres campos que requieren de la introducción de valores:

  • Application Name será el nombre del archivo correspondiente a la app que estás creando.

  • Company Name es el nombre de tu empresa. Puedes dejarlo vacío.

  • Application Identifier es un identificador único para esta app.

  1. Introduce SimpleBrowser como el Nombre de la Aplicación (Application Name).

  2. Haz clic en Create para abrir el Espacio de Trabajo, la ventana principal de Xojo, donde comenzarás a diseñar tu app.

Espacio de Trabajo

El espacio de trabajo se abre con la pantalla por defecto.

../../_images/ide_for_docs_android.png

Crear un Navegador Web simple

Visión General

Una app Xojo está compuesta por una colección de objetos creados a partir de Clases. Prácticamente todo en Xojo es una clase, incluyendo las pantallas y los controles. En el proyecto SimpleBrowser utilizarás el objeto por defecto Screen basado en una clase y añadirás sobre ella diversos controles (también basados en clases, pero en este caso de interfaz de usuario) para crear el diseño de la pantalla propiamente dicha.

La app utiliza tres controles:

  • TextField: Se utiliza un control TextField para la introducción de texto. En este proyecto el URL correspondiente a la página web a mostrar se introducirá en un TextField situado en la parte superior de la pantalla.

  • Button: Se utiliza un Botón para disparar una acción. El usuario pulsa el botón para cargar la página web correspondiente al URL en el Visor HTML.

  • HTML Viewer: Se utiliza un visor HTML (HTMLViewer) para mostrar la página web.

Crear la Interfaz de Usuario

Con Screen1 abierto en el Editor de Diseño estás listo para comenzar a añadir los controles a la pantalla.

  1. En la Biblioteca (Library), haz clic en el icono del TextField y arrástralo sobre la esquina superior izquierda de la pantalla en el Editor de Diseño. A medida que te aproximes a los márgenes de la pantalla verás los indicadores correspondientes a las guías de alineación que te ayudarán a situar el control en la posición correcta.

../../_images/drag_first_control_to_layout.png

  1. En la Biblioteca, haz clic sobre el icono del Botón y arrástralo sobre la esquina superior derecha de la pantalla.

../../_images/drag_second_control_to_layout.png

  1. En la Biblioteca, haz clic sobre el icono correspondiente al control del HTMLViewer y arrástralo sobre la mitad de la pantalla. Cambia el tamaño del control (utilizando los manejadores de tamaño) de modo que rellene la pantalla bajo el TextField y el botón.

../../_images/drag_third_control_to_layout.png

  1. Cambia el tamaño del TextField para que sea más ancho. Haz clic sobre él para que se muestren los manejadores de cambio de tamaño. Haz clic en el manejador central derecho y arrástralo hacia la derecha hasta que las guías de alineación te indiquen que está lo suficientemente próximo al Botón.

El diseño finalizado de la pantalla debería de tener el siguiente aspecto:

../../_images/finished_layout.png

Ajustar las propiedades

Una propiedad es un atributo de una clase y también del objeto creado a partir de dicha clase. Cambiar los valores de una propiedad te permite modificar el comportamiento del objeto creado a partir de una clase.

Inspector

Se utiliza el Inspector para cambiar las propiedades de los controles y de las pantallas entre otros elementos. Comparte con la Biblioteca la misma área situada a la derecha en el Espacio de Trabajo.

Definir las propiedades para la pantalla

  1. Para acceder al Inspector, haz clic en el botón Inspector en la barra de herramientas o pulsa los atajos de teclado ⌘-I (Ctrl-I en Windows y Linux).

../../_images/inspector_browserscreen.png

  1. En el Editor de Diseño, haz clic en Screen1 (no sobre cualquier control) para seleccionarlo. Ahora el Inspector muestra las propiedades para la pantalla.

  2. En el campo Name (situado en el grupo ID), cambia el nombre de Screen1 a BrowserScreen. Pulsa RETURN para ver el nombre actualizado en el Navegador.

  3. En el campo Title, cambia el valor a SimpleBrowser.

Definir las propiedades del TextField

El TextField es donde el usuario introduce el URL correspondiente a la página web que se mostrará en el visor.

../../_images/urlfield_inspector.png

  1. En el Navegador, selecciona el control TextField1 bajo BrowserScreen. El Inspector cambia para mostrar las propiedades del TextField.

  2. Cambia la propiedad Name de TextField1 a URLField.

  3. Cambia la propiedad InputType a URL. Esto mostrará un teclado específico para la introducción de URLs cuando el usuario haga tap sobre el campo de texto.

  4. Cambia la propiedad Text a https://wikipedia.org.

Definir las propiedades del Botón

Cuando ejecutes la app, se mostrará la página web cuando el usuario pulse sobre el botón.

../../_images/button_inspector.png

  1. En BrowserScreen, selecciona el control Button1. El Inspector cambia para mostrar las propiedades del Botón.

  2. En el campo Name, cambia name de Button1 a ShowButton.

  3. Proporciona una etiqueta al botón cambiando el campo Caption de Button a Show.

Definir las propiedades del HTMLViewer

El último cambio que has de realizar en la interfaz de usuario es el correspondiente al HTMLViewer.

../../_images/webviewer_inspector.png

  1. En BrowserScreen, selecciona el control HTMLViewer1. El Inspector cambia para mostrar las propiedades del Visor HTML.

  2. En el campo Name, cambia el nombre de HTMLViewer1 a WebViewer.

Añadir Código

Tu app está prácticamente completa. Ahora es el momento de añadir el código que indicará al Visor HTML (llamado WebViewer) la página web que ha de mostrar.

Sigue estos pasos para añadir el código:

  1. En BrowserScreen, haz doble clic en el control ShowButton. Está etiquetado como "Show".

../../_images/add_event_handler_dialog.png

  1. Aparecerá la ventana correspondiente an Add Event Handler. Los manejadores de evento tienen lugar cuando el usuario inicia una acción. En este caso cuando el usuario pulsa sobre un botón la app ejecutará cualquier código incluido en el manejador de evento Pressed. Selecciona Pressed en el listado de Event Handler y haz clic en OK. Observa que el Navegador se actualiza mostrando ahora el evento Pressed bajo el control ShowButton, además de que se muestra el Editor de Código asociado con dicho evento.

  2. Ahora has de obtener el URL introducido por el usuario. El valor introducido por el usuario en un TextField se almacena en la propiedad Text del TextField. Luego querrás que el WebViewer muestre la página web. Esto se lleva a cabo llamando al método LoadURL del control HTMLViewer y enviándole el URL introducido por el usuario. De modo que has de hacer todo esto en el código introducido en el Editor de Código. Empieza haciendo clic sobre el espacio en blanco bajo el nombre de evento Pressed y escribe a continuación este código (escríbelo en vez de copiarlo y pegarlo):

WebViewer.LoadURL(URLField.Text)

¡Eso es todo! Tu primera app está completa.

Guardar el Trabajo

Antes de continuar, guarda tu trabajo:

  1. Guarda el proyecto seleccionando File > Save As.

  2. Haz clic en Save.

Ejecutar el proyecto

  1. Haz clic en el botón Run en Xojo para ejecutar la app en el Emulador de Android.

  2. Teclea un URL (seguro, https) de tu elección (o bien utiliza el proporcionado por omisión) y haz clic en el botón Show.

  3. Verás la página web.

  4. Cuando hayas terminado de experimentar con la app Simple Browser, puedes salir del Emulador de Android y volver a Xojo.

Siguientes pasos

Esta Guía Rápida te ha introducido a Xojo y te ha mostrado como crear una app simple. A continuación, prueba el Tutorial Android que te guiará en la creación de una aplicación de Gestión de Tareas.

Para obtener más detalles, consulta las secciones Topics y API de la documentación.