Generador de Proxy remoto JavaScript.

Transcripción

1 Generador de Proxy remoto JavaScript. 1. Introducción: La aplicación genera un proxy JavaScript a partir de un servicio web de.net con extensión.asmx, tomado como entrada. Automatizando de esta manera la tarea, para que el desarrollador no pierda tiempo ni esfuerzo realizando un desarrollo totalmente mecánico en lenguaje JavaScript del proxy remoto. Así los métodos del servicio.asmx son publicados y están disponibles para su uso desde cualquier página web, ocultando la complejidad del envió de parámetros, la recepción de objetos retornados, la serialización y deserialización de objetos a formato JSON. El proxy generado depende de las librerías de JQuery ya que las utiliza para invocar a los métodos del servicio web. 2. Código de ejemplo del servicio web y del proxy generado: En la Figura A, podemos ver como los métodos del servicio web (WebMethods), son transformados en sus homólogos, métodos JavaScript del proxy remoto. Figura A. La Figura B y la Figura C, muestran con más detalles el código fuente del WebMethod Add escrito en C Sharp y su correspondiente método en el proxy remoto escrito en JavaScript. El método Add retorna una lista de objetos persona serializada al formato JSON, para esto se utilizó el objeto JavaScriptSerializer y su método Serialize. En la otra punta el proxy remoto JavaScript toma este string y lo transforma de nuevo a objetos para que el desarrollador pueda utilizarlo sin tener que preocuparse por su deserialización. El proxy utiliza librerías JQuery para serializar y deserializar los objetos que van y viene desde el cliente al servidor web y viceversa.

2 Figura B. Figura C.

3 3. Como invocar los métodos remotos como si estuvieran en el cliente: Los métodos publicados por el proxy remoto se convierten en métodos estáticos JavaScript, no hay que hacer un new de la clase para crear el objeto. La Figura D muestra una simple invocación para el método Add. Figura D. La Figura E, muestra el código fuente JavaScript, que invoca al método Add pero en forma más completa con manejo de excepciones. Observemos que la excepción también es manejada como un objeto ya que también ha sido serializada. Figura E. 4. Manejo de excepciones: El proxy generado nos permite manejar las excepciones de las siguientes maneras: WebServiceSumador.AlertException Descripción True Le indica al proxy que ante la aparición de una excepción esta debe ser mostrada al usuario mediante un alert() False Le indica al proxy que ante la aparición de una excepción este debe burbujearla mediante el uso de un thow de JavaScript, siendo responsabilidad del desarrollador el manejo posterior de la misma. El código mostrado en la Figura F, muestra el establecimiento de la propiedad AlertException a false, razón por la cual se ha encerrado la invocación al método Add dentro de un bloque try-catch, al ocurrir una excepción el bloque catch muestra al

4 usuario las tres propiedades Message, StackTrace, ExceptionType de la excepción ocurrida en el lado servidor. Figura F. La Figura G muestra el código que libera al desarrollador del manejo de las excepciones ya que el establecimiento de la propiedad AlertException a true causa que el comportamiento sea el de mostrar mediante un alert() la excepción ocurrida en el servidor. Figura G. Luego de la ejecución del código de la Figura G podemos ver en el explorador web el siguiente mensaje de error causado por el método alert(), observemos la serializarían con formato JSON del error: Figura H.

5 5. Establecimiento de la URL del servicio web: La propiedad WebServiceSumador.URL, es del tipo string y nos brinda la posibilidad de establecer la URL en la cual se encuentra el servicio web. La siguiente figura muestra que se establece la propiedad WebServiceSumador.URL = ' ya que el servicio web se encuentra en: Si la propiedad no se establece y se utiliza su valor por defecto, el proxy entiende que la URL del servicio web es la misma que la URL en la que se encuentra la página web que lo invoca. Figura I. 6. Uso del generador de proxy remoto: Consta de solo 4 pasos a saber: (Paso 1) Escoger el path al archivo.dll resultado de la compilación del servicio web.asmx (Paso 2) Escoger el path donde queremos guardar el código del proxy JavaScript generado. (Paso 3) El sistema muestra al usuario un resumen de lo seleccionado. (Paso 4) Generar el código fuente JavaScript del proxy remoto. Figura J.

6

7 7. Plantillas (templates): La aplicación generadora utiliza plantillas (Templates) y marcadores (Placeholder) del tipo NVelocity. De esta manera se logra la separación entre modelo y vista dando la posibilidad al desarrollador de cambiar dicha vista sin tener que cambiar el modelo o en otras palabras pude modificar el código JavaScript generado sin la necesidad de recompilar la aplicación. En el directorio \JsonProxyGenerator\Templates podemos encontrar los siguientes archivos de plantilla JavaScript.vm y script.vm el siguiente es un pedazo de código fuente de estos archivos: Figura K. Podemos editar este archivo con un simple editor de texto plano como el notepad.exe o algo más potente y con coloreado de sentencias como ser Notepad++ y alterar el código generado a nuestro antojo. En la línea 11 podemos ver la sentencia foreach provista e interpretada por NVelocity y que aquí la utilizamos para generar el código JavaScript de cada uno de los métodos que componen nuestro servicio web. Los marcadores comienzan con el signo $, por ejemplo el marcador $webservice.webmethods, de la línea 11, retorna la lista de métodos que componen el servicio web del cual queremos generar su archivo proxy. 8. Referencias: Lista de referencias relacionadas con esta aplicación: Descripción Enlace JQuery JSON NVelocity Notepad++ Paint.net JSON (JavaScript Object Notation)