Español: Guía Rápida Web

Bienvenido a Xojo, la herramienta más sencilla para crear tus propias aplicaciones. 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.

Haz doble clic en el icono de la app Xojo para que se ejecute. Una vez que finalice su carga aparecerá el Selector de Proyectos.
Xojo te permite crear diferentes tipos de aplicaciones (Desktop, Web, Console y iOS). En esta Guía Rápida, crearemos una app Web, de modo que haz clic sobre Web.
Deberías de ver ahora tres campos que requieren de la introducción de valores: Application Name, Company Name y Application Identifier.
- 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.
Introduce "YouTubePlayer" como Nombre de la Aplicación. Puedes dejar el valor de Company Name como está o bien cambiarlo.
Haz clic en OK para abrir la ventana principal de Xojo (denominada el Workspace o bien Espacio de Trabajo), donde comenzarás a diseñar tu app.

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 Plantillas: El área central es el Editor de Plantillas (Layout Editor). Utilizas el Editor de Plantillas 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.

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 una app de Reproducción YouTube

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 reproduce un vídeo de YouTube utilizando su ID de vídeo.

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 YouTubePlayer, 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.

YouTubePlayer utiliza estos controles:

Un Text Field: Se utiliza un control Text Field para introducir texto. En este proyecto, se introduce el ID de vídeo de YouTube en un Text Field situado en la parte superior de la ventana.
Botón: Se utiliza un botón Web para iniciar una acción. El usuario hace clic sobre el botón para cargar el vídeo indicado por su ID en el reproductor de YouTube.
YouTubeMovie: Se utiliza un control YouTubeMovie para mostrar y reproducir un vídeo de YouTube. En este proyecto es lo que muestra el vídeo correspondiente al ID introducido en el Text Field.

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 Text Field, un Botón y un control YouTube Movie.

Comenzando con el Text Field: En la Librería, haz clic en el Text Field y arrástralo a la esquina superior izquierda de la página web en el Editor de Plantillas. A medida que te aproximes a los márgenes de la página verás los indicadores de alineación y que te servirán de ayuda a la hora de posicionar el control.
Seguiremos con el Botón: En la Librería, haz clic en el Botón y arrástralo a la esquina superior derecha de la página web.
El último control es el YouTube Movie: arrastra el control YouTube Movie al espacio restante de la página.
Por último, cambia el tamaño del Text Field para que sea mayor. Haz clic sobre él para mostrar los maneadores de selección. Haz clic sobre el manejador central derecho y arrástralo hacia la derecha hasta que las guías de alineación te indiquen que está lo suficientemente próximo al botón.

El diseño final de tu página web debería parecerse a este:

Ajustar las Propiedades

¿Qué es una Propiedad?

Una propiedad es un valor de una clase. El cambio de valores en las propiedades te permite cambiar el comportamiento de la clase. Para este proyecto querrás cambiar varias propiedades para la vista y los controles añadidos. Algunas de las cosas que has de hacer son:

Cambiar el nombre de todos los controles (y de la ventana) para que describan mejor su comportamiento y se más sencillo referirse a ellas desde código.
Añadir una Etiqueta (Caption) al Botón.
Ajustar las propiedades de bloqueo para que los controles varíen su tamaño correctamente cuando cambie el tamaño de la ventana que los contiene.

Inspector

Se utiliza el Inspector para cambiar las propiedades de la ventana y los controles. Comparte el mismo área en la derecha del Espacio de Trabajo que la Librería. Para mostrar el Inspector, haz clic en el botón del Inspector en la barra de herramientas o pulsa ⌘-I (Ctrl+I en Windows y Linux).

Definir las Propiedades para la Página Web

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

Has de cambiar las propiedades Name y Title:

En primer lugar, en el área de edición de la página web, haz clic en la barra de título de la página web para seleccionarla. El Inspector mostrará ahora las propiedades para la página web.
En el campo Name (ubicado en el grupo ID), cambia el nombre de "WebPage1" a "PlayerPage". Pulsa Retorno para ver el cambio del nombre en el Navegador. El cambio del nombre facilita identificar los elementos de proyecto en el Navegador y es una buena práctica.
En el campo Title (ubicado en el grupo Frame), cambia el nombre de "Untitled" a "YouTube Player". Pulsa Retorno y verás el cambio del nombre en la barra de título de la página web.

Definir las Propiedades para el Text Field

El Text Field es donde el usuario introducirá el ID del vídeo a mostrar. Querrás cambiar las siguientes propiedades: Name and Locking

En la Página Web, selecciona el control TextField1. El Inspector cambia para mostrar las propiedades del Text Field.
En el campo Name, cambia el nombre de "TextField1” a “IDField”. Pulsa Retorno y observa el cambio del nombre en el Navegador. Cambiar el nombre facilita identificar los controles en el Navegador y también cuando te refieres a ellos desde código. Es una buena práctica comenzar a hacerlo.
Ahora has de hacer cambios en el bloqueo de los controles, de modo que el Text Field cambie su tamaño a medida que también cambie el tamaño (ancho) de la página web que lo contiene. En el grupo Locking busca la imagen que muestra una página web con el icono de pequeños candados cerrados en la parte superior e izquierda, con pequeños candados abiertos para los márgenes inferior y derecho. Haz clic en los candados de modo que estén cerrados los correspondientes a los márgenes izquierdo, superior y derecho, dejando abierto el candado inferior.

Definir las Propiedades para el Botón

Tus usuarios hacen clic sobre el botón para mostrar el vídeo indicado en el Text Field. Tendrás que cambiar estas propiedades: Name, Locking y Caption

En la Página Web, selecciona el control Button1. El Inspector cambia para mostrar las propiedades de WebButton.
En el campo Name, cambia el nombre de "Button1" a "LoadVideoButton". Pulsa Retorno para ver como cambia el nombre en el Navegador. Cambiar el nombre facilita la identificación de los controles en el Navegador y también cuando te refieres a ellos desde código. Es una buena práctica.
Ahora tienes que cambiar el bloqueo, de modo que el botón permanezca anclado al margen derecho a medida que la página web varíe su tamaño. En el grupo Locking busca la imagen que muestra la página web con la imagen de pequeños candados cerrados para los costados izquierdo y superior, con pequeños candados abiertos para los márgenes inferior y derecho. Haz clic en los candados para que el superior y derecho estén cerrados, dejando el inferior e izquierdo abiertos.
Por último, querrás proporciona un texto (etiqueta) a tu botón. En el campo Caption (ubicado bajo el grupo Behavior), cambia el texto de "Untitled" a "Load Video".

Definir las Propiedades para YouTube Movie

Los últimos cambios de interfaz de usuario que has de hacer es para YouTube Movie. Aquí tendrás que cambiar estas propiedades: Name y Locking

En la Página Web, selecciona el control YouTubeMovie1. El Inspector cambia para mostrar las propiedades de YouTubeMovie.
En el campo Name, cambia el nombre de "YouTubeMovie1" a "YouTubePlayer". Pulsa Retorno para ver el cambio del nombre en el Navegador. El cambio del nombre facilita la identificación de los controles en el Navegador y cuando te refieres a ellos desde el código. Es una buena práctica.
Por último, tienes que cambiar el bloqueo para que el reproductor de vídeo continúe rellenando el espacio de la página web a medida que esta cambie su tamaño. En el grupo Locking busca la imagen que muestra la página web con los iconos de pequeños candados cerrados para los márgenes superior e izquierdo, con candados abiertos para los márgenes inferior y derecho. Haz clic sobre los candados para que estén cerrados los correspondientes a los márgenes superior, inferior, izquierdo y derecho.

Añadir Código

Tu aplicación está prácticamente completada. Ahora es el momento de añadir el código que le indicará a YouTubePlayer la ubicación a 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 completar tu proyecto!

Los pasos que necesitas dar son:

Averiguar cuando se pulsa el LoadVideoButton, denominado “Load Video” en la página web.
Obtener el ID que tu usuario ha introducido en el IDField.
Dejar que tu YouTubePlayer muestre el vídeo.

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

En la página web, haz doble clic en el control LoadVideoButton, etiquetado “Load Video”. Aparecerá la ventana Add Event Handler. Cuando un usuario hace clic en el WebButton, se ejecuta el código introducido en el manejador de evento Action; de modo que selecciona el Manejador de Evento Action en el listado y haz clic en OK.

Observa que el Navegador se actualiza para mostrar el evento Action bajo el control LoadVideoButton y mostrará el Editor de Código. Este paso resuelve tu primer problema de saber si el usuario hace clic en el LoadViewButton.

Ahora necesitas cargar el vídeo y hay dos partes en esto:

El URL escrito por el usuario se almacena en una propiedad en la clase Text Field denominada Text. Puedes acceder a los valores de las propiedades indicando el nombre de la clase, seguido de un "." (punto) y luego el nombre de la propiedad. En este caso el Text Field se llama IDField de modo que escribes: IDField.Text
Necesitas convertir este ID en el URL real de vídeo YouTube e indicar a YouTublePlayer que lo cargue. Puedes hacerlo con este código:
YouTubePlayer.URL = "https://www.youtube.com/watch?v=%22 + IDField.Text

¡Esto es todo! Tu primera aplicación web está completada.

Ejecutar la App

Deberás de guardar tu trabajo de forma periódica y siempre antes de ejecutar el proyecto. Para ello:

Guarda el proyecto eligiendo File ↠ Save.
Asigna el nombre “YouTubePlayer” al proyecto y haz clic en Save.

Ahora puedes probar tu app finalizada:

Haz clic en el botón Run en la barra de herramientas y ejecuta tu proyecto. La app web abrirá el navegador web por defecto.
Introduce un ID de vídeo de YouTube. Este es uno que puedes probar: Whign_oQ1UU
Haz clic en el botón "Load Video".
Verás aparecer el vídeo. Haz clic en el botón Play en el vídeo propiamente dicho para reproducirlo.
Cuando hayas terminado de experimentar con la app YouTubePlayer, puedes cerrar el navegador (pestaña o ventana dependiendo de cómo lo hayas ejecutado) y volver a Xojo.

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 explorar a continuación la Guía del Usuario y la Language Reference para continuar aprendiendo como crear apps geniales con Xojo.