![\"\"](\"https:\/\/sp-ao.shortpixel.ai\/client\/to_webp,q_glossy,ret_img,w_1140\/https:\/\/www.aprendexojo.com\/wp-content\/uploads\/2024\/07\/AppRunning.png\")
<\/figure><\/div>\n\n\nPero antes de crear una peque\u00f1a aplicaci\u00f3n de ejemplo para demostrarlo, veamos qu\u00e9 capacidades te ofrece la clase Barcode de Xojo (ah, importante, tambi\u00e9n puedes utilizar el mismo c\u00f3digo para crear la versi\u00f3n de Windows o de iOS y, pr\u00f3ximamente, de Linux si te interesa).<\/p>\n\n\n\n
Con la clase Barcode de Xojo puedes:<\/p>\n\n\n\n
- \n
- Crear c\u00f3digos QR y de barras con el tama\u00f1o que requieras.<\/li>\n\n\n\n
- Reconocer hasta 12 tipos diferentes de c\u00f3digos a partir de cualquier imagen que pasemos como par\u00e1metro (de hecho los m\u00e1s comunes tanto en el \u00e1mbito comercial e industrial); y si la imagen contiene varios c\u00f3digos\u2026 reconocer\u00e1 todos ellos y te los devolver\u00e1 como resultado.<\/li>\n\n\n\n
- Escanear esa misma cantidad de diferentes tipos de c\u00f3digos usando cualquiera de las c\u00e1maras compatibles que est\u00e9n conectadas a tu Mac, y esto incluye tambi\u00e9n las c\u00e1maras de tu iPhone y\/o iPad mediante Continuity.<\/li>\n<\/ul>\n\n\n\n
Por supuesto, cuando se trata de escanear c\u00f3digos con la c\u00e1mara a trav\u00e9s de la interfaz de usuario que se presenta (no tendr\u00e1s que escribir ni una sola l\u00ednea de c\u00f3digo), podr\u00e1s cambiar en cualquier momento la c\u00e1mara que quieres usar, as\u00ed como voltear la imagen previsualizada para facilitarte la colocaci\u00f3n del objeto cuyo c\u00f3digo deseas escanear en el encuadre de la c\u00e1mara.<\/p>\n\n\n\n
Creando la Interfaz de usuario de nuestra App<\/h2><\/div>\n\n\n\n
Descarga Xojo (es gratis) si aun no lo has hecho desde https:\/\/www.xojo.com\/download<\/a>. Una vez descargado y montada la imagen de disco, s\u00f3lo tendr\u00e1s que arrastrar su contenido a la carpeta Aplicaciones, tal y como har\u00edas con cualquier otra app.<\/p>\n\n\n\n
Ejecuta Xojo y en la ventana de Nuevo Proyecto, selecciona la opci\u00f3n Desktop en la barra lateral izquierda. No hace falta que rellenes ninguno de los campos que se presentan en el \u00e1rea principal al realizar dicha selecci\u00f3n, o bien puedes cambiarlos para asignar el nombre que tendr\u00e1 la aplicaci\u00f3n, nombre de tu empresa, etc.<\/p>\n\n\n
\n![\"\"](\"https:\/\/sp-ao.shortpixel.ai\/client\/to_webp,q_glossy,ret_img,w_1762\/https:\/\/www.aprendexojo.com\/wp-content\/uploads\/2024\/07\/NuevoProyecto.png\")
<\/figure><\/div>\n\n\nCuando confirmes la creaci\u00f3n del nuevo proyecto se abrir\u00e1 el IDE propiamente dicho mostrando en el \u00e1rea principal de la ventana el Editor de Dise\u00f1o. En dicha \u00e1rea podr\u00e1s ver la ventana de tu aplicaci\u00f3n que se a\u00f1ade por omisi\u00f3n con cada nuevo proyecto que se crea y cuyo nombre ser\u00e1 Window1.<\/p>\n\n\n
\n![\"\"](\"https:\/\/sp-ao.shortpixel.ai\/client\/to_webp,q_glossy,ret_img,w_2806\/https:\/\/www.aprendexojo.com\/wp-content\/uploads\/2024\/07\/DefaultWindow.png\")
<\/figure><\/div>\n\n\nHaz clic en el icono Library (Librer\u00eda) situado en la barra lateral derecha del IDE. Al hacerlo podr\u00e1s ver listados todos los controles IU (Interfaz de usuario o UX, si lo prefieres) que se incluyen por omisi\u00f3n.<\/p>\n\n\n\n
Ubica el icono correspondiente a Barcode\u2026 estoy convencido que no te costar\u00e1 mucho encontrarlo\u2026 y arr\u00e1stralo desde la Librer\u00eda sobre el Editor de Dise\u00f1o.<\/p>\n\n\n
\n![\"\"](\"https:\/\/sp-ao.shortpixel.ai\/client\/to_webp,q_glossy,ret_img,w_614\/https:\/\/www.aprendexojo.com\/wp-content\/uploads\/2024\/07\/BarcodeLibrary.png\")
<\/figure><\/div>\n\n\nCuando lo sueltes comprobar\u00e1s que se ha a\u00f1adido el control tanto en la bandeja inferior del Editor de Dise\u00f1o como bajo la jerarqu\u00eda de la ventana Window1 en el Navegador (el Navegador es donde puedes ver todos los elementos que se van a\u00f1adiendo al proyecto, mediante una representaci\u00f3n jer\u00e1rquica que te permite ver qu\u00e9 controles contiene a otros). En este caso, puedes ver que la nueva instancia con el nuevo Barcode1 est\u00e1 asociada a la ventana Window1.<\/p>\n\n\n
\n![\"\"](\"https:\/\/sp-ao.shortpixel.ai\/client\/to_webp,q_glossy,ret_img,w_2806\/https:\/\/www.aprendexojo.com\/wp-content\/uploads\/2024\/07\/BarcodeAdded.png\")
<\/figure><\/div>\n\n\nSi no ves la instancia Barcode1 en el Navegador es probable que debas desplegar la jerarqu\u00eda de Window1. Cuando lo hagas ver\u00e1s Barcode1 listado bajo Window1 > Controls.<\/p>\n\n\n\n
Selecciona Barcode1, y selecciona la opci\u00f3n \u201cAdd to \u2018Barcode1\u2019 > Event Handler\u201d en el men\u00fa contextual. Al hacerlo aparecer\u00e1 la siguiente ventana:<\/p>\n\n\n
\n![\"\"](\"https:\/\/sp-ao.shortpixel.ai\/client\/to_webp,q_glossy,ret_img,w_1212\/https:\/\/www.aprendexojo.com\/wp-content\/uploads\/2024\/07\/AddBarcodeEvents.png\")
<\/figure><\/div>\n\n\nSelecciona los siguientes eventos<\/p>\n\n\n\n
- \n
- ScanCancelled.<\/strong> Este evento ejecutar\u00e1 el c\u00f3digo asociado cuando el usuario pulse el bot\u00f3n \u201cOK\u201d en la ventana de escaneo o bien cuando se cancele por cualquier otro motivo.<\/li>\n\n\n\n
- ScanCompleted.<\/strong> Este evento ejecutar\u00e1 el c\u00f3digo asociado cada vez que la c\u00e1mara detecte un c\u00f3digo en el encuadre. Como puedes, dicho evento recibe como par\u00e1metro el c\u00f3digo detectado como una cadena de texto (tipo de dato String en el lenguaje de programaci\u00f3n Xojo).<\/li>\n\n\n\n
- ScanFailed.<\/strong> Este evento se produce cuando se produce alg\u00fan error, como por ejemplo al iniciar una operaci\u00f3n de escaneo sin que el Mac tenga alguna c\u00e1mara conectada o bien si se intenta ejecutar la aplicaci\u00f3n en un Mac con una versi\u00f3n inferior a macOS 10.15.<\/li>\n<\/ul>\n\n\n\n
Confirma la selecci\u00f3n pulsando el bot\u00f3n OK. Cuando lo hagas ver\u00e1s que se han a\u00f1adido bajo la instancia Barcode1 en el Navegador:<\/p>\n\n\n
\n![\"\"](\"https:\/\/sp-ao.shortpixel.ai\/client\/to_webp,q_glossy,ret_img,w_1172\/https:\/\/www.aprendexojo.com\/wp-content\/uploads\/2024\/07\/BarcodeNavigator.png\")
<\/figure><\/div>\n\n\nAhora bien, para completar nuestra interfaz de usuario necesitamos a\u00f1adir algunos controles m\u00e1s, como por ejemplo:<\/p>\n\n\n\n
- \n
- Un bot\u00f3n para iniciar la operaci\u00f3n de escanear c\u00f3digos mediante cualquiera de las c\u00e1maras disponibles en el Mac.<\/li>\n\n\n\n
- Un campo de texto en el que podamos introducir un texto a partir del cual generar un c\u00f3digo QR como imagen.<\/li>\n\n\n\n
- Un control que nos permita ver la imagen resultante de la operaci\u00f3n anterior.<\/li>\n<\/ul>\n\n\n\n
A\u00f1adir el bot\u00f3n para iniciar el escaneo de c\u00f3digos<\/h2><\/div>\n\n\n\n
Empecemos con el primer bot\u00f3n. Aseg\u00farate de que el elemento Window1 est\u00e9 seleccionado en el Navegador para que se muestre en el Editor de Dise\u00f1o si aun no lo est\u00e1; y vuelve a seleccionar Library (en el caso de que no est\u00e9 visible) para arrastrar en esta ocasi\u00f3n un bot\u00f3n (control Button) y soltarlo sobre la esquina inferior derecha de la ventana en el Editor de Dise\u00f1o. Utiliza las gu\u00edas de alineaci\u00f3n como pista sobre d\u00f3nde deber\u00edas de soltar el bot\u00f3n para mantener los m\u00e1rgenes recomendables.<\/p>\n\n\n\n
Al soltar el bot\u00f3n en el Editor de Dise\u00f1o se habr\u00e1 sustituido la Librer\u00eda por el Panel Inspector correspondiente al Bot\u00f3n. Aqu\u00ed es donde podremos definir algunas de sus propiedades. En este caso ajusta las siguientes con los valores indicados:<\/p>\n\n\n\n
- \n
- Name:<\/strong> ScanButton<\/li>\n\n\n\n
- Locking:<\/strong> Abre los candados superior e izquierdo, y cierra los candados derecho e inferior.<\/li>\n\n\n\n
- Caption:<\/strong> Iniciar Escaneo<\/li>\n<\/ul>\n\n\n\n
En el Editor de Dise\u00f1o comprobar\u00e1s que el texto asignado al bot\u00f3n no cabe. Con el bot\u00f3n seleccionado en el Editor de Dise\u00f1o, arrastra hacia la izquierda el manejador central izquierdo para modificar la anchura del control hasta que el texto se vea con claridad.<\/p>\n\n\n\n
A\u00f1adir un campo de texto<\/h2><\/div>\n\n\n\n
Aqu\u00ed es donde el usuario de nuestra app de ejemplo introducir\u00e1 el texto que desee convertir a c\u00f3digo QR. Desde la librer\u00eda, arrastra el control TextField y su\u00e9ltalo en la esquina superior izquierda de la ventana (utiliza las gu\u00edas de alineaci\u00f3n para preservar los m\u00e1rgenes superior e izquierdo recomendados).<\/p>\n\n\n\n
Modifica los siguientes valores desde el Panel Inspector correspondiente al campo de texto:<\/p>\n\n\n\n
- \n
- Name:<\/strong> QRTextField<\/li>\n<\/ul>\n\n\n\n
A\u00f1adir el bot\u00f3n para generar un c\u00f3digo QR<\/h2><\/div>\n\n\n\n
Vuelve a seleccionar la Librer\u00eda y arrastra en esta ocasi\u00f3n un bot\u00f3n para situarlo en la esquina superior derecha. Nuevamente, utiliza las gu\u00edas para observar el margen que has de dejar a su derecha y para que el bot\u00f3n est\u00e9 alineado respecto al campo de texto a\u00f1adido en el paso anterior.<\/p>\n\n\n\n
En el Panel Inspector correspondiente al nuevo bot\u00f3n, modifica los siguientes valores:<\/p>\n\n\n\n
- \n
- Name:<\/strong> GenerateQRButton<\/li>\n\n\n\n
- Locking:<\/strong> Desbloquea los candados izquierdo e inferior, y bloquea los candados superior y derecho.<\/li>\n\n\n\n
- Caption:<\/strong> Generar QR<\/li>\n<\/ul>\n\n\n\n
Como puedes ver, el texto introducido no cabe en el bot\u00f3n\u2026 as\u00ed que arrastra el manejador izquierdo central hacia la izquierda hasta que el texto se vea con claridad. Idealmente, haz que el ancho coincida con el del primer bot\u00f3n a\u00f1adido. Cuando arrastras el manejador podr\u00e1s utilizar nuevamente la gu\u00eda de alineaci\u00f3n que te indicar\u00e1 dicho aspecto.<\/p>\n\n\n\n
Vuelve a seleccionar el control QRTextField en el Editor de Dise\u00f1o y arrastra su manejador central derecho hacia la derecha hasta que aparezca la Gu\u00eda de alineaci\u00f3n sobre el bot\u00f3n GenerateQRButton. Tambi\u00e9n modificaremos el siguiente campo en el Panel Inspector para QRTextField:<\/p>\n\n\n\n
- \n
- Locking:<\/strong> Cierra los candados izquierdo, superior e izquierdo. Aseg\u00farate de que el candado inferior est\u00e9 abierto.<\/li>\n<\/ul>\n\n\n\n
As\u00ed, cuando ejecutemos la aplicaci\u00f3n y modifiquemos el tama\u00f1o de la ventana, la anchura del campo de texto tambi\u00e9n cambiar\u00e1 en consecuencia manteniendo sus m\u00e1rgenes con respecto al resto de los controles.<\/p>\n\n\n\n
A\u00f1adir un control para previsualizar im\u00e1genes<\/h2><\/div>\n\n\n\n
Se trata del \u00faltimo de los controles de nuestra interfaz de usuario. Desde la Liberar\u00eda, arrastra un control ImageViewer y su\u00e9ltalo justo debajo del campo de texto. Utiliza las gu\u00edas de alineaci\u00f3n para observar los m\u00e1rgenes superior e izquierdo. Luego, utiliza los manejadores de tama\u00f1o para aumentar el ancho y alto del control de modo que quede alineado a la derecha con el bot\u00f3n superior derecho y, hacia abajo, sobre la parte superior y derecha del bot\u00f3n inferior derecho. Cuando termines, la interfaz de usuario deber\u00eda tener un aspecto similar al mostrado en esta imagen:<\/p>\n\n\n
\n![\"\"](\"https:\/\/sp-ao.shortpixel.ai\/client\/to_webp,q_glossy,ret_img,w_2788\/https:\/\/www.aprendexojo.com\/wp-content\/uploads\/2024\/07\/UIFinished.png\")
<\/figure><\/div>\n\n\nCon el control ImageViewer seleccionado en el Editor de Dise\u00f1o, introduce los siguientes valores en el Panel Inspector asociado:<\/p>\n\n\n\n
- \n
- Name:<\/strong> VisorQR<\/li>\n\n\n\n
- Locking:<\/strong> bloquea los candados izquierdo, superior, derecho e inferior.<\/li>\n<\/ul>\n\n\n\n
Ya hemos terminado con nuestra interfaz de usuario. El siguiente paso es a\u00f1adir funcionalidad.<\/p>\n\n\n\n
A\u00f1adir funcionalidad a los controles<\/h2><\/div>\n\n\n\n
Empezaremos con la capacidad de generar c\u00f3digos QR. Selecciona el bot\u00f3n GenerateQRButton en el Editor de Dise\u00f1o y haz doble clic sobre \u00e9l. En la ventana resultante, selecciona el evento Pressed y confirma la selecci\u00f3n. Al hacerlo aparecer\u00e1 el evento seleccionado bajo el Navegador del proyecto mostrando el editor de c\u00f3digo asociado. Aqu\u00ed es donde introduciremos el c\u00f3digo que se ejecutar\u00e1 cuando el usuario de la app haga clic sobre el bot\u00f3n.<\/p>\n\n\n\n
Introduce el siguiente fragmento de c\u00f3digo en el editor de c\u00f3digo asociado con el evento Pressed:<\/p>\n\n\n
If QRTextField.Text <><\/span> \"\" Then\n \u00a0 VisorQR.Image = Barcode1.Image(QRTextField.Text, 600, 600)\nEnd If<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n<\/p>\n\n\n\n
<\/p>\n\n\n\n
B\u00e1sicamente, lo que hace el c\u00f3digo es lo siguiente:<\/p>\n\n\n\n
- \n
- Comprueba que el campo de texto no est\u00e9 vac\u00edo y, si es as\u00ed, ejecuta las instrucciones siguientes comprendidas en el bloque If\u2026End If<\/li>\n\n\n\n
- La siguiente l\u00ednea se encarga de asignar a la propiedad Image del control VisorQR, la imagen generada mediante el m\u00e9todo Image de nuestra instancia Barcode1, pasando como par\u00e1metros el texto que se utilizar\u00e1 para generar el c\u00f3digo QR, as\u00ed como el tama\u00f1o del mismo (ancho y altura). Como puedes ver, el texto utilizado se obtiene a partir de la propiedad Text del control QRTextField.<\/li>\n<\/ul>\n\n\n\n
Selecciona ahora el control ScanButton en el Navegador de proyecto y utiliza el men\u00fa contextual para acceder a la opci\u00f3n de men\u00fa: Add To \u201cScanButton\u201d > Event Handler\u2026<\/p>\n\n\n\n
En la ventana resultante, selecciona nuevamente el evento Pressed y confirma la selecci\u00f3n. Al hacerlo, el evento aparecer\u00e1 seleccionado en el Navegador de proyecto bajo el control ScanButton y mostrando el Editor de C\u00f3digo asociado.<\/p>\n\n\n\n
Introduce la siguiente l\u00ednea de c\u00f3digo, que ser\u00e1 la ejecutada cuando el usuario haga clic sobre el bot\u00f3n ScanButton:<\/p>\n\n\n
Barcode1<\/span>.StartScan<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nY esa simple l\u00ednea de c\u00f3digo es todo lo que necesitas para que se muestre la interfaz de usuario que te permitir\u00e1 escanear cualquiera de los diferentes tipos de c\u00f3digos soportados mediante cualquiera de las c\u00e1maras compatibles que est\u00e9n conectadas a tu Mac, incluido por ejemplo to iPhone a trav\u00e9s de Continuity.<\/p>\n\n\n\n
Ahora bien, cada vez que nuestra instancia Barcode1 reconozca un c\u00f3digo llamar\u00e1 al evento ScanCompleted. Selecciona dicho evento bajo Barcode1 para introducir la siguiente l\u00ednea en el Editor de C\u00f3digo asociado:<\/p>\n\n\n
MessageBox(value)<\/code><\/span><\/pre>\n\n\nEs decir, nos mostrar\u00e1 un mensaje con el c\u00f3digo reconocido por la c\u00e1mara y que se recibe en el evento como una cadena de texto.<\/p>\n\n\n\n
Selecciona el evento ScanCancelled e introduce la siguiente l\u00ednea de c\u00f3digo:<\/p>\n\n\n
MessageBox(\"Operaci\u00f3n de Escaneo Cancelada.\"<\/span>)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nPor \u00faltimo, selecciona el evento ScanFailed e introduce la siguiente l\u00ednea de c\u00f3digo en el Editor de C\u00f3digo asociado:<\/p>\n\n\n
MessageBox(\"Se ha producido un error en la operaci\u00f3n de escaneo.\"<\/span>)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\u00a1Listo, nuestra app de ejemplo est\u00e1 lista para funcionar! Ejec\u00fatala pulsando el bot\u00f3n Run en la barra superior del IDE y prueba a escanear unos cuantos c\u00f3digos as\u00ed como a generar tus propios c\u00f3digos QR a partir del texto introducido en el campo de texto.<\/p>\n\n\n\n
Conclusi\u00f3n<\/h2><\/div>\n\n\n\n
Como has podido comprobar, \u00a1quiz\u00e1 has tenido que emplear m\u00e1s tiempo en dise\u00f1ar la interfaz de usuario propiamente dicha que en a\u00f1adir la funcionalidad tanto para generar como para escanear c\u00f3digos mediante el control Barcode de Xojo! Adem\u00e1s, la app creada no s\u00f3lo funcionar\u00e1 en macOS, sino que tambi\u00e9n lo har\u00e1 tanto en Windows como en Linux.<\/p>\n\n\n\n
En cualquier caso, te garantizo que la cantidad de tiempo invertida habr\u00e1 sido infinitamente menor que si hubieses abordado el mismo tipo de proyecto utilizando cualquier otro entorno de desarrollo.<\/p>\n\n\n\n
\u00bfLo mejor de todo? Esta es s\u00f3lo una peque\u00f1a muestra de lo que puedes crear a partir de este embri\u00f3n de proyecto, estoy convencido de que tu imaginaci\u00f3n se encargar\u00e1 del resto a la hora de a\u00f1adir nuevas capacidades. Para ello puedes encontrar todo tipo de ayuda en la documentaci\u00f3n disponible desde el propio IDE o bien a trav\u00e9s de https:\/\/documentation.xojo.com<\/a><\/p>\n\n\n\n
\u00a1Feliz programaci\u00f3n con Xojo!<\/p>\n","protected":false},"excerpt":{"rendered":"
- Locking:<\/strong> bloquea los candados izquierdo, superior, derecho e inferior.<\/li>\n<\/ul>\n\n\n\n
- Name:<\/strong> VisorQR<\/li>\n\n\n\n
- Locking:<\/strong> Desbloquea los candados izquierdo e inferior, y bloquea los candados superior y derecho.<\/li>\n\n\n\n
- Name:<\/strong> GenerateQRButton<\/li>\n\n\n\n
- Locking:<\/strong> Abre los candados superior e izquierdo, y cierra los candados derecho e inferior.<\/li>\n\n\n\n
- Name:<\/strong> ScanButton<\/li>\n\n\n\n
- ScanCompleted.<\/strong> Este evento ejecutar\u00e1 el c\u00f3digo asociado cada vez que la c\u00e1mara detecte un c\u00f3digo en el encuadre. Como puedes, dicho evento recibe como par\u00e1metro el c\u00f3digo detectado como una cadena de texto (tipo de dato String en el lenguaje de programaci\u00f3n Xojo).<\/li>\n\n\n\n
- ScanCancelled.<\/strong> Este evento ejecutar\u00e1 el c\u00f3digo asociado cuando el usuario pulse el bot\u00f3n \u201cOK\u201d en la ventana de escaneo o bien cuando se cancele por cualquier otro motivo.<\/li>\n\n\n\n