Crear apps Wrapper con Xojo

En muchas ocasiones no precisamos crear aplicaciones desde cero, sino de lo que se trata es de dotar de una interfaz de usuario a una funcionalidad ya existente en el propio sistema operativo, lo que se conoce como Wrapper, haciendo así que resulte más intuitivo su manejo. Y también en estos casos, el RAD Xojo es una excelente herramienta de desarrollo que nos permite afrontar este tipo de proyectos en cuestión de pocos minutos gracias, especialmente, al uso de la clase Shell, disponible para despliegues Desktop (macOS, Windows y Linux).

Y para ver un ejemplo de su funcionamiento, vamos a ver qué fácil resulta crear un wrapper entorno a la línea de comandos que nos permite crear discos RAM en macOS. Para ello, todo lo que necesitas es de tu licencia Xojo Desktop o bien descargarte de forma gratuita el IDE de Xojo desde la página de descarga.

Diseñar la interfaz de usuario

Una aplicación wrapper es, como su propio nombre indica (en inglés) un envoltorio en torno a un comando o serie de comandos (funcionalidad, en definitiva) que ya están disponibles como capacidades por omisión del propio sistema operativo. Y dicho envoltorio no es si no la interfaz gráfica que diseñamos para facilitar a los usuarios el uso de dicha capacidad original. Además, si bien en este tutorial vamos a ver un caso realmente mínimo, por cuestiones de espacio, no dudes de que un puñado de aplicaciones que probablemente estés usando bajo macOS, Windows y Linux no son sino apps wrapper en torno a capacidades que, de otro modo, podrías emplear utilizando los comandos equivalente en una sesión de terminal.

Pero en el caso que nos ocupa, vamos a diseñar la interfaz de usuario para nuestra aplicación de creación de discos RAM en macOS. Por tanto, una vez abierto el IDE, lo primero consistirá en seleccionar Desktop como tipo de proyecto y confirmar la selección.

A continuación, dirígete a la Librería de controles y arrastra un control Label hacia la parte superior izquierda de la ventana Window1 mostrada por omisión en el Diseñador de Plantillas. Una vez en su ubicación, y con el control seleccionado, pulsa la tecla Retorno para acceder al panel que te permitirá introducir el texto que mostrará por omisión dicha etiqueta. En nuestro ejemplo, escribe ‘Name’ como pista para el usuario de que esperamos que introduzca el nombre que desee dar al disco RAM en el control de entrada de texto que colocaremos bajo la etiqueta.

Una vez confirmado el texto de la etiqueta, arrastra un control TextField desde la librería y colócalo bajo la etiqueta respetando los márgenes sugeridos por las guías de alineamiento que muestra automáticamente el IDE de Xojo. Haz clic y estira del handler medio derecho para que el TextField cubra todo el ancho de la ventana hasta donde indica la guía de alineamiento. A continuación, accede al panel Inspector para hacer clic sobre los candados que bloquean o anclan el tamaño del control sobre la parte superior, izquierda y derecha. De este modo, cada vez que se modidfique el tamaño de la ventana que contiene el control, este cambiará también su tamaño en consecuencia. Con el control aún seleccionado, pulsa la tecla Retorno e introduce ‘Untitled’ como el texto mostrado por omisión por dicho control.

El siguiente paso en nuestra interfaz de usuario consiste en añadir desde la Librería un control Slider, y que situaremos justo bajo el TextField añadido en el anterior paso (respeta los márgenes indicados por las Guías de alineación). En este caso vamos a modificar algunas de las propiedades del control, utilizando para ello el panel Inspector. En concreto introduce los valores indicados a continuación en sus respectivos atributos del apartado Initial State:

• Minimum: 1
• Value: 32
• Maximum: 512

Es decir, el Slider tendrá el valor ‘1’ como su mínimo seleccionable, ‘512’ como valor máximo y por omisión aparecerá el selector del control en el valor ’32’. Si lo deseas, también puedes seleccionar la opción Bottom Right en el menú desplegable correspondiente al atributo TickStyle del apartado Behavior. En este caso, ancla el tamaño del control sobre los márgenes superior, izquierdo y derecho.

A continuación añadiremos un nuevo control TextField justo a la derecha del Slider. Su función será la de mostrar el valor numérico correspondiente a la selección realizada por el usuario mediante el Slider, o bien permitir que sea el usuario quien introduzca el valor numérico directamente. En este tutorial dejaremos de lado aspectos como la comprobación de máximos o mínimos entre los posibles valores introducidos en el campo de texto, o bien la comprobación de que dicho texto tenga una equivalencia numérica superior a 0, por ejemplo. En este caso, utiliza el panel Inspector para anclar el control sobre los márgenes superior y derecho de la ventana. Con el control aun seleccionado, pulsa la tecla Retorno e introduce el texto ’32’ para que sea el mostrado por omisión.

Para completar la interfaz gráfica, añadiremos por último un control PushButton desde la Librería y lo alinearemos bajo el anterior campo de texto, sobre su margen derecho tal y como se muestra en la siguiente imagen donde se puede ver la interfaz ya finalizada.

Con el PushButton seleccionado, pulsa sobre la tecla Retorno para introducir el texto ‘Create’ que se mostrará por omisión. También debes utilizare en este caso el pnael Inspector para anclar el control sobre los márgenes superior y derecho de la ventana que lo contiene.

Sincronizar valores

Queremos que el segundo TextField añadido a la derecha del Slider muestre el valor actualizado en el Slider, y que el Slider refleje a su vez el valor numérico introducido en el campo de texto. Para ello nos servidoremos de los eventos.

En primer lugar nos ocuparemos del Slider. Selecciónalo en el Navegador de Proyecto (la columna situada más a la izquierda en el IDE y accede posteriormente al menú contextual para elegir finalmente la opción Add to “Slider1” > Event Handler… En el panel resultante, selecciona el evento ValueChanged y confirma finalmente para cerrar la ventana. Dicha acción añadirá el evento indicado en el control, activando el Editor de Código asociado donde deberás de incluir esta línea:

TextField1.Text = me.Value.ToText

A continuación, selecciona el TextField situado a la derecha del Slider y repite la misma operación en el Navegador de Proyecto para acceder a la ventana de Manejadores de Evento. En esta ocasión, añade el evento LostFocus e introduce la siguiente línea en el Editor de Código asociado:

Slider1.Value = me.Text.Val

Definir la acción del wrapper: crear disco RAM

El último de los eventos que asociaremos es el correspondiente al PushButton1. Selecciónalo en el Navegador de Proyecto y accede a la ventana de Manejadores para añadir el Manejador de Evento Action. En la ventana resultante introduciremos el código responsable de ejecutar el comando de macOS pasando como argumentos el nombre que deseamos utilizar para el volumen, así como su tamaño indicado mediante nuestra interfaz gráfica.

Ten en cuenta que el evento Action es el que se ejecutará en respuesta a la pulsación del botón. En el Editor de Código asociado, introduce las siguientes líneas de código:

dim sh as new Shell
dim size as integer = TextField1.Text.Val*2048
dim command as String = "diskutil erasevolume HFS+ '"+textfield2.Text+"' `hdiutil attach -nomount ram://"+str(size)+"`"
sh.Execute command

Como puedes ver, lo primero que hacemos es asignar a la variable ‘sh’ una nueva instancia de la clase Shell. A continuación, creamos una variable ‘size’ de tipo Integer (número entero) y le asignamos como valor el correspondiente al campo de texto, multiplicado por 2.048 dado que hemos de realizar la conversión de MB a bloques tal y como lo espera el comando de macOS.

La siguiente línea de código es la encargada de asignar a la variable de tipo String ‘command’ el comando completo que ha de ejecutarse, utilizando para ello el valor que queremos utilizar como nombre del nuevo disco RAM y también el tamaño calculado en la línea de código inmediatamente anterior.

La última línea de código se limita a indicar a la instancia ‘sh’ que ejecute el comando en cuestión, invocando para ello el método ‘Execute’.

Conclusiones

Como puedes ver, en menos de cinco minutos hemos sido capaces de diseñar una interfaz de usuario bastante funcional y que podemos cuidar con las comprobaciones necesarias y otra serie de florituras para que resulte en una aplicación más capaz. De este modo, una vez compilada a código nativo, nuestra app wrapper se comportará en nuestro ordenador como una aplicación de escritorio más mediante la cual nos resultará tremendamente más fácil crear discos RAM sin la necesidad de recordar crípticos comandos del Shell.