Guía Rápida

2013 Release 1 Xojo, Inc.

Introducción

BIenvenido a Xojo, el modo más sencillo de crear

aplicaciones de escritorio 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.
Acerca de la Guía Rápida
Bienvenido a Xojo, el modo más sencillo para crear aplicaciones multiplata-
forma de escritorio y Web. Xojo está compuesto por un rico conjunto de obje-
tos de interfaz gráfica, un lenguaje moderno y orientado a objetos, un depura-
dor integrado, y un compilador multiplataforma. Juntos forman el Entorno de
Desarrollo Integrado o IDE.
Con el IDE puedes crear las interfaces de tus aplicaciones con solo arrastrar
y soltar objetos de interfaz en las ventanas y diálogos de tu aplicación. En
esta Guía Rápida verás cuan sencillo es. Xojo proporciona todas las her-
ramientas que necesitas para crear virtualmente cualquier tipo de aplicación
que puedas imaginar.

Esta Guía Rápida es para las personas que empiecen a programar con Xojo.
Te proporcionará una introducción al entorno de desarrollo de Xojo y te guiará
a lo largo del proceso de desarrollo de una aplicación de escritorio (un nave-
gador web sencillo). Debería de tomarte entre 15 y 20 minutos completar la
Guía Rápida.

2
Section 2

Convenciones de la Presentación

dows y Linux, la tecla modificadora es Ctrl; en Macintosh,

la tecla ⌘ (Comando) es la modificadora. Por ejemplo,
La Guía Rápida utiliza capturas de pantalla obtenidas en las
cuando veas el atajo de teclado “Ctrl+O” o “⌘-O”, significa
versiones Windows, OS X y Linux de Xojo. El diseño de la in-
que has de mantener pulsadas las teclas Control en Win-
terfaz y el conjunto de características es idéntico en todas las
dows y Linux y pulsar luego la tecla “O” o bien pulsar la te-
plataformas, de modo que las diferencias entre las platafor-
cla ⌘ en Macintosh y pulsar luego la tecla “O”. Sueltas la
mas es meramente cosmético y tienen que ver con las difer-
tecla modificador sólo después de haber pulsado el atajo
encias entre las interfaces gráficas de Windows, OS X y
de teclado.
Linux.
• Cualquier cosa que debas de escribir aparecerá entre
• Negrita. Se utiliza para destacar la primera vez que se
comillas. Algunos pasos te pedirán que introduzcas líneas
utiliza un nuevo término y para resaltar conceptos impor-
de código en el Editor de Código. Éstas aparecen en una
tantes. Adicionalmente, los títulos de libros, como la Guía
caja sombreada:
Xojo se indican en cursiva.

• Cuando se te indique que selecciones un elemento desde ShowURL(“SelectedURL.Text”)

los menús de Xojo, verás algo como “selecciona Archivo ↠
Nuevo Proyecto”. Esto es equivalente a “Selecciona
Nuevo Proyecto en el menú Archivo.”
• Los elementos entre paréntesis son atajos de teclado y
consisten en una secuencia de teclas que deben de pul-
sarse en el orden en el que aparecen listadas. En Win-
Cuando introduzcas código, observa estas normas:
• Escribe cada línea impresa en diferentes líneas dentro del
Editor de Código. No intentes unir dos o más líneas impre-
sas en la misma línea o bien partir una línea larga en dos
o más líneas.

3
• Don’t add extra spaces where no spaces are indicated in
the printed code.

Whenever you run your application, Xojo first checks your

code for spelling and syntax errors. If this checking turns up
an error, an error pane appears at the bottom of the main win-
dow for you to review. 


4
Section 3

Comenzando

Ejecuta Xojo 2. Xojo permite crear tres tipos de aplicaciones (Escritorio,

Si aun no lo has hecho, este es el momento de iniciar Xojo. Web y Consola). Aquí crearás una aplicación de escritorio.

3. Deberías de ver tres campos: Nombre de Aplicación, Nom-

bre de Empresa e Identificador de Aplicación.

Figura Introducción.1 Ventana de Selección de Proyecto 

Nombre de Aplicación es el nombre de tu aplicación.
Este será el nombre del archivo que se creará.



Nombre de Empresa es el nombre de tu empresa. Pue-
des optar por dejarlo vacío.



Identificador de Aplicación es un identificador único. Se
rellenará automáticamente con los datos de los nombres
de Aplicación y de Empresa, pero puedes cambiarlo.



Introduce "SimpleBrowser" como Nombre de Aplicación.
Puedes dejar Nombre de Empresa como está o cambiarlo.

1. Haz doble clic en el icono de aplicación de Xojo para ejecu- 4. Haz clic en OK para abrir la ventana principal de Xojo (de-
tar Xojo. Una vez que finalice su carga aparecerá la ven- nominada Espacio de trabajo), donde comenzarás a
tana de Selector de Proyecto. diseñar tu aplicación

5
Section 4
Espacio de trabajo
Vista general
Xojo abre el Espacio de Trabajo con la ventana por defecto
de tu aplicación seleccionada en el Navegador y mostrada
en el Editor de Diseño.
Figura Introducción.2 Ventana Principal
Navegador: El área en la parte superior izquierda muestra
todos los elementos del proyecto. Por defecto puedes ver
Window1 (seleccionada), El objeto App y el objeto MainMenu-
Bar. Se usa el Navegador para navegar por el proyecto.
Editor de Diseño: El área central es el Editor de Diseño. Utili-
zas el Editor de Diseño para diseñar la interfaz de usuario
para las ventanas de tu aplicación. Muestra la ventana y pre-
visualiza el aspecto que tendrá cuando se ejecute la aplica-
ción. En esta ilustración, la ventana está vacía porque aun no
se ha añadido ningún elemento de controles de interfaz
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 que puedes añadir a
una ventana o al proyecto. Diseñas la ventana arrastrando
los controles desde la Librería hacia la ventana. También pue-
des añadir un control a la ventana haciendo doble clic sobre
él.

Puedes cambiar el modo en el que se muestran los controles
en la Librería haciendo clic sobre el pequeño icono de rueda
dentada y eligiendo un ajuste distinto.



6
Nota: si la Librería no está visible, haz click en el botón Li-
brería situado en la barra de herramientas para mostrarlo.

Inspector: no mostrado en la anterior captura está el Inspec-

tor, y qie permite ver y cambiar las propiedades del control se-
leccionado. Este área de la ventana Principal es compartido
con la Librería. Puedes mostrar el Inspector haciendo clic so-
bre el botón Inspector en la barra de herramientas. El Inspec-
tor muestra información sobre el elemento selecionado en el
Navegador o Editor. Los contenidos del Inspector cambian a
medida que haces clic sobre los diferentes elementos. Pue-
des cambiar un valor del Inspector, introduciendo un nuevo
valor en el campo a la derecha de la etiqueta de campo.

7
Chapter 1

Aplicación
Navegaror
Sencillo
Aprende cómo puedes crear una aplicación de
navegador Web sencillo.
Section 1

Visión General

Acerca de la Aplicación • Button: se utiliza un Button para disparar una acción. El

El mejor modo para aprender con rapidez Xojo es creando
una aplicación. Para este Inicio Rápido, crearás un navega-
dor web sencillo.
Una aplicación Xojo está compuesta
por una serie de objetos, denomina-
dos clases. Prácticamente todo en
Xojo es una clase, incluyendo tus
ventanas y sus controles. En el
proyecto SimpleBrowser, utilizarás la
clase Window por defecto para crear
tu ventana sobre la que añadirás los
controles (clases de interfaz de
usuario) para crear el diseño.
La aplicación usa tres controles:
• Text Field: un control Text Field
permite introducir texto. En este
proyecto, el URL a mostrar se in-
troduce en un TextField en la
parte superior de la ventana.
usuario hace clic ene l botón para cargar la página web
del URL en el Visor HTML.
•HTML Viewer: se utiliza
Figura 1.1 La aplicación Navegador Simple completada un HTML para mostrar
HTML (una página web).
En este proyecto, es el
responsable de mostrar
el sitio web indicado por
el URL.
Las siguientes secciones
te guiarán en la creación
de la interfaz de usuario,
añadiendo el código ne-
cesario para hacer que
la aplicación funcione.

9
Section 2
Crear la Interfaz de Usuario
Diseñar la Ventana
Debe de estar Xojo en fun-
cionamiento y con Window1 abierta
en el Editor de Diseño. Si no es así,
por favor repasa el Prefacio, Seccio-
nes 3 y 4.
Ahora ya estás listo para comenzar
a añadir controles a la ventana.
1. Comienza con el Text Field:
 Viewer sobre el área restante de la pág-


En la Librería, haz clic en el
icono del Text Field y arrástralo
sobre la esquina superior
izquierda de la ventana en el Edi-
tor de Diseño.
 para que rellene la ventana bajo el Text


Cuando estés próximo a los
límites de la ventana verás indica-
dores de alineación que te ayu-
darán a situar el control.
2. A continuación el Button (botón):


 Figura 1.3
Choosing a
En la Librería, haz clic en el icono del Button in the
Figura 1.2 Choosing a
Text Field in the Library Botón por Defecto y arrástralo a la es- Library
quina superior derecha de la ventana.
3.El control final es el HTML
Viewer:



Arrastra el icono del HTML
ina (deberás de desplazarte por el resto
de los controles para verlo).



Cambiar el tamaño de este control (utili-
zando los manejadores de selección)
Field y el Button.
4. Para cambiar el tamaño del Text Field, haz clic sobre él
para ver los manejadores de selección. Haz clic sobre el
manejador central derecho y arrástralo hasta que las
guías de alineación indiquen que está próximo al botón.
10
El diseño finalizado de la ventana finalizada debería ser así:

Figura 1.4 Diseño finalizado de la ventana

11
Section 3

Propiedades

¿Qué es una propiedad? Inspector, haz clic sobre el botón Inspector en la barra de her-
Una propiedad es un valor de una clase. Cambiar el valor de ramientas.
una propiedad te permite modificar el comportamiento de la
Puedes cambiar entre la librería y el Inspector usando
clase.
Comando-K en OS X o Control-L en Windows y Linux.

Para este proyecto querrás cambiar varias propiedades de la
ventana y de sus controles. Algunas de las cosas que has de
hacer son:

• Cambiar el nombre de todos los controles (y de la ven-

tana) de modo que describa el compartimiento y facilite su
referencia desde el código.

• Añadir un Texto al Button.

• Definir propiedades de Bloqueo para que los controles

cambien su tamaño correctamente cuando se modifique el
tamaño de la ventana.

Inspector
Se usa el Inspector para cambiar la ventana y las propie-
dades de los controles. Comparte la misma área en la dere-
cha de la ventana principal como la Librería. Para acceder al

12
Section 4

Ventana Propiedades

Si no lo has hecho todavía, accede al Inspector haciendo clic

en el botón de Inspector de la barra de herramientas.

Has de cambiar las propiedades Name y

Figura 1.5 Ventana
Title: de Inspector
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 propie-
dades de la ventana.

2. En el campo Name (situado en el

grupo ID), cambia el nombre de “Win-
dow1” a “BrowserWindow”. Pulsa Re-
torno para ver el cambio del nombre
en el Navegador.

3. En el campo Title (situado en el grupo

Frame), cambia el nombre de “Unti-
tled” a “Web Browser”. Pulsa Retorno
y verás como cambia el nombre en la
barra de título de la ventana.

13
Section 5

Propiedades de Text Field

El Text Field es donde inroduces el URL que quieres ver en el
navegador. Querrás cambiar las siguientes propiedades:
Name and Locking
1. En la ventana, selecciona el control TextField1. El Inspec-
tor cambia para mostrar las propiedades del Text Field.
rior e izquierda y otros desbloqueados para la parte infe-
rior y derecha.

Haz clic en los candados de arriba, la izquierda y la dere-
cha, y deja el inferior desbloqueado.

2. En el campo Name, cambia el nombre de “TextField1” a

“AddressField”. Pulsa Retorno para ver como cambia el
nombre en el Navegador.

3. Ahora tendrás que hacer los cambios de bloqueo de modo

que el el Text Field sea
más largo o pequeño a Figura 1.6 Bloqueo para
medida que cambie el AddressField
tamaño de la ventana.



En el grupo Locking ob-
serva la imagen que
muestra la ventana con
los iconos de unos pe-
queños candados cerra-
dos para la parte supe-

14
Section 6

Propiedades de Button

Tus usuarios hacen clic en el botón para mostrar la página
web. Debes cambiar estas propiedades: Name, Locking, Cap-
tion
1. En la ventana, selecciona el control PushButton1. El In-
spector cambiar para mostrar las Propiedades de Button.
2. En el campo Name, cambia el nombre de “PushButton1” a
“GoButton”. Pulsa Retorno para ver el cambio del nombre
en el Navegador.
izquierda e iconos de iconos abiertos para la parte inferior
y derecha.

Haz clic en los candados para cerrar los de arriba y la dere-
cha, dejando abiertos los de la parte inferior e izquierda.
4. Por último, querrás que tu botón tenga un texto. En el
campo Caption (situado en el grupo Behavior), cambia el
texto de “Untitled” a “Go”.

3. Ahora tendrás que hacer

cambios en el bloqueo de
Figura 1.7 Locking for
forma que el Botón perma-
LocationButton
nezca anclado al margen
derecho de la ventana
cuando esta modifique su ta-
maño.



En el grupo Locking observa
la imagen de la ventana que
muestra los iconos de unos
pequeños candados cerrados en la parte superior,

15
Section 7

Propiedades de HTML Viewer

El último cambio de la interfaz de usuario que has de hacer izquierda, e iconos abiertos en la parte inferior y derecha.

es para el HTML Viewer. Aquí tendrás que cambiar las propie- Haz clic en los candados de modo que estén bloqueados
dades: Name y Locking los de la parte superior, inferior, izquierda y derecha.

1. En la ventana, selecciona el control HTMLViewer1. El In-

spector cambiar para mostrar las propiedades del HTML
Viewer.

2. En el campo Name, cambia el nombre de “HTMLViewer1”

a “WebViewer”. Pulsa Retorno para ver el cambio del nom-
bre en el Navegador.

3. Por último, tendrás que

hacer cambios en el an- Figura 1.8 Bloqueo para
clado de modo que el HTML el WebViewer
Viewer continúe llenando la
ventana cuando esta modi-
fique su tamaño.



En el grupo Locking, ob-
serva la imagen que mues-
tra la ventana con pequeños
iconos de candados cerrados en la parte superior e

16
Section 8

Añadir Código

Editor de Código código encontrado en

el manejador de Figura 1.9 Ventana para Añadir
Tu aplicación está prácticamente finalizada. Ahora hay que Event Handler
añadir el código que indica al HTML Viewer qué página web evento Action.

a de mostrar. Xojo utiliza un lenguaje de programación orien- Esto significa que
tada a objetos que es muy fácil de aprender. ¡Sólo necesitas querrás añadir tu
una línea de código para finalizar tu proyecto! código en el maneja-
dor de evento Action,
Los pasos que has de realizar son: de modo que selec-
ciona Action en la lista
1. Averiguar si el usuario ha hecho clic sobre el botón GoBut-
Event Handler y haz
ton, llamado “Go” en la ventana.
clic en OK.

2. Obtener el URL que el usuario ha introducido en Address- 

Field. Observa que el Navegador se actualiza para mostrar el
evento Action bajo el control GoButton mostrando el Edi-
3. Hacer que el WebViewer muestre dicha página.
tor de Código.

Sigue estos pasos para añador el código: 

Este paso resuelve tu primer problema de saber si el
1. En la ventana, haz doble clic sobre el control GoButton, usuario ha hecho clic sobre el control GoButton.
etiquetado “Go”. 


 2. Ahora has de obtener el URL introducido por el usuario.

Aparecerá la ventana Add Event Handler. Cuando un 

usuario hace clic sobre un Button, tu aplicación ejecuta el El valor escrito por el usuario en un Text Field se alma-

17
 cena en la propiedad Text del Text Field.

Accedes a dicha propiedad así:


AddressField.Text

3. El último paso consiste en hacer que el WebViewer mues-

tre la página web. Esto se hace llamando al métod
LoadURL de la clase y enviándole el URL introducido por
el usuario.



Ahora tu código debería de ser así:


WebViewer.LoadURL(AddressField.Text)

4. Adelante y añade este código al Editor de Código.

Comienza por hacer clic sobre el espacio en blanco bajo el
nombre del evento Action() y escribe a continuación este
código (escríbelo en vez de copiarlo y pegarlo):


WebViewer.LoadURL(AddressField.Text)

¡Eso es todo! Tu primera aplicación está completa.

18
Section 9
Probar el Navegador Sencillo
¿QUÉ HACER A CONTINUACIÓN?
El Inicio Rápido te ha introducido a Xojo. Has
aprendido cómo diseñar una ventana, añadir
controles y código para ejecutar a
continuación tu proyecto.
A continuación deberías de trabajar con el
Tutorial y explorar seguidamente la Guia y la
Referencia del Lenguaje para continuar
aprendiendo cómo crear grandes
aplicaciones con Xojo.
Guardar tu Proyecto
Deberías de guardar el trabajo con frecuencia y siempre antes de ejecutar el
proyecto.
1. Guarda el proyecto seleccionando Archivo ↠ Guardar.
2. Nombra el proyecto “SimpleBrowser” y haz clic en Guardar.
Ejecutar el Proyecto
Ahora puedes probar la aplicación finalizada:
1. Haz clic en el botón Ejecutar en la barra de herramientas de tu proyecto.

La aplicación se abre en su propia ventana.
2. Escribe un URL, como por ejemplo “http://www.xojo.com”, y haz clic en el
botón “Go”.
3. Verás la página web.
4. Cuando hayas terminado de experimentar con la aplicación Simple
Browser, puedes cerrar la ventana y volver a Xojo.

En OS X, selecciona SimpleBrowser.debug ↠ Salir para salir de la aplica-
ción.

19