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

<img src="/getting_started/quickstarts/images/android/completed_app.png" class="align-center" alt="image" />

<div id="android_quickstart_es.ios_development_requirements">

Requerimientos de Desarrollo Android --------------------------------

</div>

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</topics/android/installing_android_studio>` antes de continuar con la Guía Rápida.

<div class="important">

<div class="title">

Important

</div>

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.

</div>

# Atajos

Proporcionamos un [vídeo](https://youtu.be/toOY2Dk1iss) 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</getting_started/quickstarts/examples/simplebrowser_android.xojo_binary_project.tar.gz>` 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.

<img src="/getting_started/quickstarts/images/android/projectchooser.png" class="align-center" alt="image" />

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

3.  Introduce `SimpleBrowser` como el Nombre de la Aplicación (Application Name).
4.  Haz clic en **Create** para abrir el Espacio de Trabajo, la ventana principal de Xojo, donde comenzarás a diseñar tu app.

<div id="android_quickstart_es.workspace">

Espacio de Trabajo ---------

</div>

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

<img src="/getting_started/quickstarts/images/android/ide_for_docs_android.png" class="align-center" alt="image" />

# Crear un Navegador Web simple

<div id="android_quickstart_es.overview">

Visión General \*\*\*\*\*\*\*\*

</div>

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.

<div id="android_quickstart_es.building_the_user_interface">

Crear la Interfaz de Usuario \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

</div>

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.

<img src="/getting_started/quickstarts/images/android/drag_first_control_to_layout.png" class="align-center" alt="image" />

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

<img src="/getting_started/quickstarts/images/android/drag_second_control_to_layout.png" class="align-center" alt="image" />

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

<img src="/getting_started/quickstarts/images/android/drag_third_control_to_layout.png" class="align-center" alt="image" />

4.  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:

<img src="/getting_started/quickstarts/images/android/finished_layout.png" class="align-center" alt="image" />

<div id="android_quickstart_es.setting_the_properties">

Ajustar las propiedades \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

</div>

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.

<div id="android_quickstart_es.setting_the_properties_for_the_screen">

Definir las propiedades para la pantalla ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

</div>

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

<img src="/getting_started/quickstarts/images/android/inspector_browserscreen.png" class="align-center" alt="image" />

2.  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.
3.  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.
4.  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.

<img src="/getting_started/quickstarts/images/android/urlfield_inspector.png" class="align-center" alt="image" />

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.

<img src="/getting_started/quickstarts/images/android/button_inspector.png" class="align-center" alt="image" />

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.

<img src="/getting_started/quickstarts/images/android/webviewer_inspector.png" class="align-center" alt="image" />

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

<div id="android_quickstart_es.adding_code">

Añadir Código \*\*\*\*\*\*\*\*\*\*\*

</div>

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

<img src="/getting_started/quickstarts/images/android/add_event_handler_dialog.png" class="align-center" alt="image" />

2.  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.
3.  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):

``` xojo
WebViewer.LoadURL(URLField.Text)
```

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

<div id="android_quickstart_es.saving_your_work">

Guardar el Trabajo \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

</div>

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.

<div id="android_quickstart_es.what's_next">

Siguientes pasos -----------

</div>

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</getting_started/tutorials/android_tutorial>` 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.