PDF de programación - Tutorial Desktop - Primeros Pasos

Primeros Pasos
Tutorial Desktop
Este tutorial Desktop es tanto para recién llegados al mundo
de la programación como a Xojo. Es una introducción al
entorno de desarrollo Xojo para desktop y te guiará en el
desarrollo de una aplicación real de escritorio. Completarlo
debería de llevarte en torno a una hora. Si buscas una
introducción más corta a Xojo para escritorio, echa un vistazo
a la Guía de Inicio Rápido Desktop.
Si tienes experiencia con otros lenguajes de desarrollo,
también querrás echar un vistazo a la Guía del Usuario y la
Referencia del Lenguaje.
Comenzamos
Si todavía no lo has hecho ya, es el momento de ejecutar
Xojo. Una vez que finalice la carga se mostrará la ventana
correspondiente al Selector de Proyecto.
Xojo te permite crear diferentes tipos de aplicaciones
(Desktop, Web, iOS, Consola y Raspberry Pi). En este Tutorial
crearás una app de Escritorio. Por tanto, selecciona Desktop.

Ahora deberías de ver tres campos para que introduzcas
valores: Nombre de la Aplicación (Application Name), Nombre
de la Empresa (Company Name) e Identificador de la
Aplicación (Application Identifier).



Application Name es el nombre de tu app. Este será el
nombre del archivo que se creará para la aplicación.

Company Name es el nombre de tu empresa. Puedes optar
por dejar este campo vacío.
Application Identifier es un identificador único para la app.
Se rellenará automáticamente a partir de los datos
introducidos en Application Name y Company Name, pero
también puedes utilizar cualquier otro.

Introduce “TaskManager” como el nombre de la aplicación
(Application Name). Puedes dejar Company Name tal y como
está o bien cambiarlo. Haz clic en OK para abrir la ventana
principal de Xojo (denominada Espacio de Trabajo, o
Workspace en inglés), donde comenzarás a diseñar tu app.
Workspace
Xojo abre el Espacio de Trabajo con la ventana por defecto
seleccionada para tu aplicación en el Navegador y mostrada
en el Editor de Diseño.

Navigator: El área en la parte superior izquierda te muestra
todos los elementos de tu proyecto. Por omisión puedes ver
Window1 (seleccionada), el objeto App y el objeto
MainMenuBar. Utilizas el Navegador para navegar por tu
proyecto.
Layout Editor: El área central es el Editor de Diseño. Utilizas
el Editor de Diseño para diseñar la interfaz de usuario para las
ventanas de tu aplicación. Muestra la ventana y previsualiza el
aspecto que tendrá cuando se ejecuta la app. En esta
imagen, la ventana está vacía porque aun no has añadido
controles de interfaz de usuario desde la Librería.

Library: El área a la derecha es la Librería (Library, en inglés) y
muestra todos los controles y elementos de interfaz de
usuario que puedes añadir a la ventana o al proyecto. Diseñas
la ventana arrastrando controles desde la Librería hacia la
ventana. También puedes añadir un control a la ventana
haciendo doble clic sobre él. Puedes cambiar cómo se

muestran los controles en la Librería haciendo clic sobre el
pequeño icono con la imagen de la rueda dentada y eligiendo
un nuevo ajuste.

Si la Librería no está visible, haz clic en el botón Library de la
barra de herramientas para mostrarla.
Inspector: No mostrado en la anterior imagen se encuentra el
Inspector, y que te permite ver y cambiar las propiedades
para el control seleccionado. Esta área de la ventana del
Espacio de Trabajo está compartida 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 elemento seleccionado en el Navegador o Editor. Los
contenidos del Inspector cambian a medida que haces clic
sobre diferentes elementos. Cambias un valor en el Inspector
introduciendo el nuevo valor en el campo situado a la derecha
de la etiqueta para el campo.
Sobre la App

Este tutorial te mostrará como crear una app para gestionar
tareas. Por tanto, la llamaremos Task Manager (Gestor de
Tareas).
Gestor de Tareas
Para la app Task Manager introducirás tareas en el campo de
texto y harás clic en Add para añadir la tarea a la lista. Puedes
hacer clic en tareas individuales en la lista para borrarlas o
marcarlas como completadas.



Task Manager utiliza tres tipos de controles:
List Box: Un control que es una lista por la que te puedes
desplazar. Puede mostrar listas con una o múltiples columnas
por las cuales desplazarte tanto vertical como
horizontalmente.

TextField: Un control para introducir una línea de texto.

Button (Botón): Un botón estándar. Se utiliza habitualmente
para iniciar una acción.
En las siguientes secciones crearás esta app paso a paso.
Diseñar la Interfaz de Usuario
Listado de Tareas

Deberías de tener Xojo en funcionamiento y Window1 abierto
en el Editor de Diseño. Ahora añadirás un Listbox a la
ventana. Utilizaremos el Listbox se utiliza para guardar las
tareas.
1. Añade el Listbox: En la Librería de controles, haz clic en
el Listbox y arrástralo a la esquina superior izquierda del
Editor de Diseño. A medida que te aproximes a los
bordes de la ventana verás las guías de alineación que te
ayudarán a situar el control. Suelta el Listbox cuando
estés contento con su posición.


2. Cambiar el tamaño del Listbox: Haz clic en el Listbox
para acceder a los manejadores de redimensionamiento.
Selecciona el manejador de la esquina inferior derecha y
arrástralo para aumentar el tamaño del Listbox de modo
que cubra las 2/3 partes superiores de la ventana.


Botones

Ahora añadirás a la ventana los tres botones necesarios por
Task Manager.

El botón Delete elimina tareas del Listbox, el botón Add
añade tareas al Listbox y el botón Complete marca una tarea
del Listbox como completada.
1. Añade el Botón Delete: En la Librería, haz clic en el

control de Botón Genérico y arrástralo sobre la ventana
bajo la esquina inferior derecha del Listbox. Utiliza los
indicadores de alineación de modo que se alinee con el
costado derecho del Listbox.


2. Añade el botón Add: En la Librería, haz clic en el control
de Botón Genérico y arrástralo sobre la ventana próximo
a la esquina inferior izquierda. Nuevamente, utiliza las
guías de alineación para ayudarte a posicionar el botón.


3. Añade el botón Complete: En la Librería, haz clic en el

control de Botón Genérico y arrástralo a la ventana
próximo a la esquina inferior derecha.


Campo de Texto

El TextField es donde el usuario escribe la tarea a añadir en la
lista.

1. En la Librería, haz clic en TextField y arrástralo a la

ventana de modo que esté entre los botones Delete y
Add.


2. Cambia el tamaño del campo de tareas. Selecciona el
manejador de la derecha en el TextField y arrástralo de
modo que tenga el mismo ancho que el Listbox. Utiliza
los indicadores de alineación como guías para que todo
quede alineado correctamente.


Tras añadir todos los controles el diseño de tu ventana tendrá
un aspecto similar a este:



Propiedades
¿Qué es una Propiedad?
Una propiedad es un valor de un objeto. Cambiar los valores
de las propiedades te permite cambiar el comportamiento del
objeto. Para este proyecto querrás cambiar varias
propiedades para la vista y los controles que has añadido.
Algunas cosas que necesitas hacer son:
Cambiar el nombre de todos los controles (y la ventana) para
que describa mejor sus comportamientos, y también resulte
más fácil referirse a ellos desde el código.


Añadir etiquetas (Captions) a los Botones.

Definir las propiedades de bloqueo (Locking) de modo que los
controles cambien su tamaño de forma correcta a medida
que se modifique el tamaño de la ventana que los contiene.
Inspector
Se utiliza el Inspector para cambiar las propiedades de la
vista y los controles. Comparte la misma área con la Librería
en la derecha del Espacio de Trabajo. Para mostrar el
Inspector, haz clic en el botón Inspector en la barra de
herramientas o pulsa ⌘-I (Ctrl+I en Windows y Linux).

Propiedades de Ventana
Si no lo has hecho todavía, muestra el Inspector haciendo clic
en el botón Inspector de la barra de herramientas. Necesitas
cambiar las propiedades Name y Title de la ventana:



1. En primer lugar, en el Editor de Diseño, haz clic en la

barra de título de la ventana para seleccionarla. El
Inspector mostrará ahora las propiedades
correspondientes a la ventana.


2. En el campo Name (situado en el grupo ID), cambia el
nombre de “Window1” a “TaskManagerWindow”. Pulsa
Retorno para ver el cambio de nombre aplicado en el
Navegador.


3. En el campo Title (situado en el grupo Frame), cambia el
nombre de “Untitled” a “Task Manager”. Pulsa Retorno
para ver el cambio de nombre aplicado en la barra de
título de la ventana.


Propiedades de ListBox
El Listbox es donde se mostrarán y guardarán las tareas
introducidas por el usuario. Necesitas cambiar las siguientes
propiedades: Name, Has Header, Column Count, Initial Value,
Column Widths y Locking.
1. En primer lugar, en el Editor de Diseño, haz clic en el

Listbox para seleccionarlo. El Inspector mostrará ahora
las propiedades para el Listbox.


2. En el campo Name (situado en el grupo ID), cambia el
nombre de “Listbox1” a “TaskList”. Pulsa Retorno para
ver el cambio del nombre reflejado en el Navegador.


3. El Listbox tendrá una cabecera. Encuentra la propiedad

“Has Header” y cambia el valor de OFF a ON.


4. El Listbox tiene dos columnas, una para mostrar el

estado de completado y otra para mostrar el nombre de
la tarea. En el campo “Column Count”, cambia el valor

de “1” a “2”. Pulsa Retorno para ver como se muestra el
Listbox con dos columnas en el diseño.


5. Querrás cambiar las cabeceras de las columnas para que
describan mejor los datos en la lista. Ubica la propiedad
“Initial Value” y haz clic en el icono de “lápiz” a su
derecha. Dicha acción abrirá la ventana de un pequeño
editor donde puedes introducir los valores de cabecera
para las columnas.


Escribe "Completed", y pulsa la tecla Tabulador, y
escribe a continuación