Guía Rápida Release 1 Xojo, Inc.

Transcripción

1 Guía Rápida 2013 Release 1 Xojo, Inc.

2 Introducción BIenvenido a Xojo, el modo más sencillo de crear aplicaciones de escritorio multiplataforma y web.

3 Section 1 Bienvenido COMENZAR CON XOJO 1. Descarga el instalador para tu sistema operativo desde: 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 multiplataforma de escritorio y Web. Xojo está compuesto por un rico conjunto de objetos de interfaz gráfica, 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 diálogos de tu aplicación. En esta Guía Rápida verás cuan sencillo es. Xojo proporciona todas las herramientas 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 navegador web sencillo). Debería de tomarte entre 15 y 20 minutos completar la Guía Rápida. 2

4 Section 2 Convenciones de la Presentación 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 interfaz y el conjunto de características es idéntico en todas las plataformas, de modo que las diferencias entre las plataformas es meramente cosmético y tienen que ver con las diferencias 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 importantes. 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 pulsarse en el orden en el que aparecen listadas. En Windows 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 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 impresas en la misma línea o bien partir una línea larga en dos o más líneas. 3

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

6 Section 3 Comenzando Ejecuta Xojo Si aun no lo has hecho, este es el momento de iniciar Xojo. Figura Introducción.1 Ventana de Selección de Proyecto 1. Haz doble clic en el icono de aplicación 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í crearás una aplicación de escritorio. 3. Deberías de ver tres campos: 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 del archivo que se creará. Nombre de Empresa es el nombre de tu empresa. Puedes 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 (denominada Espacio de trabajo), donde comenzarás a diseñar tu aplicación 5

7 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 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. Utilizas el Editor de Diseño para diseñar la interfaz de usuario para las ventanas de tu aplicación. Muestra la ventana y previsualiza el aspecto que tendrá cuando se ejecute la aplicació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 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 en la parte superior izquierda muestra todos los elementos del proyecto. Por defecto puedes ver dentada y eligiendo un ajuste distinto. 6

8 Nota: si la Librería no está visible, haz click en el botón Librería 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 Librería. Puedes mostrar el Inspector haciendo clic sobre el botón Inspector en la barra de herramientas. El Inspector 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. Puedes cambiar un valor del Inspector, introduciendo un nuevo valor en el campo a la derecha de la etiqueta de campo. 7

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

10 Section 1 Visión General Acerca de la Aplicación El mejor modo para aprender con rapidez Xojo es creando una aplicación. Para este Inicio Rápido, crearás un navegador web sencillo. Una aplicación Xojo está compuesta por una serie de objetos, denominados 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 introduce en un TextField en la parte superior de la ventana. Figura 1.1 La aplicación Navegador Simple completada 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 necesario para hacer que la aplicación funcione. 9

11 Section 2 Crear la Interfaz de Usuario Diseñar la Ventana Debe de estar Xojo en funcionamiento y con Window1 abierta en el Editor de Diseño. Si no es así, por favor repasa el Prefacio, Secciones 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 Editor de Diseño. Cuando estés próximo a los límites de la ventana verás indicadores de alineación que te ayudarán a situar el control. Figura 1.2 Choosing a Text Field in the Library 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 esquina 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ágina (deberás de desplazarte por el resto de los controles para verlo). Cambiar el tamaño de este control (utilizando los manejadores de selección) para que rellene la ventana bajo el Text Field y el Button. Figura 1.3 Choosing a Button in the Library 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

12 El diseño finalizado de la ventana finalizada debería ser así: Figura 1.4 Diseño finalizado de la ventana 11

13 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. Para este proyecto querrás cambiar varias propiedades de la ventana y de sus controles. Algunas de las cosas que has de hacer son: Inspector, haz clic sobre el botón Inspector en la barra de herramientas. Puedes cambiar entre la librería y el Inspector usando Comando-K en OS X o Control-L en Windows y Linux. Cambiar el nombre de todos los controles (y de la ventana) 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 propiedades de los controles. Comparte la misma área en la derecha de la ventana principal como la Librería. Para acceder al 12

14 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 Title: Figura 1.5 Ventana 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 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 verás como cambia el nombre en la barra de título de la ventana. 13

15 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 Inspector cambia para mostrar las propiedades del Text Field. más largo o pequeño a medida que cambie el tamaño de la ventana. En el grupo Locking observa la imagen que muestra la ventana con los iconos de unos pequeños candados cerrados para la parte superior 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 tendrás que hacer los cambios de bloqueo de modo que el el Text Field sea Figura 1.6 Bloqueo para AddressField 14

16 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, 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, 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 forma que el Botón permanezca anclado al margen derecho de la ventana cuando esta modifique su tamaño. En el grupo Locking observa la imagen de la ventana que muestra los iconos de unos Figura 1.7 Locking for LocationButton pequeños candados cerrados en la parte superior, 15

17 Section 7 Propiedades de HTML Viewer El último cambio de la interfaz de usuario que has de hacer es para el HTML Viewer. Aquí tendrás 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 estén 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, tendrás que hacer cambios en el anclado de modo que el HTML Viewer continúe llenando la ventana cuando esta modifique su tamaño. En el grupo Locking, observa la imagen que muestra la ventana con pequeños Figura 1.8 Bloqueo para el WebViewer iconos de candados cerrados en la parte superior e 16

18 Section 8 Añadir Código Editor de Código Tu 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 orientada 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 GoButton, 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 manejador de evento Action, de modo que selecciona Action en la lista Event Handler y haz clic en OK. Figura 1.9 Ventana para Añadir Event Handler Observa que el Navegador se actualiza para mostrar el evento Action bajo el control GoButton mostrando el Editor 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- 17

19 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 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

20 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 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 aplicación. 19