Guía Rápida Web

Bienvenido a Xojo, la herramienta más sencilla para crear tus propias aplicaciones Web. Xojo está formado por un rico conjunto de objetos de interfaz gráfica de usuario, un lenguaje moderno y orientado a objetos, un depurador integrado, y un compilador Multiplataforma. Juntos componen el Entorno de Desarrollo Integrado o IDE de Xojo.

Con el IDE puedes crear la interfaz gráfica de tu app simplemente arrastrando y soltando los objetos de interfaz en las ventanas de la aplicación, así como en sus diálogos. En esta Guía Rápida verás cuan rápido es. Xojo te proporciona todas las herramientas que precisas para crear virtualmente cualquier aplicación que puedas imaginar.

Esta Guía Rápida está dirigido a aquellos que dan sus primeros pasos en la programación o bien con Xojo. Te proporcionará una introducción al entorno de desarrollo Xojo y te guiará a través del desarrollo de una aplicación funcional Web (un sencillo reproductor de vídeo YouTube). En total, requerirá en torno a 15 minutos completar esta Guía Rápida.

Primeros pasos

Si no lo has hecho todavía, es el momento de iniciar Xojo. Cuando termine de iniciarse, aparecerá el Selector de Proyectos.

Xojo te permite crear diferentes tipos de aplicaciones (Desktop, Web, Consola e iOS). En esta Guía Rápida, crearás una app Web; de modo que has de chacer clic en Web.

Deberías de ver ahora tres campos que requieren de la introducción de valores:

• Application Name es el nombre de tu app. Este será el nombre de archivo correspondiente a la aplicación una vez que se cree.

• Company Name es el nombre de tu empresa. Puedes dejar este vacío.

• Application Identifier es un identificador único para esta app. Este se completa automáticamente a partir de lo introducido en los campos Application Name y Company Name, pero también puedes cambiarlo por el valor que quieras.

En esta Guía Rápida crearás una aplicación Web que hace uso de un servicio web, donde podrás buscar y mostrar la bandera de diversos países del mundo.

1. Introduce FlagSearch como Nombre de la Aplicación (Application Name). Puedes dejar el valor de Company Name como está o bien cambiarlo.

2. Haz clic en OK.

Se abrirá la ventana principal de Xojo (denominada el Workspace o bien Espacio de Trabajo), donde comenzarás a diseñar tu app.

Usando el Espacio de trabajo (Workspace)

Xojo abre el Workspace con la página web por defecto seleccionada para tu app en el Navegador (Navigator), y mostrada por tanto en el Editor de Plantillas (Layout Editor).

• Navegador: El área en la parte superior izquierda muestra todos los elementos de tu proyecto. Por defecto puedes ver WebPage1 (seleccionada), el objeto App y el objeto Session. Puedes usar el Navegador para navegar por entre los componentes de tu proyecto.

• Editor de Diseño: El área central es el Editor de Diseño (Layout Editor). Utilizas el Editor de Diseño para diseñar la interfaz de usuario para las ventanas de la aplicación. Este muestra la ventana y la previsualiza tal y como quedará cuando se ejecute la app. En la ilustración, la ventana está vacía porque aun no se han añadido controles de interfaz de usuario desde la Librería (Library).

• Librería: El área de la derecha es la Librería, y muestra los controles y elementos de interfaz que puedes añadir a la ventana o al 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 cómo se muestran los controles en la Librería haciendo clic sobre el icono de la pequeña rueda dentada y seleccionando un ajuste distinto.

Tip

Si la librería no está disponible, haz clic en el botón Librería en la barra de herramientas para mostrarlo.

Inspector: No mostrado en la anterior ilustración, se encuentra el Inspector. Este permite ver y cambiar las propiedades para el control seleccionado. Este área de la ventana principal es compartido con la Librería. Puedes mostrar el Inspector haciendo clic en el botón Inspector de la barra de herramientas. El Inspector muestra información sobre el elemento seleccionado en el Navegador o Editor. Los contenidos del Inspector cambian a medida que se seleccionan diferentes elementos. Puedes cambiar un valor en el Inspector introduciendo un nuevo valor en el campo situado a la derecha de la etiqueta del campo.

Creando la aplicación de búsqueda de banderas

El mejor modo de aprender rápidamente como utilizar Xojo consiste en crear una app sencilla. Para esta Guía Rápida crearás una app web que accede a un servicio web encargado de devolver la bandera correspondiente al nombre del país introducido.

Una app Xojo está conformada por una colección de objetos, llamados 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 Flag Search, utilizarás la clase WebPage por defecto para crear una página web, y añadirás controles (clases de interfaz de usuario) a la página web para crear el diseño.

La app Flag Search utiliza estos controles:

• SearchField: Un campo donde puedes introducir el nombre de un país y pulsar Retorno para buscar su bandera.

• ImageViewer: Se utiliza un control ImageViewer para mostrar imágenes. En este proyecto mostrará la bandera correspondiente al nombre introducido en el Campo de Búsqueda (SearchField).

Las próximas secciones te guiarán en la creación de la interfaz de usuario añadiendo el código necesario para hacer que la app funcione.

Crear la interfaz de usuario

Deberías de tener Xojo ejecutándose y la página WebPage1 abierta en el Editor de Plantillas. Ahora estás listo para comenzar a añadir controles en la página web. Añadirás un SearchField y un ImageViewer a tu página web, arrastrándolos desde la Librería ubicada en el área derecha del Espacio de Trabajo y soltándolos en tu página web.

El diseño finalizado tendrá el siguiente aspecto:

Comencemos.

1. En la Librería, haz clic en el SearchField y arrástralo sobre la esquina superior izquierda de la página web en el Editor de Diseño. Verás unas guías de alineamiento que te permitirán determinar dónde soltarlo a medida que te aproximes a los márgenes de la página.

2. Arrastra el control ImageViewer de modo que esté situado bajo el SearchField. Usa las guías de alineamiento para determinar donde soltarlo.

Por último, vamos a cambiar el tamaño de los controles para que usen mejor el espacio disponible.

3. Haz clic en el SearchField para que muestre sus manejadores de cambio de tamaño.

4. Haz clic en el manejador central derecho y arrástralo hasta que las guías de alineación te indiquen que está lo suficientemente próximo al margen derecho de la página web.

5. Haz clic en el ImageViewer para seleccionarlo.

6. Arrastra del manejador de cambio de tamaño de la esquina inferior derecha para que complete el resto del espacio disponible. A medida que te aproximes a los márgenes inferior y derecho verás que se muestran las guías de alineación, de modo que puedas dejar suficiente espacio entre el control y los márgenes de la página.

Editar los controles

Crear una interfaz de usuario agradable es algo más que simplemente arrastrar y soltar controles. Necesitarás hacer algunos cambios para finalizar tu interfaz de usuario. A continuación haremos que los controles SearchField e ImageViewer ajusten automáticamente su tamaño en función de cuál sea el tamaño de la página web que los muestra. Estos cambios se realizan mediante el Inspector.

Comencemos con el Campo de Búsqueda:

1. Haz clic en el SearchField en la página para seleccionarlo.

Note

Advierte que en el Inspector se encuentra la sección Locking mostrando cuatro candados. El superior y el izquierda ya están cerrados, indicando que la parte superior e izquierda del Campo de Búsqueda están bloqueados por omisión.

2. Haz clic en el candado de la parte derecha para bloquear su lado derecho sobre el margen derecho de la página.

Vamos a cambiar ahoa el ImageViewer para que utilice todo el espacio de la página web.

3. Haz clic en el ImageViewer para seleccionarlo.

Note

Advierte que en el Inspector se encuentra la sección Locking mostrando cuatro candados. El superior y el izquierda ya están cerrados, indicando que la parte superior e izquierda del ImageViewer están bloqueados por omisión.

4. Dado que querrás que el ImageViewer se ensanche o estreche a medida que lo haga la ventana, haz clic en el candado derecho para que el margen derecho del ImageViewer se ajuste con respecto al margen derecho de la página.

5. Dado que querrás que el ImageViewer se alargue o acorte a medida que lo haga la ventana, haz clic en el candado inferior para que el margen inferior del ImageViewer se ajuste con respecto al margen inferior de la página.

6. Haz clic sobre la barra de título de la página web (donde se lee "Untitled") para seleccionar la página propiamente dicha.

7. Arrastra el manejador de selección en la esquina inferior derecha para cambiar un poco su tamaño, para ver así como se comportan el SearchField y el ImageViewer con sus nuevos ajustes en las propiedades de bloqueo.

Prepararse para el Código

Cuando empiezas a escribir código necesitarás en algunos casos referirte a la página web o a los controles de la página web. Xojo proporciona nombres por omisión como WebPage1, SearchField1 e ImageViewer1, pero dichos nombres no son particularmente descriptivos. El hecho de proporcionar unos nombres adecuados a las páginas web y a los controles te permitirá que tu código resulte más sencillo de leer. Vamos a hacerlo.

1. Haz clic en el título de la página web para seleccionar WebPage1.

2. En el Inspector, cambia Name de WebPage1 a FlagSearch.

3. Cambia la propiedad Title a Flag Search.

4. Haz clic en el SearchField.

5. En el Inspector, cambia Name a CountryNameSearch.

6. Cambia la propiedad Hint a Enter the name of a country.

7. Haz clic en ImageViewer para seleccionarlo.

8. Cambia la propiedad Name a FlagViewer.

Añadir código

Tu aplicación está prácticamente completada. Ahora es el momento de añadir el código que permita encontrar la bandera para el nombre de país introducido, así como mostrarla en el control FlagViewer. Xojo utiliza un lenguaje de programación orientado a objetos que es muy fácil de aprender. ¡Sólo necesitas una línea de código para finalizar tu proyecto!

El código que escribas necesita:

• Ejecutarse cuando el usuario pulse la tecla Retorno o haga clic en el botón de búsqueda situado a la derecha del Campo de Búsqueda.

• Dado que utilizará un servicio web en el que se esperan guiones en vez de espacios para los nombres de países, el código ha de sustituir los espacios por guines.

• Combinar el valor actualizado introducido por el usuario con la URL del servicio web para crear una URL que será entonces asignada a FlagViewer para que pueda recuperar y mostrar la bandera correspondiente.

Comencemos.

1. Haz doble clic en el SearchField para abrir el cuadro de diálogo Add Event Handler.

2. Selecciona el evento Pressed. Este evento se dispara cuando el usuario pulsa el botón.

3. Escribe la siguiente línea de código the following line of code en el Editor de Código resultante, una vez se haya añadido el Manejador de Evento:

FlagViewer.URL = "http://flagsearch.xojo.com/API?search=" + Me.Text.Replace(" ", "-")

Note

Esta línea de código crea el URL que se utilizará para realizar la búsqueda. La primera parte (entrecomillada) es el URL que el servicio flagsearch espera para hacer una búsqueda. Sobre dicho url se añadira Me.Text.Replace(" ", "-"). Me en este caso se refiere al propio control (el campo CountrySearch). Text hace referencia a su propiedad Text y la función Replace es la encargada de sustituir los espacios en blanco por guiones. Este URL completo se asigna a la propiedad URL del control FlagViewer, forzándole así a acceder a la imagen encontrada en dicha ubicación.

Y listo. Tu primera aplicacion Web está completa.

Guaradar el Proyecto

Antes de que ejecutes la app para probarla, es buena idea guardar el proyecto. De este modo, si algo va mal no perderás tu trabajo:

1. Selecciona File > Save.

2. Cuando aparezca el diálogo de Guardar Como, introduce Flag Search como el nombre de tu proyecto.

3. Pulsa el botón Guardar.

Ejecutar tu app

Es el momento de probar tu app ya finalizada:

1. Pulsa el botón Run en la barra de herramientas. Xojo compilará tu aplicación y, siempre y cuando no haya errores, la ejecutará en tu ordenador y luego ejecutará tu navegador web por omisión para mostrar la app.

2. Cuando aparezca la app en el navegador, haz clic en el SearchField e introduce France.

3. Pulsa Retorno.

Debería de aparecer la bandera de Francia. Si no es así, asegúrate de haber escrito el nombre del país correctamente (en inglés). Prueba a buscar las banderas de otros países. Cuando estés listo, cierra la pestaña o la ventana del navegador y vuelve a Xojo. Puede que lleve unos cuantos minutos para que Xojo se de cuenta de que has cerrado el navegador; por tanto, haz clic en el botón con el signo de Stop en la ventana de Xojo para detener la ejecución de tu app.

Próximos pasos

La Guía Rápida te ha introducido en Xojo. Has aprendido como crear tu primera app diseñando una ventana, añadiendo controles y escribiendo código. Deberías continuar con el Tutorial Web y revisar las secciones Topics y API de esta Documentación.