Capítulo V Implementación En este capítulo se especifican los recursos utilizados en la implementación de la interfaz, así como se describe su arquitectura funcional y las características principales. 5.1 Arquitectura y herramientas de desarrollo El ambiente de comunicación se desarrolla como un Applet de Java. La arquitectura es cliente servidor. Se requiere para acceder a la aplicación que el servidor se encuentre ejecutándose. La estructura de la arquitectura se muestra en la Figura 5.1. El servidor es una aplicación independiente la aplicación principal en su ejecución, se ejecuta por medio de un archivo ejecutable. Al ejecutar el servidor esta cuenta, con un puerto predefinido para escuchar las peticiones de los clientes, enviar y recibir los menajes. No se puede acceder a la aplicación principal si el servidor no se encuentra en ejecución correctamente. El servidor es el que se encarga de enviar y recibir los mensajes entre los clientes, todos los mensajes son administrados por el servidor.
Servidor Cliente A Cliente B Figura 5.1 Arquitectura 5.2 Acceso a la aplicación Por medio de la ventana de acceso (Figura 5.1), se captura el nombre del usuario y se pasa esa cadena de caracteres como parámetro a la clase principal que ejecuta la aplicación. La clase principal genera la ventana de conversación general. En la clase principal la cadena se utiliza para desplegar en la ventana principal el nombre de la persona que entró a la área de conversación, también se despliega en la ventana llamada participantes el nombre de los usuarios que están conectados en ese momento. Por otro lado esta cadena se envía al servidor del Chat para que éste mande la cadena al otro cliente. En la ventana del otro cliente se despliega de la misma manera que en el cliente origen del mensaje, como se puede ver en la Figura 5.2
Figura 5.2 Momento de acceso al chat 5.3 Ventana principal En la ventana principal se encuentra el botón Enviar, al accionar este botón se captura, del área de entrada de mensajes, el texto escrito por el usuario, se verifica el estado emotivo seleccionado en el panel y se adjunta la clave (entera) que corresponde al estado emotivo que el usuario tiene seleccionado en ese momento. Después el mensaje que es codificado, se envia a al servidor para su distribución entre los usuarios. Al momento de llegar el mensaje codificado a los usuarios, se decodifica para identificar el estado emotivo que acompaña a ese mensaje. Cuando se tiene el valor entero del código emotivo previamente definido, (más adelante se describe en que consiste el código emotivo y su clasificación
asociada) se despliega el mensaje en el área de conversación del Chat con las modificaciones correspondientes al estado emotivo seleccionado por el usuario que envió el mensaje. El código emotivo es un número entero asociado a estilos de contexto que modifican el texto de los mensajes Estos estilos de contexto son estructuras de Java que permiten almacenar y asocia a un estilo diferentes elementos como color, tamaño y tipo de letra. Los estilos están previamente definidos y se inicializan al ejecutar la aplicación. El mismo código emotivo hace referencia a una imagen que es recuperada de la carpeta predefinida con las imágenes emotivas, y está es desplegada en área marcada Imagen usuario A o B según sea el caso. Si es el estado emotivo del que envía se despliega en el área llamada imagen usuario, si es el estado emotivo del que recibe se despliega en área llamada Imagen usuario B, las imágenes también están asociadas a un estilo de contexto para poder desplegarlas en la ventana del usuario. En la Figura 5.3 se muestra la ubicación de los componentes de la ventana principal de la aplicación.
Menú Area de conversación Ventana participantes Imagen usuario B Entrada Mensajes Imagen usuario A Botón Enviar Figura 5.3 Descripción ventan principal 5.4 Panel emotivo El panel emotivo está formado por botones agrupados, que sólo permiten la selección de uno solo a la vez. Los botones corresponden a un estado emotivo, y están localizados de acuerdo al modelo previamente definido de Lang. Al momento de presionar algún botón, éste genera un número entero que posteriormente será asociado a un mensaje, y que corresponde a una clave emotiva definida anteriormente, también se genera una cadena de caracteres con el nombre del estado emotivo seleccionado, posteriormente se despliega en el área denominada estado seleccionado el nombre del estado emotivo seleccionado. En la Figura 5.4 se muestran los elementos anteriormente mencionados.
Estado seleccionado Botones Botón seleccionado Figura 5.4 Componentes panel Lang.
5.5 Diagrama de clases El diagrama de clases muestra la manera de comunicarse entre las clases. En las Figuras 5.5 y 5.6 se muestra su estructura de relación. IniciaSesion ChatApplet ChatClientThead ChatProtocol ChatFrame PanelLang MandaClave PersonalizaIcons CreaEstilos Figura 5.5 Diagrama de Clases
StartServer ChatMultiServer ChatMultiserverThread Figura 5.6 Diagrama de Clases (continuación) A continuación se describen los componentes de las Figuras 5.5 y 5.6: En la parte más alta del diagrama se encuentra la clase encargada de controlar el acceso a la aplicación, es un Arlet que captura, el nombre del usuario, y mediante el cual el usuario elige el tipo de panel que desea utilizar (personalizado o por defecto). Estos datos son enviados a la ventana principal de del chat. Ya dentro de la aplicación se genera por medio de la clase que sigue mas abajo, el hilo de ejecución, por cada cliente conectado. Para inicializar este hilo de ejecución es necesario contar con los datos necesarios para conectarse a la ventan de chat, esto se logra con la clase de protocolo para acceder al chat. Ua vez validado el protocolo para hacer la conexión y empezar a enviar y recibir mensajes, se accede a la ventana principal de conversación. Esta clase tiene a la mano cuatro clases que son utilizadas para diferentes propósitos: La clase que genera el panel, se encarga de mostrar el panel a los usuarios, la clase para enviar las clasves, es la que se encarga de codificar los mensajes, con la información
emotiva que el usuario ha seleccionado. La otra clase que esta presenta es para personalizar los iconos, dependiendo de que iconos el usuario desee usar en su panel emotivo y por ultimo se encuentra la clase para crear los estilos de contexto que son los que se encargan de generar el modelado del texto previamente. Por otro lado se encuentra la estructura del servidor, primero se cuenta con un ejecutable que arranca el servidor, en la parte baja se encuentra la clase que envía y recibe los mensajes y administra los hilos de ejecución para el servidor.
5.6 Operación de la aplicación En esta sección se muestra la forma de interactuar con otros usuarios a través del chat Lang y también se ilustra la posible integración con la interfaz Poseidón de bibliotecas digitales de la Universidad de las América, Puebla. Los usuarios pueden elegir cargar el panel emotivo entre: el panel por defecto con las imágenes predeterminadas o cargar sus propias imágenes (opción personalizado ), las imágenes tienen que ser en formato GIF y de un tamaño de 1.5cm x 1.5cm. Para utilizar esta opción, el usuario tiene que depositar las imágenes que desea incluir al panel emotivo en una carpeta llamada images en el localizado en el directorio raíz de la aplicación para ser cargadas por el sistema. La ventana se muestra en la Figura 5.7. Figura 5.7 Ventan de acceso
5.6.1 Interacción en Chat Lang Para acceder al ambiente de comunicación es necesario ingresar el nombre de usuario y elegir el modo de configuración del panel emotivo (Personalizado o por defecto). En la Figura 5.8 ilustra la ventana de acceso y bienvenida a la aplicación. Figura 5.8 Ventana acceso y bienvenida
Al entrar al ambiente de conversación se presenta al usuario la interfaz principal, compuesta por el panel emotivo y la ventana de conversación que se muestra en la Figura 5.9. Figura 5.9 interfaz principal El usuario podrá elegir el estado emotivo que desee al iniciar o durante la conversación, utilizando el panel emotivo, y enviar y recibir mensajes a través de Internet. 5.7 Ejecución en el contexto de bibliotecas digitales Como se mencionó en capítulos anteriores, esta aplicación podrá ser integrada al contexto de la aplicación Poseidón de Bibliotecas digitales de la Universidad de las Américas, Puebla. Cuando los usuarios estén conectados a esta aplicación podrán hacer la petición de conversar por medio del Chat emotivo Lang.
En la Figura 5.10 se ilustra el resultado de la integración. Figura 5.10 Integración con (Poseidón) Los usuarios pueden iniciar una conversación, siempre y cuando se encuentre la persona con la que desean hablar en ese momento, para comentar sobre los documentos compartidos y revisados, en el contexto de la aplicación Poseidón