PDFViewer con Xojo: Ver documentos PDF no tiene por qué ser complicado

Como probablemente ya sepas a estas alturas gracias a los artículos que hemos ido publicando, Xojo es la herramienta de desarrollo multiplataforma que te permite crear apps nativas tanto para macOS como para iOS utilizando el mismo lenguaje y entorno de programación; amén de que también podrás crear, desde tu Mac, apps nativas para Windows, Linux, la Web… ¡y Android!

Sin embargo en este tutorial nos vamos a centrar en la forma tan rápida y sencilla con la que podemos añadir a nuestras apps iOS, creadas con Xojo, la capacidad de mostrar y navegar por documentos PDF… ¡e incluso recuperar el texto de dicho documento para poder trabajar con él desde código!

Así que, ¡manos a la obra!

Lo primero de todo pasa por descargar Xojo e instalarlo en tu Mac simplemente moviéndolo a la carpeta de Aplicaciones tal y como harías con cualquier otra app para Mac.

También necesitarás instalar Xcode si es que aun no lo tienes instalado en tu Mac. Esto se debe a que Xojo necesita utilizar parte del toolset de Xcode en la compilación de las apps para iOS, así como los propios Simuladores instalados y gestionados mediante Xcode. ¡Tranquilo! Esto no significa que debas de utilizar Xcode para nada… sólo has de instalarlo y asegurarte de que este cuente, como mínimo, con los Simuladores iOS proporcionados de serie; luego podrás ejecutar tus apps iOS creadas en el IDE de Xojo en modo depuración sobre ellos, sin necesidad de tener que ejecutar Xcode para nada.

Con Xojo y Xcode instalados, ejecuta Xojo y aparecerá el Selector de Proyecto, donde has de indicar el tipo de proyecto que quieres crear. En este caso se trata de una app para iOS; de modo que selecciona iOS en el listado situado a la izquierda del Selector de Proyecto y cumplimenta los campos sugeridos, tales como el nombre que tendrá la app, el nombre de la empresa, y el identificador que se utilizará como bundle de la app iOS.

Una vez hayas completado el anterior punto, haz clic sobre el botón “OK” y se abrirá la ventana principal del IDE mostrándote en la parte central el Editor de Diseño correspondiente a la pantalla que se ha añadido por omisión como parte del “esqueleto básico de la app”.

Como en nuestro caso se trata de mostrar documentos PDF, sin más, sólo has de seleccionar la pestaña Librería (Library) en la sección derecha de la pantalla, donde puedes encontrar todos los controles disponibles para crear la interfaz de usuario de la aplicación iOS.

Sólo has de arrastrar el control PDFViewer desde la librería y soltarlo sobre el Editor de Diseño correspondiente a la pantalla. Procura situarlo de forma que sus margen izquierdo quede alineado con el margen izquierdo de la pantalla. Luego sólo has de utilizar los manejadores de tamaño disponibles en el propio control para ajustar su tamaño al deseado. Por ejemplo, tal y como se muestra en la siguiente imagen:

Con el elemento PDFViewer1 recién añadido al Editor de Diseño aun seleccionado, haz clic sobre el botón “Inspector” en el área de la derecha correspondiente a la ventana del IDE. Al hacerlo te mostrará los diferentes valores (atributos) disponibles para el elemento seleccionado. En este caso se trata de la instancia u objeto llamado “PDFViewer1”. Como puedes ver, el Inspector te permite modificar algunos de los atributos correspondientes a dicho objeto, tales como el color de fondo que se utilizará (por omisión blanco), y también si quieres mostrar o no en el visor de PDFs la columna con la representación de las imágenes de previo correspondientes a las páginas del documento que se esté mostrando (por omisión, activado).

Ya nos queda poco, y lo fundamental es indicar el documento PDF que queremos mostrar en el visor. Para simplificar las cosas, despliega la entrada correspondiente al ítem iOS en el área izquierda del IDE (el Navegador). Al hacerlo verás dos nuevas entradas: Build y Sign.

Selecciona el elemento iOS y accede al menú contextual para elegir la opción “Add to ‘Build Settings’ > Build Step > Copy Files”. Esta acción añadirá el nuevo elemento “CopyFiles1” bajo la entrada iOS en el Navegador y mostrará el Editor asociado en la parte central de la pantalla. Ahora sólo resta que arrastres sobre el área vacía cualquier documento PDF de tu elección. Este es el que mostraremos en el visor PDF.

Asegúrate de elegir la opción “Resources” en el menú desplegable correspondiente a “Destination” en la parte derecha (Inspector) del Editor correspondiente a copiar archivos. En la siguiente imagen puedes ver el documento PDF que he añadido arrastrando y soltando sobre el área del Editor y cómo la opción “Resources” está seleccionada en dicho menú.

Hasta ahora no hemos escrito ni una sola línea de código, pero lo haremos ahora para indicarle al visor de PDF cuál es el documento que debe mostrar.

Selecciona el elemento “PDFViewer1” en el Navegador y accede al menú contextual para elegir la opción “Add To ‘PDFViewer1’ > Event Handler…”. Al hacerlo se abrirá un diálogo mostrando los diferentes manejadores de evento que puedes añadir sobre dicho objeto. Selecciona “Opening” y confirma la selección haciendo click sobre el botón “OK”.

Al confirmar la selección se habrá añadido el evento “Opening” en la jerarquía del objeto “PDFViewer1” en el Navegador, y se mostrará el Editor de Código asociado; de modo que el código que escribamos aquí será el que se ejecute en respuesta a dicho evento (en este caso cuando se “abra” el control “PDFViewer1”). Escribe las siguientes líneas de código:

Me.Document = SpecialFolder.Resource("xdev21.5.pdf")
Me.DisplayMode = MobilePDFViewer.DisplayModes.SinglePageContinuous

En la primera línea estamos recuperando como FolderItem —una clase del lenguaje de programación Xojo para trabajar con archivos— el elemento disponible en la carpeta Resources (Recursos) y con el nombre de archivo indicado. Como puedes ver, en este caso se trata del mismo nombre de archivo correspondiente al que se añadió en el Paso de Copia de Archivo anterior, y en el que se indicó que debía de copiarse dentro de la carpeta Recursos de la app.

En la segunda línea estamos indicando al objeto “PDViewer1”, mediante la palabra clave “Me” —puesto que el código se está ejecutando dentro del mismo objeto— el modo de visualización que deseamos. En este caso deseamos que se muestre una página de forma continúa. Otras opciones son, por ejemplo, mostrar dos páginas de forma continúa, sólo una página, etc.

En este punto ya podemos ejecutar la app. Dirígete al menú Project > Run On… y selecciona cualquiera de los simuladores iOS que quieras emplear de entre los disponibles. Al hacerlo, se compilará la app de iOS y se abrirá en el Simulador seleccionado.

Ahora puedes desplazarte por las imágenes de previo para navegar por el documento, o bien cualquiera de los gestos habituales de iOS sobre el área principal del visor PDF para desplazarte por entre las páginas, ampliar, reducir, etc.

Vuelve a Xojo cuando termines y pulsa sobre el botón Stop para detener la ejecución de la app en el Simulador.

Vamos a añadir nuevos elementos de UI a la app de forma que recuperemos el texto disponible en el documento PDF mostrado y lo volquemos sobre un área de texto.

Selecciona nuevamente el item “PDFViewer1” en el Navegador para acceder al Editor de Diseño. Ahora haz clic en el botón Library para acceder a los controles de interfaz de usuario disponibles.

Selecciona el control TextArea y arrástralo sobre el Editor de Diseño, soltándolo de modo que el margen superior quede bajo el área disponible del visor PDF y su margen izquierdo quede sobre el margen izquierdo de la pantalla, tal y como se muestra en la siguiente imagen:

A continuación, arrastra un botón desde la Librería sobre el Editor de Diseño y suéltalo de modo que quede situado con su margen derecho sobre el margen derecho de la pantalla, tal y como se muestra en la siguiente imagen:

Haz doble clic sobre el botón recién añadido en el Editor de Diseño; esta acción te dará acceso al diálogo que ya vimos para añadir un nuevo Manejador de Evento sobre dicho objeto. Selecciona la entrada “Pressed” y confirma haciendo clic en el botón “OK”. Como puedes imaginar, este evento se lanzará cada vez que el usuario de la app haga tap sobre el botón, ejecutando por tanto el código que introduzcamos en el Editor de Código asociado con dicho evento, y que será lo que haremos a continuación.

Escribe la siguiente línea de código en el Editor de Código asociado con el evento “Pressed” de “Button1”:

TextArea1.Text = PDFViewer1.Content

Ejecuta la app. En este caso, cuando se abra en el Simulador pulsa sobre el botón… y verás que todo el texto del documento PDF mostrado se ha volcado sobre el campo de texto.

¡Y eso es todo! Como habrás comprobado, crear tu primera app iOS con Xojo es realmente rápido y requiere el mínimo código necesario a la hora de mostrar y navegar por documentos PDF.

¡Nos leemos en el próximo tutorial con Xojo!