Cuando diseñas la UI de tu aplicación para que sea multiplataforma, debes de tener presentes las diferencias existentes en las interfaces de usuario sobre cada una de las diferentes plataformas.

Una aplicación que está bien diseñada para Windows puede que no se vea tal y como debería en Mac o Linux; y viceversa.

Menus

ApplicationMenuItem

Las aplicaciones de escritorio presentan por lo general un menú Acerca de que muestra una ventana Acerca de… con el nombre de la aplicación y la información concerniente al copyright.

En Windows y Linux dicho menú Acerca de aparece en el menú Ayuda. Puedes añadir un menú Acerca de haciendo clic en el botón Add Menu del Menu Editor. Dicha acción añadirá un menú de primer nivel. Nombra dicho menú como “HelpMenu” y arrástralo de modo que sea el ubicado más hacia la derecha. Ahora, puedes añadir el elemento de menú Acerca de al menú de ayuda.

En Mac, el menú Acerca de debe figurar en el menú Aplicación en vez de bajo el menú Ayuda. Para hacer que se mueva de forma automática al menú Application, añade tu menú Acerca de en el menú Ayuda de modo que aparezca tal y como debe en Windows y Linux. A continuación cambia su propiedad Super en el Inspector de “MenuItem” a “ApplicationMenuItem”. Cualquier menú que utilice esta clase se moverá automáticamente al menú Aplicación cuando se ejecute la aplicación en Mac.

PrefsMenuItem

De forma similar, el menú Preferencias está ubicado en el menú Aplicación en Mac. En Windows y Linux, el menú Preferencias se ubica generalmente en el menú Edit y se llama Opciones.

En Mac existe en todo momento un menú Preferencias bajo el menú Aplicación, si bien está desactivado por omisión. Para asociar tu menú de Preferencias a él, has de definir su propiedad Super a “PrefsMenuItem”. Sólo uno de los menús de tu proyecto debería de ser PreferencesMenuItem.

Para cambiar el nombre del menú de Preferencias en Mac a Windows/Linux, utiliza una constante. Por defecto hay varias constantes en la clase App que controla el texto para Edit ↠ Clear/Delete y File ↠ Quit/Exit. Puedes añadir otra para gestionar las preferencias.

Para ello, añade una nueva constante y llámala kPreferences, ajusta su valor por defecto a “&Options…”. En el Editor de Constantes, haz clic en “+” para añadir una nueva entrada y selecciona “OS X” como la Plataforma. Para el valor, introduce “Preferencias…”

Esto crea una constante que utiliza el valor “&Opciones…” en Windows y Linux, y el valor “Preferencias…” en Mac.

Ahora que has creado la constante puedes usarla como el texto para el menú. Añade un nuevo MenuItem en el menú Edit y define su propiedad Text a #App.kPreferences. Dicha acción le indicará que utilice el valor de la constante. También debes de ajustar su Super a PrefsMenuItem.

Puedes utilizar los botones de previsualización dispuestos en la barra de herramientas del Editor de Menús de Xojo para ver el cambio del texto en Mac, Windows y Linux. Además, cuando ejecutas la aplicación en Mac, el menú de Preferencias aparece bajo el menú Aplicación en vez de hacerlo bajo el menú Edición.

Botones de Diálogo

Quizá no lo hayas advertido nunca, pero cuando utilizas un cuadro de diálogo en Windows y Linux los botones aparecen en un orden distinto al que lo hacen en Mac. En Mac, los botones OK/Cancelar por omisión se muestran con Cancelar seguido por OK. En Windows y Linux aparcen justo en el orden inverso: OK seguido de Cancelar.

Para que tu aplicación se vea correctamente en cada plataforma, los botones deberían de aparecer en las posiciones correctas. El modo más sencillo de lograrlo es usando un ContainerControl que intercambie automáticamente los botones en tiempo de ejecución. El proyecto de ejemplo OKCancelContainer disponible en la carpeta Desktop/Custom Controls te muestra como puedes hacerlo.

• Examples/Desktop/Custom Controls/OKCancelContainer

Fuentes

Generalmente utilizarás la fuente Systemcomo la Fuente para tus controles. Esto indica a tu aplicación que utilice como fuente de los controles la fuente del sistema definida por omisión en cada uno de los sistema operativos. Como es previsible, la fuente del sistema por omisión varía en cada una de las plataformas e incluso entre diferentes versiones y actualizaciones por cada plataforma.

Esto significa que algunos controles pueden terminar apareciendo demasiado pequeños en algunas plataformas como para que puedan mostrar el texto proporcionado. También es importante que ejecutes tu proyecto en cada plataforma y revises el diseño para garantizar que todo sea legible y encaje tal y como esperas.

Es probable que encuentres la necesidad de aumentar el tamaño de algunos controles, de modo que se muestren correctamente en todas las plataformas. Puedes hacerlo en el Editor de Diseño aumentando el tamaño del control; o bien puedes hacerlo en tiempo de ejecución aumentando el tamaño del control en su evento Open en función de cuál sea la plataforma sobre la cual se esté utilizando (Compilación Condicional). Por ejemplo, este fragmento de código en el manejador de evento Open de un PushButton aumenta su tamaño cuando se ejecuta sobre Linux:

#If TargetLinux Then
Me.Height = Me.Height + 20
#Endif

Reducir el parpadeo en Windows (Flickering)

Linux y macOS utilizan una técnica denominada doble buffer para realizar todo el dibujado de la ventana. Esto significa que las actualizaciones de una ventana se realizan fuera de pantalla y se muestran sobre la pantalla real cuando ya están completas y de una sola vez. El resultado es una ventana con actualizaciones gráficas estables y libres del efecto de parpadeo.

Sin embargo Windows no utiliza esta técnica. Envía actualizaciones a la ventana de forma inmediata, lo que a menudo resulta en la presencia de un molesto parpadeo cuando se ejecuta una aplicación en Windows y es un problema común para cualquiera de las apps que utilicen los controles nativos Win32 (WinAPI). No obstante, existen algunas estrategias que puedes utilizar para mitigar este problema.

No superponer los Controles

Lo más sencillo que puedes hacer para prevenir el parpadeo consiste en no superponer ningún control. Los controles superpuestos resultan en más peticiones para redibujar los controles, lo cual deriba en el parpadeo.

Usar un Canvas

Para obtener mejores resultados, muestra cualquier gráfico usando el evento Paint de un control Canvas. Evita usar la propiedad Backdrop, el evento Paint de la Venanta, la propiedad Canvas.Backdrop o el control ImageWell. Si bien estas técnicas funcionan correctamente en algunas situaciones, a veces también producen parpadeo en diseños de ventanas más complejos.

En el Canvas, lo primero que debes hacer es activar la propiedad DoubleBuffer y desactivar la propiedad EraseBackground. La propiedad DoubleBuffer permite que el Canvas realice sus actualizaciones fuera de pantalla para reducir el parpadeo. La propiedad EraseBackground previene el borrado del Canvas (mostrado como un rectángulo blanco) antes de ser redibujado, lo cual es otra fuente común de parpadeo.

Con estos ajustes puedes hacer todo tu dibujado en el evento Paint usando el objeto gráfico proporcionado como parámetro: g. No realices ningún dibujado directamente sobre la propiedad Canvas.Graphics, dado que probablemente aumentaría el parpadeo y reduciría la velocidad en las actualizaciones gráficas.

Puedes tener varios métodos que actualicen los gráficos, pero estos han de llamarse desde el evento Paint suministrando el objeto gráfico como parámetro a dichos métodos. Otra técnica consiste en tener una propiead Picture que utilices para dibujar tus gráficos y plasmar posteriormente el contenido de dicho Picture en el manejador del evento Paint del Canvas para mostrarlo.

Cuando quieras que el Canvas se actualice a sí mismo, redibujar cualquiera de los cambios en tus gráficos, has de invocar el método Invalidate:

Canvas1.Invalidate(False)

También puedes invocar el método Refresh:

Canvas1.Refresh(False)

La diferencia es que Invalidate indica al Canvas que se actualice así mismo cuando obtenga una petición de redibujado por parte del sistema operativo. El método Refresh indica al Canvas que se actualice a sí mismo de forma inmediata. Por lo general es preferible utilizar Invalidate dado que resulta en menos peticiones de dibujado y por tanto un mayor rendimiento y reducción del parpadeo.

Para reducir el parpadeo, ambos comandos pasan False como parámetro para EraseBackground (a True por omisión), de modo que el Canvas no se borra antes de que se redibujen sus contenidos.

Mediante el uso de estas técnicas puedes crear gráficos estables y libres de parpadeos en tus aplicaciones Windows.

** Esta entrada ha sido escrita utilizando Markdown en Snippery, exportándola posteriormente como HTML para su publicación.