0

Trabajo con capas, los overlays

16Sep
en Documentación, XUL

Los Overlays, cuya traducción al castellano podría ser superposición o capas de superposición, son ficheros XUL usados para describir contenido extra para la interfaz de usuario. Son un mecanismo para añadir componentes adicionales a ésta, redefiniendo pequeñas porciones de código de los ficheros XUL de la interfaz original sin necesidad de reimplementarlo completamente. En otras palabras se trata de inyectar elementos UI sobre una interfaz, esto es bueno ya que podemos dividir una aplicación muy grande en pequeños módulos.

Los overlays son un mecanismo muy potente para la personalización y extensión de aplicaciones ya existentes, son ficheros que describen contenido adicional en la UI(interfaz de usuario). Por un lado funcionan de forma similar a como lo hacen las directivas include de otros lenguajes, es decir una aplicación puede especificar que un overlay pase a formar parte de su definición, con solo inyectar su código. Por el otro pueden ser especificados de forma externa, permitiendo al diseñador sobreponerlas a una aplicación sin necesidad de modificar el código fuente original. En términos prácticos lo anterior permite a los desarrolladores mantener un único flujo de código de una aplicación dada y luego personalizarlo o añadirle características especiales que satisfagan a distintos clientes sin alterar el código original, lo que a fin de cuentas supone un coste menor de mantenimiento, este concepto modular de desarrollar aplicaciones es muy potente.

Para los desarrolladores que tienen la intención de añadir nuevas características a sus aplicaciones y quieren mantenerlas de forma propietaria, los overlays aportan un beneficio extra. La licencia pública de Netscape (NPL) y la licencia pública de Mozilla (MPL) exigen a los desarrolladores que modifiquen el código original suministrado por Mozilla, que lo liberen tras modificarlo, como alternativa, usando overlays se pueden añadir nuevas características a los productos de Mozilla sin contaminar el código fuente original(que es abierto) con modificaciones propietarias, ¿no es esto genial?

¿Como funcionan?

Los overlays proveen un mecanismo extra para:

  • Adicionar componentes UI.
  • Permite adicionar elementos UI a un archivo XUL modificando solo secciones específicas de la interfaz.
  • Permite la reutilización de elementos UI ya implementados.

Los ficheros XUL y los overlays trabajan juntos para describir un documento maestro. Los overlays definen elementos que no están en las versiones básicas de la interfaz de usuario. Cuando los programas definidas como extensiones son aplicadas a las interfaces de usuario, estos elementos deben ser definidos en los ficheros overlay. La instalación de una extensión, por ejemplo, podría añadir nuevos menus o iconos a la interfaz maestra o principal.

Ejemplo

Iimaginemos que tenemos la siguiente extructura:

main.xul como el fichero de la interfaz principal de nuestra aplicación y menuOverlay.xul la capa que se le aplicará a un elemento de nuestra UI. En el archivo main.xul tenemos:

<br />
<?xul-overlay href="chrome://appEjemplo/content/menuOverlay.xul"?>
...
<menulist id="opciones">
    <menupopup id="menu_opciones">
        <menuitem id="abrir" label="Abrir"/>
        <menuitem label="Guardar"/>
        <menuitem label="Guardar como..."/>
        <menuseparator/>
        <menuitem label="Salir"/>
    </menupopup>
</menulist>
...

Los tres puntos significan el resto del código

y en el archivo menuOverlay.xul lo siguiente:

<?xml version="1.0">
<!DOCTYPE overlay PUBLIC "-//MOZILLA//DTD XUL V1.0//EN" "https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<overlay id="overlay" xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menulist id="opciones">
    <menupopup id="menu_opciones">
        <menuitem label="Exportar..."/>
    </menupopup>
</menulist>
</overla>

Al ejecutarse la linea de código: <?xul-overlay href=»chrome://appInfo/content/menuOverlay.xul»?> en el archivo main.xul la capa se mezclará con la interfaz para aquellos elementos donde el atributo id coincidan, en este ejemplo se especifica que se insertará en el menu con atributo  id=»menu_opciones» y le agregará el elemento <menuitem label=»Exportar…»/> a éste, después de esto el ejemplo anterior quedaría así:

En los archivos overlays use la palabra overlay como parte del nombre del archivo para especificar que éste es una capa.

Cargando overlays

Anteriormente vimos la línea de código <?xul-overlay href=»chrome://appInfo/content/menuOverlay.xul»?> en el supuesto archivo main.xul, pero en realidad esta «directiva»(por así decirlo) es la encargada de cargar un overlay directamente en nuestra UI. Otra forma de hacerlo es mediante los archivos chrome.manifest de nuestras extensiones o aplicaciones XUL con la sigiente línea de codigo:

overlay chrome://browser/content/browser.xul chrome://appEjemplo/content/menuOverlay.xul

Modificando atributos con los overlays

Además de cambiar la interfaz de nuestra aplicación también es posible hacerlo con los atributos de un elemento en particular. Reutilizando el ejemplo anterior:

Modificando nuestro mainOverlay.xul:

<?xml version="1.0"?>
<!DOCTYPE overlay PUBLIC "-//MOZILLA//DTD XUL V1.0//EN" "https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<overlay id="overlay" xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menulist id="opciones">
    <menupopup id="menu_opciones">
        <menuitem id="abrir" label="Open"/>
    </menupopup>
</menulist>
</overlay>

y el resultado de la interfaz de main.xul sería la siguiente:

Resumen

Como hemos podido ver, el uso de los overlays(o capas) fomenta la reutilización de elementos UI ya implementados, minimiza los costes por mantenimiento; ya no se trata de ir a a la linea No 10258, ahora solo es ir al archivo botonesOverlay.xul linea No 12, hacer las modificaciones y listo!!!; permite una mejor organización de nuestra interfaz, pero OJO, de cargar overlays muy complejos y/o en gran cantidad podría demorar la carga de la UI de nuestras aplicaciones.

Si es posible incluso podríamos implementar frameworks basados en elementos UI para ser compartidos con otros desarrolladores, estos frameworks obviamente reducirían el tiempo de desarrollo de nuestras aplicaciones gracias a la reutilización.

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.