PERSONALIZACIÓN DE OPENMEETINGS

Con el propósito de mejorar la interactividad de la herramienta OPENMEETINGS se propone realizar los siguientes ajustes para su optimización y usabilidad, además de analizar su arquitectura en lo que sea posible:

El componenete CHAT ubicarlo debajo del componente participantes, para brindar mayor espacio de la pizarra.

Componente Sidebar: Dentro del módulo “conference” se halla la carpeta “flexibleConferenceRoom” y dentro de ésta se ingresa a la carpeta “roomSidebar” aquí se hallan los archivos o clases que corresponden al sidebar de los distintos tipos de salas de conferencias, sabiendo que un sidebar es el bloque lateral izquierdo donde se presentan los dos botones de “Usuarios” y “Archivos” y se listan los usuarios conectados, tal como se ve en la Figura1.

Figura1. Sidebar en una sala de conferencias

Los archivos o clases que controlan el sidebar son:

•  “conferenceRoomSidebar.lzx”,
• “restrictedRoomSidebar.lzx”
•  “eventRoomSidebar.lzx”,
• “interviewRoomSidebar.lzx”

Una vez identificados las clases o archivos que controlan el sidebar, ahora ya se sabe que para crear un objeto de este tipo osea del tipo sidebar, se utiliza las etiquetas de apertura con el mismo nombre de la clase respectivamente.

Además hay que tener presente que dentro de cada una de estas clases se crea dos objetos correspondientes a los botones de “Usuarios” y “Archivos”, dichos objetos pertenecen a la clase “conferenceRoomSidebarTabButton” creada en el archivo conferenceRoomSidebarTabButton.lzx ubicado en el mismo directorio “roomSidebar”.

En conclusión en el directorio “modulesconferenceflexibleConferenceRoomroomSidebar” encontramos todos los archivos que controlan el sidebar de una sala de conferencia.

Componente Chat: antes de empezar a personalizar el módulo de Chat, se debe tener presente que la herramienta openmeetings maneja el CHAT en dos lugares específicos y de distintas formas, la primera corresponde al chat que se presenta en la página de inicio de openmeetings, tal como se puede visualizar en la Figura 2. Los archivos que controlan este módulo en su totalidad se encuentran en el directorio: “Singlewebapp2WebContentopenmeetingsmoduleschat”.

Figura2. Módulo de Chat que se presenta al ingresar a Openmeetings

La segunda corresponde al chat que se visualiza dentro de una sala de conferencias, es decir una vez ingresado a una sala de conferencias donde se presenta el sidebar, la pizarra, propiedades, etc., tal como se puede apreciar en la Figura 3. Los archivos que controlan este componente se hallan en el directorio: “Singlewebapp2WebContentopenmeetingsmodulesconference tabcontentchat”

Figura 3 – Chat que se muestra en una sala de conferencia

Como nuestro objetivo se centra en personalizar el chat dentro de una sala de conferencias procedemos a analizar los archivos dentro de este directorio:

• “chatOutput.lzx”: dentro de este archivo se crea la clase ”chatOutput” la misma que corresponde únicamente a la caja donde se muestra los mensajes escritos en el chat por cada usuario, el nombre de usuario y opciones como “Añadir a contactos”, “Enviar un mensaje privado”, “Mostrar el perfil del usuario” tal como se muestra en la Figura 4.
  

  Figura 4 – Caja correspondiente a la clase “chatOutput”

  Dentro de este archivo en un principio se realizó un cambio en el parámetro “width” de la clase “chatOutput” para reducir el ancho de la caja “chatOutput” pero luego se dejo con su tamaño original debido a que éste se reduce automáticamente si se reduce su contenedor “Chat”.

• “chatTabBottom.lzx”: dentro de este archivo se crea la clase ”chatTabBottom” la misma contiene el área de chat que presenta: la caja para ingresar texto, el botón de verificación “RTL”, el botón “enviar”, el boton “emoticons”, el botón “show/copy chat log” y el botón “eliminar registro” como se muestra en la Figura 5.
  

  Figura 5 – Área de caja de texto y botones del Chat

  Dentro de esta clase se identifica que donde se construye la caja para introducir el texto de chat se lo hace dentro de la vista llamada «message» con la etiqueta “customInputtext” llamada «_ctext», como se ve en la Figura siguiente:

  

  Figura 6 – Caja para introducir texto

  Siguiendo en el mismo archivo observamos que a continuación se crea el botón de verificación “RTL” con la etiqueta “labelCheckbox” cuyo nombre es “_inverseWording”, el cambio que se realizó aquí fue comentar el bloque de códigopara quitar dicho botón.

  Dentro de la siguiente vista llamada “_button” se crea el botón de “enviar” y los iconos “emoticones”, “show/copy” y “eliminar registro”.

  

  Figura 7 – Botones e Íconos

  El único cambio que se realizó dentro de estos archivos fue el de esconder el botón “RTL”.

Una vez analizados los elementos respecto al CHAT, se procede analizar el contenedor de dichos elementos dentro de una sala de conferencia, es así que dentro del directorio “Singlewebapp2WebContentopenmeetingsmodulesconferenceflexibleConferenceRoom” se procedió a editar los siguientes archivos:

• interviewConferenceRoom.lzx
• restrictedConferenceRoom.lzx
• flexibleEventRoom.lzx
• flexibleConferenceRoom.lzx

donde se crean las clases:

• interviewConferenceRoom
• restrictedConferenceRoom
• flexibleEventRoom
• flexibleConferenceRoom

Dichas clases se encargan de crear los elementos para una sala de conferencia, tales como: sidebar, pizarra y chat.

A continuación en la línea 87, se crea un sidebar «_sidePanel» para lo cual se redujo su altura, dejando un espacio libre para agregar el Chat, para lo cual se agregó el siguiente parámetro:
Altura del contenedor height:

height=»${canvas.height – (parent._chatPanelStrict.height) – 26}»

Luego en la línea 99, se crea un objeto “_chatPanelStrict” de la clase “basePropertyPanel” (dicho clase se encuentra en el archivo: Singlewebapp2WebContentopenmeetingsbasecomponentspanelbasePropertyPanel.lzx), que es el contenedor de los elementos del Chat en una sala de conferencia, y como nuestro objetivo es cambiarlo de posición se procedió a cambiar los siguientes parámetros:

Posición X:

Originalmente: x=»${ parent._sidePanel.width }»
Actualmente: x=»0″

Ancho del contenedor:

Originalmente: width=»${ canvas.width – parent._sidePanel.width }»
Actualmente: width=»${parent._sidePanel.width – 10}»

Finalmente resultado de dichos cambios se pueden observar en las siguientes figuras:

Figura 8 – Ingresando a una sala de conferencias

Figura 9 – Abriendo o Maximizando el Chat en una sala de conferencias

Figura 10 – Cerrando el Sidebar y Chat