Tutorial - Crear Skin para Open Meetings

Versiones:

Equipo “Cliente”:

• Windows XP Service Pack 3
• TortoiseSVN 1.6.16.21511
• Java 1.6
• Apache Ant 1.8.2
  

Equipo “Servidor”

• Debian 5
• Open Meetings 1.6.2_r3675

EQUIPO CON WINDOWS (CLIENTE):

Paso 1

Nos tenemos que descargar la aplicación TortoiseSVN. Para ello vamos a la pagina oficial: http://tortoisesvn.net/ y en la sección descargas, bajamos la versión actual, en mi caso la 1.6.16.215.

Una vez descargado lo instalamos. Con esta herramienta vamos a descargar en una copia de Open Meetings en nuestro equipo, para hacerlo, creamos una carpeta en C:/ y la llamamos singlewebapp-3675 (El numero se corresponde con la versión de OM que tenemos instalada en el servidor).

Una vez creada la carpeta pulsamos sobre ella con el botón derecho del ratón y pulsamos en la opción SVN Checkout. Se nos abrirá una ventana como esta:

La URL del repositorio, si no viene por defecto, la colocamos nosotros: http://openmeetings.googlecode.com/svn/trunk/singlewebapp

El cuadro de texto “Checkout directory” tiene que contener el path de la carpeta que hemos creado anteriormente. Lo suele colocar por defecto el programa.

En el cuadro “Revision”, marcamos la opción “Revision”, y en el cuadro de al lado, colocamos el numero de versión del Open Meetings al que le vamos a colocar el nuevo Skin. Es importante poner bien el numero para evitar incompatibilidades. En mi caso, estoy usando la versión r3675.

Por ultimo, pulsamos en OK. Empezará a descargar Open Meetings desde el repositorio, son como unos 400 megas, así que paciencia.

Paso 2

Ahora, vamos a instalar Apache Ant, para ello, vamos a la pagina oficial: http://ant.apache.org/ . Vamos a la sección Descargas y descargamos la ultima versión, en mi caso la 1.8.2. Nos descargará un archivo .zip

Creamos una carpeta en llamada “ant” en C:/.. Descomprimimos el contenido del archivo .zip en C:/ant.

Ahora, vamos a Panel de Control / Sistema / Opciones Avanzadas / Variables de Entorno / se nos abrirá una ventana, y en la parte de Variables de usuario para nuestro usuario, añadimos una nueva:

Variable: ANT_HOME

Valor: C:\ant

Creamos otra variable:

Variable: PATH

Valor: PATH=%PATH%;%ANT_HOME%\bin

Ahora tenemos que decirle el path donde se encuentra el archivo tools.jar. Este archivo esta en la carpeta de Java (Suponiendo que tenemos JAVA instalado). En mi caso la ruta es la siguiente: “C:\Archivos de programa\Java\jdk1.6.0_25\lib”.

Abrimos un CMD y escribimos: set JAVA_HOME=C:\Archivos de programa\Java\jdk1.6.0_25\

Ya tenemos listo Apache Ant. Para probar si funciona en cmd escribimos ant y pulsamos enter, nos saldrá algo como esto:

Paso 3

Ahora vamos a editar el fichero: C:\singlewebapp-3675\WebContent\openmeetings\main.lzx. Lo hacemos con el bloc de notas. Tenemos que ir a la linea 16 y añadir estas dos lineas:

Quedará de esta forma:

Ahora, en este mismo directorio (C:\singlewebapp-3675\WebContent\openmeetings\) creamos dos archivos:mediaimg1.lzx y mediaimg2.lzx. Y les añadimos con el bloc de notas lo siguiente:

Archivo: mediaimg1.lzx

Contenido:

Archivo: mediaimg2.lzx

Contenido:

En los iconos de los respectivos archivos puede que se añada un circulo azul con una interrogación, no preocuparse, es normal.

Paso 4

Ahora es el momento de crear la cabecera y el cuerpo, como estas necesitan un tamaño determinado, es conveniente usar una herramienta como Gimp.

Cabecera:

La cabecera tiene que tener una altura de 110 pixeles. La anchura podemos poner la que queramos, por ejemplo podéis poner la de vuestro monitor, en mi caso 1280 pixeles. Cuando la tengáis es importante llamarla cabecera.jpg . Podéis guardarla en otros formatos, pero tendréis que modificar el archivos mediaimg1.lzx con la extensión correcta del archivo.

Cuerpo:

Las dimensiones del cuerpo la podéis poner según vuestra resolución, en mi caso, he puesto la altura 768 pixeles y el ancho igual que la cabecera: 1280 pixeles. Cuando la tengáis es importante llamarla cuerpo.jpg . Podéis guardarla en otros formatos, pero tendréis que modificar el archivos mediaimg2.lzx con la extensión correcta del archivo.

Una vez tengamos las dos imágenes, las tenemos que meter en la siguiente ruta: C:\singlewebapp-3675\WebContent\openmeetings\

Es posible que aparezca en los iconos de las imágenes un circulo azul con una interrogación, como ya he dicho, es normal.

Paso 5

Editamos el fichero: C:\singlewebapp-3675\WebContent\openmeetings\main.lzx de nuevo. Entre la linea 95 y la 105 tenemos que ver esta linea:

bgcolor=”${ canvas.basebgcolorizer }” clip=”true”

Eliminamos lo marcado en azul, de tal manera que la linea quede así:

<view name=”_mainbgcontentNavi” x=”0” y=”0” clip=”true”

Con esto, eliminamos el color del fondo que viene por defecto de la parte de la cabecera.

En el mismo archivo, vamos a la linea 51, donde encontraremos la siguiente linea:

height=”${ canvas.height-canvas.naviHeightDelta }” bgcolor=0xEEF0EB”

Eliminamos lo marcado en azul, de tal manera que la linea quede así:

height=”${ canvas.height-canvas.naviHeightDelta }”

Con esto, eliminamos el color del fondo que viene por defecto de la parte del cuerpo. Guardamos los cambios y cerramos.

Paso 6

Ahora vamos a compilar, para ello, abrimos un cmd. Nos colocamos en la siguiente ruta: C:\singlewebapp-3675

Cuando estemos en la ruta, ejecutamos la siguiente orden:

ant -f build_red5webapp.xml dist

Comenzarán a aparecer lineas en el prompt, esperamos a que acabe, no le llevara mas de 5 minutos.

Cuando haya terminado, cerramos el cmd. Vamos a la carpeta C:\singlewebapp-3675 y veremos que se han creado nuevos directorios. Ahora, entramos en la siguiente ruta C:\singlewebapp-3675\dist\red5\webapps\openmeetings donde debería haber un fichero llamado: main.swf8.swf

Este fichero es el que contiene el skin de Open Meetings.

EQUIPO SERVIDOR (DEBIAN)

En el equipo servidor, vamos a la ruta donde tenemos instalado Open Meetings, en mi caso, esta en: /usr/lib/red5/webapps/openmeetings/.

Paramos el servicio de red5 antes de proseguir.

En directorio vemos que ya contiene un archivo main.swf8.swf , es conveniente guardar este archivo en otro lado. Una vez tengamos un backup de main.swf8.swf guradado en un lugar seguro. Traemos a este mismo directorio el archivo que generamos nosotros.

Si no queremos que aparezca la frase Open Meetings, o la queremos sustituir por otra cosa, editamos también el archivo config.xml.

Vamos a la linea 55, donde pone lo siguiente:

Open Meetings

Ahí colocamos lo que queramos, o directamente borramos. Ojo, solo borramos “Open Meetings”, quedaría así:

Si queremos modificar la URL donde nos redirecciona al hacer clic en “Open Meetings”, modificamos la siguiente linea (Esta inmediatamente debajo):

http://www.ejemplo.com

Guardamos, y cerramos el archivo. Ahora arrancamos red5 y ya tendríamos que tener listo nuestra GUI personalizada.