PDF de programación - Xojo - Desktop tutorial

Desktop
Tutorial

2013 Release 1

Xojo, Inc.

Chapter 1

Introducción

Bienvenido a Xojo, el modo más sencillo de crear
aplicaciones multiplataforma y web.

Section 1

Bienvenido

COMENZAR CON XOJO
1. Descarga el instalador para tu sistema

operativo desde:

http://www.xojo.com/downloads

2. Ejecuta el instalador.
3. Ejecuta Xojo.
4. En el Selector de Proyecto, elige Escritorio

y haz clic en OK.

Este Tutorial es para las personas que empiecen a programar y tengan su primer
contacto con Xojo. Es una introducción al entorno de desarrollo de escritorio Xojo
y te guiará a lo largo del desarrollo de una aplicación de escritorio.

Completar este tutorial debería de tomarte en torno a una hora.

Nota: si tienes experiencia con otros lenguajes de programación, también querrás
leer la Guía del Usuario y la Referencia del Lenguaje.

2

Section 2

Convenciones de Presentación

El Tutorial utiliza capturas de pantalla obtenidas de las versiones
de Windows, OS X y Linux de Xojo. El diseño de la interfaz y el
conjunto de características es idéntico para todas las
plataformas, de modo que las diferencias son solamente
cosméticas y tienen que ver con las diferencias intrínsecas entre
las interfaces gráficas de Windows, OS X y Linux.

Negrita. Se utiliza para destacar la primera vez que se utiliza un
término y para resaltar conceptos importantes. Adicionalmente,
los títulos de libros, como Guía de usuario Xojo, se indican en
cursiva.

Cuando se indique que elijas un elemento de los menús de Xojo,
verás algo así como “selecciona Archivo ↠ Nuevo Proyecto”.
Esto es equivalente a “elige Nuevo Proyecto en el menú
Archivo.”

Los elementos entre comillas son atajos de teclado y consisten
de una secuencia de teclas que deben de pulsarse en el orden
en el que aparecen listadas. En Windows y Linux, la tecla
modificadora es Ctrl; en Macintosh, la tecla modificadora es ⌘
(Comando). Por ejemplo, cuando veas el atajo de teclado “Ctrl

+O” o “⌘-O”, significa mantener pulsada la tecla COntrol en
Windows o Linux y pulsar a continuación la tecla “O” o pulsar la
tecla ⌘ en Macintosh y pulsar a continuación la tecla “O”. Has
de soltar la tecla modificadora sólo después de haber pulsado la
tecla del atajo.

Cualquier cosa que deba de escribirse aparecerá entrecomillado.
Algunos pasos te pedirán que introduzcas líneas de código en el
Editor de Código. Estas aparecen en una caja sombreada:

ShowURL(“SelectedURL.Text”)

Cuando introduzcas código, por favor ten en cuenta las
siguientes normas:

Escribe cada línea impresa en una línea separada del Editor de
Código. No intentes unir dos o más líneas impresas en la misma
línea, o bien partir una línea larga en dos o más líneas.

No añadas espacios adicionales donde no se indica en el código
impreso.

3

Cuando ejecutes tu aplicación, Xojo comprobará en primer lugar
el código en busca de errores de sintaxis. Si durante la
comprobación aparece un error, entonces un panel aparecerá en
la parte inferior de la ventana para su revisión. 


4



Section 3

Comenzando

Si aun no lo has hecho, ahora es el momento de iniciar Xojo.

Figure 1.1 Ventana de Selector de Proyecto

Haz doble clic en el icono de la aplicación Xojo para iniciarlo.
Cuando finalice la carga, aparecerá el Selector de Proyecto.

Xojo te permite crear tres tipos diferentes de aplicaciones
(Escritorio, Web y Console). Para este Tutorial, crearemos una
aplicación web; por tanto, haz clic sobre Web.

Ahora verás tres campos que debes cumplimentar: Nombre de
Aplicación, Nombre de Empresa e Identificador de Aplicación.


Nombre de Aplicación es el nombre de tu aplicación. Este será
el nombre del archivo que se utilizará para guardar la aplicación.


Nombre de Empresa es el nombre de tu empresa. Puedes
dejarlo vacío.


Identificador de Aplicación es un identificador único para esta
aplicación. Se rellenará automáticamente utilizando lo
introducido como Nombre de Aplicación y de Empresa, pero
también puedes cambiarlo por cualquier otra cosa.


Introduce "SimpleBrowser" como el Nombre de la Aplicación.
Puedes dejar el Nombre de la Empresa tal cual o bien cambiarlo.

Haz clic en OK para abrir la ventana principal de Xojo
(denominada Espacio de trabajo), donde comenzarás a diseñar
tu aplicación

5









Section 4

Espacio de trabajo

Xojo abre el Espacio de trabajo con la ventana por defecto de la
aplicación seleccionada en el Navigator y mostrada en el Editor
de Diseño.

Figura 1.1 Ventana Principal de Xojo

Navegador: el área de la parte superior izquierda muestra todos
los elementos del proyecto. Por defecto puedes ver Window1
(seleccionada), el objeto App y el objeto MainMenuBar. Utiliza el
Navegador para navegar por el 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 de las
ventanas de la aplicación. Muestra la ventana y previsualiza la
ventana tal y como será cuando se ejecute la aplicación. En esta
ilustración la ventana está vacía porque aun no se han añadido
controles de interfaz de usuario desde la Librería.

Librería: el área de la derecha es la Librería y muestra los
controles y los elementos de la interfaz de usuario que se
pueden añadir a la ventana o al proyecto. Diseñas la ventana
arrastrando controles desde la Librería hacia ella. También
puedes añadirlo a la ventana haciendo doble clic sobre él.

Cambias el modo en el que se muestran los controles en la
Librería haciendo clic en el icono con forma de rueda dentada

y eligiendo un ajuste distinto.


Nota: si la Librería no está visible, haz clic en el botón Librería en
la barra de herramientas para mostrarlo.

Inspector: no mostrado en la anterior ilustración se encuentra el
Inspector, que te permite ver y cambiar las propiedades del

6



control seleccionado. Este área de la ventana Principal es
compartida con la Librería. Puedes acceder al Inspector haciendo
clic sobre el botón del Inspector en la barra de herramientas. El
inspector muestra información sobre el elemento seleccionado en
el Navegador o en el Editor. Los contenidos del Inspector
cambian en función del elemento seleccionado. Puedes cambiar
un valor del Inspector introduciendo un nuevo valor en el campo
situado a la derecha de la etiqueta del campo.

7

Section 5

Acerca de la Aplicación

En este tutorial crearás una aplicación que gestiona los URL y las
direcciones de correo electrónico. Por lo general un URL está
precedido de “http://” para indicar que es una dirección de una
página web.

Para eliminar un URL, selecciónalo del ListBox y haz clic en
Delete.

URL Manager utiliza tres tipos de controles:

Figura 1.2 Aplicación URL Manager

Un URL también puede tener el
prefijo “mailto:” para enviar un
mensaje de correo electrónico
usando el software de correo
por defecto.
URL Manager
Para la aplicación URL
Manager, introduces un URL en
el Campo de Texto y haces clic
en el botón Show para
mostrarlo en el navegador por
defecto. Haz clic en el botón
Add para guardarlo en el
ListBox. Para mostrar un URL
del ListBox, selecciónalo y haz
clic en Mostrar.

List Box: un control que contiene
listas desplazables. Puede
contener listados de una única
columna o con múltiples
columnas, y desplazarse en los
sentidos vertical y horizontal.

Text Field: Un control que
contiene una única línea de texto.

Button: Un botón estándar. Con
frecuencia se utiliza más para
iniciar una acción.

8

Chapter 2Diseñar la
Interfaz de
Usuario

Ahora diseñarás la interfaz para URL Manager.

3. Tu ventana debería de parecerse a esta:

Figura 2.1 Diseño de Ventana con ListBox

Section 1

Lista de URL

Añadir la Lista de URL
Deberías de tener abierto Xojo y con la Editor de Diseño de
Ventana. Si no es así, consulta el Capítulo 1, Secciones 3 y 4.

Ahora añadirás un ListBox a la ventana. El ListBox se utiliza para
el almacenamiento de los URL.

1. Añadir el ListBox:


En la Librería, haz clic sobre el ListBox y arrástralo a la
esquina superior izquierda del Editor de Diseño.


A medida que te aproximes a los márgenes, verás los
indicadores de alineación que te ayudarán a posicionar el
control. Suelta el ListBox cuando estés contento con su
posición sobre la ventana.

2. Cambia el tamaño del ListBox:


Haz clic sobre el ListBox de modo que aparezcan sus
manejadores de tamaño. Arrastra el manejador de la parte
inferior derecha hasta que complete 2/3 de la ventana.

10







Section 2

Botones

Añadir los Botones
Ahora añadirás el botón Delete a la ventana. El botón de borrar
se utilizará para eliminar los URL del ListBox.

En la Librería, haz clic sobre el control de botón genérico y
arrástralo sobre la ventana cerca de la esquina inferior
derecha.

1. Añade el Botón Delete:


4. Tu ventana se verá así:

Figura 2.2 Diseño de Ventana con Botones

En la Librería, haz clic sobre el control de botón genérico
(situado en el grupo Buttons) y arrástralo sobre la ventana
bajo la esquina inferior derecha del ListBox.


Utiliza los indicadores de alineación para situar el botón de
modo que se alinee con el margen derecho del ListBox.

2. Añadir el Botón Add:


En la Librería, haz clic sobre el control de botón genérico y
arrástralo cerca de la esquina inferior izquierda.


Utiliza los indicadores de alineación para situar del botón.

3. Añade el Botón Show:


11











Section 3

Text Field

Añade el Campo del URL
El campo URL es donde el usuario escribe el URL que se añadirá
al listado.

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

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

2. Cambia el tamaño del campo URL. Selecciona el manejador
de tamaño situado más a la derecha y arrastra el TextField de
modo que tenga la misma anchura que el ListBox.


Utiliza los indicadores de alineación como guías para
ayudarte a alinear todo correctamente.

3. Tu ventana debería de tener este aspecto:

Figura 2.3 Diseño de Ventana co