Inicio Rápido

2013 Release 1 Xojo, Inc.

Chapter 1

Introducción

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

Acerca del Inicio RápidoBienvenido a Xojo, la herramienta más sencilla para crear aplicaciones multi-plataforma de escritorio y para la web. Xojo está compuesta por un rico con-junto de objetos gráficos para la interfaz de usuario, un lenguaje moderno ori-entado a objetos y un depurador integrado, así como un compilador multiplata-forma. Combinados suponen el Entorno de Desarrollo Integrado de Xojo (IDE).

Con el IDE puedes crear la interfaz de tu aplicación con solo arrastrar y soltar los objetos de interfaz en las ventanas y diálogos de la aplicación. En este Ini-cio Rápido, comprobarás cuan sencillo es. Xojo proporciona todas las her-ramientas que necesitas para crear virtualmente cualquier tipo de aplicación que puedas imaginar.

Este Inicio Rápido es para los recién llegados a la programación y al nuevo Xojo. Te proporcionará una introducción al entorno de desarrollo de Xojo y te guiará a través del proceso de desarrollo de una aplicación de escritorio (un navegador web sencillo). Debería de tomarte entre 15 y 20 minutos finalizar este Inicio Rápido.

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

Este Inicio Rápido utiliza capturas de pantalla obtenidos a par-tir de las versiones de Xojo para Windows, OS X y Linux. Los objetos de diseño de la interfaz y el conjunto de característi-cas son indénticos en todas las plataformas, de modo que las diferencias entre las plataformas son cosméticos y tienes que ver con las diferencias en las interfaces de Windows, OS X y Linux.

• Negrita. Se utiliza para enfatizar la primera vez que se utiliza un término y para resaltar conceptos de importan-cia. Además, los títulos de libros, como Guía Xojo, se muestran en cursiva.

• Cuando se indique que elijas un elemento de uno de los menús de Xojo, verás algo como “selecciona Archivo ↠ Nuevo Proyecto”. Esto es equivalente a “elige 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 indicado. En Windows y Linux, la tecla

modificadora es Ctrl; en Macintosh, la tecla modificadora es ⌘ (Comando). Por ejemplo, cuando veas el atajo de te-clado “Ctrl+O” o “⌘-O”, significa mantener pulsadas las te-clas Control en Windows o Linux y pulsar después la tecla “O” o mantener pulsada la tecla ⌘ en Macintosh y pulsar la tecla “O”. Se suelta la tecla modificadora sólo después de pulsar la tecla de atajo.

• Cualquier cosa que debas de teclear está entrecomillado. Algunos pasos piden 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, observa lo siguiente:

• Escribe cada línea impresa en una línea separada en el Editor de Código. No intentes combinar una o más líneas impresas en la misma línea o bien dividir una línea larga en dos o más líneas.

Section 2

Convenciones de la Presentación

3

• No añadas espacios adicionales donde no están indicados en el código impreso.

Cada vez que ejecutes tu aplicación, Xojo comprobará en primer lugar tu código en búsqueda de errores de sintaxis. Si dicha comprobación descubre un error, entonces aparecerá un panel de error en la parte inferior de la ventana principal para que puedas revisarlo.

4

Ejecuta XojoSi aún no lo has hecho, ejecuta Xojo.

1. Haz doble clic en el icono de aplicación Xojo para ejecu-tarla, aparecerá el Selector de Proyecto.

2. Xojo te permite crear tres tipos diferentes de aplicaciones (Escritorio, Web y Consola). En este Inicio Rápido, vas a crear una aplicación web. Por tanto, haz clic en Web.

3. Deberías de ver tres campos a completar: Nombre de Apli-cación, Nombre de Empresa e Identificador de Aplicación.Nombre de Aplicación es el nombre de tu aplicación. Este será el nombre de archivo que se creará para almace-nar la aplicación propiamente dicha.Nombre de Empresa es el nombre de tu empresa. Pue-des dejar este campo en blanco.Identificador de Aplicación es un identificador único para esta aplicación. Se completará automáticamente utilizando lo que hayas introducido en los campos de Nombre de Apli-cación y de Empresa, pero también podrás cambiarlo por lo que quieras.Introduce "MapViewer" como Nombre de Aplicación. Pue-des dejar el Nombre de Empresa tal cual o cambiarlo.

Section 3

Primeros Pasos

5

Figura 1.1 Ventana de Selector de Proyecto

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

6

Visión generalXojo abre el Espacio de trabajo con la página web por de-fecto para tu aplicación seleccionada en el Navegador y mostrada en el Editor de Diseño.

Navegador: El área de la parte superior izquierda muestra todos los elementos del proyecto. Por omisión verás Win-dow1 (y que está seleccionada), el objeto App y el objeto

MainMenuBar. Utilizas 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 de las ventanas de la aplicación. Muestra la ventana y previsu-aliza el aspecto que tendrá cuando se ejecute la aplicación. En esta ilustración, está vacía porque aun no se ha añadido ningún control 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 interfaz que puedes añadir a una ventana del proyecto. Diseñas la ventana arrastrando controles desde la Librería sobre la ventana. También puedes 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 diferente.Nota: Si la Librería no está visible, haz clic en el botón de Li-brería en la barra de herramientas para mostrarla.

Section 4

Espacio de trabajo

7

Figura 1.2 La Ventana Principal de Xojo

Inspector: Aunque no está mostrado en la ilustración también se encuentra el Inspector, y que permite ver y cambiar las propiedades del control seleccionado. Este área de la ven-tana Principal es compartida con la Librería. Puedes mostrar el Inspector haciendo clic sobre el botón de Inspector en la barra de herramientas. El Inspector muestra información so-bre el elemento seleccionado en el Navegador o el Editor. Los contenidos del Inspector cambian en función de cuál sea el elemento seleccionado. Puedes cambiar un valor del Inspec-tor introduciendo uno nuevo en el campo situado a la derecha de la etiqueta asociada.

8

Chapter 2

Aplicación MapViewer

Descubre como crear una aplicación web sencilla que muestre ubicaciones en mapas.

Acerca de la Aplicación

El mejor modo de aprender a usar con rapidez Xojo consiste en crear una aplica-ción simple. Para este Inicio Rápido, crearás una aplicación web que muestre las ubica-ciones en un mapa.

Una aplicación Xojo está compuesta por una colección de ob-jeots, denominados clases. Prácticamente todo en Xojo es una clase, incluyendo las páginas web y los con-troles de la página web. En el proyecto

MapViewer, usarás la clase WebPage por omisión para crear tu página web, y añadirás controles (clases de interfaz de

usuario) sobre dicha página para crear el diseño.

MapViewer utiliza tres controles:

•TextField: Un control Text Field se utiliza para la introducción de texto. En este proyecto, se escribe en un Text Field en la parte superior de la ventana la ubicación a mostrar.

•Button: Se utiliza un Web Button para disparar la acción. El usuario hace clic en el botón para cargar la ubicación del Text Field en el Map Viewer.

•MapViewer: Se utiliza un Map Viewer para mostrar la ubicación sobre un mapa (utiliza Google Maps entre bam-balinas). Aquí es el encargado de mostrar la ubicación del Text Field.

Section 1

Vista General

10

Figure 2.1 The Completed MapViewer Web Application

Las siguientes secciones te guiarán por la creación de la inter-faz de usuario y para añadir el código necesario para hacer que la aplicación funcione.

11

Diseñando la Pág-ina WebDeberías de tener Xojo fun-cionando y la WebPage1 abierta en el Editor de Código Si no es así, por favor, con-sulta el Capítulo 1, Secciones 3 y 4.

Ahora estás listo para comen-zar a añadir los controles a la página web.

1. Comenzando con el Text Field:En la Librería, haz clic so-bre el Text Field y arrástralo a la esquina superior izquierda de la página web en el Editor de Diseño.

A medida que te acerques a los már-genes de la página, verás los indica-dores de alineación que te ayudarán a situar el control.

2. A continuación está el Button (botón):En la Li-brería, haz clic sobre el

Button y arrástralo a la esquina superior derecha de la página.

3. El último control es el Map Viewer:Arrastra el Map Viewer sobre el espacio restante de la página.

4. El paso final es cambiar el ta-maño del Text Field para que sea más largo. Haz clic sobre él para

Section 2

Crear la Interfaz de Usuario

12

Figura 2.1 Text Field en la Librería

Figura 2.2 Button en la Librería

Figura 2.3 Map Viewer en la Librería

mostrar 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á lo suficientemente próximo al botón.

El diseño finalizado de tu página web debería de ser como el mostrado en la imagen.

13

Figura 2.4 Diseño de la Página Web

¿Qué es una Propiedad?Una propiedad es un valor de una clase. Cambiando los valo-res de la propiedad nos permite cambiar el comportamiento de la clase.

En este proyecto, querrás cambiar varias propiedades de la página web y de sus con-troles. Algunas de las cosas que necesitas hacer son:

• Cambiar el nombre de todos los controles (y de la página web) de modo que descri-ban su comportamiento y sean más sencil-los de referenciar.

• Añadir un Texto al Button.

• Definir las propiedades de bloqueo para que los controles modifquen su tamaño adecuadamente cuando cambie de ta-maño la página web

Se utiliza el Inspector para cambiar la ven-

tana y las propiedades de los controles. Comparte la misma área en la parte derecha de la ventana junto con la Librería. Para mostrar el Inspector, haz clic sobre el botón Inspector

en la barra de herramientas.

Puedes cambiar entre la Librería y el Inspector usando ⌘-K en OS X o Ctrl+K en Windows y Linux.

Section 3

Propiedades

14

Figura 2.5 Propiedades de la Página Web en el Inspector

Si aun no lo has hecho, muestra el Inspector haciendo clic so-bre el botón Inspector en la barra de herramientas.

Necesitas cambiar las propiedades de Name y Title:

1. En primer lugar, en el área de edición de la página web, haz clic sobre la barra de título para seleccionar la pág-ina web. El Inspector muestra ahora las propiedades para la página web.

2. En el campo Name (situado en el grupo ID), Cambia el nombre de “Web-Page1” a “MapLocationPage”. Pulsa Retorno para ver el cambio del nombre en el Navegador.

3. En el campo Title (ubicado en el grupo Frame), cambia el nombre de “Untitled” a “Map Viewer”. Pulsa Retorno y verás el cambio del nombre en la barra de título de la página web.

Section 4

Propiedades de Página

15

Figura 2.6 Inspector de Página Web

El Text Field en donde tu usuario introducirá la ubicación a mostrar. Querrás cambiar las siguientes propiedades: Name y Locking

1. En la Página Web, selecciona el control TextField1. El Inspector cambia para mostrar las propiedades del Text Field properties.

2. En el campo Name, cambia el nombre de “Text-Field1” a “LocationField”. Pulsa Retorno para ver el cambio del nombre en el Navegador.

3. Ahora tendrás que hacer los cambios de bloqueo de modo que el Text Field sea mayor o menor a medida que se modi-fique el tamaño de la página web. En el grupo Locking observa la imagen que muestra la página web con iconos de pe-queños candados cerrados en la parte superior e

izquierda, y abiertos en la inferior y derecha.Haz clic para cerrar los candados superior, izquierdo y derecho, dejando el inferior abierto.

Section 5

Propiedades de Text Field

16

Figura 2.7 Ajustes de bloqueo para LocationField

Tus usuarios harán clic sobre el botón para mostrar la ubica-ción. Tendrás que cambiar estas propiedades: Name, Lock-ing, Caption

1. En la Página Web, selecciona el control Button1. El In-spector cambia para mostrar las propiedades de WebBut-ton.

2. En el campo Name, cambia el nombre de “Button1” a “ShowLocationButton”. Pulsa Retorno para ver el cambio de nombre en la Lista de Propiedades.

3. Ahora tendrás que hacer cambios en los candados para que el Button permanezca anclado al margen derecho de la página web a medida que esta cambie de ta-maño.En el grupo Locking observa la imagen que muestra la página web con pequeños candados cerrados para la parte superior e izquierda, y candados abiertos para la parte inferior y derecha.

Haz clic en los candados para que estén cerrados los de la parte superior y derecha, dejando abiertos los de la parte inferior e izquierda.

4. Por último, querrás que el botón tenga un texto. En el campo Caption (situado en el grupo Behavior), cambia el

texto de “Untitled” a “Show Map”.

Section 6

Propiedades de Botón

17

Figura 2.8 Ajustes de bloqueo para LocationButton

El último cambio de la interfaz de usuario que has de hacer es para el Map Viewer. Aquí has de cambiar estas propie-dades: Name y Locking

1. En la Página Web, selecciona el control MapViewer1. El Inspector cambia para mostrar las propiedades del Web-MapViewer.

2. En el campo Name, cambia el nombre de “MapViewer1” a “LocationMap”. Pulsa Retorno para ver el cambio del nombre en el Navegador.

3. Por último, tienes que hacer cambios en el bloqueo de modo que el mapa siga completando la página web a me-dida que esta cambie de tamaño.En el grupo Locking observa la imagen que muestra la página web con pequeños iconos de can-dados cerrados para la parte superior e izquierda, y abier-tos para la parte inferior y derecha.

Haz clic sobre los candados de modo que estén bloquea-dos todos los candados.

Section 7

Propiedades de Map Viewer

18

Figura 2.9 Ajustes de bloqueo para LocationMap

Editor de CódigoTu aplicación está prácticamente completada. Ahora es el mo-mento de añadir el código que indique al MapViewer cual es la ubicación que ha de mostrar. Xojo utiliza un lenguaje de programación orientado a objetos que es realmente fácil de aprender. ¡Sólo necesitas cuatro líneas de código para final-izar tu proyecto!

Los pasos que has de realizar son:

1. Conocer que el usuario ha hecho clic sobre el ShowLocationButton, denominado “Show Map” en la página web.

2. Obtener la ubicación introducida en el LocationField.

3. Indicar a LocationMap que muestre la ubicación.

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

1. En la páigna web, haz doble clic en el control ShowLoca-tionButton, etiquetado “Show Map”. Aparecerá la ventana Add Event. Cuando un usuario haga

clic sobre un Web-Button, se ejecu-tará el código con-tenido en este ma-nejador de evento Action.Esto significa que querrás añadir tu código en el mane-jador de evento Ac-tion, así que selec-ciona Action en la lista de Event Handler y haz clic en OK.Observa que el Navegador se actualiza para mostrar el evento Action bajo el control ShowLocationButton y aparece el Editor de Código.Este paso resuelve el primer problema de saber si el usuario ha hecho clic sobre el ShowLocationButton.

2. Ahora necesitas obtener la ubicación y para ello lo hare-mos en dos partes:

Section 8

Añadir Código

19

Figura 2.10 Ventana para añadir un Event Handler

a. La ubicación introducida por el usuario se almacena en una propiedad de la clase Text Field denominada Text. Puedes acceder a los valores de las propiedades indicando el nombre de la clase, seguida por un “.” y a continuación el nombre de la propiedad. En este caso el Text Field se llama LocationField, de modo que pue-des escribir: LocationField.Text

b. Necesitas convertir este texto en la ubicación real utili-zando la clase WebMapLocation.

Estos dos pasos se realizan mediante el siguiente código:

Dim location As New WebMapLocation location.Address = LocationField.Text

3. El último paso consiste en indicar que el LocationMap muestre la ubicación.Esto se realiza llamando a dos métodos de la clase: Go-ToLocation y AddLocationGoToLocation desplaza el mapa hasta la ubicación y AddLocation deposita un pin sobre dicha ubicación.

Tu código será así:

LocationMap.GoToLocation(location) LocationMap.AddLocation(location)

4. Ahora puedes añadir este código en el Editor de Código. Empieza por hacer clic en el espacio en blanco bajo el evento Action() y escribe a continuación este código

20

Figura 2.11 Aplicación Web Map Viewer completada

(escríbelo en vez de copiarlo y pegarlo):

Dim location As New WebMapLocation location.Address = LocationField.Text LocationMap.GoToLocation(location) LocationMap.AddLocation(location)

¡Esto es todo! Has completado tu primera aplicación.

21

Saving Your ProjectYou should save your work periodically and always before running your pro-ject.

1. Save the project by choosing File ↠ Save.

2. Name the project “MapViewer” and click Save.

Running Your ProjectNow you can test your finished application:

1. Click the Run button in the toolbar to run your project.The web application opens in the default web browser.

2. Type a location of your choice, perhaps your home city, and click the “Show Map” button.

3. You will see a map of the location with a pin dropped at the precise lo-cation.

4. When you are finished experimenting with Map Viewer application, you can close the browser (tab or window depending on how it launched) to return to Xojo.

Section 9

WHAT’S NEXT?

The QuickStart has introduced you to Xojo. You’ve learned how to design a web page, add controls, add code and then run your project.

You should next work through the Tutorial and then explore the Guide and Language Reference to continue learning how to create great applications using Xojo.

Testing Your Application

22