Funcionamiento interno del cargador de themes.

Explicación Inicial

Con OpenCms 9 vino una nueva característica fundamental para la adaptación de webs a los distintos dispositivos, y es la opción de ver la web en distintos dispositivos. De forma que un usuario editor podía ver como queda una página en Tablets y Móviles sin tener que acceder desde uno de estos dispositivos. Igualmente podía hacer que un elemento concreto de la página no se mostrará en alguno de los dispositivos y así poder cambiar la apariencia de una página en cada caso.

Pues bien, para que esta funcionalidad estuviese operativa era necesario utilizar un Provieder en lugar de un template directamente. Este provieder llamaría a un fichero .json con los distintos dispositivos permitidos y sus resoluciones y el template a usar en cada caso.

Para evitar tener que implementar un Provieder (clase java) para cada theme, planteamos la posibilidad de tener un cargador común y que mediante un fichero de configuración se pudiera cambiar de template fácilmente.

Componentes necesarios

A continuación detallamos los componentes necesarios para el funcionamiento del sistema y su ubicación:

  • com.saga.sagasuite.core.templateprovider.CmsSagaTemplateContextProvider: Clase que tendremos en el SagaSuiteCore.jar. Llamará al recurso .json directamente. La ruta estará puesta a 'pelo' porque no tenemos otra forma ya que el cmsObject que llega no permite mucho más, no tiene los datos del contexto actual.
  • templatecontexts.json: En la carpeta: /system/modules/com.saga.sagasuite.core/templates/. Tiene la configuración de los distintos dispositivos y sus resoluciones. A cada tipo de dispositivo le asignará un template por defecto, que en nuestro caso será: load-themeconfig.jsp
  • load-themeconfig.jsp: En la carpeta: /system/modules/com.saga.sagasuite.core/templates/, es una jsp que se encarga de leer el fichero theme-config del sites actual y cargar el templates correspondiente.
  • Template del theme. Este ya dependerá del theme utilizado y del template que queramos usar.
  • .themeconfig: Recurso de tipo sgthemeconfig situado en el raiz del sites. Contendrá la configuración del theme utilizado para dicho sites. Por ahora solo se permite un theme por sites. En versiones futuras pensaremos en otras opcioens. Este recurso solo lo pueden ver los administradores, los usuarios editores tienen el permiso de visibilidad quitado.

Procedimiento de carga

Veamos todo el proceso como funciona:

  1. Configuramos en la propiedad template del sites el siguiente valor: provider=com.saga.sagasuite.core.templateprovider.CmsSagaTemplateContextProvider
  2. Cuando carguemos una página, se ejecutará dicha clase Provider y ésta cargará la configuración recurso templatecontexts.json. En base al dispositivo que haya hecho la petición, leerá el template asignado. En nuestro caso en todos es el mismo: load-themeconfig.jsp. El provider ejecutará dicha jsp como template de la página.
  3. La jsp load-themeconfig.jsp buscará en el sites actual el fichero: /.themeconfig del tipo sgthemeconfig. Este fichero es obligatorio tenerlo situado en el raiz del sites, en caso contrario dará un error.
  4. Una vez cargada la configuración del recurso xml, tendremos la ruta del módulo theme utilizado. En este momento se buscará la propiedad: sagasuite.template, donde debe estar el nombre del templates que vamos a utilizar para cargar la página. En el caso que esta propiedad no esté configurada cargará una por defecto llamada default.jsp. La jsp cargará automáticamente una ruta tal que: /system/modules/$THEME_MODULE$/templates/$SAGASUITE.TEMPLATES_PROPERTIES$
  5. Se hará un include del templates calculado, y se incluirá en el request la información del theme por si fuera necesario en un futuro. El parámetro donde lo guardamos es: theme
  6. El templates propio del theme deberá ser capaz de leer una serie de propiedades más:
    1. sagasuite.skin: Nombre de la carpeta del skin propio a utilizar.
    2. sagasuite.js: Ruta de un fichero js que podemos incluir en cualquier momento
    3. sagasuite.css: Ruta de una CSS propia que queramos utilizar en una página concreta

El templates debe cargar también los headincludes tanto de CSS como de JS para que los formatters propio de SAGA SUITE funcionen correctamente.