[2024r1] Los Popover llegan a Desktop, Web e iOS

A partir de Xojo 2024r1 contarás con un nuevo tipo de ventana de tipo transitoria para mejorar la interfaz de usuario de tus aplicaciones: Los Popover.

Digamos que son similares en su funcionamiento a las ventanas modales, con la particularidad de que están asociados a un control padre, sobre el cuál “apuntan”, estableciendo así una relación directa sobre el tipo de información que se espera que se edite en el Popover… y que tiene relación con el control padre que la abrió.

De este modo, una ventana popover mostrará el contenido que desees, tal y como ocurre ahora mismo cuando diseñas la interfaz de usuario de una ventana o bien de un control Container que será incluido como parte de otro diseño más complejo o bien mostrado en tiempo de ejecución.

¿Y a qué nos referimos con el caracter “transitorio” de las ventanas Popover? Pues bien, y aquí viene una de las primeras diferencias sobre, por ejemplo, las ventanas Modales. Cuando un Popover está visible y el usuario hace clic o “tap” sobre cualquier otro elemento de la interfaz gráfica no contenido en el propio Popover… este se cerrará. Es decir, no tienes por qué incluir el típico botón de “Cerrar ventana” en un Popover si no lo deseas, puesto que esta se encargará de cerrarse cuando el usuario haga clic fuera de ella (digamos que cuando el Popover pierde el foco).

Contenidos de un Popover

Pero, ¿dónde defines el contenido a mostrar en una ventana Popover? Bien sencillo, mientras que tus aplicaciones Web podrás hacerlo sobre cualquier Container control que añadas a tu proyecto, en el caso de las aplicaciones Desktop e iOS podrás hacerlo tanto sobre los diseños de cualquier Container Control como de cualquier ventana (Window o Screen) que hayas añadido al proyecto.

Por ejemplo, aquí puedes ver que el contenido mostrado como popover en la captura anterior es en realidad el de una ventana (Window2) añadida al proyecto:

Esto te proporciona la flexibilidad adicional de que la lógica de tu app podrá decidir cuándo mostrar una ventana o una instancia de Container tal y como venías haciendo hasta ahora… o bien mostrarlo como Popover.

Presentar un Popover

La forma de presentar un Popover es bien simple, ya se trate de una instancia creada a partir de un Container o de una ventana el método a emplear es el mismo:

DesktopContainer.ShowPopover(parentControl As DesktopUIControl, facing As DesktopWindow.DisplaySides = DesktopWindow.DisplaySides.Bottom, detachable As Boolean = True)

Así, la explicación de los parámetros esperados es la siguiente:

ParentControl: el control que actuará como padre, o sobre el cual apuntará el Popover.
Facing: Esta es la dirección en la que apuntará el Popover sobre el control padre; por omisión aparecerá bajo el control padre, pero pueden utilizarse cualquiera de los valores indicados en el enumerador DesktopWindow.DisplaySides (o el equivalente en iOS).
Detachable: Este valor sólo se aplica a los Popover de macOS, puesto que dicho sistema operativo tienen la capacidad de que el usuario pueda “separar” el Popover sobre el control padre siempre y cuando este valor esté definido como True. Para iniciar la acción de separar sólo hay que arrastrar el Popover con el cursor del ratón.

Supongamos que tenemos una ventana Window2 y un botón MyButton, entonces en el evento Pressed de MyButton podemos incluir el siguiente fragmento de código para mostrar Window2 como un Popover:

Var w As New Window2
w.ShowPopover(me)

¡Y eso es todo!

Diferencias según plataforma

En el apartado anterior ya apuntábamos la primera: macOS es el único sistema operativo que actúa sobre el valor indicado en el parámetro Detachable. Pero hay algunas otras consideraciones a tener en cuenta para que no te pillen desprevenido:

Más allá de los límites. Si bien en Windows y macOS los Popover pueden sobrepasar los límites de la ventana sobre la que se encuentra el control padre, la posición del popover en Linux está restringido a los límites de la ventana que contiene el control padre; al igual que ocurre, por motivos lógicos, en iOS y también en el caso de las páginas Web.
iPhone e iPad. Cuando se muestra un Popover en un iPhone, este tendrá el mismo aspecto de una ventana modal; mientras que si la misma aplicación se ejecuta sobre un iPad, el aspecto será el típico esperado de los Popover: la ventana apuntando al control padre en la dirección indicada.
Sólo Container. En Web los contenidos de un Popover son los definidos en un control Container, mientras que en el resto de las plataformas puedes utilizar tanto controles Container como Ventanas / Pantallas.

¿Por qué el Popover no “apunta” en la dirección indicada?

Por omisión intentará hacerlo según el valor que se haya establecido en el parámetro “facing”, pero si no encuentra espacio suficiente sobre los márgenes de la pantalla, entonces pasará a mostrarse sobre el siguiente costado del control padre en el que se encuentre espacio disponible para mostrar el Popover en todo su ancho y altura; esto es así en macOS, Linux, Web e iOS.

¿Puedo reutilizar un Popover?

No, no puedes. Tanto si utilizas un control Container como una ventana como fuente del diseño de UI a mostrar por el Popover, no pierdas de vista que el Popover es un tipo de ventana más; y por tanto se comporta como tal. Es decir, una vez que se cierra ya sea porque ha perdido el foco o porque la has cerrado de forma explícita mediante código invocando el método Close, todos los controles mostrados y resto de estructuras internas quedarán cerrados / invalidados, de modo que aunque la instancia de un Popover no sea Nil (porque por ejemplo mantengas una referencia a la instancia de ventana o bien de container utilizados como fuente de UI), no podrás invocar sobre dicha instancia nuevamente el método ShowPopover sino que tendrás que crear una nueva instancia del Container/Ventana utilizado como fuente de la UI a mostrar por el Popover.

¿Cómo puedo comunicarme con los elementos de UI contenidos en el Popover?

Bien, tal y como harías con cualquier otro tipo de ventana que vinieses utilizando hasta ahora en tus proyectos Xojo.

Conclusión

Sin duda, los Popover suponen una nueva forma de mejorar el diseño en las interfaces de usuario de tus aplicaciones, proporcionando así una relación más directa entre los elementos de interfaz de usuario mostrados en el Popover y el control “padre” encargado de mostrarlo. Además, dado que utilizarás como fuente de la UI a mostrar por el Popover cualquier ventana o container que desees… contarás con mayor flexibilidad sobre cuándo deseas mostrarlos en un Popover o bien mostrarlos utilizando cualquier otro de los tipos de ventana disponibles o, en el caso de los Container, embebiéndolos como parte de otros elementos de la interfaz de usuario en tiempo de ejecución.

¡Estamos deseando ver cómo usas los Popover en el diseño de interfaz de usuario de tus apps!