PDF de programación - Tutorial Web-TaskManager-SQLite

Tutorial Web: Tareas, guardar y
recuperar los datos

En este tutorial continuaremos evolucionando la aplicación Task Manager que comenzamos a
crear en el Tutorial Web inicial que puedes encontrar en este enlace.


Por tanto, si aún no lo has hecho ya, debes crear como paso previo el tutorial inicial de Task
Manager.


Una vez hayas completado esta nueva parte o progresión del tutorial, ya podrás añadir y
recuperar las tareas en sucesivas ejecuciones (o accesos) a la aplicación para tantos usuarios
como desees. Para ello haremos que nuestra aplicación Web 2.0 de tareas utilice una base de
datos SQLite, siendo la encargada de guardar tanto los nombres de los diferentes usuarios como
las tareas asociadas con cada uno de ellos.


Puedes descargar el proyecto Xojo de este tutorial desde este enlace.


Comenzaremos realizando algunos cambios en la interfaz, de forma que el usuario que utilice la
aplicación web pueda introducir su nombre y recuperar las tareas ya existentes para mostrarlas
en el listado.


¡Encuentra más Tutoriales sobre Xojo en Español en este enlace!


1. Modificar la interfaz de usuario
Abre el proyecto creado en el tutorial inicial Task Manager y modifica la altura del listado en la
página TaskManagerPage arrastrando hacia abajo desde el manejador superior central.


También puedes utilizar el Panel Inspector, con el elemento TaskList seleccionado, e introducir
los siguientes valores en los campos de la sección Position:


Left: 20

Top: 70

Width: 560

Height: 264


Tras los cambios, la página debería tener un aspecto similar a este:


2. Añadir nuevos elementos
A continuación añadiremos desde la Librería los nuevos elementos de interfaz de usuario en la
parte superior de la página, ya libre:


Un WebLabel: Será una etiqueta para enunciar el dato que esperamos que introduzca el usuario
en el campo asociado.


Un WebTextField: Será el elemento de interfaz de usuario que utilice el usuario para introducir un
nombre. Hasta que no se introduzca un nombre, no se podrán añadir nuevas tareas o bien
obtener las tareas ya existentes.


Un WebButton: Nos permitirá recuperar las tareas existentes para el usuario cuyo nombre
hayamos introducido en el anterior WebTextField.

2.1 Añadir la etiqueta (WebLabel)
Arrastra el WebLabel desde la librería hacia la parte superior izquierda de la ventana utilizando las
guías de alineamiento para dejarlo en la posición correcta; es decir, alineado con el resto de los
elementos de la página.


Una vez sobre la página y con el WebLabel aun seleccionado, dirígete al Panel Inspector para
cambiar los siguientes valores:


Locking: Bloquea los candados de la parte superior izquierda y superior. De este modo, el
control mantendrá su posición sobre dichos márgenes de la página web incluso cuando
se modifique su tamaño.


Behavior > Text: Introduce “User Name:” (sin las comillas). Este será el texto mostrado
por la etiqueta.


Font > Bold: Haz clic sobre el elemento asociado para que esté activo el estilo Negrita
para el texto mostrado por la etiqueta.

Una vez realizados los cambios, la página web debería de tener el siguiente aspecto:



2.2 Añadir el campo de texto (WebTextField)
Arrastra un WebTextField desde la Liberaría justo y suéltalo justo a la derecha del WebLabel
recién añadido en el paso anterior. Utiliza las Guías de alineación para dejar la distancia adecuada
entre ambos elementos de interfaz de usuario.


A continuación, arrastra el manejador central derecho para modificar la anchura del WebTextField
de modo que cubre 3/4 partes del ancho de la página.


Con el WebTextField aún seleccionado, introduce los siguientes valores en el Panel Inspector:


Name: UserName

Locking: Bloquea los candados correspondientes al margen izquierdo, superior y
derecho. De esta forma el WebTextField ajustará su ancho automáticamente cuando se
modifique la anchura de la página web en el que está contenido.

Appearance > Hint: “Enter the user name to start” (sin las comillas).


Su aspecto sobre la página debería de ser similar al siguiente:





2.3 Añadir el botón (WebButton)
Por último añadiremos el botón que se encargará de mostrar en el listado (TaskList) todas las
tareas existentes para el usuario cuyo nombre hayamos introducido en el campo de texto
introducido en el paso anterior.


Arrastra un WebButton desde la Librería y déjalo a la derecha del WebTextField. Utiliza la ayuda
proporcionada por las Guías de alineación para dejar el espacio suficiente entre ambos
elementos. Este debería de estar alineado en su margen derecho con el listado TaskList.


Con el WebButton aún seleccionado, dirígete al Panel Inspector y modifica los siguientes valores:


Name: GetRecordsButton

Locking: Cierra los candados correspondientes al margen superior y derecho. De esta
forma el botón permanecerá sobre su posición incluso cuando se modifique el ancho de la
página que lo contiene.

Caption: “Get” (sin las comillas).


Con esto habremos completado el rediseño de la página web TaskManagerPage, cuyo aspecto
tendría que ser similar al siguiente:





3 Añadir nuestra propia clase SQLite
Utilizaremos una base de datos SQLite para almacenar tanto los nombres de los usuarios de la
aplicación, como todas las tareas asociadas con cada uno de ellos.


¿Por qué SQLite? Con Xojo puedes utilizar en tus aplicaciones Web motores de bases de datos
más potentes (y probablemente será lo que hagas en tus propios desarrollos más complejos),
como por ejemplo PostgreSQL, MySQL, Microsoft SQL Server u otros.


Sin embargo, dado que SQLite no requiere de ningún tipo de configuración e infraestructura para
su funcionamiento, a diferencia de las anteriores, y es realmente sencilla de utilizar, será la que
empleemos en este tutorial para mantenerlo lo más simple posible.


Además será un buen modo de introducirnos en el uso de bases de datos con nuestras
aplicaciones Web.


Nota: Puedes aprender más sobre SQLite en el tutorial que encontrarás en este enlace.


Por otro lado, existen muchas otras formas en las que podemos utilizar la base de datos SQLite
sin la necesidad de que creemos nuestra propia clase; pero al hacerlo tal y como explicamos a
continuación nos permitirá volver a utilizar la Clase tal cual en cualquier otro proyecto en el que
queramos incorporar el mismo tipo de funcionalidad. Es decir, gestión de tareas asociadas con
un nombre de usuario.


Además, también nos permitirá que toda la funcionalidad esté contenida en un mismo elemento
en vez de que el código que actúa con la base de datos esté repartido a lo largo y ancho de
nuestro proyecto.


3.1 Añadir una nueva clase al proyecto
Prácticamente cualquier cosa en Xojo es una clase. Por ejemplo, los elementos de interfaz de
usuario que has utilizado en el diseño de la página web (arrastrándolos desde la Librería), son
instancias creadas a partir de cada clase: WebLabel, WebTextField o WebButton.


Nota: Una instancia no es más que un nuevo objeto (o elemento) creado a partir de una Clase.
Piensa en ello como las piezas que puedes obtener a partir de diferentes moldes. Un mismo
molde te proporcionará piezas con la misma forma, sobre las cuales puedes modificar su
aspecto (propiedades o atributos) e incluso su comportamiento para añadir funciones
adicionales sobre las que dichos objetos ya incorporan de serie.


Para añadir una nueva clase a tu proyecto, selecciona Insert > Class. Se añadirá un nuevo ítem
en el Navegador de Proyecto con el nombre por omisión de Class1.


Selecciona la clase recién añadida en el Navegado de Proyecto y accede al Panel Inspector
asociado para modificar los siguientes valores:


Name: TaskDB

Super: SQLiteDatabase


Es especialmente interesante el valor introducido en el campo Super. Cuando introducimos aquí
el nombre de una clase ya existente (en este caso se trata de la clase SQLiteDatabase), significa
que nuestra clase será una subclase creada a partir de su clase padre o Superior.


¿Qué significa el término subclase? Básicamente que nuestra clase recién creada heredará todas
las propiedades (atributos) como funcionalidad (comportamiento) que ya esté disponible de serie
en la clase de la cual hereda.


Es decir, nuestra clase TaskDB contará de serie con toda la funcionalidad ya existente en la clase
SQLiteDatabase incluida de serie en el lenguaje de programación Xojo.


Ahora bien, la ventaja que nos proporciona crear una subclase es que sobre dicha funcionalidad
podremos añadir nuevas propiedades (atributos) y también comportamiento, añadiendo nuevos
métodos o funciones que se ajusten más en este caso a lo que esperamos que haga (en nuestro
tutorial: especializarse en almacenar y recuperar “tareas” y usuario hacia y desde la base de
datos).


Si observas, una vez que hayas confirmado los cambios en el Panel Inspector, el icono de la clase
pasará a mostrar el correspondiente a una base de datos en el Navegador de Proyecto:





3.2 Añadir nueva funcionalidad a la clase TaskDB
La forma que tienen las clases de proporcionar funcionalidad es a través de Métodos. Estos
ejecutarán el código que contienen cada vez que son invocados o “llamados”, tal y como ocurre
por ejemplo con los Manejadores de Eventos que ya hemos venido utilizando.


Probablemente sin ser consciente de ello, ya has estado invocando diferentes métodos sobre
clases en la creación del proyecto TaskManager.


Esto es lo que ocurre por ejemplo cuando has utilizado la siguiente línea de código en el evento
Pressed del botón AddButton:


TaskList.AddRow(“”, Taskfield.Text)

En este caso, estás indicando a la Instancia de Clase TaskList que ejecute el método AddRow
disponible en dicha clase; pasando a dicho método o función como parámetros los valores de
cadena vacía (“”) y el contenido de la propiedad (atributo) Text de la instancia de clase TaskField.


Es decir, los valores entre paréntesis esperados por dicho método para que pueda funcionar. Si
utilizases una cantidad de parámetros dist