Español:Guía Rápida iOS

Bienvenido a Xojo, la mejor herramienta de desarrollo Multiplataforma que hayas visto. Con Xojo puedes crear apps para Windows, macOS, Linux, Raspberry Pi, iOS y la 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 conforman el Entorno de Desarrollo Integrado de Xojo o IDE.

Con el IDE puedes crear las interfaces de usuario de tus apps simplemente arrastrando y soltando los objetos de interfaz sobre las vistas de la plantilla. En esta Guía Rápida verás cuan sencillo es. Xojo te proporciona todas las herramientas necesarias para crear virtualmente cualquier tipo de aplicación que puedas imaginar.

Esta Guía Rápida es para aquellos recién llegados a la programación y quienes llegan por primera vez a Xojo. Esta te proporcionará una introducción al entorno de desarrollo de Xojo y te guiará a través del desarrollo de una app sencilla para iOS (un navegador web simple). Completar esta Guía Rápida debería de llevar en torno a 15 minutos.

Comenzando

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

Haz doble clic en el icono de la app Xojo para iniciarla. Una vez que se finalice la carga, aparecerá la ventana del Selector de Proyecto.
Xojo te permite crear diferentes tipos de aplicaciones (Desktop, Web, Consola y iOS). Para esta Guía Rápida crearemos una app de iOS, de modo que haz clic en iOS.
Deberías de ver ahora tres campos que requieren la introducción de valores: Application Name (Nombre de Aplicación), Company Name (Nombre de Empresa) y Application Identifier (Identificador de Aplicación).

Application Name es el nombre de tu app. Este será el nombre del archivo correspondiente a la aplicación final, una vez creada.
Company Name es el nombre de tu empresa. Puedes dejarlo en blanco, si lo deseas.
Application Identifier es un identificador único para esta app. Se rellenará automáticamente utilizando para ello la información introducida en los nombres de Aplicación y Empresa, pero puedes cambiarlo a los valores que desees.

Introduce "SimpleBrowser" como Nombre de Aplicación. Puedes dejar el Nombre de Empresa tal cual o bien cambiarlo.
Haz clic en OK para abrir la ventana principal de Xojo (denominado el Workspace o Espacio de Trabajo), donde comenzarás a diseñar tu app.

Espacio de Trabajo

Xojo abre automáticamente el Espacio de Trabajo (Workspace) con la vista por defecto de la app seleccionada en el Navegador y la mostrará 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 View1 (seleccionada), el objeto App y los elementos de pantalla iPhone y iPad. Utilizas el Navegador para Navegar por los diversos elementos de tu proyecto.

Diseñador 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 vistas de tu app. Esta muestra la vista y la previsualiza tal y como se verá cuando se ejecute la app. En esta ilustración la vista 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 a la derecha es la Librería (Library) y muestra los controles y elementos de interface que puedes añadir a la vista o al proyecto. Puedes diseñar la vista arrastrando controles desde la Librería a la vista. También puedes añadir un control a la vista haciendo doble clic sobre él. Puedes cambiar el modo en el que se muestran los controles en la Librería haciendo clic para ello sobre el icono con la imagen de una pequeña rueda 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.

Inspector: No mostrado en la anterior ilustración se encuentra el Inspector, y que te permite ver y cambiar las propiedades para el control seleccionado. Este área de la ventana del Espacio de Trabajo está compartido con la Librería. Puedes ver el Inspector haciendo clic sobre el botón Inspector en 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 seleccionas diferentes elementos del proyecto. Puedes cambiar el valor del Inspector introduciendo un nuevo valor en el campo situado a la derecha de la etiqueta del campo.

La App de Navegador Web Sencillo

General

El mejor modo de aprender rápidamente como utilizar Xojo es creando una app. Para esta Guía Rápida crearás un navegador web sencillo.

Una app Xojo consiste de una colección de objetos, denominadas clases. Prácticamente todo en Xojo es una clase, incluyendo tus vistas y sus controles. En el proyecto SimpleBrowser vamos a utilizar la clase por defecto View para crear la vista y añadirás controles (clases de interfaz de usuario) a la vista para crear el diseño.

La app utiliza tres controles:

Text Field: Un control Text Field se utiliza para introducir texto. En este proyecto, el URL a mostrar se escribe en un Text Field en la parte superior de la vista.
Button: Se utiliza un Button para lanzar una acción. El usuario hace clic en el botón para cargar la página web correspondiente al URL en el HTML Viewer.
HTML Viewer: Se utiliza un HTML Viewer para mostrar HTML (una página web). En este proyecto, es el encargado de mostrar el sitio web correspondiente al URL.

Las siguientes secciones te guiarán en la creación de la interfaz de usuario y en añadir el código necesario para que funcione la app.

Crear la Interfaz de Usuario

Debes de tener Xojo ejecutándose y View1 abierto en el Editor de Plantilla. Ahora estás listo para empezar a añadir controles a la vista.

Comenzaremos con el Text Field: En la Librería, haz clic en el icono de Text Field y arrástralo a la esquina superior izquierda de la vista en el Editor de Plantilla. A medida que te aproximes a los márgenes verás los indicadores de alineamiento que te ayudarán a posicionar el control.
A continuación, añade el Botón: En la Librería, haz clic en el icono de Botón y arrástralo a la parte superior derecha de la vista.
El último control es el HTML Viewer: Arrastra el icono del HTML Viewer sobre el área vacía restante de la vista. Cambia el tamaño de este control (utilizando los maneja dores de selección de modo que ocupe la mayor parte visible de la vista bajo el Text Field y el Botón) y utiliza las guías de bloqueo que aparecen para afinarlo sobre los márgenes.
El último paso es ajustar el tamaño del Text Field para que sea más grande. Haz clic sobre él para mostrar los manejadores de selección. Haz clic en el manejador central derecho y arrastra de él hasta que las guías de alineamiento indiquen que está lo suficientemente próximo al Botón.

El diseño finalizado de la vista debería tener un aspecto similar a este:

Ajustar las Propiedades

¿Que es una Propiedad?

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

Cambiar el nombre de todos los controles (y la vista) para que describan su comportamiento y resulten más fáciles de identificar desde código.
Añadir una Etiqueta al Botón.
Definir las propiedades de Auto-Layout para que los controles cambien su tamaño correctamente sobre los dispositivos iOS con diferentes tamaños de pantalla.

Inspector

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

Definir las Propiedades para la Vista

Si aun no lo has hecho, muestra el Inspector haciendo clic en el botón Inspector en la barra de herramientas y selecciona View1 en el Navegador. Necesitas cambiar las propiedades Name, NavigationBarVisible y Title.

En primer lugar, en el Editor de Plantillas, haz clic en el borde de la vista del iPhone para seleccionarla. El Inspector mostrará ahora las propiedades para la vista.
En el campo Name (ubicado en el grupo ID), cambia el nombre de "View1" a "BrowserView". Pulsa Retorno para ver el cambio del nombre en el Navegador.
En el campo NavigationBarVisible , ajusta el conmutador a ON. Este muestra la Barra de Navegación para la vista. Cuando se hace esto, el Text Field y el Botón pueden desaparecer dado que quedan cubiertos por la Barra de Navegación. Puedes solucionarlo en las próximas secciones.
En el campo Title, cambia el nombre a "SimpleBrowser". Pulsa Retorno y verás el cambio del nombre en la Barra de Navegación.

Ajustar las Propiedades para el Campo de Texto

El Campo de Texto El Text Field es donde los usuarios introducirán el URL que quieren ver en el navegador. Querrás cambiar las siguientes propiedades en el Inspector: Name, KeyboardType, PlaceHolder, Text y Auto-Layout.

En el Navegador, selecciona el control TextField1 en el BrowserView. El Inspector cambia para mostrar las propiedades del Text Field.
En el campo Name, cambia el nombre de "TextField1" a "URLField". Pulsa Retorno para ver el cambio de nombre en el Navegador.
En el campo KeyboardType, selecciona el valor "URL" en el menú desplegable. Esto muestra el teclado especial de URL en el dispositivo iOS cuando el usuario hace tap sobre el campo.
En el campo Text, cambia el texto de "Untitled" a "https://www.wikipedia.org".

Si no alienas el Text Field utilizando las guías de layout es posible que debas de hacer cambios en el Auto-Layout, de modo que el Text Field aumente o reduzca su tamaño en función de que cambie el tamaño de la vista cuando se utilice sobre diferentes tipos de dispositivos iOS.

En la sección Auto-Layout verás una lista de reglas que controlan el modo en el que el Text Field aparece sobre la vista. En concreto, querrás cambiar la regla Top de modo que indique que ponga el Text Field en una distancia estándar bajo TopLayoutGuide. Para ello, haz clic en la regla "Top" y haz clic en el botón Edit.
Define los valores para la regla de Auto-Layout tal y como se muestra a continuación, y haz clic en Done:

Ajustar las Propiedades para el botón

Cuando ejecutes la app, hay que hacer clic sobre el botón para mostrar la página web. Necesitarás cambiar estas propiedades: Name, Caption and Auto-Layout.

En BrowserView, selecciona el control Button1. El Inspector cambiará para mostrar las propiedades del Botón.
En el campo Name, cambia el nombre de "Button1" a "ShowButton". Pulsa Retorno para ver el cambio del nombre en el Navegador.
Proporciona una etiqueta al botón cambiando el campo Caption de "Untitled" a "Show".

Si no alienas el botón utilizando las guías de diseño, es posible que necesites realizar cambios al Auto-Layout, de modo que el Botón mantenga su posición bajo la barra de navegación y al costado derecho de la vista cuando varíe el tamaño del dispositivo.

En la sección Auto-Layout verás un listado de reglas que controlan como aparece el Botón en la vista. En particular, querrás cambiar la regla Top de modo que alinee el botón con la parte superior del Text Field, y la regla Right para asegurar que el botón se mantenga en el margen derecho de la vista.
En primer lugar, haz clic en la regla "Top" y haz clic a continuación en el botón Edit. Si no se muestra la regla Top, puedes añadirla utilizando el botón "+" en la parte inferior de la área de Auto-Layout. Define los valores para la regla de Auto-Layout tal y como se muestra a continuación y haz clic en Done:
Por último, haz clic en la regla Right, haz clic en Edit, define sus valores tal y como se muestra a continuación y haz clic en Done:

Ajustar las Propiedades para el HTML Viewer

Los últimos cambios que has de hacer en la interfaz de usuario son para el HTML Viewer. Aquí querrás cambiar las siguientes propiedades: Name y Auto-Layout.

En BrowserView, selecciona el control HTMLViewer1. El Inspector cambia para mostrar las propiedades del HTML Viewer.
En el campo Name, cambia el nombre de "HTMLViewer1" a "WebViewer". Pulsa Retorno para ver el cambio del nombre en el Navegador.

Por último, puede que necesites cambiar el Auto-Layout para que el HTML Viewer se muestre utilizando el resto del área disponible en la Vista. En concreto tendrás que cambiar estas reglas de Auto-Layout: Top, Left y Right (es posible que no tengas que cambiar todas ls reglas si has utilizado las guías de diseño para posicionar el HTML Viewer).

Selecciona la regla Top, haz clic en Edit y ajusta sus valores tal y como se muestra:
Selecciona la regla Left, haz clic en Edit y define sus valores tal y como se muestra:
Selecciona la regla Right, haz clic en Edit y define sus valores tal y como se muestra:

Recuerda, si cualquiera de las reglas que quieres editar no se encuentra en el listado de reglas, puedes añadirla utilizando el botón "+" en la parte inferior de la sección Auto-Layout del Inspector.

Añadir Código

Tu app está prácticamente finalizada. Ahora es momento de añadir código que indicar al HTML Viewer (llamado WebViewer) la página web a mostrar. Xojo utiliza un lenguaje de programación Orientado a objetos que es realmente fácil de aprender. ¡Sólo necesitarás una línea de código para completar tu proyecto!

Los pasos que has de tomar son:

Averiguar cuando el usuario hace clic sobre el control ShowButton, denominado "Show" en la vista.
Obtener el URL introducido en el URLField.
Dejar que el WebViewer muestre el URL.

Sigue estos pasos para añadir el código:
En el BrowserView, haz doble clic sobre el control ShowButton, etiquetado "Show".
aparecerá la ventana Add Event Handler. Los Event Handler tienen lugar cuando el usuario inicia una acción. En este caso, cuando el usuario hace clic sobre un botón, la app ejecutará cualquier código que encuentre en su 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 el listado de Event Handler y haz clic en OK. Advierte que el Navegador se actualiza para mostrar el evento Action bajo el control ShowButton y se mostrará el Editor de Código. Este paso resuelve el primer problema de conocer cuando el usuario hace clic en ShowButton.
Ahora necesitas obtener el URL introducido por el usuario. El valor escrito por el usuario en el Text Field se almacena en la propiedad Text del Text Field. Accedes a la propiedad Text así:
URLField.Text
El último paso es indicar al WebViewer que muestre la página web. Esto se lleva a cabo invocando el método LoadURL del control HTML Viewer y enviándole el URL introducido por el usuario. Tu código será este:
WebViewer.LoadURL(URLField.Text)
Introduce esta línea de código en el Editor de Código. Empieza haciendo clic sobre el área en blanco bajo el nombre de evento Action() y escribe este código (escríbelo en vez de copiarlo y pegarlo):

WebViewer.LoadURL(URLField.Text)

¡Esto es todo! Has completado tu primera app.

Ejecutar la App

Antes de seguir adelante, probablemente querrás guardar tu trabajo:

Guarda el proyecto seleccionado File ↠ Save As.
En el Diálogo resultante, nombra el proyecto "SimpleBrowser" y haz clic en Save.

Ejecutar tu Proyecto

Ahora puedes probar tu app terminada:

Para ejecutar tu proyecto iOS, necesitas descargar e instalar en primer lugar Xcode para obtener la app Simulador que se utiliza para ejecutar apps iOS en un Mac. Puedes descargar Xcode de forma gratuita desde la Mac App Sobre. Una vez que hayas descargado e instalado Xcode, tendrás que ejecutarlo una vez y aceptar su acuerdo de licencia. Tras esto, puedes salir de Xcode dado que no lo necesitarás.
Haz clic en el botón Run en Xojo para ejecutar la app en el Simulador iOS.
Escribe un URL seguro (https) de tu elección (o bien utiliza el incluido por omisión) y haz clic en el botón "Show".
Verás la página Web.
Cuando hayas finalizado experimentando con la app Simple Browser, puedes salir del Simulador iOS para volver a Xojo.

Si quieres utilizar un URL no seguro con iOS 9 o posterior, tendrás que configurar iOS App Transport Security tal y como se describe en esta entrada del blog. O bien consultar la página de iOSHTMLViewer para encontrar información adicional.

A continuación

Esta Guía Rápida te ha introducido en Xojo y te ha mostrado como realizar una app sencilla.

A continuación, deberías de ver la Guía del Usuario y Language Reference.