Fancybox User Control para GeneXus X Ev2

El User Control Fancybox nació en la versión GeneXus X con la motivación de brindar al sitio de GeneXus Marketplace, que en ese momento estaba aún en desarrollo, una ventana emergente con una experiencia de usuario acorde al diseño de este nuevo sitio.

La finalidad de este User Control es la de brindar un diseño más elegante para las aplicaciones del estilo página web o sitios de tipo tienda online.

En GeneXus X Ev2 estas características fueron incorporadas al propio GeneXus pudiéndose obtener el mismo resultado sin necesidad de utilizar un control externo.

Popup utilizando el tema GeneXusXEv2

Como habrán visto, si en GeneXus X Ev2 utilizan el tema predeterminado (GeneXusXEv2), el popup es más agradable a los de antes (o al que tenemos en Ev2 si utilizamos un Theme migrado de versiones anteriores).
Si estamos utilizando un Theme migrado y queremos incorporar este diseño, necesitamos crear y copiar del Theme GeneXusXEv2 los valores de las propiedades “popup<XXX>”.

Parte del proceso de migración de GeneXus Markeplace a GeneXus X Ev2 fue migrar el diseño del User Control “Fancybox” a GeneXus nativo, esto se logró quitando el User Control Fancybox de la masterpage y modificando el Theme que usamos en la KB.
Allí se modificaron las propiedades:

• En PopupContext:  BackgroundColor = White
• En Popupheader: Fontecolor = transparent
• En PopupHeader.Popuptitle: Custom CSS Properties = color="gray"

Para dejar el grisado de pantalla más oscuro (como el Fanybox) creamos el tag DIV dentro de gx_ajax_notification con el valor:
background-color: #777777 !important; opacity: 0.7 !important;

Por último cambiamos el icono de “Cerrar ventana” por el del FancyBox, para ello modificamos la imagen (objeto Image de la KB) de nombre “ClosePrompt” e indicamos que esa imagen sea “multi-tema” y cambiamos la imagen asociada al tema en cuestión.
Esta imagen es utilizada en el tema GeneXus en la propiedad PopupHeaderButton.

Para ver cómo quedó el popup con los cambios pueden entrar a GeneXus Marketplace y allí intentar descargar un producto sin estar logueados (les pedirá login mediante un popup).

Este tipo de práctica seguramente va a ser habitual al migrarnos a nuevas versiones de GeneXus, vamos a utilizar un User control para obtener cierta funcionalidad que luego será incluida en GeneXus y allí lo mejor será dejar de usar el User Control y pasarlo todo a GeneXus nativo.

Hablando de diseño, si están necesitando desarrollar aplicaciones para Smart Devices o Web con  excelente diseño y una gran experiencia de usuario les recomiendo la empresa especializada en diseño de interfaces gráficas Simplifica Design.

Saludos!