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.

Acerca de la Guía RápidaBienvenido 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.

Section 1

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.

Bienvenido

2

La Guía Rápida utiliza capturas de pantalla obtenidas en las versiones Windows, OS X y Linux de Xojo. El diseño de la in-terfaz y el conjunto de características es idéntico en todas las plataformas, de modo que las diferencias entre las platafor-mas es meramente cosmético y tienen que ver con las difer-encias entre las interfaces gráficas de Windows, OS X y Linux.

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

• Cuando se te indique que selecciones un elemento desde 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-

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 Win-dows y Linux y pulsar luego la tecla “O” o bien pulsar la te-cla ⌘ en Macintosh y pulsar luego la tecla “O”. Sueltas la tecla modificador sólo después de haber pulsado el atajo de teclado.

• Cualquier cosa que debas de escribir aparecerá entre comillas. Algunos pasos te pedirán que introduzcas líneas de código en el Editor de Código. Éstas aparecen en una caja sombreada:

ShowURL(“SelectedURL.Text”)

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.

Section 2

Convenciones de la Presentación

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

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

1. Haz doble clic en el icono de aplicación de Xojo para ejecu-tar Xojo. Una vez que finalice su carga aparecerá la ven-tana de Selector de Proyecto.

2. Xojo permite crear tres tipos de aplicaciones (Escritorio, 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.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.

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

Section 3

Comenzando

5

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

Vista generalXojo 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.

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.

Section 4

Espacio de trabajo

6

Figura Introducción.2 Ventana Principal

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 SencilloAprende cómo puedes crear una aplicación de navegador Web sencillo.

Acerca de la AplicaciónEl 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.

• Button: se utiliza un Button para disparar una acción. El usuario hace clic ene l botón para cargar la página web del URL en el Visor HTML.

•HTML Viewer: se utiliza 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.

Section 1

Visión General

9

Figura 1.1 La aplicación Navegador Simple completada

Diseñar la VentanaDebe 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: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.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):En la Librería, haz clic en el icono del Botón por Defecto y arrástralo a la es-quina superior derecha de la ventana.

3.El control final es el HTML Viewer:

Arrastra el icono del HTML Viewer sobre el área restante de la pág-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) para que rellene la ventana bajo el Text 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.

Section 2

Crear la Interfaz de Usuario

10

Figura 1.2 Choosing a Text Field in the Library

Figura 1.3 Choosing a Button in the Library

El diseño finalizado de la ventana finalizada debería ser así:

11

Figura 1.4 Diseño finalizado de la ventana

¿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.

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.

InspectorSe 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

Inspector, haz clic sobre el botón Inspector en la barra de her-ramientas.

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

Section 3

Propiedades

12

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 Title:

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.

Section 4

Ventana Propiedades

13

Figura 1.5 Ventana de Inspector

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.

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 medida que cambie el 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-

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.

Section 5

Propiedades de Text Field

14

Figura 1.6 Bloqueo para AddressField

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.

3. Ahora tendrás que hacer cambios en el bloqueo de forma que el Botón perma-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,

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”.

Section 6

Propiedades de Button

15

Figura 1.7 Locking for LocationButton

El último cambio de la interfaz de usuario que has de hacer es para el HTML Viewer. Aquí tendrás que cambiar las propie-dades: Name y Locking

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-clado de modo que el HTML 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

izquierda, e iconos abiertos en la parte inferior y derecha.Haz clic en los candados de modo que estén bloqueados los de la parte superior, inferior, izquierda y derecha.

Section 7

Propiedades de HTML Viewer

16

Figura 1.8 Bloqueo para el WebViewer

Editor de CódigoTu aplicación está prácticamente finalizada. Ahora hay que añadir el código que indica al HTML Viewer qué página web a de mostrar. Xojo utiliza un lenguaje de programación orien-tada a objetos que es muy fácil de aprender. ¡Sólo necesitas una línea de código para finalizar tu proyecto!

Los pasos que has de realizar son:

1. Averiguar si el usuario ha hecho clic sobre el botón GoBut-ton, llamado “Go” en la ventana.

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

3. Hacer que el WebViewer muestre dicha página.

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

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 aplicación ejecuta el

código encontrado en el manejador de evento Action.Esto significa que querrás añadir tu código en el maneja-dor de evento Action, de modo que selec-ciona Action en la lista Event Handler y haz clic en OK.Observa que el Navegador se actualiza para mostrar el evento Action bajo el control GoButton mostrando el Edi-tor de Código.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-

Section 8

Añadir Código

17

Figura 1.9 Ventana para Añadir Event Handler

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

Guardar tu ProyectoDeberí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 ProyectoAhora 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.

Section 9

¿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.

Probar el Navegador Sencillo

19