Guía Rápida iOS

Esta Guía Rápida iOS te proporcionará una introducción al entorno de desarrollo Xojo y te guiará en el desarrollo de una app iOS completamente funcional: un navegador web sencillo. Completarlo sólo te llevará en torno a 15 minutos.

../../_images/iphone.png

Requerimientos de Desarrollo iOS

Se requiere de un Mac para el desarrollo de proyectos iOS en Xojo. Para ejecutar/probar/depurar un proyecto iOS creado en Xojo se precisa de un Simulador iOS que se proporciona junto con la herramienta de desarrollo Xcode de Apple. Puedes descargar Xcode de forma gratuita desde la Mac App Store. Una vez que hayas descargado e instalado Xcode, ejecútalo una vez y acepta su Acuerdo de Licencia. Después, sal de Xcode. Si aun no has descargado e instalado Xcode, hazlo ahora antes de continuar con esta Guía Rápida.

Atajos

Hemos proporcionado un vídeo de la Guía Rápida, en el caso de que prefieras verlo en vez de realizar los pasos tu mismo.

Si lo prefieres, también puedes descargar el proyecto Xojo completado.

Primeros Pasos

Ejecuta Xojo. Una vez que termine de cargarse aparecerá la ventana del Selector de Proyecto.

../../_images/new_project_chooser.png

  1. Verás tres campos que requieren de la introducción de valores:

    • Application Name Será el nombre de archivo correspondiente al archivo de la app creada. Introduce "SimpleBrowser" como el Application Name (Nombre de la Aplicación).

    • Company Name es el nombre de tu empresa. Puedes dejarlo vacío si lo deseas.

    • Application Identifier es un identificador único para esta app.

  2. Haz clic en OK para abrir el Espacio de Trabajo (Workspace), la ventana principal de Xojo, donde comenzarás a diseñar tu app.

Workspace

El espacio de trabajo se abre con la pantalla por defecto.

../../_images/ide_for_docs_ios.png

Crear una App de Navegación

Visión General

Una app Xojo está conformada por una colección de objetos, denominados clases. Prácticamente todo en Xojo es una clase, incluyendo las pantallas y los controles. En este proyecto SimpleBrowser utilizas una clase por defecto Screen para crear tu pantalla, y añades controles (clases de interfaz de usuario) a la pantalla para crear su diseño.

La app usa tres controles:

  • Text Field: Un control Text Field se utiliza para introducir texto. En este proyecto, el URL a mostrar se introduce en un Text Field situado en la parte superior de la pantalla.

  • Button: A Button is used to trigger an action. Se utiliza un Button para lanzar una acción. El usuario pulsa el botón para cargar la página web del URL en el HTML Viewer.

  • HTML Viewer: Se usa un HTML Viewer para mostrar una página web.

Crear la Interfaz de Usuario

Con Screen1 abierta en el Editor de Diseño, ya estás listo para comenzar a añadir controles a la pantalla.

  1. En la Librería, haz clic en el icono del Text Field y arrástralo sobre la esquina superior izquierda de la pantalla en el Editor de Diseño. A medida que te aproximes a los márgenes verás los indicadores de las guías de alineamiento que te ayudarán a posicionar el control.

../../_images/drag_first_control_to_layout.png

  1. En la Librería, haz clic en el icono de BUtton y arrástralo sobre la esquina superior derecha de la pantalla.

../../_images/drag_second_control_to_layout.png

  1. Arrastra el icono del HTML Viewer sobre el espacio vacío restante en la pantalla. Cambia el tamaño de este control (usando los manejadores de tamaño, de modo que rellene la mayor parte del espacio bajo el Text Field y el Button).

../../_images/drag_third_control_to_layout.png

  1. Cambia el tamaño del Text Field para aumentar su tamaño. Haz clic sobre él para que se muestren sus manejadores de selección. Haz clic en el manejador central derecho y arrástralo hacia la derecha hasta que las guías de alineación te indiquen de que estás lo suficientemente próximo al Botón.

El diseño finalizado de tu app debería ser como este:

../../_images/finished_layout.png

Definir las Propiedades

Una propiedad es un valor de una clase. Al cambiar los valores de las propiedades cambias el comportamiento de la clase.

Inspector

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

Definir las Propiedades para la Pantalla

  1. Selecciona Screen1 en el Navegador. Necesitas cambiar las propiedades Name y Title.

../../_images/inspector_browserscreen.png

  1. En el Editor de Diseño, haz clic en iPhone screen (no sobre cualquier otro control) para seleccionarlo. El Inspector mostrará ahora las propiedades para la pantalla.

  2. En el campo Name (situado en el grupo ID), cambia el name de Screen1 a `BrowserScreen. Pulsa RETURN para ver el nombre cambiado en el Navegador.

  3. En el campo Title, cambia el name a SimpleBroswer.

Definir las Propiedades del Text Field

El Text Field es donde tus usuarios introducen el URL cuya página quieren ver en el navegador.

../../_images/urlfield_inspector.png

  1. En el Navegador, selecciona el control TextField1 de BrowserScreen. El Inspector cambia para mostrar las propiedades del Text Field.

  2. En el campo Name, cambia name de TextField1 a URLField.

  3. En el campo InputType, selecciona URL en el menú desplegable. Este muestra el teclado especial de URL sobre los dispositivos iOS cuando el usuario hace tap sobre un campo de texto.

  4. En el campo Text, cambia text de Untitled a https://www.wikipedia.org.

Definir las Propiedades del Botón

Cuando se ejecute la app, la página web se mostrará al pulsar el botón.

../../_images/ios_quickstart_buttonios.png

  1. En BrowserScreen, selecciona el control BUtton1. El Inspector cambia para mostrar las propiedades de Button.

  2. En el campo Name, cambia name de Button1 a ShowButton.

  3. Proporciona una etiqueta al botón, cambiando el campo Caption de `Button a Show`.

Definir las Propiedades del HTML Viewer

El último cambio que necesitas hacer en la interfaz de usuario es para el HTML Viewer.

../../_images/inspector_webviewer.png

  1. Selecciona el control HTMLViewer1 en BrowserScreen. El Inspector cambia para mostrar las propiedades del HTML Viewer.

  2. En el campo Name, cambia name de HTMLViewer1 a WebViewer.

Añadir Código

Tu app ya está casi completa. Ahora es el momento de añadir el código que le indicará al HTML Viewer (nombrado como WebViewer) la página web a mostrar.

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

  1. En BrowserScreen, haz doble clic sobre el control ShowButton; etiquetado como "Show".

../../_images/add_event_handler_dialog.png

  1. Aparecerá el diálogo correspondiente a Add Event Handler. Los Event Handler (Manejadores de Evento) tienen lugar cuando el usuario inicia una acción. En este caso, cuando el usuario pulse sobre el botón la app ejecutará cualquier código que se encuentre en su manejador de evento Pressed. Selecciona Pressed de entre las opciones mostradas en el listado de Event Handler y haz clic en OK. Observa cómo se actualiza el Navegador para mostrar el evento Pressed bajo el control ShowButton, además de que muestra el Editor de Código asociado.

  2. Ahora necesitas obtener el URL introducido por el usuario. El valor teclado por el usuario en un Text Field se guarda en la propiedad Text del Text Field. A continuación, querrás indicar al WebViewer que muestre la página. Esto se realiza invocando el método LoadURL en el control HTML Viewer y enviándole la URL introducida por el usuario. Por tanto, necesitas añadir este código en el Editor de Código. Empieza haciendo clic en el área en blanco bajo el nombre de evento Action() y escribe a continuación el siguiente fragmento de código (escríbelo en vez de copiarlo y pegarlo):

WebViewer.LoadURL(URLField.Text)

¡Y ya está! Tu primera app iOS está finalizada.

Ejecutar la app

Antes de avanzar, guarda tu trabajo:

  1. Guarda el proyecto seleccionando File > Save As.

  2. Haz clic en Save.

Ejecutar el Proyecto

  1. Para ejecutar un proyecto iOS necesitarás descargar e instalar Xcode en primer lugar, de modo que obtengas la app iOS Simulator utilizado para ejecutar las apps iOS en un Mac. Puedes descargar Xcode de forma gratuita desde la Mac App Store. Una vez hayas descargado e instalado Xcode, tendrás que ejecutarlo una vez y aceptar el acuerdo de licencia. Una vez lo hayas hecho, puedes salir de Xcode, dado que no lo necesitarás.

  2. Haz clic en el botón Run en Xojo para ejecutar la app en el Simulador iOS. Por omisión, el Simulador selecciona el dispositivo más pequeño. Puedes cambiarlo en el menú Project > Run On.

  3. Escribe una URL (segura, https) de tu elección (o utiliza la mostrada por omisión) y haz tap en el botón Show.

  4. Verás la página web.

  5. Cuando termines de experimentar con la app Simple Browser, puedes salir del Simulador iOS para volver a Xojo.

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, debe revisar las secciones Topics y API de esta Documentación.