Haga posible una experiencia colaborativa con los formularios HTML

Utilice WebSphere Communications Enabled Applications Feature Pack para crear formularios HTML colaborativos y dinámicos

Con Communications Enabled Applications (CEA) Feature Pack for the WebSphere® Application Server usted puede brindar a sus usuarios una experiencia web más colaborativa. Integre las funciones click-to-call (clic para llamar) directamente a sus páginas web, y permita que sus clientes naveguen en su sitio en forma conjunta. En este artículo, aprenda a crear formularios HTML interactivos donde los usuarios pueden colaborar completando y enviando su información. Descubra cómo mejorar de manera significativa la satisfacción del usuario y la exactitud de los datos enviados.

Dustin Amrhein, IBM MobileFirst Solution Architect, IBM

Author photoDustin Amrhein se unió a IBM como parte del equipo de desarrollo para WebSphere Application Server. Mientras ocupaba ese cargo, trabajó en el desarrollo de infraestructura para servicios web y modelos de programación para servicios web. Además, lideró el esfuerzo técnico del desarrollo de un marco de servicios RESTful para Java. En su rol actual, Dustin es Technical Evangelist de tecnologías emergentes en la cartera de WebSphere de IBM. Actualmente se concentra en tecnologías WebSphere que ofrecen capacidades de cloud computing, entre ellas WebSphere CloudBurst Appliance.


Nivel de autor profesional en developerWorks

Andrew Ivory, Software Engineer, Master Inventor, IBM China

Photo of Andy IvoryAndy es ingeniero y arquitecto de software de IBM asesor en Communications Enabled Applications Feature Pack. Obtuvo una diplomatura en ciencias de la ingeniería informática en la Universidad del Estado de Pensilvania en Diciembre de 2002 y se unió a IBM en enero de 2003.



03-08-2011

Introducción

Participe del grupo de desarrollo Web en My developerWorks

Analice temas y comparta recursos con otros desarrolladores sobre el desarrollo Web en el grupo de desarrollo Web en My developerWorks.

¿Aún no es miembro de My developerWorks? ¡Únase ahora!

Si utiliza la web para interactuar con sus clientes, probablemente esté buscando la forma para incrementar la satisfacción de sus usuarios en línea. Algunas de las maneras más comunes de incrementar la satisfacción del usuario son: el aumento del grado de respuesta del sitio, la producción de interfaces intuitivas y expresivas, y la creación de un diseño de sitio cohesivo. Esto es importante para la satisfacción del usuario, pero existen otras cosas, como la comunicación y la colaboración, que vale la pena tener en cuenta. Usted puede aumentar la satisfacción del usuario con su sitio web permitiendo una experiencia más colaborativa. Las capacidades de colaboración le permitirán a sus usuarios hacer cosas como las siguientes:

  • Co-navegar en su sitio con otros usuarios
  • Llamar a un representante de servicios al cliente con un clic en un botón que aparece en una página Web
  • Trabajar directamente con un representante de servicios al cliente para asegurarse de que los formularios Web contengan la información correcta y estén completos antes de su envío

Este artículo supone un conocimiento general sobre los widgets (elementos de la interfaz de usuario reutilizables) del WebSphere CEA Feature Pack. Vea "Extending widgets in the WebSphere Application Server Feature Pack for CEA" si desea más información.

Usted puede ofrecer este tipo de capacidad de colaboración usando WebSphere Application Server Communications Enabled Feature Pack. El feature pack incluye objetos gráficos widgets Dojo que usted puede usar para incorporar las capacidades click-to-call, co-navegación, y formulario interactivo. Los casos de uso para estas funciones son casi ilimitados.

En este artículo, explore un escenario que implementa tres widgets que permiten al representante de servicios al cliente ayudar al usuario que está tratando de completar y enviar un formulario en línea.


El escenario

Supongamos que usted está a cargo de un sitio web para la compañía ficticia de seguros Acme. Acme desea apalancar WebSphere Application Server CEA Feature Pack para conectar de un modo rápido y eficaz a los representantes de servicios al cliente con los clientes que tienen problemas para completar un formulario nuevo de reclamo.

Si usted desea que su sitio sea más colaborativo, pero actualmente no posee WebSphere Application Server, pruebe la versión de prueba.

Este artículo lo guía en los pasos para la creación de la solución usando WebSphere CEA Feature Pack. Usted incorporará las siguientes capacidades al proceso de creación de reclamos en línea de Acme:

  • Haga clic en el botón que se encuentra en el nuevo formulario de reclamo para comunicarse con un representante de servicios al cliente.
  • Haga clic en el botón para iniciar una sesión en la cual tanto el cliente como el representante de servicio al cliente puedan ver e interactuar con los datos del formulario de reclamo.
  • Automáticamente copie los datos del formulario de reclamo que comenzó a completar el cliente al que pueden co-navegar el cliente y el representante de servicio al cliente.
  • Controle cuáles son los datos que pueden verse y modificarse al utilizar un formulario interactivo.

En la próxima sección se observa el formulario de creación del reclamo inicial, y se explica cómo incorporar nuevas capacidades click-to-call directamente en el formulario.


Incorporación de la capacidad click-to-call

Para este escenario usted trabajará desde un escenario existente, claimform.html, que sus clientes usan para realizar nuevos reclamos en línea.

Figura 1. Página claimform.html
Página claimform.html

A esta altura, el formulario es muy básico. Los clientes se conectan, completan el formulario con la información que se les solicita para el reclamo, y lo envían a Acme para que sea procesado haciendo clic en Submit Claim.

Supongamos que a uno de sus clientes le surge una duda mientras completa el formulario de reclamo. Quizá olvidó el número de su póliza, o desea saber exactamente qué importe incluir en el reclamo. En ese momento, tendría que dejar de trabajar en línea, buscar el número para pedir asistencia, y luego realizar la llamada. El cliente tendría que dedicarle algún tiempo a estas tareas, y hasta podría tener que comenzar el proceso de creación del reclamo de nuevo. Esto podría provocar la insatisfacción por parte del cliente y terminar perjudicando la retención del cliente. Sería más fácil, y ahorraría tiempo, si el cliente se comunicara con un representante de servicios al cliente sin tener que dejar el formulario de creación del reclamo.

Este parece un escenario perfecto para el widget WebSphere CEA ClickToCall. Usted puede incorporar el widget correctamente en la página claimform.html, permitiendo de este modo a los usuarios comunicarse con los representantes de servicios al cliente sin tener que dejar la página ni interrumpir el proceso de creación del reclamo.

Usted debe realizar dos pequeñas modificaciones al código HTML. En primer lugar, agregue las sentencias de importación necesarias para importar los archivos JavaScript y CSS proporcionados por WebSphere CEA Feature Pack para el widget ClickToCall, tal como se muestra en el Listado 1.

Listado 1. Importaciones para la página claimform.html
<script type="text/javascript" src="ceadojo/dojo/dojo.js"
  djconfig="parseOnLoad: true, isDebug: false">
</script>
                
<style type="text/css">
      @import "ceadojo/dijit/themes/tundra/tundra.css";
      @import "ceadojo/dojo/resources/dojo.css";
      @import "ceadojo/cea/widget/ClickToCall/ClickToCall.css";
</style>

<script>
   ceadojo.require("dijit.form.TextBox");
   ceadojo.require("dijit.form.SimpleTextarea");

</script>

Después de incorporar los archivos CSS y JavaScript necesarios, agregue el widget ClickToCall para incorporar otra fila en el formulario tabla con el código HTML en el Listado 2.

Listado 2. Declaración HTML para el widget ClickToCall
<tr>
   <td>
      <div ceadojoType="cea.widget.ClickToCall"      
           widgetNumber="sip:CSR@localhost">
      </div>
   </td>
</tr>

En el ejemplo que se presenta en el Listado 2 se declara que el widget ClickToCall se encuentra en el elemento div, y confirma el destino Session Initiation Protocol (SIP) URI en el atributo widgetNumber como CSR@localhost. La incorporación del código HTML y JavaScript en los Listados 1 y 2 actualiza la página claimform.html, tal como se observa en la Figura 2.

Figura 2. Página claimform.html actualizada
Página claimform.html actualizada

Ahora un usuario puede contactarse con un representante de servicios al cliente ingresando su número y haciendo clic en Call Me. El teléfono indicado por el SIP URI en el atributo widgetNumber del widget ClickToCall será notificado y realizará una llamada al número ingresado por el usuario.


Incorporación de la co-navegación y del formulario interactivo

Imagine una situación en la cual un usuario ha comenzado a completar un formulario de reclamo pero no puede encontrar su número de póliza. Éste podría comunicarse con un representante de servicios al cliente usando el nuevo widget ClickToCall. Luego de verificar la identidad del cliente, el representante podría buscar el número de póliza y dárselo al usuario. Es más sencillo hacer esto que utilizar el widget ClickToCall, pero de cualquier forma no es lo ideal. El representante de servicios al cliente debe leer un largo número de póliza por teléfono, y el usuario debe escuchar e ingresar ese número en el campo correspondiente del formulario. Durante la transmisión de esta información existe un margen de error; el campo correspondiente al número de póliza podría terminar con datos erróneos.

Podría ser una experiencia mucho mejor si el usuario y el representante de servicios al cliente pudieran navegar e interactuar con el nuevo formulario de creación del reclamo. En ese caso, el representante de servicios al cliente podría suministrar asistencia directamente en el formulario HTML y el intercambio de información no se realizaría por teléfono. Usted puede lograr esto mismo con algunos widgets adicionales.

El primer paso es habilitar el widget ClickToCall, que usted ya ha incorporado a la página claimform.html, para soportar las capacidades de co-navegación. Usted también debe actualizar las importaciones de CSS en la página claimform.html, tal como se observa en el Listado 3.

Listado 3. Importaciones actualizadas para la página claimform.html
<style type="text/css">
    @import "ceadojo/dijit/themes/tundra/tundra.css";
    @import "ceadojo/dojo/resources/dojo.css";
    @import "ceadojo/cea/widget/ClickToCall/ClickToCall.css";
	@import "ceadojo/cea/widget/Cobrowse/Cobrowse.css";
	@import "ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

<script>
   ceadojo.require("dijit.form.TextBox");
   ceadojo.require("dijit.form.SimpleTextarea");
</script>

En este punto, usted agrega tres nuevos atributos a la declaración del widget ClickToCall, tal como se observa en el Listado 4.

Listado 4. Widget ClickToCall actualizado
<tr>
   <td>
      <div ceadojoType="cea.widget.ClickToCall"      
           widgetNumber="sip:CSR@localhost" 
           enableCollaboration="true"  
           canControlCollaboration="true"           
           defaultCollaborationUri="collabform.html">
      </div>
   </td>
</tr>

El atributo enableCollaboration fijado en true indica incluir las capacidades de co-navegación como parte del widget ClickToCall. El atributo canControlCollaboration fijado como true significa que el cliente puede controlar las capacidades de co-navegación si el representante de servicios al cliente elige darle el control. Por último, el valor del atributo defaultCollaborationUri indica la página inicial que será cargada en la sesión de co-navegación.

Antes de analizar la página collabform.html, hay algo importante que debe saber sobre el uso del widget ClickToCall junto con las capacidades de co-navegación. Para iniciar una sesión de co-navegación con el cliente, una página a la que puede acceder el representante de servicios debe tener una forma que escuchar las llamadas entrantes e iniciar las sesiones. El widget CEA Feature Pack's CallNotification proporciona esta capacidad.

Una página diferente, csrhome.html, con el widget CallNotification escucha las llamadas del cliente y suministra la capacidad de co-navegación del formulario de creación del reclamo con el cliente. De modo similar a los widgets usados anteriormente, el Listado 5 muestra cómo importar los archivos CSS necesarios.

Listado 5. Importaciones para el widget CallNotification
<script type="text/javascript" src="ceadojo/dojo/dojo.js"
	djconfig="parseOnLoad: true, isDebug: false">
</script>

<style type="text/css">
      @import "ceadojo/dijit/themes/tundra/tundra.css";
      @import "ceadojo/cea/widget/CallNotification/CallNotification.css";
      @import "ceadojo/cea/widget/Cobrowse/Cobrowse.css";
      @import "ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

Con las importaciones en su lugar, usted declara un widget CallNotification dentro de una tabla de la página, tal como se observa en el Listado 6.

Listado 6. Declaración del widget CallNotification
<table cellspacing="25" cellpadding="25" class="formContent">
   <tr><th style="font-weight:bold;font-size:large">Acme Insurance Claim 
        Hotline
       </th>
   </tr>
   <tr>
      <td><div ceadojoType="cea.widget.CallNotification" 
               widgetNumber="sip:CSR@localhost"   
               enableCollaboration="true" 
               canControlCollaboration="true" 
               defaultCollaborationUri="collabform.html"></div>
      </td>
   </tr>
</table>

Los atributos del widget CallNotification son los mismos que los del widget ClickToCall en la página claimform.html. En este caso, el valor del atributo widgetNumber indica el número en el cual el widget escuchará las llamadas. Las llamadas entrantes al teléfono sip:CSR@localhost, lo que sucede cuando el cliente usa el widget ClickToCall, conlleva la notificación de este widget CallNotification. De nuevo, los atributos de colaboración necesarios son definidos, y el defaultCollaborationUri es fijado en el mismo valor que el widget ClickToCall en la ´página claimform.html. La página csrhome.html debería mostrar ahora el widget, tal como se observa en la Figura 3.

Figura 3. Widget CallNotification en la página claimform.html
Widget CallNotification en la página claimform.html

Antes de iniciar el widget CallNotification de modo que escuche activamente las llamadas entrantes, usted debe crear la página collabform.html a la que ambos widgets, ClickToCall y CallNotification hacen referencia en sus atributos defaultCollaborationUri .

La nueva página collabform.html incluirá un formulario que es una copia campo por campo del formulario original en la página original claimform.html. En la nueva página, en lugar de usar un formulario HTML común usted utilizará el widget TwoWayForm. De nuevo, el primer paso es la importación de los archivos CSS y JavaScript necesarios para la página.

Listado 7. Importaciones para la página collabform.html
<script type="text/javascript" src="ceadojo/dojo/dojo.js"
	djconfig="parseOnLoad: true, isDebug: false"></script>

<style type="text/css">
      @import "ceadojo/dijit/themes/tundra/tundra.css";
      @import "ceadojo/dojo/resources/dojo.css";
      @import "ceadojo/cea/widget/TwoWayForm/TwoWayForm.css";
</style>

<script>
   ceadojo.require("dijit.form.TextBox");
   ceadojo.require("dijit.form.SimpleTextarea");
</script>

Copie el HTML en la sección principal de la página claimform.html dentro de la sección principal de la página collabform.html. Modifique el elemento formulario y especifique un atributo ceadojoType con un valor de cea.widget.TwoWayForm, tal como se observa en el Listado 8.

Listado 8. Declaración de un widget TwoWayForm
<form id="claimReqForm" ceadojoType="cea.widget.TwoWayForm"  
      style="background-color:rgb(223,223,223)">

Además de ese pequeño cambio, la única modificación que debe realizar es hacer que el HTML copiado elimine el widget ClickToCall. En este ejemplo, sin embargo, no será necesario porque sólo usaremos esta página en particular en el contexto de una sesión de co-navegación. Si usted tratara de ver la página collabform.html, vería exactamente el mismo resultado que se observa en la Figura 1.

Casi está listo para probar el flujo inicial de llamadas y co-navegación para el formulario de solicitud de reclamo. Antes de hacer eso, usted debe configurar los componentes de telefonía necesarios para conducir la prueba de la aplicación. Para este ejemplo, usted puede obtener las instrucciones del Info Center para el CEA Feature Pack. En el ejemplo en este artículo se registra un teléfono en sip:CSR@localhost y el otro en sip:Customer@localhost.


Probando la capacidad de co-navegación

Una vez que la infraestructura de telefonía está en su lugar, usted carga la página csrhome.html y activa el widget CallNotification haciendo clic en el ícono Start call notification. Como se observa en la Figura 4, el estado cambia para indicar que el widget CallNotification está disponible y espera las llamadas entrantes.

Figura 4. Inicio del widget CallNotification
Inicio del widget CallNotification

En el ejemplo se abre otro navegador. (El CEA Feature Pack usa cookies para almacenar el estado de la sesión, así que debe tratarse de un navegador distinto—no una ventana diferente en el mismo navegador.) El próximo paso es abrir la página claimform.html. Supongamos que el usuario inicia el proceso de creación del reclamo ingresando un nombre, pero luego decide que necesita ayuda. Ingresa entonces sip:Customer@localhost como número de cliente y hace clic en Call Me. Esto realiza una llamada al teléfono sip:CSR@localhost, el cual una vez contestado, realiza una llamada al teléfono sip:Customer@localhost. Cuando los teléfonos se conectan usted puede ver que el estado del widget ClickToCall se actualiza en la página claimform.html, tal como se observa en la Figura 5.

Figura 5. Estado conectado para el widget ClickToCall
Estado conectado para el widget ClickToCall

Abra la página csrhome.html y usted verá una actualización similar del estado para el widget CallNotifcation, como se observa en la Figura 6.

Figura 6. Estado conectado para el widget CallNotification
Estado conectado para el widget CallNotification

Para comenzar las sesiones de co-navegación, haga clic en el ícono co-browse en los widgets ClickToCall y CallNotification. En cada navegador, se abre una ventana modelo y la página collabform.html aparece en el panel.

Figura 7. Ventana modelo para la sesión de co-navegación
Ventana modelo para la sesión de co-navegación

Para comenzar la sesión, el representante de servicios al cliente, que abrió la sesión de co-navegación del widget CallNotification, tiene el control de la sesión. Usted puede probar las capacidades del formulario interactivo ingresando un valor en el campo número de póliza en la ventana del representante de servicios al cliente. Usted debería ver el mismo valor en el mismo campo de la sesión de co-navegación del cliente.

Figura 8. Transferencia de datos del formulario interactivo
Transferencia de datos del formulario interactivo

Ahora que el número de póliza es correcto, el cliente puede volver a ingresar los datos del reclamo. Como se puede observar en la Figura 8, los datos ingresados por el cliente se muestran resaltados en la ventana del representante de servicios al cliente. Los dos usuarios pueden colaborar en forma simultánea con los datos del formulario sin necesidad de dar el control de un lado al otro.


Preservando la confidencialidad en los formularios interactivos

Muchos formularios en línea contienen información confidencial, como los números del seguro social, los números de las tarjeas de crédito, o los domicilios. Usted podría crear un formulario interactivo que contenga datos sobre los que sólo un usuario que es parte de la interacción debería tener conocimiento. En el formulario de creación de reclamo de ejemplo, para mantener la privacidad probablemente no sea inteligente que el representante de servicios al cliente vea el nombre de la otra parte del accidente. Usted puede utilizar dos atributos especiales para los elementos del widget TwoWayForm para asegurar que sólo el cliente pueda suministrar y leer el nombre de la otra parte en el accidente.

Abra la página collabform.html en un editor HTML y localice el campo de entrada del campo etiquetado "Name of other party." Usted puede ver la declaración original en el Listado 9.

Listado 9. Declaración original para nombrar la entrada de la otra parte
<input type="text" ceadojoType="dijit.form.TextBox" id="otherName"   
           name="otherName"></input>

Para asegurar que sólo el cliente pueda editar el valor de este elemento de entrada y el enmascaramiento del valor en la ventana del representante de servicios al cliente, use los atributos ceaCollabWriteAccess y ceaCollabFilter .

Listado 10. Control de la capacidad de escritura y lectura
<input type="text" ceaCollabWriteAccess="reader" 
       ceaCollabFilter="default" ceadojoType="dijit.form.TextBox" 
       id="otherName" name="otherName"></input>

Configurando el atributo ceaCollabWriteAccess en reader se indica que sólo el lector en la sesión puede editar el valor del elemento de entrada. En este caso, el cliente es el lector. El representante de servicios al cliente que inició la sesión es el escritor. El valor por omisión en el atributo ceaCollabFilter causa el enmascaramiento del valor de entrada en la ventana del escritor (en este caso, el representante de servicios al cliente). La Figura 9 muestra el resultado.

Figura 9. Valor enmascarado en la ventana del representante de servicios al cliente
Valor enmascarado en la ventana del representante de servicios al cliente

El valor por omisión del atributo ceaCollabFilter indica que usted desea usar la función de enmascaramiento por omisión, la cual, como se observa en la Figura 9, reemplaza el contenido del elemento de entrada con una serie de caracteres * . De ser necesario, usted podría proporcionar su propia función de enmascaramiento del cliente. Para ello, especificaría el nombre de la función como el valor del atributo ceaCollabFilter . Esta función acepta una serie como argumento (el valor original del campo), y regresa a una versión enmascarada del valor.


Transferring data to the co-browsing forms

Supongamos que un cliente tiene un problema después de haber empezado a completar los datos en el formulario para la creación de reclamos. Entonces solicita ayuda, usando click-to-call y co-navegación, de un representante de servicios al cliente. Como funciona ahora, los datos del formulario ingresados por el usuario en la página claimform.html no se transferirán automáticamente al formulario en la página collabform.html al inicio de la sesión de co-navegación. El cliente tendría que reingresar la información en el formulario de reclamo de la sesión de co-navegación. Obviamente, este es un inconveniente importante. Afortunadamente, usted puede evitar los inconvenientes a los usuarios extendiendo el comportamiento de un par de widgets para asegurarse de que la información sea copiada del formulario de creación de reclamo original al formulario interactivo en la sesión de co-navegación.

Si usted no está familiarizado con la extensión de los widgets Dojo en general, o en particular de los widgets WebSphere CEA, quizá desee dirigirse al manual previamente mencionado. Éste muestra cómo crear, empaquetar, y apalancar los widgets WebSphere CEA en su aplicación.

Para suministrar la función necesitada para copiar los datos del formulario al comienzo de una sesión de co-navegación para la creación del reclamo:

  1. Cree un nuevo módulo.

    Cree una nueva estructura de carpeta para mantener los widgets extendidos en la aplicación.

  2. Modifique la plantilla del widget ClickToCall.

    Modifique la plantilla del widget ClickToCall para incluir un atributo que indique el nombre del formulario desde el cual copiar los elementos.

  3. Modifique el JavaScript del widget ClickToCall

    Modifique el JavaScript del widget para reflejar el nuevo nombre del paquete y referirse al nuevo widget CollaborationDialog.

    Proporcione la función para reunir todos los elementos del formulario, y sus valores, en la página claimform.html y hacer que estos valores estén disponibles para el widget CollaborationDialog.

  4. Modifique el JavaScript del widget CollaborationDialog.

    Agregue una función para establecer el valor de los elementos para el formulario de creación del reclamo en la página collabform.html tanto en la sesión de co-navegación del cliente como del representante de servicios al cliente. Los valores vienen de los elementos copiados y pasados al widget CollaborationDialog por el widget extendido ClickToCall.

  5. Actualice la página claimform.html.

    Actualice la página claimform.html para usar los widget recién extendidos.

Creación de un nuevo módulo

Primero, usted desea extender el widget ClickToCall para reunir todos los elementos y los valores de su formulario en la página claimform.html. Cree una nueva estructura de carpeta en la aplicación, y copie allí los tres archivos JavaScript que está modificando:

  • ceadojo/cea/widget/CollaborationDialog.js
  • ceadojo/cea/widget/ClickToCall.js
  • ceadojo/cea/widget/ClickToCall/ClickToCall.html

La nueva estructura de carpeta tiene una carpeta raíz de acme, y el diseño del subdirectorio imita el del módulo cea suministrado por WebSphere CEA Feature Pack. Vea la Figura 10.

Figura 10. Estructura de carpeta extendida
Estructura de carpeta extendida

Modificación de la plantilla del widget ClickToCall

Con el objetivo de lograr la máxima reutilización y flexibilidad, usted desea declarar el nombre del formulario fuente (el formulario desde el cual usted copiará los elementos) en la declaración HTML del widget ClickToCall. Agregue el atributo sourceForm a la plantilla del widget ClickToCall y haga que el valor del mismo esté disponible para el widget ClickToCall. En el archivo ceadojo/acme/widget/ClickToCall/ClickToCall.html usted verá un elemento cuyo dojoAttachPoint es collaborationDialog. El elemento contiene definiciones del atributo, tales como enableCollaboration y canControlCollaboration, las cuales están disponibles tanto para el widget ClickToCall como para CollaborationDialog. Agregue el nuevo atributo sourceForm, como se observa en el Listado 11.

Listado 11. Actualización de la plantilla para el widget ClickToCall
<div
    dojoAttachPoint="collaborationDialog" 
dojoType="acme.widget.CollaborationDialog" sourceForm="${sourceForm}"
canControlCollaboration="${canControlCollaboration}"
defaultCollaborationUri="${defaultCollaborationUri}"
highlightElementList="${highlightElementList}"
isHighlightableCallback="${isHighlightableCallback}"
isClickableCallback="${isClickableCallback}"
sendPageUrlRewriteCallback="${sendPageUrlRewriteCallback}">
</div>

Además de definir el nuevo atributo sourceFrom tenga en cuenta que el código también cambió el dojoType para indicar el widget acme.widget.CollaborationDialog. Este será el nombre del widget CollaborationDialog extendido cuando usted haya terminado de realizar las modificaciones, así que siga adelante y realice la actualización ahora para asegurarse de que el widget extendido ClickToCall apalanque las nuevas funciones. Estas son las únicas dos modificaciones que debe realizar a la plantilla del widget ClickToCall. El próximo paso es modificar el JavaScript para el widget.

Modificación del JavaScript del widget ClickToCall

En la fuente de ceadojo/acme/widget/ClickToCall.js usted cambiará la sentencia de la declaración y una sentencia de reclamo. Actualice las declaraciones para declarar acme.widget.ClickToCall en lugar de cea.widget.ClickToCall, y actualice la sentencia de reclamo para CollaborationDialog de modo que haga referencia a acme.widget.CollaborationDialog, tal como se observa en el Listado 12.

Listado 12. Sentencias de declaración actualizada para el widget ClickToCall
dojo.provide("acme.widget.ClickToCall");
dojo.require("acme.widget.CollaborationDialog");
dojo.declare("acme.widget.ClickToCall", [ cea.widget.ClickToCall ],

En la sentencia dojo.declare, en el ejemplo se cambia el valor del widget base a cea.widget.ClickToCall. Usted puede borrar muchas otras sentencias de reclamo porque se está extendiendo de este widget base.

Usted necesita realizar algunas modificaciones a las variables en la fuente JavaScript de ClickToCall. El objetivo es asegurarse de que el nuevo widget esté señalando la plantilla modificada que usted creó en el paso anterior. Agregue una variable para el atributo sourceForm .

Listado 13. Modificación de las variables del widget ClickToCall
dojo.declare("acme.widget.ClickToCall", [ cea.widget.ClickToCall ],
{
   templateString : null,
   templatePath: dojo.moduleUrl("acme.widget",               
                                "ClickToCall/ClickToCall.html"),
   sourceForm: "",

Para señalar la nueva plantilla, determine el valor templateString como null y declare una variable templatePath que haga referencia al archivo de plantilla HTML modificado. El código también crea una variablesourceForm para mantener el valor del atributo sourceForm que usted definió en la nueva plantilla.

Las modificaciones finales a la fuente del widget ClickToCall se realizan para reunir los elementos del formulario especificado y hacer que estén disponibles para la instancia del widget CollaborationDialog. Agregue una nueva función denominada getSourceFormElements para recuperar los elementos del formulario indicado por el atributo sourceForm y determínelos en la instancia del widget CollaborationDialog. Luego, modifique la función existente cobrowse del widget ClickToCall para a llamar esta nueva función. La fuente completa para el recién extendido widget ClickToCall se puede observar en el Listado 14.

Listado 14. Fuente para el widget ClickToCall modificado
dojo.provide("acme.widget.ClickToCall");
dojo.require("acme.widget.CollaborationDialog");
dojo.declare("acme.widget.ClickToCall", [ cea.widget.ClickToCall ],
	{
		templateString : null,
		templatePath: dojo.moduleUrl("acme.widget", 
                "ClickToCall/ClickToCall.html"),
		sourceForm: "",
		getSourceFormElements : function() {
	         var sourceFormObj = dojo.byId(this.sourceForm);
		   this.collaborationDialog.sourceFormElements = 
               sourceFormObj.elements;
	      },
		cobrowse : function() {
	         this.getSourceFormElements();
		   this.collaborationDialog.openCollaborationDialog();
		}
       }
);

El resto de las declaraciones de función son eliminadas porque usted puede simplemente obtenerlas del widget base cea.widget.ClickToCall.

Modificación del widget JavaScript CollaborationDialog

Después de completar las modificaciones al widget ClickToCall, usted puede hacer los cambios necesarios al JavaScript del widget CollaborationDialog. Al igual que con el widget extendido ClickToCall anterior, comience realizando modificaciones a la declaración y a la sección variables de la fuente. Modifique el nombre del widget que está declarando como acme.widget.CollaborationDialog, y cambie la lista del widget base para que solamente contenga cea.widget.CollaborationDialog.

Declare las variables sourceFormElements y sourceForm . El widget extendido ClickToCall hace referencia a los sourceFormElements; usted utilizará la variable sourceForm más tarde. Como con el widget CallNotification, el valor inicial de la variablesourceForm viene del valor del atributo sourceForm cuando un usuario declara el widget ClickToCall que usa HTML.

Listado 15. Declaraciones para widget CollaborationDialog extendido
dojo.provide("acme.widget.CollaborationDialog");
dojo.declare("acme.widget.CollaborationDialog",           
[cea.widget.CollaborationDialog ],
{
sourceFormElements : null,
sourceForm : “”,

Agregue un nuevo método denominado setTargetFormElements que contiene la lógica para copiar los valores del formulario original a la ´página claimform.html del nuevo formulario interactivo en collabform.html.

Listado 16. Transferencia de valores al formulario destino
setTargetFormElements : function() {
   dojo.withDoc(this.collaborationDialogContentPane.domNode.contentWindow.document, 
      function() {
         if(this.sourceFormElements != null) {
            var matchedCount = 0;
	        for(ct=0; ct < this.sourceFormElements.length; ct++) {
		var sourceElement = this.sourceFormElements[ct];
		var currElement = dojo.byId(sourceElement.id);
		if(currElement != null) {
		    if(currElement.options && sourceElement.options) {
			for(optCt=0; optCt < sourceElement.options.length; optCt++) {
			    if(sourceElement.options[optCt].selected) {
			        currElement.options[optCt].selected = true;
				window.top._ceaTwoWayForm._widgetHandlers
				[currElement.id]._changedByUser = true;
				window.top._ceaTwoWayForm._widgetHandlers
				[currElement.id]._handleOnChange(currElement.value);
				matchedCount++;
				break;
			    }
			}
		     }
		     else if(sourceElement.value != ""){
		        console.log(sourceElement);
			currElement.value = sourceElement.value;
			window.top._ceaTwoWayForm._widgetHandlers[currElement.id].
			_changedByUser = true;
			window.top._ceaTwoWayForm._widgetHandlers[currElement.id].
			_handleOnChange(currElement.value);
										
		     }
		 }
	  }
	}
    }, this);
},

setTargetFormElements se asegura el uso de la función dojo.withDoc para poder interactuar con el DOM incluido en la ventana de la sesión de co-navegación. Por lo tanto, la función en el ejemplo puede interactuar con los elementos de la página collabform.html. La función setTargetFormElements se mueve en círculos alrededor de los elementos de la secuencia sourceFormElements y, por cada uno, intenta encontrar un elemento en el formulario actual (la página collabform.html ) con una ID que concuerde. Después de encontrar el valor adecuado, el código provoca un acontecimiento de cambio usando el administrador del widget para la instancia del widget TwoWayForm.

Sólo debe asegurarse de llamar a la nueva función antes de que el formulario aparezca en la sesión de co-navegación del cliente. Usted puede insertar una llamada en la función openCollaborationDialog existente, tal como se observa en el Listado 17.

Listado 17. Método openCollaborationDialog actualizado
openCollaborationDialog : function() {
   this.setTargetFormElements();
   this.inherited(arguments);
}

Los otros métodos son eliminados, porque el widget extendido los obtiene del widget base cea.widget.CollaborationDialog.

Actualice la página claimform.html para incluir el nuevo widget ClickToCall por asociación, al nuevo widget CollaborationDialog. Esto se logra simplemente actualizando las sentencias de reclamo del dojo y las importaciones de CSS, como se observa en el Listado 18.

Listado 18. Importaciones actualizadas para claimform.html
 <style type="text/css">
@import "ceadojo/dijit/themes/tundra/tundra.css";
@import "ceadojo/dojo/resources/dojo.css";
@import "ceadojo/cea/widget/ClickToCall/ClickToCall.css";
@import "ceadojo/cea/widget/Cobrowse/Cobrowse.css";
@import "ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

<script>
ceadojo.registerModulePath("acme","../acme");
ceadojo.require("dijit.form.TextBox");
ceadojo.require("dijit.form.SimpleTextarea");
ceadojo.require("dijit.form.ComboBox");
ceadojo.require("acme.widget.ClickToCall");
</script>

Luego de estos cambios al paquete y del redespliegue de la aplicación, usted puede verificar la nueva función. Empezando en la página claimform.html, ingrese el nombre del solicitante, la fecha y hora del accidente, el número del informe policial, y algunos bits más de información, como se observa en la Figura 11.

Figura 11. Formulario de creación de reclamo del cliente
Formulario de creación de reclamo del cliente

Supongamos que en este punto usted necesita ayuda de un representante de atención al cliente, así que hace clic en el botón Call. Una vez que usted está conectado, el representante decide que sería mejor iniciar una sesión de co-navegación para resolver el problema. Cuando la ventana de co-navegación se abre, usted ve que la información que ingresó en la página claimform.html automáticamente se transfiere a la página collabform.html en la sesión de co-navegación.

Figura 12. Formulario completado para la creación de reclamos en sesiones de co-navegación
Formulario completado para la creación de reclamos en sesiones de co-navegación

Ya que el código en el Listado 16 manualmente dispara los eventos onChange, la información del formulario inicial se transfiere tanto a la ventana de co-navegación del cliente como del representante de servicios al cliente sin modificaciones adicionales.


Resumen

Los widgets Dojo del WebSphere CEA Feature Pack proporcionan la capacidad para mejorar de manera significativa las capacidades de comunicación y colaboración de sus aplicaciones en línea. Una vez fuera del cuadro, usted puede incluir estos widgets en sus aplicaciones existentes y nuevas para permitir las interacciones del click-to-call, de la co-navegación, y del formulario interactivo. Si las funciones del cuadro no le proporcionan lo que necesita, usted puede usar los elementos esenciales de Dojo para las funciones de personalización que requiere su aplicación. Vea WebSphere CEA Feature Pack si cree que sus aplicaciones Web pueden beneficiarse con una mejor comunicación y colaboración.


Descargar

DescripciónNombretamaño
Sample code for this articlesamplecode.zip24 KB

Recursos

Aprender

Obtener los productos y tecnologías

  • Download el WebSphere Application Server V7 Feature Pack for CEA.
  • Modifique su próximo proyecto de desarrollo de fuente abierta con el IBM trial software software, el cual se puede descargar o adquirir en DVD.

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Lotus, WebSphere
ArticleID=966358
ArticleTitle=Haga posible una experiencia colaborativa con los formularios HTML
publish-date=08032011