Gua Rpida

2013 Release 1

Xojo, Inc.

Introduccin

BIenvenido a Xojo, el modo ms 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 Gua Rpida

Bienvenido a Xojo, el modo ms sencillo para crear aplicaciones multiplataforma de escritorio y Web. Xojo est compuesto por un rico conjunto de objetos de interfaz grfica, un lenguaje moderno y orientado a objetos, un depurador 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 dilogos de tu aplicacin. En
esta Gua Rpida vers cuan sencillo es. Xojo proporciona todas las herramientas que necesitas para crear virtualmente cualquier tipo de aplicacin
que puedas imaginar.
Esta Gua Rpida es para las personas que empiecen a programar con Xojo.
Te proporcionar una introduccin al entorno de desarrollo de Xojo y te guiar
a lo largo del proceso de desarrollo de una aplicacin de escritorio (un navegador web sencillo). Debera de tomarte entre 15 y 20 minutos completar la
Gua Rpida.

Section 2

Convenciones de la Presentacin
La Gua Rpida utiliza capturas de pantalla obtenidas en las
versiones Windows, OS X y Linux de Xojo. El diseo de la interfaz y el conjunto de caractersticas es idntico en todas las
plataformas, de modo que las diferencias entre las plataformas es meramente cosmtico y tienen que ver con las diferencias entre las interfaces grficas de Windows, OS X y
Linux.
Negrita. Se utiliza para destacar la primera vez que se
utiliza un nuevo trmino y para resaltar conceptos importantes. Adicionalmente, los ttulos de libros, como la Gua
Xojo se indican en cursiva.
Cuando se te indique que selecciones un elemento desde
los mens de Xojo, vers algo como selecciona Archivo
Nuevo Proyecto. Esto es equivalente a Selecciona
Nuevo Proyecto en el men Archivo.
Los elementos entre parntesis son atajos de teclado y
consisten en una secuencia de teclas que deben de pulsarse en el orden en el que aparecen listadas. En Win-

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

la tecla (Comando) es la modificadora. Por ejemplo,
cuando veas el atajo de teclado Ctrl+O o -O, significa
que has de mantener pulsadas las teclas Control en Windows y Linux y pulsar luego la tecla O o bien pulsar la tecla en Macintosh y pulsar luego la tecla O. Sueltas la
tecla modificador slo despus de haber pulsado el atajo
de teclado.
Cualquier cosa que debas de escribir aparecer entre
comillas. Algunos pasos te pedirn que introduzcas lneas
de cdigo en el Editor de Cdigo. stas aparecen en una
caja sombreada:
ShowURL(SelectedURL.Text)

Cuando introduzcas cdigo, observa estas normas:

Escribe cada lnea impresa en diferentes lneas dentro del
Editor de Cdigo. No intentes unir dos o ms lneas impresas en la misma lnea o bien partir una lnea larga en dos
o ms lneas.
3

 Dont 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 window for you to review.

Section 3

Comenzando
Ejecuta Xojo
Si aun no lo has hecho, este es el momento de iniciar Xojo.

Figura Introduccin.1 Ventana de Seleccin de Proyecto

1. Haz doble clic en el icono de aplicacin de Xojo para ejecutar Xojo. Una vez que finalice su carga aparecer la ventana de Selector de Proyecto.

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

Web y Consola). Aqu crears una aplicacin de escritorio.
3. Deberas de ver tres campos: Nombre de Aplicacin, Nombre de Empresa e Identificador de Aplicacin.

Nombre de Aplicacin es el nombre de tu aplicacin.

Este ser el nombre del archivo que se crear.

Nombre de Empresa es el nombre de tu empresa. Puedes optar por dejarlo vaco.

Identificador de Aplicacin es un identificador nico. Se

rellenar automticamente con los datos de los nombres
de Aplicacin y de Empresa, pero puedes cambiarlo.

Introduce "SimpleBrowser" como Nombre de Aplicacin.

Puedes dejar Nombre de Empresa como est o cambiarlo.
4. Haz clic en OK para abrir la ventana principal de Xojo (denominada Espacio de trabajo), donde comenzars a
disear tu aplicacin

Section 4

Espacio de trabajo
Window1 (seleccionada), El objeto App y el objeto MainMenuBar. Se usa el Navegador para navegar por el proyecto.

Vista general
Xojo abre el Espacio de Trabajo con la ventana por defecto
de tu aplicacin seleccionada en el Navegador y mostrada
en el Editor de Diseo.
Figura Introduccin.2 Ventana Principal

Editor de Diseo: El rea central es el Editor de Diseo. Utilizas el Editor de Diseo para disear la interfaz de usuario
para las ventanas de tu aplicacin. Muestra la ventana y previsualiza el aspecto que tendr cuando se ejecute la aplicacin. En esta ilustracin, la ventana est vaca porque aun no
se ha aadido ningn elemento de controles de interfaz
desde la Librera.
Librera: El rea de la derecha es la Librera y muestra los
controles y los elementos de la interfaz que puedes aadir a
una ventana o al proyecto. Diseas la ventana arrastrando
los controles desde la Librera hacia la ventana. Tambin puedes aadir un control a la ventana haciendo doble clic sobre
l.
Puedes cambiar el modo en el que se muestran los controles
en la Librera haciendo clic sobre el pequeo icono de rueda

Navegador: El rea en la parte superior izquierda muestra

todos los elementos del proyecto. Por defecto puedes ver

dentada

y eligiendo un ajuste distinto.

Nota: si la Librera no est visible, haz click en el botn Librera situado en la barra de herramientas para mostrarlo.
Inspector: no mostrado en la anterior captura est el Inspector, y qie permite ver y cambiar las propiedades del control seleccionado. Este rea de la ventana Principal es compartido
con la Librera. Puedes mostrar el Inspector haciendo clic sobre el botn Inspector en la barra de herramientas. El Inspector muestra informacin sobre el elemento selecionado en el
Navegador o Editor. Los contenidos del Inspector cambian a
medida que haces clic sobre los diferentes elementos. Puedes cambiar un valor del Inspector, introduciendo un nuevo
valor en el campo a la derecha de la etiqueta de campo.

Chapter 1

Aplicacin
Navegaror
Sencillo
Aprende cmo puedes crear una aplicacin de
navegador Web sencillo.

Section 1

Visin General
Acerca de la Aplicacin
El mejor modo para aprender con rapidez Xojo es creando
una aplicacin. Para este Inicio Rpido, crears un navegador web sencillo.
Una aplicacin Xojo est compuesta
por una serie de objetos, denominados clases. Prcticamente todo en
Xojo es una clase, incluyendo tus
ventanas y sus controles. En el
proyecto SimpleBrowser, utilizars la
clase Window por defecto para crear
tu ventana sobre la que aadirs los
controles (clases de interfaz de
usuario) para crear el diseo.
La aplicacin usa tres controles:

Button: se utiliza un Button para disparar una accin. El

usuario hace clic ene l botn para cargar la pgina web
del URL en el Visor HTML.

Figura 1.1 La aplicacin Navegador Simple completada

HTML Viewer: se utiliza

un HTML para mostrar
HTML (una pgina web).
En este proyecto, es el
responsable de mostrar
el sitio web indicado por
el URL.
Las siguientes secciones
te guiarn en la creacin
de la interfaz de usuario,
aadiendo el cdigo necesario para hacer que
la aplicacin funcione.

Text Field: un control Text Field

permite introducir texto. En este
proyecto, el URL a mostrar se introduce en un TextField en la
parte superior de la ventana.
9

Section 2

Crear la Interfaz de Usuario

Disear la Ventana
Debe de estar Xojo en funcionamiento y con Window1 abierta
en el Editor de Diseo. Si no es as,
por favor repasa el Prefacio, Secciones 3 y 4.

Figura 1.2 Choosing a

Text Field in the Library

2. A continuacin el Button (botn):

En la Librera, haz clic en el icono del

Botn por Defecto y arrstralo a la esquina superior derecha de la ventana.
3.El control final es el HTML
Viewer:

Ahora ya ests listo para comenzar

a aadir controles a la ventana.
1. Comienza con el Text Field:

En la Librera, haz clic en el

icono del Text Field y arrstralo
sobre la esquina superior
izquierda de la ventana en el Editor de Diseo.

Cuando ests prximo a los

lmites de la ventana vers indicadores de alineacin que te ayudarn a situar el control.

Figura 1.3
Choosing a
Button in the
Library

Arrastra el icono del HTML

Viewer sobre el rea restante de la pgina (debers de desplazarte por el resto
de los controles para verlo).

Cambiar el tamao de este control (utilizando los manejadores de seleccin)

para que rellene la ventana bajo el Text
Field y el Button.
4. Para cambiar el tamao del Text Field, haz clic sobre l
para ver los manejadores de seleccin. Haz clic sobre el
manejador central derecho y arrstralo hasta que las
guas de alineacin indiquen que est prximo al botn.
10

El diseo finalizado de la ventana finalizada debera ser as:

Figura 1.4 Diseo finalizado de la ventana

11

Section 3

Propiedades
Qu es una propiedad?
Una propiedad es un valor de una clase. Cambiar el valor de
una propiedad te permite modificar el comportamiento de la
clase.

Inspector, haz clic sobre el botn Inspector en la barra de herramientas.

Puedes cambiar entre la librera y el Inspector usando
Comando-K en OS X o Control-L en Windows y Linux.

Para este proyecto querrs 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 ventana) de modo que describa el compartimiento y facilite su
referencia desde el cdigo.
Aadir un Texto al Button.
Definir propiedades de Bloqueo para que los controles
cambien su tamao correctamente cuando se modifique el
tamao de la ventana.

Inspector
Se usa el Inspector para cambiar la ventana y las propiedades de los controles. Comparte la misma rea en la derecha de la ventana principal como la Librera. Para acceder al

12

Section 4

Ventana Propiedades
Si no lo has hecho todava, accede al Inspector haciendo clic
en el botn de Inspector de la barra de herramientas.
Has de cambiar las propiedades Name y
Title:

Figura 1.5 Ventana

de Inspector

1. En primer lugar, en el Editor de

Diseo, haz clic en la barra de ttulo
de la ventana para seleccionarla. El
Inspector mostrar ahora las propiedades de la ventana.
2. En el campo Name (situado en el
grupo ID), cambia el nombre de Window1 a BrowserWindow. Pulsa Retorno para ver el cambio del nombre
en el Navegador.
3. En el campo Title (situado en el grupo
Frame), cambia el nombre de Untitled a Web Browser. Pulsa Retorno
y vers como cambia el nombre en la
barra de ttulo de la ventana.

13

Section 5

Propiedades de Text Field

El Text Field es donde inroduces el URL que quieres ver en el
navegador. Querrs cambiar las siguientes propiedades:
Name and Locking
1. En la ventana, selecciona el control TextField1. El Inspector cambia para mostrar las propiedades del Text Field.

rior e izquierda y otros desbloqueados para la parte inferior y derecha.

Haz clic en los candados de arriba, la izquierda y la derecha, 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 tendrs que hacer los cambios de bloqueo de modo
que el el Text Field sea
ms largo o pequeo a
Figura 1.6 Bloqueo para
AddressField
medida que cambie el
tamao de la ventana.

En el grupo Locking observa la imagen que

muestra la ventana con
los iconos de unos pequeos candados cerrados para la parte supe14

Section 6

Propiedades de Button
Tus usuarios hacen clic en el botn para mostrar la pgina
web. Debes cambiar estas propiedades: Name, Locking, Caption
1. En la ventana, selecciona el control PushButton1. El Inspector 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 derecha, dejando abiertos los de la parte inferior e izquierda.
4. Por ltimo, querrs que tu botn tenga un texto. En el
campo Caption (situado en el grupo Behavior), cambia el
texto de Untitled a Go.

3. Ahora tendrs que hacer

cambios en el bloqueo de
Figura 1.7 Locking for
forma que el Botn permaLocationButton
nezca anclado al margen
derecho de la ventana
cuando esta modifique su tamao.

En el grupo Locking observa

la imagen de la ventana que
muestra los iconos de unos
pequeos 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
es para el HTML Viewer. Aqu tendrs que cambiar las propiedades: Name y Locking

izquierda, e iconos abiertos en la parte inferior y derecha.

Haz clic en los candados de modo que estn bloqueados
los de la parte superior, inferior, izquierda y derecha.

1. En la ventana, selecciona el control HTMLViewer1. El Inspector 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 nombre en el Navegador.
3. Por ltimo, tendrs que
hacer cambios en el anFigura 1.8 Bloqueo para
clado de modo que el HTML el WebViewer
Viewer contine llenando la
ventana cuando esta modifique su tamao.

En el grupo Locking, observa la imagen que muestra la ventana con pequeos

iconos de candados cerrados en la parte superior e
16

Section 8

Aadir Cdigo
Editor de Cdigo

cdigo encontrado en
el manejador de
evento Action.
Esto significa que
querrs aadir tu
cdigo en el manejador de evento Action,
de modo que selecciona Action en la lista
Event Handler y haz
clic en OK.

Tu aplicacin est prcticamente finalizada. Ahora hay que

aadir el cdigo que indica al HTML Viewer qu pgina web
a de mostrar. Xojo utiliza un lenguaje de programacin orientada a objetos que es muy fcil de aprender. Slo necesitas
una lnea de cdigo para finalizar tu proyecto!
Los pasos que has de realizar son:
1. Averiguar si el usuario ha hecho clic sobre el botn GoButton, llamado Go en la ventana.

2. Obtener el URL que el usuario ha introducido en AddressField.

Observa que el Navegador se actualiza para mostrar el

evento Action bajo el control GoButton mostrando el Editor de Cdigo.

3. Hacer que el WebViewer muestre dicha pgina.

Sigue estos pasos para aador el cdigo:
1. En la ventana, haz doble clic sobre el control GoButton,
etiquetado Go.

Aparecer la ventana Add Event Handler. Cuando un

usuario hace clic sobre un Button, tu aplicacin ejecuta el

Figura 1.9 Ventana para Aadir

Event Handler

Este paso resuelve tu primer problema de saber si el

usuario ha hecho clic sobre el control GoButton.
2. Ahora has de obtener el URL introducido por el usuario.

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 muestre la pgina web. Esto se hace llamando al mtod
LoadURL de la clase y envindole el URL introducido por
el usuario.

Ahora tu cdigo debera de ser as:

WebViewer.LoadURL(AddressField.Text)

4. Adelante y aade este cdigo al Editor de Cdigo.

Comienza por hacer clic sobre el espacio en blanco bajo el
nombre del evento Action() y escribe a continuacin este
cdigo (escrbelo en vez de copiarlo y pegarlo):
WebViewer.LoadURL(AddressField.Text)

Eso es todo! Tu primera aplicacin est completa.

18

Section 9

Probar el Navegador Sencillo

QU HACER A CONTINUACIN?

Guardar tu Proyecto

El Inicio Rpido te ha introducido a Xojo. Has

aprendido cmo disear una ventana, aadir
controles y cdigo para ejecutar a
continuacin tu proyecto.

Deberas de guardar el trabajo con frecuencia y siempre antes de ejecutar el

proyecto.

A continuacin deberas de trabajar con el

Tutorial y explorar seguidamente la Guia y la
Referencia del Lenguaje para continuar
aprendiendo cmo crear grandes
aplicaciones con Xojo.

1. Guarda el proyecto seleccionando Archivo Guardar.

2. Nombra el proyecto SimpleBrowser y haz clic en Guardar.

Ejecutar el Proyecto
Ahora puedes probar la aplicacin finalizada:
1. Haz clic en el botn Ejecutar en la barra de herramientas de tu proyecto.
La aplicacin se abre en su propia ventana.
2. Escribe un URL, como por ejemplo http://www.xojo.com, y haz clic en el
botn Go.
3. Vers la pgina web.
4. Cuando hayas terminado de experimentar con la aplicacin Simple
Browser, puedes cerrar la ventana y volver a Xojo.
En OS X, selecciona SimpleBrowser.debug Salir para salir de la aplicacin.

19