Guardando información en la memoria del dispositivo

Ya hemos visto que la información que guardamos en variables o listas se pierde cuando nuestro programa termina o apagamos nuestro dispositivo. Ahora vamos a aprender a solucionar este problema guardando nuestra información en una base de datos.

 Introducción

Ya hemos visto que la información que guardamos en variables o listas se pierde cuando nuestro programa termina o apagamos nuestro dispositivo. Ahora vamos a aprender a solucionar este problema guardando nuestra información en una base de datos.
Las bases de datos son una herramienta muy importante que usan los ordenadores para almacenar todo tipo de información. Todos los servicios que usas habitualmente en Internet (Facebook, Twitter, Youtube, Google, Whatsapp, Messenger, etc) usan bases de datos. Prácticamente todas las aplicaciones (herramientas, videojuegos, correo electrónico, etc.) usan bases de datos. Tu propio dispositivo móvil usa bases de datos para guardar la información de tus contactos, las llamadas que has hecho, los sms que envías y recibes, etc.
Una base de datos es un archivo especial donde se guarda la información de forma estructurada para que esté siempre disponible para tu programa. Cuando guardamos información dentro de una base de datos esta información se ordena automáticamente usando una clave o índice.
Imagina la base de datos de llamadas de una empresa de telefonía móvil. Dentro de esta base de datos se guardan miles de llamadas cada día incluyendo información del cliente, duración de la llamada, localización, terminal desde el que se llama, etc. Con el paso del tiempo la base de datos va guardando millones de registros y no para de crecer. ¡Imagina cuántos datos se guardan pasados veinte años!
Buscar información dentro de una base de datos tan grande se convierte en un auténtico problema, por esta razón las bases de datos usan claves o índices.
Una clave o índice es una forma de ordenar automáticamente la información de una base de datos de tal manera que sea mucho más eficiente y rápido buscar un dato. Por ejemplo, la base de datos de llamadas tendría un índice que sería el número de teléfono del cliente.
Usando este índice podemos buscar un número de teléfono en concreto en un instante. Otro índice puede ser la fecha de la llamada, de esta forma podemos buscar una llamada en una fecha en concreto también en un instante.
Imagina un diccionario en papel con todas las palabras del idioma español pero desordenadas. Para buscar el significado de una palabra en concreto tendrías que ir palabra por palabra, página por página buscando la palabra que necesitas. ¿Te imaginas cuánto tiempo tardarías en encontrarla? Para solucionar este problema los diccionarios están ordenados por orden alfabético. Sólo tienes que buscar en el índice la primera letra de la palabra que buscas y saltar directamente a la página apropiada, después buscas la segunda letra de la palabra, etc. hasta encontrar lo que buscas. Gracias al índice puedes buscar una palabra en pocos segundos. Los índices de las bases de datos funcionan igual.
AppInventor nos permite crear nuestra propia base de datos y usarla de una forma muy sencilla utilizando un componente llamado TinyDB (Tiny = Pequeña, DB = DataBase = Base de datos) (pequeña base de datos). Vamos a aprender a usarla con tres ejemplos: en el primero la usaremos para guardar variables, en el segundo listas y en el último ejemplo para guardar un canvas con nuestros dibujos.
¡Ojo! AppInventor no nos permite trabajar con bases de datos si estamos conectados al Editor de bloques directamente. Para poder trabajar con la base de datos tenemos que instalar nuestro programa en el dispositivo. Tenlo en cuenta porque para que funcionen los siguientes ejemplos tendrás que instalar los programas en tu dispositivo.

 Guardando variables

Con este ejemplo vamos a aprender a guardar y a recuperar una variable de una base de datos. Verás que al cerrar nuestro programa y volver a abrirlo, podemos recuperar este dato.
Crea un proyecto nuevo y llámalo: "guardar_variables"
Añade a tu programa un componente textbox.
Añade un componente HorizontalArragement y mete dentro dos botones.
Al primer botón llámalo boton_guardar, al segundo llámalo boton_recuperar. Añade debajo una etiqueta y borra la propiedad text.
Añade por último un componente TinyDB que encontrarás dentro de Basic. Vamos al Editor de bloques.
Coge los evento .Click de los dos botones y ponlos en tu programa.
Coge el procedimiento "call TinyDB.StoreValue" (guardar valor) y ponlo dentro del evento boton_guardar.Click
Verás que este procedimiento espera que le demos dos datos (tag y valueToStore)
El primer valor tag (etiqueta) corresponde a la palabra clave que vamos a usar para almacenar la información y poder recuperarla más tarde. No confundas esta etiqueta con el componente etiqueta que usamos para mostrar información en la pantalla.
Crea un bloque de texto y cambia el texto por: "mi_tag". Esta será la etiqueta que vamos a usar. Pégalo en el espacio tag.
El valor valueToStore corresponde al dato que queremos guardar que puede ser un texto, un número, un valor booleano, una lista, etc.
Como el valor que queremos guardar está en el textbox. Pega un bloque TextBox.Text en el espacio valueToStore.
Así de sencillo es guardar un dato en nuestra base de datos. Vamos a aprender ahora cómo recuperarlo.
Para recuperar un dato de nuestra base de datos usamos un bloque TinyDB.GetValue. Este bloque espera que le digamos cual es la etiqueta (tag) que queremos buscar. Al encontrarla, si existe, este bloque nos devolverá el valor que guardamos antes.
En nuestro caso vamos a buscar la etiqueta "mi_tag" que usamos antes, por lo tanto, este bloque nos va a devolver un texto que fue el que el usuario puso en el textbox. Al devolvernos un texto, podemos usarlo directamente para cambiar el textbox. Vamos a ver cómo hacerlo.
10 Coge un bloque "set textbox.Text" y ponlo dentro del evento boton_recuperar.Click.
11 Coge un bloque TinyDB.GetValue (recuperar valor) y pégalo al bloque anterior.
12 Por último crea otro bloque de texto, cambia el texto por "mi_tag" y pégalo en el espacio tag
13 Tu programa tiene que quedar así:

Recuerda que los programas que usen el componente TinyDB únicamente funcionarán si los instalas en tu dispositivo. Hazlo ahora.
Verás que al probar tu programa puedes cambiar el valor del textbox, guardarlo y volver a recuperarlo aunque salgas de tu programa o apagues tu dispositivo.

 Guardando listas

Para el siguiente ejemplo vamos a usar una lista dinámica tal y como hemos aprendido antes. En este caso vamos a crear una agenda donde guardar tareas que queremos recordar.
Crea un nuevo proyecto y llámalo "guardar_listas"
Añade una etiqueta y cambia el texto por "Mi lista de tareas"
Añade un componente HorizontalArragement y mete dentro en este orden y de izquierda a derecha: Un componente textbox. Cambia la propiedad Hint (pista) a "nueva tarea"
Un botón. Cambia su nombre por boton_anadir y el texto por "añadir"
Un componente ListPicker. Cambia su nombre por listpicker_borrar y su texto por "borrar"
Fuera del componente HorizontalArragement y por debajo añade una etiqueta y cambia su nombre por etiqueta_lista. Borra su propiedad Text. Puedes hacer el tamaño del font más grande para que se vea mejor.
Finalmente añade un componente TinyDB.
Vamos al Editor de bloques.
Ya hemos visto que para añadir datos a una base de datos y poder recuperar esta información, después usamos un tag (etiqueta). Como siempre vamos a usar la misma para este ejemplo, vamos a crear una variable.
Crea una variable de texto y llámala tag. Cambia el texto por: "mi_tag".
Vamos a crear ahora nuestra lista.
10 Crea una nueva variable y llámala lista_tareas.
11 Coge un procedimiento "make a list" y pégalo a la variable que acabas de crear. Recuerda que así se crea una nueva lista.
Cuando hacemos aplicaciones que guardan información en una base de datos lo lógico es comprobar nada más empezar qué datos tenemos guardados. En nuestro caso al arrancar la aplicación lo primero que tenemos que hacer es comprobar qué tareas tenemos guardadas.
12 Coge el evento Screen.Initialize.
Recuerda que este evento se activa nada más arrancar tu aplicación.
Puede que al arrancar nuestro programa no encontremos ningún dato guardado. Esto puede ocurrir, por ejemplo, la primera vez que arrancamos nuestra aplicación cuando todavía no hemos añadido ninguna tarea. Es importante tener esto en cuenta y poder controlarlo así que lo primero que vamos a hacer es comprobar si tenemos o no datos.
13 Coge un bloque "if then-do" de la categoría Control y ponlo dentro de este evento. Crea un bloque Logic not. y pégalo en el espacio test.
14 Crea un bloque text / is empty y pégalo al bloque not.
15 Ahora coge un bloque "TinyDB.GetValue" y pégalo al bloque anterior.
16 Por último coge nuestra variable tag y pégala también al bloque anterior. Tiene que quedar así:

Lo que hemos hecho es lo siguiente:
En primer lugar este bloque busca en la base de datos algún dato guardado con nuestra etiqueta "mi_tag". Lo siguiente que hacemos es comprobar si hemos encontrado algo o no. La forma de comprobarlo es mirar si lo que nos devuelve es un texto o lo que nos devuelve está vacío. Si no está vacío entonces recuperamos la información en el espacio "then-do".
Vamos a ver cómo.
17 Coge un bloque "set global lista_tareas" y ponlo en el espacio "then-do"
18 Ahora duplica el bloque "call TinyDB.Getvalue" que hemos usado antes y pégalo al bloque "set global lista_tareas" que acabamos de poner.
Haciendo esto recuperamos los datos que tenemos guardados en la base de datos y se lo asignamos a nuestra lista lista_tareas.
Como hemos comprobado antes que los datos existen ya no tendremos problemas. De lo contrario, si no hubiésemos hecho la comprobación podríamos cometer un error.
Fíjate también que nuestra variable lista_tareas corresponde a una lista. Por lo tanto, asumimos que los datos que nos devolverá el procedimiento TinyDB.GetValue nos devolverá una lista también.
19 Vamos a ver cómo añadir datos en nuestra base de datos. Coge el evento boton_anadir.Click
Sólo queremos añadir un dato a la base de datos si el usuario ha escrito algo en el textbox. De lo contrarío estaríamos añadiendo datos en blanco. Así que en primer lugar vamos a hacer una comprobación.
20 Coge otro bloque "if then-do" y ponlo dentro del evento.
21 Crea un bloque Logic not. y pégalo en el espacio test.
22 Crea un bloque text / is text empty? y pégalo al bloque not.
23 En este caso queremos comprobar que el campo textbox tenga algo escrito así que coge un bloque "TextBox.Text" y pégalo en el espacio test del bloque "is text empty?"
Si el usuario ha escrito algo entonces activamos el espacio then-do. Si no ha escrito nada, no hacemos nada.
24 Primero vamos a añadir lo que el usuario haya escrito a nuestra lista lista_tareas. Coge un bloque "add items to list" y ponlo en el espacio then-do
25 En el espacio list ponemos nuestra lista lista_tareas
26 Y en el espacio item ponemos el texto del usuario que está en el bloque Textbox.Text
Ahora sólo nos queda coger toda nuestra lista y guardarla en la base de datos.
27 Coge un procedimiento "call TinyDB.StoreValue" y ponlo debajo.
28 En el campo tag usamos nuestra variable "global tag".
29 En el campo valueToStore pondremos nuestra lista "global lista_tareas"
Con esto estamos cogiendo toda nuestra tabla y guardándola en la base de datos con la etiqueta "mi_tag"
30 Por último limpiamos el campo textbox con un bloque "set textbox1.Text" y le pegamos un bloque de texto en blanco.
Ya tenemos preparados los eventos para recuperar y guardar nuestra tabla en la base de datos. Vamos a ver cómo borrar datos. En este caso vamos a usar el componente ListPicker.
31 Coge el evento ListPicker_borrar.BeforePicking. Recuerda que con este evento vamos a preparar el evento ListPicker con los datos que queremos que muestre. Como lo que queremos ver es nuestra lista haremos lo siguiente:
32 Coge un bloque ListPicker_borrar.Elements y pégale nuestra lista "global lista_tareas".
33 Coge ahora con el evento ListPicker_borrar.AfterPicking que se activa cuando el usuario haya elegido un elemento de la lista. En este caso vamos a borrar la tarea que haya elegido.
Lo primero es borrarlo de nuestra lista.
34 Coge un procedimiento "remove list item" (borrar elemento de lista) y ponlo dentro del evento. En el campo list ponemos nuestra lista "get global lista_tareas"
35 Y en el campo index pondremos el bloque ListPicker_borrar.SelectionIndex.
Recuerda que el bloque ListPicker_borrar.SelectionIndex nos dice cual es el índice (index) del elemento de la lista que el usuario ha elegido. Con esto lo borramos de la lista. Sólo nos queda volver a guardar nuestra lista en la base de datos.
36 Duplica el bloque "call TinyDB.StoreValue" que usamos en el evento boton_añadir.Click. y ponlo debajo.
¿CÓMO FUNCIONA?
Recuerda que cuando trabajamos con variables una cosa es el nombre que le damos a la variable y otra su valor. Cada vez que le damos un nuevo valor a una variable borramos su valor anterior. Cuando trabajamos con la base de datos ocurre lo mismo. Cada vez que guardamos un dato en la base de datos y usamos el mismo tag, se borra el valor anterior que teníamos y se sustituye por el nuevo valor. Esta es la razón por la que cuando añadimos o quitamos tareas de nuestro programa, primero lo hacemos en nuestra lista lista_tareas y luego simplemente volvemos a guardar la lista en la base de datos siempre con el mismo tag "mi_tag"
Ahora que tenemos nuestra base de datos funcionando únicamente nos queda poder mostrar en la pantalla las tareas que tenemos. Vamos a hacerlo creando un procedimiento.
37 Desde Built-in/Procedure crea un nuevo procedimiento "procedure" y llámalo ver_lista.
Cada vez que llamemos a este procedimiento queremos mostrar la lista de tareas que tenemos en el componente etiqueta_lista.
38 En primer lugar vamos a limpiarla usando un bloque "set etiqueta_lista.Text" y pegando un bloque de texto en blanco.
39 Ahora coge un bloque "foreach in list" (para cada uno) dentro de Built-in/Control
Este bloque nos permite recorrer una lista desde el primer hasta el último dato que contenga.
Fíjate que nos proporciona una variable llamada var. Esta variable será igual al valor de cada elemento de la lista. Ahora verás cómo funciona.
40 Coge otro bloque "set etiqueta_lista.Text" y ponlo dentro del bloque "foreach" Crea un bloque "text join" y haz que tenga tres espacios. En el primer espacio pon un bloque "etiqueta_lista.Text"
41 En el segundo la variable item. Capturala con un get, ya sabes como hacerlo!
42 En el último espacio por un bloque de texto con el texto: " "
43 Junta todo esto al bloque "set etiqueta_lista.Text"
44 Por último, en el espacio in list (en la lista) ponemos nuestra lista lista_tareas.
Lo que hemos hecho es construir un bucle (¿recuerdas?) que va a recorrer nuestra lista desde el principio hasta el final. Por cada ciclo del bucle la variable var cambia su valor al valor que tenga el elemento de nuestra lista correspondiente en cada ciclo. Es decir, será igual a cada tarea de la lista. Mientras recorremos la lista construimos una frase juntando todas las tareas y añadiendo un salto de línea " " al final.
Sólo nos queda llamar a este procedimiento desde nos interese.
45 Coge un bloque "call ver_lista" y ponlo en el evento Screen.Initialize dentro del bloque de control if en el espacio then-do al final de todo.
46 Pon otro bloque "call ver_lista" dentro del evento boton_añadir.Click, dentro del bloque if y dentro del espacio then-do, también al final del todo.
47 Por último pon otro bloque "call ver_lista" dentro del evento ListPicker_borrar.AfterPicking al final del todo.
Fíjate que llamamos a nuestro procedimiento siempre que hemos hecho un cambio en la base de datos, es decir, cuando cargamos los datos por primera vez, cuando añadimos una nueva tarea o cuando la borramos.
48 Tu programa tiene que quedar así:

49 Solo nos queda instalar la aplicación en nuestro dispositivo y probar.
¿Funciona?

 Guardando canvas

Para guardar un canvas con un dibujo o imagen AppInventor tiene dos bloques llamados Canvas.Save y Canvas.SaveAs.
Canvas.Save (guardar) guarda la imagen en nuestro dispositivo usando un nombre elegido por el propio AppInventor y canvas.SaveAs (guardar como) nos permite poner nuestro propio nombre al archivo.
Un problema está en que el archivo que guarda AppInventor se encuentra escondido en la memoria interna (o tarjeta de memoria) de nuestro dispositivo y la ruta para llegar a él es complicada de recordar. Por ejemplo, la ruta del archivo puede ser: "/mnt/sdcard/My Documents/app_inventor_1231232323.png". Aunque elijamos nuestro propio nombre, p. ej.:"mi dibujo", la ruta seguirá siendo así de complicada:"/mnt/ sdcard/My Documents/app_inventor_mi_dibujo.png"
¿Te imaginas tener que escribir todo esto cada vez que quieres abrir un dibujo guardado? ¿Te imaginas tener que hacerlo con el teclado del móvil?
Cuando usamos cualquiera de los dos bloques (.Save o .SaveAs) AppInventor nos devuelve la ruta que ha usado para guardar el archivo, así que lo que podemos hacer es guardar esta información en una base de datos para poder recuperarla más tarde. Así que este problema podemos solucionarlo.
El otro problema está en que no podemos saber qué dibujos hemos creado con anterioridad porque no podemos acceder a la memoria interna (o tarjeta de memoria) de nuestro dispositivo fácilmente desde AppInventor. Es decir, no podemos acceder al directorio de archivos directamente; tenemos que buscar una forma de recordar los dibujos que hemos guardado con anterioridad para poder recuperarlos.
Para resolver ambos problemas podemos usar dos tablas y guardar ambas en nuestra propia base de datos. En una tabla guardaremos los nombres que le hemos dado a nuestro dibujos y en otra guardaremos el camino o ruta (path) para llegar hasta ellos. Haciéndolo así solucionamos ambos problemas. Podemos hacer un dibujo y llamarlo "mi primer dibujo" aunque AppInventor lo guarde realmente con otro nombre no importa dónde. En la primera tabla de nombres aparecerá "mi primer dibujo" y en la segunda tabla de rutas aparecerá p. ej.:"/mnt/sdcard/My Documents/app_inventor_1231232323.png".
Usaremos el índice de la primera tabla para relacionar el nombre con la ruta correspondiente. Si queremos abrir un dibujo que se llama "mi primer dibujo" y este dato está en el índice 5 de mi tabla de nombres, bastará con buscar el índice 5 en la tabla de rutas para encontrar el camino a mi dibujo.


Crea un proyecto nuevo y llámalo "guardar_canvas"
Cambia la propiedad del componente Screen AlignHorizontal a Center y desactiva Scrollable.
Añade un componente Canvas.
Añade debajo un componente HorizontalArragement y mete dentro un textbox y un botón.
Cambia el nombre del textbox a textbox_nombre y el Hint a "nombre imagen". Borra la propiedad Text. Cambia el nombre al botón y llámalo boton_guardar. Cambia el texto a "guardar"
Añade debajo otro componente HorizontalArragement y mete dentro un botón y dos componentes ListPicker. Cambia el nombre del botón por boton_nuevo y el texto a "nuevo"
Cambia el nombre del primer ListPicker y llámalo borrar. Cambia el texto a "borrar"
Cambia el nombre al segundo ListPicker y llámalo recuperar. Cambia el texto a "recuperar"
Añade por último un componente TinyDB y cambia su nombre por DB_dibujos.
Puedes cambiar la propiedad Height de todos los componentes para hacerlos más delgados y estilizados.
10 Cambia también el tamaño de los fonts.
Vamos al Editor de bloques.
11 Crea dos variables de texto. A la primera llámala tag_nombres y a la segunda tag_rutas.
12 Crea dos bloques de texto. Al primero ponle el texto "nombres" y al segundo "rutas"
13 Une cada bloque de texto a la variable correspondiente. Estas serán las variables que usaremos para distinguir los datos que vamos a guardar en la base de datos.
14 Crea otras dos variables y llámalas lista_nombres y lista_rutas.
15 En cada variable pega un bloque "make a list". Estas serán nuestras listas. En la primera guardaremos los nombres que le demos a nuestros dibujos y en la segunda las rutas a cada dibujo.
16 Como estamos haciendo un programa para dibujar y guardar nuestros dibujos vamos a empezar por el evento Canvas.Dragged. Coge este evento.
17 Ahora coge un procedimiento "canvas.DrawLine" y ponlo dentro del evento. Para las propiedades x1 e y1 usa las variables prevX y prevY. Para las propiedades x2 e y2 usa las variables currentX y currentY.
Tiene que quedar así:

De momento con esto es suficiente, más adelante puedes añadir más bloques para dibujar.
Ahora puedes ocultar este evento para ocupar menos espacio en la pantalla.
18 Vamos a empezar por el evento boton_guardar.Click que usaremos para guardar nuestros dibujos. Empezando por aquí vamos a entender mejor cómo va a funcionar nuestro programa.
Primero vamos a comprobar que el campo textbox_nombre no esté vacío porque no queremos guardar una imagen sin nombre.
19 Coge un bloque "if then" y ponlo dentro del evento.
20 Crea un bloque Logic not. y pégalo en el espacio if.
21 Ahora crea un bloque text / is empty y pégalo al bloque not.
22 En este caso queremos comprobar que el campo textbox_nombre.Text tenga algo escrito así que coge un bloque "textbox_nombre.Text" y pégalo en el espacio test del bloque "is text empty?"
Si el usuario ha escrito algo entonces activamos el espacio then-do. Si no ha escrito nada, no hacemos nada.
Lo primero que haremos será añadir este nuevo nombre que le hemos dado a nuestro dibujo a la lista de nombres lista_nombres.
23 Coge un procedimiento "add items to list" y ponlo dentro. En el espacio list usaremos nuestra lista lista_nombres En el espacio item usaremos el textbox textbox_nombre. Ahora añadiremos nuestro dibujo a la lista de rutas.
24 Coge otro procedimiento "add items to list" y ponlo debajo En el espacio list usaremos la lista lista_rutas
25 En el espacio item pon un procedimiento "call Canvas.Save" Tiene que quedar así:

¿Qué hemos hecho?
Al llamar al procedimiento Canvas.Save estamos, de hecho, guardando nuestro dibujo. Recuerda que este procedimiento nos devuelve la ruta y el nombre que ha usado para guardarlo en una cadena de texto con la ruta y el nombre del archivo completo, p. ej.: "/mnt/sdcard/My Documents/app_inventor_1231232323.png".
Lo que hemos hecho es guardar en la lista lista_rutas esta ruta porque la necesitamos para poder abrir este dibujo más tarde.
Al haber añadido a la vez en una lista el nombre y en la otra la ruta, ambas tienen el mismo índice. Recuerda que el índice es el número consecutivo que le asigna AppInventor a cada dato que guardamos en una lista. Sabiendo el índice podemos relacionar el nombre del dibujo con su ruta.
Sólo nos queda guardar ambas tablas en nuestra base de datos. Para hacerlo más sencillo vamos a crear un procedimiento.
26 Crea un procedimiento nuevo y llámalo "actualizar_base_datos"
27 Coge dos procedimiento DB_dibujos.StoreValue y ponlos dentro de nuestro procedimiento.
Vamos a guardar primero nuestra tabla de nombres.
28 En el espacio tag del primer bloque .StoreValue pon nuestra variable tag_nombres
29 En el espacio valueToStore pon nuestra lista lista_nombres.
Haciendo esto estamos cogiendo nuestra lista_nombres y guardándola en la base de datos con la etiqueta "nombres"
Ahora vamos a guardar nuestra lista de rutas.
30 En el espacio tag del segundo bloque .StoreValue pon nuestra variable tag_rutas
31 En el espacio valueToStore pon nuestra lista lista_rutas
Haciendo esto estamos cogiendo nuestra lista_rutas y guardándola en la base de datos con la etiqueta "rutas"
Nuestra base de datos tendrá únicamente dos listas. Cada vez que llamemos a este procedimiento las listas de guardarán en la base de datos. Como siempre estamos usando la misma etiqueta para cada lista, las listas se actualizan con la nueva información.
Ahora que tenemos nuestro procedimiento terminado vamos a volver a nuestro evento boton_guardar.Click y añadir una llamada a nuestro procedimiento después de haber actualizado las listas.
32 Debajo del último bloque "add items to list" pon una llamada "call actualizar_base_datos".
Nuestro evento boton_guardar.Click quedará así:

33 Coge ahora el evento Screen.Initialize
Recuerda que nada más arrancar nuestro programa debemos comprobar qué datos tenemos guardados en nuestra base de datos con anterioridad. Vamos a hacerlo ahora.
34 Coge un bloque de Control "if then" y ponlo dentro.
Lo que queremos saber es si ya hay algún dibujo en nuestra base de datos. Lo vamos a comprobar buscando por la etiqueta (tag) "nombres" que hemos guardado en la variable tag_nombres. Si existe algún dato en la base de datos con este tag, nos lo dirá.
35 Crea un bloque lógico not y pégalo en el espacio if.
36 Crea un bloque de texto "is empty" y pégalo al bloque not.
37 Coge un procedimiento "call DB_dibujos.GetValue" y pégalo al bloque anterior. Por último coge nuestra variable tag_nombres pégala en el espacio tag.
Le estamos pidiendo a nuestra base de datos que nos busque algún registro con la etiqueta "nombres". Si nos devuelve algo (no está vacío) significa que ha encontrado algo, entonces vamos al espacio then-do.
38 Coge un bloque "set global lista_nombres" y un bloque "set global lista_rutas" y ponlas dentro del bloque then-do.
39 Pega dos procedimientos "DB_dibujos.GetValue" a cada una.
40 En el primer procedimiento pon la variable "global tag_nombres" y en el segundo la variable "tag_rutas"
Ya hemos visto que cuando guardamos nuestro dibujos en la base de datos estamos guardando en realidad dos listas distintas por lo tanto lo que esperamos encontrar cuando recuperamos un valor (.GetValue) para la etiqueta tag_nombres y la etiqueta tag_rutas son dos listas también. Lo que hemos hecho es recuperar esas listas y meterlas en cada variable correspondiente.
41 Coge ahora el evento boton_nuevo.Click
Queremos limpiar la pantalla para poder empezar un dibujo nuevo.
42 Coge un bloque "set textbox_nombre" y pégale un bloque de texto vacío.
43 Coge un bloque "set Canvas.BackgroundImage" y pégale otro bloque de texto vacío.
Así limpiamos el canvas.
Vamos ahora a usar el componente recuperar para mostrar una lista con todos los nombres de dibujos que tenemos guardados y poder seleccionar el que queremos cargar.
Recuerda que al arrancar nuestro programa (evento .Initialize) ya hemos recuperado de nuestra base de datos la lista de nombres de dibujos (lista_nombres). Por lo tanto la lista lista_nombres ya tiene la lista de nombres de nuestros dibujos (si tenemos alguno)
44 Coge el evento recuperar.BeforePicking
45 Coge un bloque "set recuperar.Elements" y pégale la variable "global lista_nombres"
Haciendo esto nuestro componente ListPicker recuperar sabe que queremos mostrar los nombres de los dibujos.
46 Coge el evento recuperar.AfterPicking
Una vez el usuario ha seleccionado el nombre del dibujo que quiere cargar vamos a mostrarlo.
47 Coge un bloque "set canvas.BackgroundImage" y ponlo dentro.
48 Coge un bloque "select list item" y pégalo al bloque anterior.
49 En el espacio list pon nuestra lista de rutas lista_rutas
50 En el espacio index pon la variable recuperar.SelectionIndex
51 Coge un bloque "set textbox_nombre.Text" y pégale la variable recuperar.Selection
¿Qué hemos hecho?
El componente recuperar es un ListPicker que contiene los nombres de nuestro dibujos. Cuando el usuario selecciona un nombre de la lista la variable recuperar.SelectionIndex nos dice cual es el índice del nombre que ha seleccionado el usuario. Con ese índice nos vamos a nuestra lista lista_rutas y buscamos (select list item) la ruta que está en ese mismo índice con lo que sabemos la ruta completa (incluyendo el nombre) hasta ese dibujo. Basta pasar la ruta al componente .BackgroundImage para que coja este dibujo y lo use como fondo del canvas. Por último la variable recuperar.Selection tiene el nombre del dibujo por lo que lo usamos directamente para cambiar el textbox_nombre.
Para borrar nuestros dibujos hacemos lo mismo que hemos hecho antes con el componente recuperar.
52 Coge el evento borrar.BeforePicking
53 Coge un bloque "set borrar.Elements" y pégale la lista lista_nombres porque queremos que nos muestre la lista de nombres de nuestros dibujos.
54 Ahora coge el evento borrar_AfterPicking
55 Coge dos bloque "remove list item" y ponlos dentro.
56 Al primer bloque "remove list item" pégale la lista lista_nombres en el espacio lista
57 En el espacio index usa la variable borrar_SelectionIndex.
De esta forma estamos borrando de la lista de nombres la que haya seleccionado el usuario. Aquí podríamos también haber usado la variable recuperar.Selection indistintamente.
58 En el segundo bloque "remove list item" pega en el espacio list la lista lista_rutas.
59 En el espacio index pega la variable borrar.SelectionIndex.
Con esto borramos de la lista de rutas aquella que coincide con el índice.
Una vez que hemos actualizado nuestras lista sólo nos queda actualizar nuestra base de datos llamando al procedimiento que hemos creado para ello.
60 Coge un bloque "call actualizar_base_datos" y ponlo debajo.
Tu programa completo quedará así:

61 No olvides que tienes que instalarlo en tu dispositivo para que funcione correctamente.