Tutorial Android

Este Tutorial Android es una introducción al entorno de desarrollo Xojo y te guiará a través del desarrollo de una app Android real. Completarlo debería tomarte de 30 a 45 minutos. Te guiaremos en la creación de una app de Gestión de Tareas de principio a fin. Si eres un recién llegado al mundo de la programación y a Xojo, te recomendamos que completes en primer lugar Inicio Rápido Android.

Requerimientos de desarrollo Android

Para ejecutar, probar y depurar un proyecto Android Xojo necesita acceder al emulador Android que forma parte de Android Studio. Si aún no has descargado e instalado Android Studio, hazlo ahora antes de continuar con este tutorial.

Comenzamos

1. Ejecuta Xojo. Una vez haya terminado de cargar, aparecerá la ventana Project Chooser (Selector de Proyecto). Si Xojo ya está ejecutándose, selecciona File > New Project.

Xojo te permite crear diferentes tipos de apps (Desktop, Web, Consola, iOS y Android).

2. En este Tutorial vamos a crear una app Android, de modo que haz clic en Android.

Deberías ver ahora tres campos que requieren la introducción de valores: Application Name, Company Name y Application Identifier.

• Application Name: El nombre de tu app. Este será el nombre de archivo correspondiente a la app que se creará.

• Company Name: El nombre de tu empresa.

• Application Identifier: Un identificador único para esta app. Se rellenará automáticamente a partir de lo introducido en los campos Application y Company Name, pero puedes cambiarlo por cualquier otro que desees.

3. Introduce TaskManager como Application Name.

4. Haz clic en Create para abrir la ventana principal de Xojo (denominada Espacio de trabajo) donde diseñarás tu app.

El Espacio de Trabajo

Xojo abre el Espacio de trabajo con la Vista por omisión de la app seleccionada en el Navegador y mostrada en el Editor de Diseño.

• Navegador: El área en la parte superior izquierda muestra todos los elementos del proyecto. Por omisión verás Screen1 (seleccionada), el objeto App, el item para los iconos de la app (App Icon). Usas el Navegador para navegar por entre los elementos de tu proyecto.

• Editor de Diseño: El área central es el Editor de Diseño. Utilizas el Editor de Diseño para diseñar la interfaz de usuario para las pantallas de tu app. Muestra la pantalla y previsualiza el aspecto que tendrá la app cuando se ejecute sobre un dispositivo Android. En esta imagen la pantalla está vacía porque aun no se ha añadido ningún control de interfaz de usuario a ella desde la Librería.

• Library: El área de la derecha es la Librería y muestra los controles y elementos de interfaz de usuario que puedes añadir sobre la Pantalla o al proyecto. Diseñas las pantallas arrastrando los controles desde la Librería sobre la Pantalla. También puedes añadir un control a la pantalla haciendo doble clic sobre él. Puedes cambiar el modo en el que se muestran los controles en la Librería haciendo clic en el icono con la imagen de la rueda dentada y seleccionando un ajuste diferente.

Si la Librería no está visible, haz clic en el botón Librería en la barra de herramientas para mostrarla.

Inspector: El Inspector, no mostrado en la imagen anterior, te permite ver y cambiar las propiedades del control seleccionado. Este área del Espacio de trabajo es compartido con la Librería. Puedes mostrar el Inspector haciendo clic en el botón Inspector en la barra de herramientas. El Inspector muestra información sobre el item seleccionado en el Navegador o en el Editor. Los contenidos del Inspector cambian a medida que haces clic sobre diferentes ítems. Puedes cambiar un valor en el Inspector introduciendo un nuevo valor en el campo situado a la derecha de la etiqueta correspondiente a dicho campo.

Acerca de la app

En este tutorial crearás una app para gestionar tareas. Así que no es de extrañar que se llame Task Manager (Gestión de Tareas, en inglés). Una vez completada, la app te permitirá introducir tareas, editarlas, marcarlas como completadas (o incluso desmarcarlas en el caso de que no estén completadas), y también borrarlas.

Task manager

Para la app Task Manager, introducirás tareas en el campo de texto y haciendo tap en Add para añadirlas a la tabla. Puedes hacer tap sobre una tarea en concreto de la tabla para borrarla o marcarla como completada.

Task Manager utiliza estos controles:

Icon	Name	Description
	TextField	Se utiliza un control TextField para introducir texto. En este proyecto la tarea a añadir se introduce en un TextField en la parte superior de la pantalla.
	Button	Se utiliza un Botón para lanzar una acción. Este proyecto utiliza un Botón para añadir una tarea a la tabla.
	Table	Se utiliza una Tabla para mostrar una lista de datos. En este proyecto es la encargada de mostrar las tareas introducidas en el TextField.
	Label	Se utiliza una etiqueta para identificar un elemento de interfaz de usuario o proporcionar más información. En este proyecto identificará el control utilizado para marcar una tarea como completada.
	Switch	Se utiliza un Switch para indicar un valor en uno de los dos posibles estados como encendido o apagado. En este proyecto indicará si la tarea está completada o no.

Diseñando la Interfaz de Usuario

Xojo está mostrando Screen1 abierta en el Editor de Diseño. Ahora añadiremos los controles a la Pantalla y también los posicionaremos sobre ella.

Añadir un botón

Añade en primer lugar el Botón que se utilizará para añadir una tarea a la tabla.

1. En la Librería, haz clic en Button y arrástralo sobre la Pantalla de modo que quede en la parte superior derecha justo debajo de la Barra de Navegación.

2. Utiliza las guías de alineamiento para situarlo con el margen necesario entre la guía de alineamiento y el margen derecho de la Pantalla.

Añadir un campo de texto

El TextField es donde el usuario introducirá la Tarea que se añadirá a la lista.

1. En la Librería, haz clic en TextField y arrástralo sobre la Pantalla de modo que esté en la parte superior izquierda justo bajo la Barra de Navegación. A medida que arrastres observarás que las guías de alineamiento que ayudarán a alinear el TextField sobre el Botón tal y como se muestra a continuación.

2. Arrastra el manejador derecho del TextField para hacer que el control sea más ancho, hasta que alcances la guía de alineación izquierda del botón.

Añadir una Tabla

La Tabla muestra las tareas.

1. En la Librería, haz clic en el control Table y arrástralo al centro del Editor de Diseño bajo el botón y el TextField. A medida que arrastre la Tabla sobre la pantalla verás los indicadores de alineación que te ayudarán a posicionar el control. Suelta la Tabla cuando estés contento con su ubicación sobre la Pantalla.

2. Arrastra hacia abajo el manejador inferior de la Tabla para hacer que sea más larga. Deja de arrastrar cuando el margen inferior esté alineado con la parte inferior de la Pantalla:

El Diseño de Pantalla en este punto

La pantalla debería de tener un aspecto similar al siguiente tras haber añadido todos los controles:

Manejar diferentes tamaños de pantalla

Los dispositivos Android están disponibles en una amplia variedad de tamaños de pantalla. Querrás que tu interfaz de usuario tenga un buen aspecto en todos ellos. Además, el usuario puede rotar el dispositivo entre la orientación vertical y apaisada. Al hacerlo, querrás que tu interfaz de usuario se ajuste adecuadamente.

Puedes verlo cambiando el diseño de vertical a apaisado mediante los botones Landscape/Portrait en la barra de herramientas del Editor de Diseño:

Si no ves los botones Portrait/Landscape en la barra de herramientas del Editor de Diseño probablemente se deba a que tu ventana es demasiado pequeña como para mostrarlos. Puedes aumentar el tamaño de la ventana o hacer clic sobre el botón de Más elementos situado en el margen derecho de la barra de herramientas del Editor de Diseño.

1. Haz clic en el botón Landscape. Observa que los controles modifican su tamaño para ajustarse a la orientación landscape.

2. Haz clic en el botón Portrait para conmutar el Editor de Diseño de nuevo al modo de orientación vertical.

Afortunadamente esto es fácil de solucionar bloqueando los controles sobre los márgenes del diseño. Para ello, has de cambiar algunas propiedades de los controles.

Entender las properties

¿Qué es una propiedad?

Una propiedad es un atributo específico de un objeto. Por ejemplo, un botón tiene un ancho y por tanto tiene una propiedad Width. Cambiar los valores de la propiedad te permite cambiar el comportamiento del objeto. En este caso necesitas cambiar varias propiedades de bloqueo para los controles.

Usando el Inspector

Se utiliza el Inspector para cambiar las propiedades de los controles y de la pantalla. Comparte la misma área en la derecha del Espacio de Trabajo que el utilizado por la Librería.

1. Haz clic en el botón Inspector situado en la esquina superior derecha de la ventana (o pulsa ⌘-I en macOS o Ctrl-I en Windows y Linux) para acceder al Inspector.

2. En el diseño, haz clic sobre el botón para seleccionarlo.

3. En la sección Locking del Inspector, haz clic en el candado situado en el margen derecho para bloquear el margen derecho del botón sobre el margen derecho de la pantalla.

4. En esa misma sección, haz clic sobre el candado situado en el margen izquierdo para desbloquear el botón sobre el margen izquierdo de la pantalla. Esto lo mantendrá bloqueado sólo sobre el margen derecho. Las propiedades de bloqueo deberían de tener el siguiente aspecto:

   

5. En tu diseño, haz clic en el TextField para seleccionarlo.

6. En el Inspector, haz clic en el candado del margen derecho para bloquear el margen derecho del TextField sobre el margen derecho de la pantalla.

7. En el layout, haz clic sobre la Tabla para seleccionarla.

8. En esta ocasión queremos bloquear el control sobre los cuatro márgenes de la pantalla. En el Inspector, haz clic sobre ambos candados de los márgenes derecho e inferior.

9. Prueba a hace clic de nuevo en los botones Landscape y Portrait para ver como ahora los controles cambian su tamaño y posición automáticamente al tiempo que también cambian las dimensiones de la pantalla.

Cambiar más propiedades

Hay algunas propiedades adicionales que han de cambiarse. Has de:

• Cambiar el nombre de todos los controles (y la Pantalla) para que describan mejor su comportamiento y sea más sencillo referirse a ellos desde el código.

• Añadir una Etiqueta o Caption al Botón.

• Añadir una pista al TextField que ayude al usuario a saber qué ha de introducir.

Has de cambiar las propiedades Name y Title de Screen1:

1. En el Editor de Diseño haz clic en cualquier parte del fondo para seleccionar la Pantalla (en vez de un control). El Inspector mostrará ahora las propiedades correspondientes a la Pantalla.

2. Cambia la propiedad Name de Screen1 a TaskManagerScreen. Pulsa Return para ver el cambio de nombre en el Navegador.

3. Cambia la propiedad Title de Untitled a Task Manager. Pulsa Return para ver el cambio de nombre en la Barra de Navegación de la Pantalla.

Cambiar las propiedades de botón

En el caso del botón tendrás que cambiar las propiedades Name y Caption.

1. Haz clic en el Botón para seleccionarlo. El Inspector mostrará ahora sus propiedades.

2. En el Inspector, cambia la propiedad Name de Button1 a AddButton. Pulsa Return para ver el cambio de nombre en el Navegador.

3. Cambia la propiedad Caption de Button a Add.

Cambiar las propiedades de TextField

El TextField es donde el usuario introduce la tarea que se ha de añadir a la Tabla. Querrás cambiar las propiedades Name, Text y Hint.

1. Haz clic en el TextField para seleccionarlo de modo que sus propiedades se muestren en el Inspector.

2. Cambia la propiedad Name de TextField1 a TaskField. Pulsa Return para ver el cambio de nombre en el Navegador.

3. Cambia la propiedad Hint a Enter a task.

Cambiar las propiedades de Tabla

La tabla muestra las tareas y también mostrará una marca de verificación junto a aquellas que se hayan marcado como completadas. Vamos a cambiar la propiedad Name a algo que sea más descriptivo.

1. Haz clic en la table para seleccionarla y que muestre sus propiedades en el Inspector.

2. Cambia la propiedad Name de Table1 a TaskTable. Pulsa Return para ver el cambio de nombre en el Navegador.

El diseño final de TaskManager

Este es el aspecto que debería de tener ahora el diseño tras haber ajustado todas las propiedades:

Añadir una pantalla de edición

Queremos que el usuario pueda cambiar el texto de la tarea, marcarla como completada o incluso borrarla. Para ello necesitarás crear otra pantalla que aparezca cuando el usuario haga tap sobre una tarea en TaskTable. Para ello usarás el Editor de Diseño, la Librería y el Inspector tal y como hiciste al crear la pantalla de TaskManagerScreen:

1. Selecciona Insert > Screen.

2. Haz clic en el botón Library de la barra de herramientas para cambiar al panel de Librería.

3. Desde la Librería, arrastra un TextField sobre la parte superior de la pantalla. Cambia su tamaño para que cubra todo el ancho y bloquéalo sobre el margen derecho de la pantalla.

4. Arrastra un control Label bajo el TextField.

5. Haz clic en el icono de Lápiz situado en la etiqueta para editar el texto mostrado.

6. Introduce Completed como el texto a mostrar por la etiqueta.

7. Arrastra un control Switch a la derecha de la etiqueta Completed.

8. Arrastra un Botón sobre la parte inferior del diseño y ajusta su tamaño para que complete todo el ancho. Este será el botón de Borrar.

9. Haz clic en el Botón Inspector en la barra de herramientas para acceder al panel Inspector.

10. En el Inspector, en la sección Locking, desactiva el candado superior y activa el candado inferior para bloquear el botón sobre el margen inferior de la pantalla.

11. En el Navegador, haz clic en Screen1 para seleccionarla.

12. En el Inspector, cambia la propiedad Name de la pantalla a TaskEditorScreen.

13. Cambia la propiedad Title de la Pantalla a Edit Task.

14. Haz clic en el control TextField para seleccionarlo.

15. En el Inspector, cambia la propiedad Name del TextField a TaskField.

16. Haz clic en el control Switch para seleccionarlo.

17. Cambia la propiedad name del control Switch a Completed.

18. Haz clic en el Botón añadido para seleccionarlo.

19. Cambia la propiedad Name del Botón a DeleteButton.

20. Cambia la propiedad Caption a Delete.

Este es el aspecto que tendrá la pantalla TaskEditor cuando hayas finalizado:

Ejecutar la app

La interfaz de usuario de la aplicación está completada, de modo que es momento de probarla. Pero antes de ello, deberías de guardar tu trabajo.

1. Guarda el proyecto seleccionando File > Save.

Note

Esto significa seleccionar Save en el menú File y es el modo estándar de seleccionar elementos de menú tal y como aparece anotado en la documentación de Xojo.

2. Nombra el proyecto como AndroidTaskManager y haz clic en Save.

Ahora puedes probar tu app:

1. Haz clic en el botón Run en la barra de herramientas para ejecutar el proyecto. Este creará tu app y la ejecutará en el Emulador de Android. Si es la primera vez que estás ejecutando el Emulador Android entonces tomará algunos minutos hasta que se complete el inicio.

2. Cuando aparezca la app en el Emulador de Android, podrás interactuar con los botones haciendo clic sobre ellos o puedes escribir en el TextFied.

3. Cuando hayas terminado, vuelve a Xojo y haz clic en el botón Stop.

Por supuesto, Task Manager aun no hace nada. Incluso no puedes ir a la pantalla TaskEditor que has creado. Para ello tendrás que añadir algo de código, y que es lo que haremos a continuación.

Añadir código

Para completar Task Manager, tendrás que:

• Hacer que el botón Add añada una tarea.

• Hacer que el botón Add sólo esté activo si el usuario ha introducido texto en el TaskField.

• Permitir que el usuario haga tap sobre una fila para editar una tarea, marcarla como completada o borrarla, utilizando para ello la pantalla TaskEditor creada anteriormente.

Añadir código al botón Add

El botón Add debería crear una nueva fila en la tabla TaskTable con el texto introducido por el usuario en el control TaskField:

1. En el Navegador, haz clic en TaskManagerScreen para seleccionarlo.

2. Haz doble-clic en AddButton. Aparecerá el cuadro de diálogo correspondiente a Add Event Handler.

3. El evento Pressed tiene lugar cuando el usuario pulsa sobre el botón. Ya está seleccionado de modo que sólo has de hacer clic sobre el botón OK. Se mostrará el Editor de Código.

4. Has de escribir una línea de código que añada una nueva fila a TaskTable y le asigne el texto de TaskField. Introduce el siguiente código:

TaskTable.AddRow(TaskField.Text)

AddRow es un método disponible en el control AndroidMobileTable añadido en el layout (y nombrado como "TaskTable"). Este se encarga de crear una nueva fila con el texto recibido. El texto pasado en este caso como parámetro es la propiedad Text del control TaskField.

5. Para evitar que el usuario cree accidentalmente tareas duplicadas, el control TaskField debería de vaciarse cuando el usuario pulse el botón Add. Añadamos otra línea de código para ello:

TaskField.Text = ""

Esta línea se encarga de definir la propiedad Text a una cadena vacía de texto.

Genial. Vamos a probarlo.

1. Haz clic en el botón Run en la barra de herramientas principal.

Note

En el supuesto de que hayas tecleado mal algo aparecerá un panel de errores en la parte inferior de la ventana correspondiente al Espacio de Trabajo de Xojo, en vez de ejecutarse el Emulador de Android. En el caso de que esto ocurra, echa un vistazo a las líneas con los mensajes de error y compáralas con el código de las anteriores instrucciones. Probablemente hayas introducido mal algún carácter o similar. Si no puedes descubrir cuál es el problema, dirígete al foro de Xojo o contacta con nosotros vía email.

Tu aplicación debería de estar ejecutándose ahora de nuevo en el Emulador de Android.

2. Escribe una tarea en el TaskField y pulsa el botón Add para añadirla a la tabla. Introduce unas cuantas tareas si lo deseas.

3. Cuando hayas terminado, vuelve a Xojo y pulsa el botón Stop tal y como hiciste la vez anterior.

Activar/desactivar el botón Add

No querrás que el usuario añada accidentalmente una tarea vacía. Para evitarlo tendrás que desactivar el botón Add y activarlo cuando el usuario haya introducido texto en el TaskField, desactivarlo si vacía el TaskField de texto y desactivarlo después de que pulse el botón Add; dado que dicha acción también vacía el contenido del TaskField.

1. En el Navegador, haz clic en TaskManagerScreen para seleccionarlo.

2. Haz clic en el botón Add del diseño.

3. En el Inspector, desactiva la propiedad Enabled de AddButton. Observa que el botón aparece ahora desactivado.

4. En el Editor de Diseño, haz doble clic en el TaskField y añade el manejador de evento correspondiente a TextChanged.

5. Añade el siguiente código en el evento TextChanged:

If Me.Text.IsEmpty Then
  AddButton.Enabled = False
Else
  AddButton.Enabled = True
End If

Este código comprueba si la propiedad Text de TaskField está vacía. Me en este caso se refiere a TaskField, dado que este evento es parte de dicho control. Si la propiedad Text está vacía, entonces la propiedad Enabled de AddButton se define a False. Si no está vacía, se ajusta a True.

Dado que el botón Add vacía el TaskField, tendrás que añadir una línea de código a su evento Pressed para que lo desactive una vez que el usuario lo haya pulsado:

1. En el Navegador, haz clic en TaskManagerScreen para seleccionarlo.

2. En el Editor de Diseño, haz doble clic en AddButton para ir a su manejador de evento Pressed.

3. En el evento Pressed, añade la siguiente línea de código para desactivar AddButton:

Me.Enabled = False

A continuación, querrás posibilitar que el usuario edite las tareas usando la pantalla TaskEditorScreen creada.

Vamos a por ello.

Permitir la edición de tareas

Ahora que has creado una pantalla para editar tareas vamos a crear un método al que pasaremos la información de la tarea y se encargará de mostrar la pantalla TaskEditorScreen. Cuando terminemos, TaskManagerScreen mostrará una marca de verificación a la derecha de TaskTable para aquellas tareas que hayan sido completadas.

La marca de verificación aparece porque AndroidMobileTable permite incluir una imagen a la derecha o izquierda de una fila. El código que escribiremos mostrará una imagen de una marga de verificación cuando se haya marcado la tarea como completada, y no mostrará ninguna imagen en caso contrario. Afortunadamente, Xojo proporciona un modo de mostrar cualquiera de las imágenes incluidas en el propio Android, una de las cuales es una marca de verificación. Añadamos un nuevo método para ello:

1. En el Navegador, haz clic en TaskEditorScreen para seleccionarlo.

2. Selecciona Insert > Method.

3. En el Inspector, cambia el nombre del método a UpdateControls.

4. Como parámetros, introduce theTask As String, complete As Boolean.

5. Asegúrate de que su Scope esté definido a Public.

6. En el Editor de Código, añade las siguientes dos líneas:

TaskField.Text = theTask
Completed.Value = complete

Cuando llames a este método le pasarás la tarea y el estado de completo de modo que pueda ajustar los controles TaskField y Completed.

Debería llamarse al método TaskEditorScreen.UpdateControls cuando el usuario haga tap sobre una tarea en TasksTable. Una vez que hayas pasado los datos a TaskEditorScreen, el siguiente paso será mostrarlo.

1. En el Navegador, haz clic en TaskManagerScreen para seleccionarlo.

2. En el Editor de diseño, haz doble clic en TaskTable. Aparecerá el cuadro de diálogo correspondiente a Add Event Handler.

3. Haz clic en el evento SelectionChanged y haz clic en OK.

En primer lugar, el código necesita determinar si se trata de una tarea que se ha completado o no. Dado que la imagen de la marca de verificación aparecerá en cualquiera de las filas que estén completadas, su presencia o ausencia nos indicará si se ha completado la tarea o no. Introduce el siguiente código para determinar si se ha completado o no la tarea:

Var complete As Boolean
If Me.RowPictureAt(Me.SelectedRowIndex, True) <> Nil Then
  complete = True
End If

Este código crea una variable denominada complete de tipo Booleano ajustada a False por defecto. A continuación llama al método RowPictureAt de TaskTable, pasándole el número de la fila correspondiente a la fila seleccionada (Me.SelectedRowIndex) y True como segundo parámetro para indicar si la imagen se mostrará a la izquierda o derecha (True indica derecha). Si hay una imagen a la derecha para dicha fila, entonces la imagen no es Nil y la variable complete estará a True. Entonces podemos pasar a continuación este valor junto con la tarea propiamente dicha al método UpdateControls. Vamos a ello:

4. Pulsa Return para crear una nueva línea y añade el siguiente código para llamar al método UpdateControls y mostrar a continuación la pantalla TaskEditorScreen:

TaskEditorScreen.UpdateControls(Me.SelectedRowText, complete)
TaskEditorScreen.Show

Este código llama al método UpdateControls pasándole el texto de la fila sobre la cual el usuario ha hecho tap (Me.SelectedRowText), así como la variable complete que indica el estado de la tarea. La segunda línea muestra la pantalla TaskEditorScreen.

Vamos a probarlo.

5. Haz clic en el botón Run.

6. Añade una tarea y haz clic sobre ella. Aparecerá la pantalla TaskEditorScreen. Incluso puedes hacer clic en el botón Atrás de Android para volver a la pantalla TaskManagerScreen y volver a hacer clic en otra fila. Lo que aun no puedes hacer es guardar los cambios realizados en esta pantalla, así que vamos a añadir dicha capacidad a continuación:

7. En Xojo, haz clic en el botón Stop.

8. En el Navegador, haz clic en TaskManagerScreen para seleccionarlo.

9. Selecciona Insert > Method para crear un nuevo método.

10. Define el campo Name del nuevo método a UpdateControls. Al igual que TaskEditorScreen.UpdateControls, este método enviará los cambios desde TaskEditorScreen a TaskManagerScreen.

11. Define el campo parameters a los mismos utilizados con anterioridad, theTask As String, complete As Boolean.

12. Asegúrate de que su Scope esté definido a Public.

13. Añade el siguiente código:

TaskTable.SelectedRowText = theTask
If complete Then
  TaskTable.RowPictureAt(TaskTable.SelectedRowIndex, True) = Picture.SystemImage("check", Picture.SystemImageSizes.dp18)
Else
  TaskTable.RowPictureAt(TaskTable.SelectedRowIndex, True) = Nil
End If

Este código se asegura en primer lugar de que sea una fila seleccionada. Si el usuario ha borrado la fila entonces no lo estará. A continuación define el texto de la nueva fila sobre la cual ha hecho tap el usuario en el parámetro TheTask. A continuación examina el parámetro complete. Si está definido a True, llama de nuevo al método RowPictureAt para la fila seleccionada para definir la imagen de dicha fila a una marca de verificación. Luego llama a Picture.SystemImage para obtener la imagen correspondiente a la marca de verificación desde un amplio conjunto de imágenes proporcionadas por Xojo. Una de ellas se llama "check". La última parte (Picture.SystemImageSizes.dp18) indica el tamaño deseado para la imagen. Si complete está definido a False, entonces la imagen de la fila se ajustará a Nil.

Ahora sólo necesitamos llamar al nuevo método para actualizar TaskTable.

1. En el Navegador, haz clic en TaskEditorScreen para seleccionarlo.

2. Elige Insert > Event Handler.

3. Selecciona el evento Closing y haz clic en OK.

4. Introduce el siguiente código para llamar al nuevo método UpdateControls:

TaskManagerScreen.UpdateControls(TaskField.Text, Completed.Value)

Cuando el usuario hace tap en el botón Atrás para volver al listado de tareas, se lanzará el evento Closing porque se está cerrando la pantalla TaskEditorScreen. El código se encarga de llamar a UpdateControls pasándole el texto de TaskField y el Valor del control Switch Completed.

Ahora puedes editar la tarea y su estado de completado en la pantalla TaskEditorScreen. Probémoslo.

18. Haz clic en el botón Run.

19. Introduce una tarea y haz clic sobre ella. Haz algunos cambios y haz clic sobre el botón Atrás.

20. Cuando hayas terminado con las pruebas regresa a Xojo y haz clic sobre el botón Stop.

Borrar Tareas

El último paso consiste en hacer que funcione el botón Delete.

1. En el Navegador, haz clic en TaskManagerScreen para seleccionarlo.

2. Añade un nuevo método llamado DeleteTask.

3. Introduce el siguiente código:

TaskTable.RemoveRowAt(TaskTable.SelectedRowIndex)

Cuando se llama a este método se encargará de eliminar la fila sobre la cual el usuario ha hecho tap, llamando para ello al método RemoveRowAt de la tabla y pasándole el valor obtenido al llamar al método SelectedRowIndex de la tabla (es decir, el número de la fila de la tabla sobre la cual ha hecho tap el usuario). Por último necesitarás llamar a este método.

4. En el Navegador, haz clic en TaskEditorScreen para seleccionarlo.

5. Haz doble clic en el botón Delete y añade el evento Pressed.

6. Añade el siguiente código:

TaskManagerScreen.DeleteTask
Close

Cuando el usuario pulsa el botón Delete el método DeleteTask borrará la fila en TaskTable. El método Close cerrará a continuación la pantalla TaskEditorScreen.

7. Ejecuta tu proyecto y pruébalo.

Note

Xojo también soporta ejecutar y depurar las apps Android directamente en tu teléfono o tableta compatibles.

¡Ups!

Ha ocurrido un error. ¿Qué ha pasado? El Depurador de Xojo está indicando que hay un problema con el método TaskManager.UpdateControls. Recuerda que en tu evento Closing de TaskEditorScreen, el código invoca este método. El problema se encuentra en la primera línea. Está intentando definir el texto de la fila sobre la cual ha hecho tap el usuario con el texto contenido en el control TaskField de la pantalla TaskEditorScreen. El problema es que justo has borrado dicha fila. De modo que no se puede actualizar dicha fila. En el panel Variables del Depurador puedes ver que ha tenido lugar una Excepción. En concreto se trata de una excepción OutOfBoundsException. Una excepción tiene lugar cuando acontece algo no esperado. En este caso ha tenido lugar porque el código está intentando asignar un valor a una fila que ya no existe. La fila está fuera de los límites. Afortunadamente hay una solución sencilla para este problema. Tu código tan sólo ha de asegurarse de que el número de fila sea válido antes de intentar acceder a ella:

1. En el Depurador de Xojo, haz clic en el botón Stop.

2. En el Navegador, haz clic en el método TaskManager.UpdateControls para seleccionarlo.

3. En el código, añade una instrucción If en torno al código. Cuando hayas finalizado, el método UpdateControls tendrá el siguiente aspecto:

If TaskTable.SelectedRowIndex > -1 Then
TaskTable.SelectedRowText = theTask
  If complete Then
    TaskTable.RowPictureAt(TaskTable.SelectedRowIndex, True) = Picture.SystemImage("check", Picture.SystemImageSizes.dp18)
  Else
    TaskTable.RowPictureAt(TaskTable.SelectedRowIndex, True) = Nil
  End If
End If

La instrucción If comprueba en primer lugar si el valor de SelectedRowIndex correspondiente a la tabla TaskTable (es decir, el número de la fila sobre la cual ha hecho tap el usuario) es mayor que -1. La primera fila es 0. Sólo será -1 si no hay filas. De modo que siempre que haya una fila seleccionada, tu código intentará actualizar ahora el control TaskTable.

11. Ejecuta de nuevo el proyecto, crea una tarea y bórrala. No hay más errores. ¡Enhorabuena!

Desplegar la app

Las apps Android se despliegan publicándolas en la Google Play Store. Puedes proporcionar la app al público en general o sólo a tu organización.

Siguientes pasos

Enhorabuena, has completado con éxito el Tutorial de Android y ahora tienes una app completamente funcional. Has aprendido mucho en este tutorial. Seguramente te preguntes si podrás recordarlo todo. La buena noticia es que no tendrás que hacerlo. Xojo incluye documentación que te ayudará en cada paso de tu camino. La sección Topics te proporcionará una visión general sobre las diferentes partes de Xojo y de todos los controls e items que puedes usar en tus proyectos. La sección API te proporciona todos los detalles sobre controles concretos. Una vez que sientas que has revisado suficiente documentación, escoge un proyecto pequeño que quieras afrontar y que te beneficie a ti o a otros. El mejor modo de aprender es tener una razón para aprender. Un pequeño proyecto te proporcionará exactamente eso. Cuando necesites ayuda adicional, contacta con nosotros o bien dirígete a la gran comunidad del foro.

Descarga el proyecto TaskManager completado.

Feedback

¿Cuál es tu opinión sobre este tutorial? Apreciamos tus comentarios, contacta con nosotros.