Detectar tamaño de pantalla en Liferay 6.0 y Liferay 6.1 con Alloy

por

En la página actual de Liferay utilizan un script que permite modificar el aspecto de la página según el tamaño de la ventana amoldándose en caliente si la redimensionamos. Para hacer esto utilizan un componente de Alloy llamada aui-viewport. Este componente añade una serie de clases a la etiqueta del portal para que podamos identificar en que tipo de pantalla estamos.

Para añadir este script en Liferay 6.1 es tan simple como añadir lo siguiente en cualquier punto de la página:


<script>
   AUI().use('aui-viewport');
</script>

Sin embargo, en Liferay 6.0, esto no funciona directamente. Para poder hacer que funcione correctamente debemos descargarnos las siguiente librerías JS: aui-viewport.js y aui-debounce.js.

Una vez descargadas debemos incluirlas en nuestro theme a través del portal_normal.vm

Para hacer que todo funcione correctamente hace falta modificar la librería aui-vierport.js de la siguiente forma:

Reemplazamos:

NAME = 'view',

CSS_PREFIX = getClassName(NAME) + A.config.classNameDelimiter,

Por:

NAME = 'aui-view',

CSS_PREFIX = NAME + A.config.classNameDelimiter,

Luego modificamos las dependencias al final del fichero con lo siguiente:

Reemplazamos:

requires:[ ' aui-base ' ]

Por:

requires: ['aui-debounce ']

Gracias a este componente ALLOY Liferay ha hecho una versión móvil de su página, aunque sólo en apariencia ya que no es una versión reducida en contenidos.

COMENTARIOS

DEJA TU COMENTARIO