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.
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 del Inicio Rápido Bienvenido a Xojo, la herramienta más sencilla para crear aplicaciones multiplataforma de escritorio y para la web. Xojo está compuesta por un rico conjunto de objetos gráficos para la interfaz de usuario, un lenguaje moderno orientado a objetos y un depurador integrado, así como un compilador multiplataforma. 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 Inicio Rápido, comprobarás cuan sencillo es. Xojo proporciona todas las herramientas 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. 2
Section 2 Convenciones de la Presentación Este Inicio Rápido utiliza capturas de pantalla obtenidos a partir de las versiones de Xojo para Windows, OS X y Linux. Los objetos de diseño de la interfaz y el conjunto de características 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 importancia. 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 pulsarse 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 teclado Ctrl+O o -O, significa mantener pulsadas las teclas 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. 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
Section 3 Primeros Pasos Ejecuta Xojo Si aún no lo has hecho, ejecuta Xojo. Figura 1.1 Ventana de Selector de Proyecto 1. Haz doble clic en el icono de aplicación Xojo para ejecutarla, 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 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 de archivo que se creará para almacenar la aplicación propiamente dicha. Nombre de Empresa es el nombre de tu empresa. Puedes 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 Aplicación y de Empresa, pero también podrás cambiarlo por lo que quieras. Introduce "MapViewer" como Nombre de Aplicación. Puedes dejar el Nombre de Empresa tal cual o cambiarlo. 5
4. Haz clic en OK para abrir la ventana principal de Xojo (denominada Espacio de trabajo), donde comenzarás a diseñar tu aplicación 6
Section 4 Espacio de trabajo Visión general Xojo abre el Espacio de trabajo con la página web por defecto para tu aplicación seleccionada en el Navegador y mostrada en el Editor de Diseño. Figura 1.2 La Ventana Principal de Xojo MainMenuBar. Utilizas 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 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 Navegador: El área de la parte superior izquierda muestra todos los elementos del proyecto. Por omisión verás Window1 (y que está seleccionada), el objeto App y el objeto dentada y eligiendo un ajuste diferente. Nota: Si la Librería no está visible, haz clic en el botón de Librería en la barra de herramientas para mostrarla. 7
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 ventana 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 sobre 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 Inspector 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.
Section 1 Vista General 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. Figure 2.1 The Completed MapViewer Web Application MapViewer utiliza tres controles: Acerca de la Aplicación El mejor modo de aprender a usar con rapidez Xojo consiste en crear una aplicación simple. Para este Inicio Rápido, crearás una aplicación web que muestre las ubicaciones en un mapa. Una aplicación Xojo está compuesta por una colección de objeots, denominados clases. Prácticamente todo en Xojo es una clase, incluyendo las páginas web y los controles de la página web. En el proyecto 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 bambalinas). Aquí es el encargado de mostrar la ubicación del Text Field. 10
Las siguientes secciones te guiarán por la creación de la interfaz de usuario y para añadir el código necesario para hacer que la aplicación funcione. 11
Section 2 Crear la Interfaz de Usuario Diseñando la Página Web Deberías de tener Xojo funcionando y la WebPage1 abierta en el Editor de Código Si no es así, por favor, consulta el Capítulo 1, Secciones 3 y 4. Ahora estás listo para comenzar a añadir los controles a la página web. 1. Comenzando con el Text Field: En la Librería, haz clic sobre el Text Field y arrástralo a la esquina superior izquierda de la página web en el Editor de Diseño. Figura 2.1 Text Field en la Librería Figura 2.2 Button en la Librería (botón): En la Librerí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 tamaño del Text Field para que sea más largo. Haz clic sobre él para A medida que te acerques a los márgenes de la página, verás los indicadores de alineación que te ayudarán a situar el control. 2. A continuación está el Button Figura 2.3 Map Viewer en la Librería 12
mostrar los manejadores de selección. Haz clic sobre el Figura 2.4 Diseño de la Página Web 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
Section 3 Propiedades Qué es una Propiedad? Una propiedad es un valor de una clase. Cambiando los valores 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 controles. Algunas de las cosas que necesitas hacer son: Cambiar el nombre de todos los controles (y de la página web) de modo que describan su comportamiento y sean más sencillos 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 tamaño la página web Figura 2.5 Propiedades de la Página Web en el Inspector Se utiliza el Inspector para cambiar la ventana 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. 14
Section 4 Propiedades de Página Si aun no lo has hecho, muestra el Inspector haciendo clic sobre 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ágina web. El Inspector muestra ahora las propiedades para la página web. Figura 2.6 Inspector de 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. 15
Section 5 Propiedades de Text Field El Text Field en donde tu usuario introducirá la ubicación a mostrar. Querrás cambiar las siguientes propiedades: Name y Locking izquierda, y abiertos en la inferior y derecha. Haz clic para cerrar los candados superior, izquierdo y derecho, dejando el inferior abierto. 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. Figura 2.7 Ajustes de bloqueo para LocationField 3. Ahora tendrás que hacer los cambios de bloqueo de modo que el Text Field sea mayor o menor a medida que se modifique el tamaño de la página web. En el grupo Locking observa la imagen que muestra la página web con iconos de pequeños candados cerrados en la parte superior e 16
Section 6 Propiedades de Botón Tus usuarios harán clic sobre el botón para mostrar la ubicación. Tendrás que cambiar estas propiedades: Name, Locking, Caption 1. En la Página Web, selecciona el control Button1. El Inspector cambia para mostrar las propiedades de WebButton. 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. 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. Figura 2.8 Ajustes de bloqueo para LocationButton 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 tamañ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. 17
Section 7 Propiedades de Map Viewer El último cambio de la interfaz de usuario que has de hacer es para el Map Viewer. Aquí has de cambiar estas propiedades: Name y Locking Haz clic sobre los candados de modo que estén bloqueados todos los candados. 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. Figura 2.9 Ajustes de bloqueo para LocationMap 3. Por último, tienes que hacer cambios en el bloqueo de modo que el mapa siga completando la página web a medida que esta cambie de tamaño. En el grupo Locking observa la imagen que muestra la página web con pequeños iconos de candados cerrados para la parte superior e izquierda, y abiertos para la parte inferior y derecha. 18
Section 8 Añadir Código Editor de Código Tu aplicación está prácticamente completada. Ahora es el momento 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 finalizar 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 ShowLocationButton, etiquetado Show Map. Aparecerá la ventana Add Event. Cuando un usuario haga Figura 2.10 Ventana para añadir un Event Handler clic sobre un Web- Button, se ejecutará el código contenido en este manejador de evento Action. Esto significa que querrás añadir tu código en el manejador de evento Action, así que selecciona 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 haremos en dos partes: 19
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 puedes escribir: LocationField.Text b. Necesitas convertir este texto en la ubicación real utilizando la clase WebMapLocation. Estos dos pasos se realizan mediante el siguiente código: 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 Figura 2.11 Aplicación Web Map Viewer completada 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: GoToLocation y AddLocation GoToLocation desplaza el mapa hasta la ubicación y AddLocation deposita un pin sobre dicha ubicación. 20
(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
Section 9 Testing Your Application 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. Saving Your Project You should save your work periodically and always before running your project. 1. Save the project by choosing File Save. 2. Name the project MapViewer and click Save. Running Your Project Now 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 location. 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. 22