Escritorio

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 de escritorio (un sencillo navegador). En total, requerirá en torno a 15 minutos completar esta Guía Rápida.

Primeros pasos

Si aun no lo has hecho, es el momento de iniciar Xojo.

  1. Haz doble clic en el icono de la aplicación de Xojo. Una vez que termine de cargar, aparecerá la ventana correspondiente al Selector de Proyecto.

../../_images/desktopchooser.png
  1. Estamos creando una aplicación de Escritorio, de modo que haremos clic en Desktop.

El diálogo tiene tres campos:

  • Application Name: es el nombre de tu app. Este será el nombre real que tendrá el archivo de aplicación creado.

  • Company Name: es el nombre de tu empresa. Puedes dejarlo en blanco si prefieres.

  • Application Identifier: es un identificador único para esta aplicación. Se rellenará automáticamente con los datos proporcionados para el nombre de Aplicación y Empresa, pero puedes cambiarlo por lo que quieras si lo deseas.

  1. Puedes dejar el nombre de Empresa tal y como está o bien cambiarlo.

  2. Introduce SimpleBrowser como Nombre de Aplicación.

  3. Haz clic en OK.

Workspace del IDE

El Workspace (espacio de trabajo) es la ventana principal de Xojo donde diseñas tu app.

../../_images/desktop_ide_parts.png
  • Navegador: Muestra todos los elementos de tu proyecto como ventanas, menús, imágenes, sonidos, etc. Haz clic en los elementos de esta lista para editarlos.

  • Editor de Diseño: El área central es el Editor de Diseño. Utilizas este Editor de Plantillas para diseñar la interfaz de usuario para las ventanas y diálogos de tu aplicación. Este muestra la ventana y previsualiza el aspecto que tendrá cuando se ejecute la aplicación. En esta ilustración, la ventana está vacía dado que aun no se ha añadido ningún componente de interfaz de usuario desde la Librería sobre ella.

  • Librería: El área de la derecha es la Librería, y muestra los controles y los elementos de interfaz de usuario que puedes añadir a la ventana o al proyecto. Diseñas la ventana arrastrando los 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 la Librería muestra los controles haciendo clic sobre el icono de la rueda dentada y eligiendo un ajuste diferente.

Si la librería no está visible, haz clic en el botón Library en la barra de herramientas para mostrarla.

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

Crear un navegador web sencillo

Para esta Guía Rápida, crearemos un navegador Web sencillo.

../../_images/desktop_app.png

Una app Xojo está formada por una colección de objetos, denominados clases. Prácticamente todo en Xojo es una clase, incluyendo las ventanas y sus controles. En el proyecto SimpleBrowser utilizaremos la clase por defecto Window para crear la ventana y añadir controles (clases de interfaz de usuario) a la ventana para crear su diseño.

La app utiliza estos controles:

  • Text Field: Un control Text Field (Campo de Texto) se utiliza para introducir texto. En este proyecto, el URL a mostrar se introduce en un Text Field en la parte superior de la ventana.

  • Button: Un Button (Botón) se utiliza para lanzar una acción. El usuario hace clic en el botón para cargar la página web correspondiente al URL introducido en el HTML Viewer (Visor HTML).

  • HTML Viewer: Se utiliza un Visor HTML para mostrar HTML (una página web). En este proyecto es el responsable de mostrar la página web correspondiente a la URL indicada.

../../_images/inspector_-_library.jpg

Crear la interfaz de usuario

Window1 está abierto en el Editor de Diseño. Comencemos a añadir controles.

../../_images/library_controls.png
  1. Comienza con el Text Field: haz clic sobre el icono Text Field en la Librería y arrástralo sobre la parte superior izquierda de la ventana en el Editor de Diseño. A medida que te aproximes a los límites de la ventana verás los indicadores de alineación que te ayudarán a la hora de situar el control.

  2. Haz clic en el icono del Botón por Defecto en la Librería y arrástralo sobre la esquina superior derecha de la ventana.

  3. Arrastra el icono del HTML Viewer sobre el área vacía restante de la página (es probable que debas de desplazarte por los controles para verlo).

  4. Modifica el tamaño del control HTML Viewer (utilizando los manejadores de selección de modo que rellene la mayor parte de la ventana bajo el campo de texto y el botón).

  5. Modifica el tamaño del Text Field haciendo clic sobre él para acceder a sus 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 la ventana debería de tener el siguiente aspecto:

../../_images/simple_browser_initial_layout.png

Ajustar las propiedades

Una propiedad describe algo sobre un objeto, com puedan ser una ventana o un botón. Cambiando los valores de las propiedades puedes cambiar el aspecto o comportamiento de dicho objeto.

Inspector

Se usa el Inspector para cambiar y ver las propiedades de los controles. Este comparte la misma área que la Librería a la derecha del Espacio de Trabajo.

Definir las propiedades para la ventana

Si no lo has hecho aún, muestra el Inspector haciendo clic en el botón Inspector en la barra de herramientas o usando el atajo de teclado -I si estás en macOS o Ctrl+I en Windows y Linux.

Cambiaremos las propiedades Name (Nombre) y Title (Título):

  1. En el Editor de Plantilla, haz clic sobre la barra de titulo de la ventana para seleccionarla. El Inspector mostrará ahora las propiedades correspondientes a la ventana.

  2. En el campo Name (ubicado en el grupo ID), cambia el name de Window1 a BrowserWindow`. Pulsa RETURN para ver el cambio de nombre en el Navegador.

../../_images/window_name.png
  1. en el campo Title (ubicado en el grupo Frame), cambia name de Untitled a Web Browser.

../../_images/window_title.png

Definir las propiedades para el Text field

El Text Field es donde tu usuario introducirá el URL al que quiere navegar.

  1. En la ventana, selecciona el control TextField1. El Inspector cambia para mostrar las propiedades del Text Field.

  2. Cambia el campo Name de TextField1 a AddressField. Pulsa Retorno para ver el cambio de nombre en el Navegador. El cambio de Nombre hace que resulte más sencillo identificar los controles en el Navegador y también cuando estás escribiendo código. Es una buena práctica.

../../_images/textfield_name.png
  1. Ahora tienes que hacer cambios de anclaje para que el TextField se alargue o encoja a medida que se modifique el ancho de la ventana. En el grupo Locking observa la imagen que muestra la imagen con pequeños iconos de candados cerrados en la parte superior e izquierda, y con pequeños candados abiertos en la parte inferior y derecha. Haz clic sobre los candados de la parte superior, izquierda y derecha de modo que estén cerrados, con el candado de la parte inferior abierto.

../../_images/locking_properties.png

Definir las propiedades para el botón

Tus usuarios harán clic en el botón para mostrar la página web.

  1. En la ventana, selecciona el control PushButton1. El Inspector cambiará para mostrar las propiedades del Botón.

  2. Cambia el campo Name de PushButton1 a GoButton.

../../_images/button_name.png
  1. Ahora tendrás que cambiar los candados para que el Botón permanezca anclado al costado derecho de la ventana cuando esta varíe su tamaño. Haz clic sobre los candados de modo que estén cerrados los correspondientes a la parte superior y derecha, con los candados izquierdo e inferior abiertos.

../../_images/button_locking.png
  1. Por último, querrás asignar una etiqueta al botón. En el campo Caption (ubicado en el grupo Appearance), cambia la etiqueta de OK a Go.

../../_images/button_caption.png

Ajustar las propiedades del HTML viewer

El último cambio de la interfaz de usuario que hemos de hacer es el correspondiente al HTML Viewer.

  1. En la ventana, selecciona el control HTMLViewer1. El Inspector cambiará para mostrar las propiedades del HTML Viewer.

  2. Cambia el campo Name de HTMLViewer1 a WebViewer.

../../_images/htmlviewer_name.png
  1. Por último, tendrás que hacer algunos cambios de anclaje de modo que el HTML Viewer continúe ocupando la mayor parte de la ventana cuando esta modifique su tamaño. Haz clic sobre los candados de modo que estén cerrados para los márgenes superior, inferior, izquierdo y derecho.

../../_images/htmlviewer_locking.png

Añadir código

Tu aplicación está prácticamente lista. Es el momento de añadir el código que le indicará al HTML Viewer qué página web ha de mostrar.

  1. En la ventana, haz doble clic en el Button etiquetado Go. Aparecerá la ventana Add Event Handler. Cuando un usuario hace clic sobre un botón, tu aplicación ejecutará cualquier código encontrado en su manejador de evento Pressed.

  2. Asegúrate de que esté seleccionado Pressed en el listado de Event Handler y haz clic en OK.

  3. Observa que el Navegador se actualiza para mostrar el evento Pressed bajo el control GoButton, además de mostrar el Editor de Código.

  4. Añade este código en el Editor de Código. Si no ves el cursor parpadeando en el Editor de Código (el área de edición de texto en la parte central de la ventana), haz clic en dicha área bajo el nombre de evento Pressed() y escribe este código: (Es una buena práctica escribirlo en vez de copiarlo y pegarlo)

WebViewer.LoadURL(AddressField.Text)

¿Qué hace este código? El URL introducido por el usuario en el Text Field se almacena en la propiedad Text, AddressField.Text. Entonces, queremos que nuestro código muestre la página web en el WebViewer, lo cual se lleva a cabo invocando el método LoadURL y enviándole el URL escrito por el usuario.

¡Eso es! Tu primera app está completa.

Ejecutar la App

Deberías de guardar tu trabajo de forma periódica y siempre antes de ejecutar tu proyecto. Para ello:

  1. Guarda el proyecto seleccionando File > Save.

  2. Proporciona un nombre al proyecto (por ejemplo SimpleBrowser) y haz clic en Save.

Ahora puedes probar tu app terminada:

  1. Haz clic en el botón Run de la barra de herramientas para ejecutar tu proyecto. La app se abrirá en su propia ventana.

  2. Escribe el URL de tu elección, recordando que ha de empezar con `https://.

  3. Haz clic sobre el botón Go. Se mostrará la página web.

  4. Prueba a cambiar el tamaño de la ventana. Observa que los controles cambian su tamaño o su posición al hacerlo.

  5. Prueba otra URL. En esta ocasión, introduce https://showcase.xojo.com`.

  6. Verás la página correspondiente a Xojo Showcase.

  7. Cuando termines de experimentar con la app Simple Browser, puedes cerrar la ventana para volver a Xojo. En macOS, selecciona SimpleBrower.debug > Quit para Salir de la app.

../../_images/completed_desktop_quickstart_app.png

Próximos pasos

Esta Guía Rápida te ha introducido a Xojo y has aprendido como hacer tu primera app mediante el diseño de una ventana, añadiendo controles y escribiendo código. A continuación, debe revisar las secciones Topics y API de esta Documentación.