ImageViewer: Cargar y Mostrar Imágenes de un URL

El control WebImageViewer nos permite cargar y mostrar cualquier imagen recuperada a partir de un URL dado. ¿No sería genial disponer de dicha funcionalidad también en las versiones Desktop y iOS de ImageViewer? Continúa leyendo y te mostraré como puedes hacerlo.

Comenzaremos con la versión Desktop del proyecto. Una vez finalizado, sólo tendrás que repetir los mismos pasos aplicándolos a la versión iOSImageViewer del control (o bien copiar y pegar los eventos, métodos y propiedades que veremos a continuación).

Con un proyecto Desktop creado en el IDE, comenzaremos añadiendo un nuevo DesktopImageViewer arrastrándolo desde la Librería y soltándolo en el Navegador. Dicha acción creará una subclase a partir de DesktopImageViewer.

Con el nuevo CustomDesktopImageViewer seleccionado en el Navegador, utiliza el Panel Inspector asociado para cambiar su nombre a “URLDesktopImageViewer” (por supuesto puedes utilizar cualquier otro nombre).

1. Añadir Propiedades

Dado que queremos cargar una imagen desde un URL comenzaremos añadiendo algunas propiedades a nuestra subclase. Estas serán las responsables de almacenar el URL y también una instancia de URLConnection para realizar la conexión subyacente, encargada de recuperar la imagen a partir del URL indicado.

Comenzaremos con la propiedad URL. Con “URLDesktopImageViewer” seleccionado en el Navegador, selecciona la opción “Add To URLDesktopImageViewer > Property” en el menú contextual. Una vez añadida la propiedad, utiliza el Panel Inspector asociado para cambiar los siguientes campos:

• Name: URL
• Type: String
• Scope: Public

A continuación, con dicha propiedad aún seleccionada en el Navegador, selecciona la opción “Convert to Computed Property”. Dicha acción añadirá un par de métodos bajo la propiedad URL: Get y Set.

Selecciona el método Set. El código que incluyamos en dicho método se ejecutará cada vez que el usuario (o nuestro código) asigne un nuevo valor a dicha propiedad. Añadamos las siguientes líneas de código al Editor de Código asociado con el método Set:

mURL = value
LoadURL

Probablemente querrás mostrar dicha propiedad en el Panel Inspector del IDE, de modo que el usuario pueda introducir simplemente el URL para la propiedad utilizando el Panel Inspector cada vez que se añada una nueva instancia de la clase en el Layout Editor.

Para ello, con la subclase URLDesktopImageViewer seleccionada en el Navegador, selecciona la opción Inspector Behavior desde el menú contextual. Dicha acción mostrará el siguiente diálogo:

Encontrarás la propiedad URL bajo la sección Behavior de dicho panel. Asegúrate de marcar la casilla de verificación asociada con la propiedad y confirma el cambio haciendo clic en el botón “OK”.

Añade una segunda propiedad a la subclase URLDesktopImageViewer. con la nueva propiedad seleccionada en el Navegador, utiliza el Panel Inspector asociado para cambiar los siguientes campos:

• Name: Connection
• Type: URLConnection
• Scope: Protected

2. Añadir (y Definir) Eventos

Con URLDesktopImageViewer aún seleccionado en el Navegador, elige la opción “Add to URLDesktopImageViewer > Event Handler…” en el menú contextual. Dicha acción abrirá la ventana “Add Event Handler”.

Selecciona los eventos Opening y Closing y haz clic en el botón “OK” para confirmar y cerrar la ventana. Verás cómo estos os eventos se añaden bajo nuestra subclase en el Navegador.

Selecciona el manejador de evento Opening en el Navegador bajo la jerarquía de nuestra subclase (si no ves los nombres de evento, haz clic en el icono con forma de triángulo asociado con la entrada “Event Handlers”). Dicha acción mostrará el Editor de Código asociado con el evento.

Escribe las siguientes líneas de código:

LoadURL
RaiseEvent Opening

Dado que nuestra subclase está “consumiendo” (o usando) el Manejador de Evento Opening, necesitaremos crear una nueva Definición de Evento para el mismo, de modo que los usuarios de nuestra subclase puedan escribir su propio código también en dicho evento. Para ello, y con URLDesktopImageViewer aun seleccionado en el Navegador, elige la opción “Add To URLDesktopImageViewer > Event Definition” en el menú contextual.

Como resultado, el IDE añadirá una nueva entrada bajo la sección Events Definitions de la clase. Selecciónala y utiliza el Panel Inspector asociado para cambiar los siguientes valores:

• Name: Opening

Seleccionemos ahora el manejador de evento Closing para la subclase URLDesktopImageViewer en el Navegador y escribe las siguientes líneas de código en el Editor de Código asociado:

If connection <> Nil Then

RemoveHandler connection.contentReceived, WeakAddressOf ContentReceived

End If

RaiseEvent Closing

Y dado que la subclase está consumiendo el manejador de evento Closing, tendremos que añadir una nueva Definición de Evento utilizando para ello el mismo nombre (Closing).

3. Añadir Métodos

Como hemos visto, el código en el método Set de la propiedad URL y el manejador de evento Opening llaman al método LoadURL. De modo que tenemos que añadir dicho método a la subclase. Con URLDesktopImageViewer seleccionado en el Navegador, elige la opción “Add to URLDesktopImageViewer > Method” en el menú contextual, utilizando a continuación los siguientes valores en el Panel Inspector asociado:

• Method Name: LoadURL

Introduce las siguientes líneas de código en el Editor de Código asociado con el método:

If Me.mURL <> "" Then

Try

If connection <> Nil Then
RemoveHandler connection.ContentReceived, WeakAddressOf ContentReceived
End If

connection = New URLConnection
AddHandler connection.ContentReceived, WeakAddressOf ContentReceived

connection.Send("GET",mURL)

End Try

End If

En resumen, dicho código crea una nueva instancia de URLConnection y la asigna a la propiedad Connection. Para gestionar los eventos generados durante la ejecución de la instancia URLConnection, necesitamos asociar dichos eventos a algunos métodos de nuestro código. Esto es lo que hacemos mediante la función AddHandler, donde proporcionamos el nombre del evento que queremos manejar (ContentReceived, en este caso), así como la dirección del método que se ejecutará en su lugar. Esto es lo que hacemos pasando el nombre del evento (ContentReceived) a la función WeakAddressOf (aunque también podríamos haber utilizado AddressOf).

A continuación, simplemente necesitamos llamar al método Send de la clase URLConnection, proporcionando el verbo “GET” y el URL desde el cual queremos recuperar la imagen.

El último paso consiste en añadir, de hecho, el método ContentReceived que sustituirá la funcionalidad del manejador de evento ContentReceived para nuestra instancia URLConnection.

Añade un nuevo método a la subclase URLDesktopImageViewer usando los siguientes valores en el Editor de Código asociado:

• Name: ContentReceived
• Parameters: tCon As URLConnection, URL As String, HTTPStatus As Integer, content As String
• Scope: Public

Como puedes ver, cuando creamos un método que sustituirá la funcionalidad de un Manejador de Evento, hemos de proporcionar el mismo tipo y número de parámetros empleados por el Manejador de Evento original, además de un primer parámetro que contendrá la instancia propiamente dicha (en este caso se trata del parámetro tCon As URLConnection).

Escribe ahora las siguientes líneas de código en el Editor de Código asociado:

Try

if httpStatus = 200 then Me.Image = Picture.FromData(content)

End Try

Como puedes ver, si recibimos el estado “OK” desde la instancia de la conexión entonces asignamos la imagen creada a partir de los datos recibidos a la propiedad Image del control; y, dado que “las cosas siempre pueden ir mal” y no contemplamos todos los casos para no alargar mucho este tutorial, dicha línea de código está contenida en un bloque Try…End Try.

Probando URLDesktopImageViewer

Para probar la funcionalidad de nuestra subclase, selecciona Window1 en el Navegador de modo que accedas al Layout Editor en el área principal del IDE. A continuación, arrastra la entrada URLDesktopImageViewer desde el Navegador y suéltalo sobre el control de ventana mostrado por el Layout Editor.

Con el nuevo control seleccionado en el Layout Editor, utiliza el panel Inspector para definir su ancho y altura, así como cualquier otro atributo que desees. Lo más interesante en este caso es que también encontrarás el campo URL bajo la sección Behavior del Panel Inspector; por tanto, selecciónalo y escribe un URL apuntando a la imagen que desees recuperar (por ejemplo: https://www.xojo.com/assets/img/logo@2x.png)

¡Listo! Ejecuta la app y, si tu equipo está conectado a Internet, verás como se recuperar la imagen desde el URL indicado y se muestra en el ImageViewer!

Por supuesto, puedes repetir estos pasos (o copiar y pegar) para recrear tu propio control URLiOSImageViewer, tal y como puedes ver en la captura de pantalla sobre estas líneas, donde se está ejecutando una app iOS creada con Xojo en el Simulador y en la que se utiliza nuestra subclase para mostrar la imagen recuperar del URL indicado.