Tesina Ajax

Ajax: Capacidades de las libreras existentes en el mercado
Contenido
INTEGRANTES DEL TRABAJO ........................................................................................................... 4 TEMA .............................................................................................................................................. 5 PRLOGO ........................................................................................................................................ 6 INTRODUCCIN............................................................................................................................... 7 CAPTULO 1: ANTEPROYECTO .......................................................................................................... 9 PROBLEMA ......................................................................................................................................... 10 DESARROLLO DEL PROBLEMA .................................................................................................................. 10 Por qu importa la experiencia del usuario?............................................................................. 10 Caractersticas y limitaciones de las actuales aplicaciones web................................................. 10 Complejidades del modelo actual ............................................................................................... 11 Qu necesitamos de las aplicaciones web? .............................................................................. 12 Qu son las RIAs? ...................................................................................................................... 13 Quines deberan considerar las RIAs y porque? ...................................................................... 14 RIAs para aplicaciones empresariales......................................................................................... 14 AJAX ............................................................................................................................................ 14 XML / JSON ................................................................................................................................. 15 DOM............................................................................................................................................ 16 HTML - XHTML / CSS ................................................................................................................... 17 JavaScript .................................................................................................................................... 17 XMLHttpRequest ......................................................................................................................... 18 Interaccin tradicional con el servidor vs. Interaccin AJAX ....................................................... 18 Bloques de una aplicacin AJAX.................................................................................................. 20 Caractersticas del objeto XMLHTTPRequest .............................................................................. 21 Creando el objeto XMLHttpRequest ........................................................................................... 22 Algunos mtodos y propiedades del objeto XMLHTTPRequest .................................................. 23 JUSTIFICACIN Y RELEVANCIA.................................................................................................................. 24 FACTIBILIDAD DEL ESTUDIO .................................................................................................................... 25 Factibilidad Tcnica .................................................................................................................... 25 Factibilidad Econmica ............................................................................................................... 25 Factibilidad Operativa ................................................................................................................ 25 OBJETIVOS.......................................................................................................................................... 26 Generales .................................................................................................................................... 26 Especficos................................................................................................................................... 26 HIPTESIS .......................................................................................................................................... 26 VARIABLES .......................................................................................................................................... 26 UNIVERSO DE ESTUDIO Y DIMENSIN TEMPORAL ....................................................................................... 27 Universo de estudio .................................................................................................................... 27 Temas comprendidos en la tesina .............................................................................................. 27 TCNICAS E INSTRUMENTOS ................................................................................................................... 27 DIAGRAMA DE GANTT........................................................................................................................... 28 CAPTULO 2: FRAMEWORKS, CONCEPTOS ..................................................................................... 29 QU ES UN FRAMEWORK?.................................................................................................................... 30 QU ES UN FRAMEWORK WEB? ............................................................................................................. 30 QU ES UN FRAMEWORK AJAX? ............................................................................................................ 30 CAPTULO 3: FRAMEWORKS JAVASCRIPT ...................................................................................... 31
PROTOTYPE ........................................................................................................................................ 32 Funcin $ (dlar) ......................................................................................................................... 33 Funcin $F ................................................................................................................................... 33 El objeto Form ............................................................................................................................. 34 Mtodos Ajax .............................................................................................................................. 35 RICO.................................................................................................................................................. 38 Rico Grids .................................................................................................................................... 39 Estilos CSS ................................................................................................................................... 42 Compatibilidad de LiveGrid con los distintos navegadores de internet ...................................... 44 Efectos de animacin .................................................................................................................. 44 AJAX ............................................................................................................................................ 46 SCRIPT.ACULO.US ................................................................................................................................. 48 Composicin de la librera........................................................................................................... 49 Instalacin .................................................................................................................................. 49 Componentes AJAX ..................................................................................................................... 49 JQUERY .............................................................................................................................................. 56 Funciones y mtodos .................................................................................................................. 56 Funciones para eventos .............................................................................................................. 57 Funciones para efectos visuales.................................................................................................. 58 Funciones para AJAX ................................................................................................................... 58 Funciones para CSS ..................................................................................................................... 61 Funciones para nodos DOM ........................................................................................................ 62 Otras funciones tiles ................................................................................................................. 63 DOJO TOOLKIT .................................................................................................................................... 64 Instalacin .................................................................................................................................. 65 Dijit: La librera de Widgets de Dojo ........................................................................................... 66 Funcionamiento .......................................................................................................................... 69 ANNA ................................................................................................................................................ 73 Descripcin de sus atributos y funciones bsicas ....................................................................... 74 BINDOWS ........................................................................................................................................... 76 Forma de trabajo ........................................................................................................................ 76 Objetos y programacin orientada a objetos ............................................................................. 80 Widgets ....................................................................................................................................... 80 Licencia ....................................................................................................................................... 81 Ventajas ...................................................................................................................................... 81 CUANDO USAR FRAMEWORKS JAVASCRIPT? ............................................................................................ 81 CAPTULO 4: LIBRERAS ULTRALIVIANAS JAVASCRIPT ................................................................... 83 INTRODUCCIN.................................................................................................................................... 84 AJS ................................................................................................................................................... 84 FLEEGIX.JS .......................................................................................................................................... 85 RIALTO............................................................................................................................................... 85 CUANDO USAR LIBRERAS ULTRALIVIANAS JAVASCRIPT? ............................................................................. 86 CAPTULO 5: LIBRERAS DE LENGUAJE O PLATAFORMA ESPECFICA. MICROSOFT.......................... 87 ATLAS ................................................................................................................................................ 88 Qu es atlas? ............................................................................................................................. 88 Arquitectura de Atlas .................................................................................................................. 88 Instalacin de Atlas..................................................................................................................... 88 Desarrollo de aplicaciones Atlas ................................................................................................. 88 Componentes clave ..................................................................................................................... 89 El modelo de programacin de Atlas .......................................................................................... 89 CUANDO USAR ATLAS?...................................................................................................................... 101 CAPTULO 6: LIBRERAS DE LENGUAJE O PLATAFORMA ESPECFICA. JSP ..................................... 102 AJAXANYWHERE ................................................................................................................................ 103 Instalacin ................................................................................................................................ 103
Modo de trabajo ....................................................................................................................... 104 CUANDO USAR AJAXANYWHERE? ........................................................................................................ 108 CAPTULO 7: LIBRERAS DE LENGUAJE O PLATAFORMA ESPECFICA. COLDFUSION ...................... 109 AJAXCFC ......................................................................................................................................... 110 Caractersticas destacables de AjaxCFC .................................................................................... 110 Ejemplos ................................................................................................................................... 110 CUANDO USAR AJAXCFC? ................................................................................................................. 115 CAPTULO 8: LIBRERAS MULTILENGUAJE .................................................................................... 116 SAJAX (SIMPLE AJAX TOOLKIT) ............................................................................................................. 117 Versin ...................................................................................................................................... 117 Instalacin ................................................................................................................................ 117 Cmo trabaja SAJAX? .............................................................................................................. 117 Compatibilidad con los navegadores ........................................................................................ 119 Limitaciones .............................................................................................................................. 119 WEBORB......................................................................................................................................... 119 Rich Client System ..................................................................................................................... 121 BACKBASE ........................................................................................................................................ 125 Las distintas ediciones de Backbase ......................................................................................... 125 Las soluciones Backbase ........................................................................................................... 126 Rich Client Framework .............................................................................................................. 127 Ejemplo Backbase Hola Mundo ............................................................................................. 128 Cundo usar Backbase? .......................................................................................................... 134 CAPTULO 9: COMPLEMENTOS GRFICOS PARA LIBRERAS JAVASCRIPT ..................................... 136
JQUERY UI ....................................................................................................................................... 137
CAPTULO 10: CONCLUSIN ........................................................................................................ 139 BIBLIOGRAFA ............................................................................................................................. 142 SITIOS WEB CONSULTADOS .................................................................................................................. 142 LIBROS ............................................................................................................................................. 142 REVISTAS.......................................................................................................................................... 142 PAPERS ............................................................................................................................................ 142
Integrantes del trabajo

Integrante Nombre: Vctor Daniel Atencio Direccin: Telfono: 0343 156 576343 e-mail: victoratencio80@gmail.com Integrante Nombre: Diego Rafael Graf Direccin: Lavalle 1147, Crespo, Entre Ros Telfono: 0343 155 070373 e-mail: diegograf@arnet.com.ar
Tema
Prlogo
Al realizar un sistema web de cualquier tipo (ya sea comercial, de gestin empresarial, de asistencia al usuario, etc.) nos encontramos con la dificultad de mejorar la experiencia del usuario tratando de acercarnos lo mximo posible a la experiencia vivida al utilizar aplicaciones de escritorio. La deuda existente en este campo est en la actualidad siendo suplida por la llamada Web 2.0, dentro de la cual juega un papel preponderante la metodologa AJAX. A partir de esta evolucin de tecnologas surgieron infinidad de libreras o frameworks que facilitan el trabajo del desarrollador a la hora de encarar un proyecto con AJAX. Pero muchas veces esta infinidad de libreras se transforman en una infinidad de opciones que terminan desorientando a los gestores del proyecto, haciendo que se tomen decisiones equivocadas o que justamente esta decisin se prolongue ms de lo debido. A travs de esta tesina iremos estudiando libreras existentes en el mercado explicando sus principales caractersticas, sus alcances y por lo tanto su campo de aplicacin, brindando un panorama minucioso sobre la conveniencia o no de tal o cual librera para encarar un proyecto que posea caractersticas propias. Los estudios se desarrollarn tericos / prcticos para las libreras importantes y que sean gratuitas y de libre distribucin, debido al abaratamiento de los costos y a la masividad de su utilizacin, justamente por la misma razn.
Introduccin
Al momento de escoger una herramienta informtica para llevar adelante un negocio se tienen dos opciones, las aplicaciones de escritorio y las aplicaciones web. Si bien la seleccin de una u otra tendr que ver con el tipo de negocio a implementar y las necesidades que deba satisfacer el sistema, ambas opciones presentan beneficios y falencias, por lo que encontrar un equilibrio entre estos puntos ser lo que determine la decisin a tomar. La diferencia ms notoria existente entre las aplicaciones de escritorio (Desktop Aplication) y las aplicaciones web (Web Aplication) radica en que estas ltimas presentan una pobre experiencia de usuario, con tiempos de procesamientos altos, lo que lleva a tener costos ocultos en este tipo de sistemas. Por lo antes dicho es que se est tratando de acortar la distancia existente entre estos tipos de aplicacin en cuanto a la experiencia del usuario y velocidad. Para esto en el mundo del desarrollo web se est hablando cada da ms de las denominadas aplicaciones Web 2.0 conformadas por las herramientas RIA y AJAX. Mediante el uso de esta tecnologa se busca llevar un paso ms adelante a las aplicaciones web para no solo aparejar los dos tipos de sistemas sino que tambin poder hacer de los sistemas web ms beneficiosos. En los principios de la web los contenidos de Internet eran de tipo expositoras, en los cuales los usuarios hacan lectura de estos. La indexacin de contenidos se haca de forma directa, es decir, se tena acceso a los contenidos de un sitio web directamente desde el propio sitio. Fue Tim Berners-Lee1 quien introdujo por primera vez el concepto de web semntica, la cual indica que Internet debe ser un medio por el cual se pueda tener acceso a informacin como as tambin poder brindar la misma mediante procesos interactivos que puedan interpretar la informacin disponible. La web semntica tiene como objetivo crear un medio universal para el intercambio de informacin basado en representaciones del significado de los recursos de la web, de una manera inteligible para las mquinas. Con ello se pretende ampliar la interoperabilidad entre los sistemas informticos y reducir la mediacin de operadores humanos en los procesos inteligentes de flujo de informacin. La Web 2.0 es la representacin de la evolucin de las aplicaciones tradicionales hacia aplicaciones web enfocadas al usuario final. El Web 2.0 es una actitud y no precisamente una tecnologa. Es la transicin que se ha dado de aplicaciones tradicionales hacia aplicaciones que funcionan a travs de la web, enfocada al usuario final. Se trata de aplicaciones que generen colaboracin y de servicios que reemplacen las aplicaciones de escritorio. La ms profunda de las transformaciones de la Web 2.0 reside en la reinvencin de la manera en que la informacin circula por la Red, democratizando y poniendo a disposicin de todos los usuarios la capacidad de programar el comportamiento de diferentes flujos de datos que interactan entre s.
Sir Timothy "Tim" John Berners-Lee, naci el 8 de junio de 1955 en Londres, Reino Unido, se licenci en Fsica en 1976 en el Queen's College de la Universidad de Oxford. Es considerado como el padre de la web. Tim y su grupo desarrollaron el lenguaje HTML, el protocolo HTTP y el sistema de localizacin de objetos en la web URL (Universal Resource Locator)
1
Aun cuando los conceptos de la Web 2.0 estn en pleno auge y cada da se observa la asimilacin de los mismos por parte de la comunidad de desarrolladores que implementan sus nuevas aplicaciones siguiendo esta tendencia, ya se est comenzando a hablar de lo que ser en el futuro la Web 3.0 que trata de cmo evolucionara Internet para llegar a realizar tareas totalmente complejas. La Web 3.0 buscara lograr una combinacin efectiva entre la inclusin de contenido semntico en las pginas web y el uso de inteligencia artificial que saque partido de ella. En este sentido los recelos son muchos pues tradicionalmente los avances de esta ciencia han sido lentos y cargados de dificultades. El objetivo es la combinacin de las tcnicas de inteligencia artificial con el acceso a capacidad humana de realizar tareas extremadamente complejas para un ordenador y de esa forma rellenar los huecos que impiden progresar esta disciplina.
Tiempo Nombre Caractersticas
Pasado Web 1.0 Internet expositiva de lectura Indexacin simple
Presente Web 2.0 Internet social de lectura escritura Web semntica manual
Futuro Web 3.0 Internet global de lectura escritura multimedia Web semntica automtica
Tipo de acceso
En el presente estamos viviendo la explosin de la Web 2.0 la cual es un concepto independiente de toda tecnologa existente pero cuya implementacin se sustenta a travs de estas. Entre estas tecnologas se encuentras las RIA y AJAX.
Captulo 1: Anteproyecto
Problema
Qu aspectos se deben tener en cuenta a la hora de seleccionar un framework AJAX que se ajuste adecuadamente a las necesidades de un proyecto web, y por lo tanto, que librera es la ms adecuada para cada necesidad?
Desarrollo del problema

Se encuentra entre nosotros una nueva generacin de aplicaciones web, una tendencia impuesta por grandes empresas, que desarrollan recursos para que este tipo de aplicaciones sean una realidad. A lo largo de esta tesina analizaremos de qu se trata esta tecnologa, para quin est pensada, y cules son las herramientas y las libreras ms tiles para su implementacin. Durante la ltima dcada, Internet ha emergido como la plataforma preferida para el desarrollo de aplicaciones distribuidas. Esta demanda para construir programas de complejidad creciente super la habilidad natural de las aplicaciones web para representar estos escenarios. El resultado frecuente son experiencias frustrantes y confusas que desalientan su uso y llevan a inversiones no realizadas. En respuesta al desafo que implica la fusin entre las Web Applications y las aplicaciones Desktop tradicionales, surgi un nuevo concepto para el desarrollo de aplicaciones basadas en Internet, Rich Internet Aplications, o sea Aplicaciones Ricas en Internet. Estas ofrecen diferentes capacidades y mejores experiencias, altamente interactivas, en el uso de software sobre la red. Por qu importa la experiencia del usuario? El software interactivo ha evolucionado durante los ltimos 40 aos, y cada vez brinda interfaces de usuario con ms funcionalidades. Virtualmente, cualquier ser humano en nuestra sociedad moderna interacta con software a diario (desde aplicaciones de escritorio y cajeros automticos, hasta la agenda del telfono celular), y pocos de ellos tienen un perfil tcnico o desean conocer cmo funcionan las cosas. Es por eso que el software interactivo, a partir del mismo concepto de usabilidad, se ha vuelto una cuestin central en el desarrollo. Su foco se est ampliando da a da y se le reconoce una gran importancia al momento de brindar una agradable experiencia al usuario. En la actualidad, estamos en un perodo de transicin, desde la economa de servicios, hasta una basada en la experiencia, en la cual las sensaciones se convierten en la fuente principal de la demanda de los consumidores. La tecnologa por s sola no est empujando este cambio, pero el impacto de las nuevas tecnologas de plataforma de cliente2 acelerar el surgimiento de ricas y expresivas experiencias de usuario. Las organizaciones que desarrollen este software que se adapte a estas caractersticas y sepa satisfacer a las demandas y deseos de los usuarios poseern una ventaja competitiva en la nueva economa de la experiencia. Caractersticas y limitaciones de las actuales aplicaciones web Internet, como plataforma para el desarrollo de aplicaciones web, ha emergido
Cualquier elemento de un sistema de informacin que requiere un servicio mediante el envo de solicitudes al servidor. Fuente: http://www.mastermagazine.info/termino/4292.php
2
10
rpidamente desde la oscuridad para pasar a tomar una posicin dominante en lo que se refiere a la plataforma de computacin en la empresa y entre empresas. Durante ms de una dcada, hemos asistido a un crecimiento en las capacidades de estas aplicaciones. Con cada ola de tecnologas cliente / servidor3, se ha superado en capacidad, integracin y capacidad de respuesta la generacin previa. Las aplicaciones web han recorrido un largo camino desde las primeras pginas estticas y scripts4 CGI5. A pesar de estas crecientes capacidades, la demanda sobre las habilidades de este tipo de aplicaciones contina por delante de las cualidades ofrecidas por la plataforma y sus tecnologas subyacentes. Las encuestas ms recientes muestran que ms del 60% de los usuarios de estas aplicaciones sienten que es difcil encontrar lo que buscan y califican como mala la experiencia al comprar o navegar. Esto hace necesario que, a medida que ms y ms gente se sume al uso de estas aplicaciones, la demanda de una buena experiencia de uso aumente. ste es solo un ejemplo que puede considerarse la punta del iceberg. En lo sustancial, las aplicaciones web tradicionales basadas en HTML sufren un desafo primordial: la incapacidad de representar adecuadamente las complejidades de las aplicaciones actuales. Complejidades del modelo actual Veamos algunas de las complejidades mencionadas: Complejidad de procesos: La representacin requerida para un proceso de mltiples pasos introduce cierta complejidad en el. En HTML, una tarea multipaso puede ser representada en una pgina. Sin embargo, debido a las limitaciones inherentes al modelo de interactividad de HTML, esto puede resultar en una pgina muy larga y compleja, que dificulte sobremanera la tarea de los usuarios. El proceso natural para superar esta limitacin es partir ese proceso en sucesivas interacciones, con la consecuente prdida de estado, propia del protocolo6 HTTP. Este proceso debe ser secuencial y, por lo tanto, el usuario tiene que intercambiar entre estas pginas continuamente. El resultado es una experiencia lenta y frustrante. Complejidad de datos: Examinar o visualizar patrones dentro de un conjunto de datos o informacin es una capacidad cada vez ms creciente en las aplicaciones del presente. Las herramientas actuales estn limitadas a hallar patrones en los datos y a representarlos en una interfaz web. Pero en este momento, se requieren nuevas maneras de visualizar los datos en forma interactiva. Esta exploracin interactiva permite a los usuarios observar un grfico y, luego, hacer Drill Down7 cliqueando
En informtica, un servidor es un tipo de software que realiza ciertas tareas en nombre de los usuarios. El trmino servidor ahora tambin se utiliza para referirse al ordenador fsico en el cual funciona ese software, una mquina cuyo propsito es proveer datos de modo que otras mquinas puedan utilizar esos datos. Fuente: http://www.masadelante.com/faq-servidor.htm 4 Los scripts son un conjunto de instrucciones generalmente almacenadas en un archivo de texto que deben ser interpretados lnea a lnea en tiempo real para su ejecucin, se distinguen de los programas, pues deben ser convertidos a un archivo binario ejecutable para correrlos. Fuente: http://www.alegsa.com.ar/Dic/script.php 5 Tecnologa de la WWW que permite a un cliente (navegador web) solicitar datos de un programa ejecutado en un servidor web. CGI especifica un estndar para transferir datos entre el cliente y el programa. Fuente: http://www.alegsa.com.ar/Dic/cgi.php 6 Protocolo de red: son reglas y procedimientos para la comunicacin. Protocolo de Internet: protocolo de red para la comunicacin de datos a travs de paquetes conmutados. Fuente: http://fmc.axarnet.es/redes/tema_06.htm 7 Tcnica en la que el usuario con solo hacer click en algn dato o icono, puede ir abriendo ventanas que le permitan profundizar y obtener ms detalles del evento que est analizando. Fuente: http://www.mdo.cl
3
11
sobre l hasta obtener un mayor detalle. Cuando se proveen herramientas adecuadas para la visualizacin de datos, las relaciones entre ellos y la complejidad de encontrar patrones se reduce notablemente. Complejidad de configuracin: Las aplicaciones web suelen presentar dificultades para un proceso cada vez ms recurrente, como la seleccin o adaptacin de un producto a un cliente. Al tener grandes limitaciones inherentes a la tecnologa (asociada al procesamiento del lado del cliente y aplicada a la seleccin o personalizacin de un producto), no permiten obtener una grata experiencia del usuario al momento de hacer un proceso de seleccin y customizacin. Complejidad de escalamiento: El modelo tecnolgico de las aplicaciones web tradicionales, basadas en el mecanismo requerimiento respuesta, es ineficiente para transportar los crecientes volmenes de datos necesarios en las aplicaciones actuales. Cada nuevo conjunto de datos requeridos al servidor implica no solo un viaje hacia este, sino tambin el envo de elementos que no han sufrido alteraciones. Esta respuesta, generalmente basada en un flujo de datos con HTML como dialecto por interpretar en el browser, suele ser un poco pesada en aplicaciones de trabajo intensivo de datos. Estas limitaciones hacen que el ancho de banda consumido y la manera poco eficiente de manejarlo redunde en una gran dificultad de las aplicaciones web para escalar. Limitaciones en el feedback: Las aplicaciones altamente interactivas, como los juegos y otros programas de negocios, introducen el concepto de Complejidad de Feedback, lo cual requiere que el usuario acte sobre la aplicacin ante escenarios de cambio rpido. Esto, tradicionalmente, ha sido casi imposible de representar en pginas HTML. Lo que se requiere es tener un mnimo procesamiento del lado del cliente, que permita llevar a cabo esas interacciones sin tener que recurrir constantemente al servidor. Qu necesitamos de las aplicaciones web? Las aplicaciones web de negocios demandan ms caractersticas interactivas, como se acaba de describir. Es claro, tambin, que la incidencia de Internet y de las aplicaciones seguir creciendo en los negocios. Por eso, las capacidades actuales de las aplicaciones web tienen que ampliarse, pues estas no distan demasiado de las verdes pantallas de mainframe en cuanto a la interactividad de usuario, y hoy estn muy lejos de los programas de escritorio. Para resolver las demandas actuales, las aplicaciones web deberan ser capaces de: Correr a travs de Internet sobre mltiples plataformas de hardware y dispositivos cliente. Ejecutar correctamente en condiciones de bajo o alto ancho de banda. Recuperar capacidades de procesamiento en el cliente, no solo slo capacidades de refresco de pantalla. Entregar grandes interfaces de usuarios con altos niveles de interactividad. Utilizar capacidades multimedia (audio, video, imgenes y texto) de manera integrada. Soportar el uso tanto en lnea como fuera de lnea.
12
Permitir que el cliente determine a que contenido necesita acceder, sin afectar porciones de la pantalla que no cambien (recuperacin asincrnica de datos). Acceder a servicios mltiples (como Java8 y .Net9) y repositorios de datos. Integrarse con sistemas y aplicaciones heredadas. Permitir incrementos progresivos a las actuales aplicaciones web para seguir obteniendo valor de las inversiones actuales. Qu son las RIAs? Las RIAs (Rich Internet Aplications) brindan una solucin al conjunto de necesidades presentadas. Pero la gran pregunta a realizar es: Quines deberan implementarlas? Cmo se utilizan a nivel empresarial? Las RIAs son la combinacin de lo mejor de la funcionalidad de UI (User Interface) de una aplicacin desktop, con el amplio alcance y el bajo costo de deployment de una Web Aplication, y lo mejor de las comunicaciones interactivas (audio, video y colaboracin). El resultado es una aplicacin que presenta una muestra ms intuitiva y una efectiva experiencia de usuario; especficamente, lo mejor de la web representado por la facilidad de actualizacin y de deployment centralizado, disponibilidad a travs de diversas plataformas y uso del download progresivo de las aplicaciones web. Lo mejor de las comunicaciones significa la incorporacin de audio y video en dos vas en el comienzo de la era de la convergencia digital IP.10 Todo esto quiere decir que, en las RIAs, el cliente es capaz de realizar ms que solo el refresco de las pginas, ya que estas proveen la habilidad de efectuar clculos, enviar y recibir datos asincrnicamente en segundo plano, redibujar una seccin de la pantalla, y acceder a audio y video de una manera altamente integrada. Una RIA otorga, entonces, una slida plataforma tcnica que, efectivamente, recupera las habilidades de la capa cliente (ya olvidada) en nuestras aplicaciones, para asemejarse a las aplicaciones de escritorio, ofreciendo, adems, la web como plataforma. Tambin se adecua al tradicional proceso de desarrollo y, ms an, es una plataforma que permite rpidamente integrar y dar nueva vida a programas existentes a travs de Web Services11 o de conectores especializados. Adems, da la posibilidad de reducir costos a partir de una mayor productividad en el desarrollo de la capa de presentacin, que, hoy en da, se lleva una gran parte del esfuerzo de un proyecto (alrededor de un 60%). Las RIAs no representan una revolucin sobre el paradigma actual de las aplicaciones web, sino una evolucin, en las que se toman los mejores aspectos de las aplicaciones web y las de escritorio. La evolucin de la arquitectura de sistemas tiene forma de zigzag. Si la analizamos en trminos de usabilidad y alcance, observaremos que las aplicaciones monolticas de mainframe
Lenguaje de programacin orientado a objetos. Fuente: http://www.alegsa.com.ar/Dic/java.php 9 El Microsoft .NET Framework, es un componente de software que puede ser o es incluido en los sistemas operativos Microsoft Windows. Provee soluciones pre-codificadas para requerimientos comunes de los programas y gestiona la ejecucin de programas escritos especficamente para este framework. Fuente: http://www.alegsa.com.ar/Dic/.net%20framework.php 10 Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera 11 Es un sistema de software diseado para soportar la interoperabilidad mquina - mquina a travs de una red. Este tiene una interfaz descripta en un formato que puede ser procesado por una mquina. Fuente: http://www.desarrolloweb.com/articulos/1852.php
8
13
no difieren mucho ms que en su alcance desde una red de rea local a Internet, pues sus capacidades de interaccin con el usuario son limitadas. La evolucin de la era cliente-servidor, apoyada en la irrupcin y la consolidacin de las computadoras personales y de las aplicaciones de escritorio, trajo grandes mejoras con respecto a las interfaces de la era anterior. En cambio, las aplicaciones web actuales representan un claro retraso en las capacidades de usabilidad, pero un gran avance en su alcance. Las RIAs, entonces, son la evolucin natural hacia lo mejor de los dos modelos. Quines deberan considerar las RIAs y porque? Durante mucho tiempo, la web a prometido conectar a las empresas con sus futuros clientes, clientes actuales y socios de negocios. Si bien se ha avanzado en este tema, muchos ejecutivos de empresas sienten que no estn capitalizando completamente las promesas de Internet como plataforma de negocios. Las RIAs, a travs de mltiples industrias, permiten realizar pruebas que dan una visin al cliente y analizar el impacto en el negocio que Internet puede realizar sobre ellas. Todas las empresas que en la actualidad estn comenzando a elegir RIAs tienen las siguientes expectativas: Desarrollar nuevos tipos de aplicaciones con capacidades que seran casi imposibles de realizar con las actuales aplicaciones web. Potenciar, guiar y escuchar a sus clientes en lnea de manera ms cercana, para mejorar la lealtad y el servicio, distinguir a su empresa y conducir el desarrollo de un producto o servicio. Crear aplicaciones empresariales que brinden a los usuarios una experiencia nica destinada a ejecutar procesos de negocio con ms eficiencia. Simplificar procesos complejos, como la registracin, la configuracin y la compra, lo que conducir a mayores ingresos. Reducir costos de consumo de ancho de banda asociados a sucesivos refrescos de pgina. RIAs para aplicaciones empresariales La web se ha transformado en la principal plataforma sobre la cual se despliegan las aplicaciones de negocio, no solo para procesos que involucran socios de negocios o programas que los clientes utilizan, sino tambin para los mismos procesos internos. Pueden utilizarse para el desarrollo de aplicaciones empresariales que sean un entorno integrado para las aplicaciones heredadas, la visualizacin de datos de negocio y los portales de informacin o como capa de presentacin para las hoy limitadas aplicaciones web. La visualizacin de datos es un rea en el que las RIAs sobresalen, dado que estas permiten a las empresas crear un nuevo concepto en el anlisis de informacin sin necesidad de utilizar tecnologas propietarias. Pueden presentar la informacin compleja y su anlisis de manera mucho ms simple. AJAX AJAX, acrnimo de Asynchronous JavaScript And XML (JavaScript y XML asncronos), es una tcnica de desarrollo de aplicaciones web que junto de las denominadas RIA y Web 2.0 14
estn en busca acortar las diferencias existentes entre estas las aplicaciones de escritorio. Las aplicaciones AJAX se ejecutan en la mquina cliente, manipulando las pginas actuales dentro de sus navegadores usando mtodos de Document Object Model (ver pgina 16). Puede ser usado para multitud de tareas sin tener la necesidad de recargar toda la pgina HTML cada vez que se realiza un cambio. Generalmente slo requiere enviar pequeas peticiones al servidor, el cual devuelve respuestas relativamente cortas. Esto permite el desarrollo de aplicaciones interactivas con interfaces de usuario ms responsivas gracias al uso de las tcnicas DHTML12. Podemos decir que AJAX es modelo web que permite crear aplicaciones que trabajen en forma asincrnica con el servidor, volcando la mayor parte del procesamiento del lado del cliente. Ajax est formado por diversas tecnologas o herramientas que interactan, existentes en el mercado desde hace ya varios aos. Las tecnologas que forman AJAX son: XHTML y CSS, para crear una presentacin basada en estndares. DOM, para la interaccin y manipulacin dinmica de la presentacin. XML, XSLT13 y JSON, para el intercambio y la manipulacin de informacin. XMLHttpRequest, para el intercambio asncrono de informacin. JavaScript, para unir todas las dems tecnologas.
Figura 1: Tecnologas agrupadas bajo el concepto de AJAX
XML / JSON Es el acrnimo en ingls de eXtensible Markup Language (lenguaje de marcas extensible), fue desarrollado por la World Wide Web Consortium (W3C)14 y se trata de una
El DHTML o HTML Dinmico (Dynamic HTML) designa el conjunto de tcnicas que permiten crear sitios web interactivos utilizando una combinacin de lenguaje HTML esttico, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarqua de objetos de un DOM.Fuente: Fuente: http://www.pergaminovirtual.com.ar/definicion/DHTML.html 13 Hojas de estilo que transforman documentos empleando reglas de plantillas. Es un estndar de la W3C que presenta una forma de transformar documentos XML en otros e incluso a formatos que no son XML. La unin de XML y XSLT permite separar el contenido y de su presentacin. Fuente: http://www.alegsa.com.ar/Dic/xslt.php 14 Organismo que regula los estndares en la WWW. Est dirigida por Tim Berners-Lee (creador de la WWW). Fuente: http://www.alegsa.com.ar/Dic/w3c.php
12
15
adaptacin del SGML15 que permite crear lenguajes para diferentes necesidades mediante la definicin de la gramtica del mismo.16 XML se propone como un estndar para el intercambio de informacin estructurada, se puede usar en base de datos, procesadores de texto, hojas de clculo y casi cualquier cosa imaginable. Es decir que busca la compatibilidad entre sistemas para compartir informacin de una manera segura, fcil y confiable. Un documento XML contiene datos que se autodefinen, mientras que en un documento HTML existen datos mal definidos mezclados con elementos de formato. En XML se separa el contenido de la presentacin de forma total. Al igual que HTML el XML utiliza etiquetas para delimitar los elementos de un documento. Estas etiquetas estn definidas en funcin del tipo de datos que est describiendo y no de la apariencia final, adems de permitir crear nuevas etiquetas y ampliar las existentes. JSON, acrnimo de "JavaScript Object Notation", es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notacin literal de objetos de JavaScript pero no requiere el uso de XML.17 La simplicidad de JSON ha dado lugar a la generalizacin de su uso, especialmente como alternativa a XML en AJAX. Una de las ventajas de JSON sobre XML como formato de intercambio de datos en este contexto es que es mucho ms sencillo escribir un analizador semntico18 de JSON. En JavaScript, JSON puede ser analizado trivialmente fcilmente, lo cual ha sido fundamental para la aceptacin de JSON por parte de la comunidad de desarrolladores AJAX, debido a la presencia de JavaScript en casi cualquier navegador web. DOM El DOM (Document Object Model) es una familia de especificaciones que fue desarrollada por la W3C y que consta de un conjunto de interfaces las cuales pueden acceder a los diversos elementos de un documento HTML o XML. Puede ser utilizado por cualquier aplicacin relacionada con la creacin, edicin, gestin, manipulacin o representacin de un documento.19 El modelo de objetos20 indica cual es la naturaleza de la estructura de los documentos y provee de una serie de recursos para poder acceder a todos sus elementos, a la relacin existente entre ellos, caractersticas, representacin y eventos que soportan. Las posibilidades que brinda DOM son muy extensas y su implementacin exige mayor rigor tanto en la implementacin de los agentes de usuario como en el desarrollo de documentos HTML. El DOM constituye una potente herramienta, pero se debe tener en cuenta que los contenidos creados con estas tcnicas estn sujetos al navegador que se utilice.
SGML son las siglas de Standard Generalized Markup Language o "Lenguaje de Marcado Generalizado". consiste en un sistema para la organizacin y etiquetado de documentos. Fuente: http://www.geocities.com/aifperez/sgml/ 16 Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera 17 Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera 18 Analizador semntico: Define la lgica de acuerdo a la definicin del lenguaje. Fuente: http://mx.geocities.com 19 Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera 20 Representacin detallada y particular de algo de la realidad. Todo objeto tiene un identidad o nombre, estado (caractersticas definidas generalmente en variables) y comportamiento (sus funciones o procedimientos). Fuente: http://www.alegsa.com.ar/Dic/objeto.php
15
16
HTML - XHTML / CSS El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de marcacin de hipertexto), es un lenguaje de marcas diseado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estndar de las pginas web. Gracias a Internet y a los navegadores del tipo Explorer o Firefox, el HTML se ha convertido en uno de los formatos ms populares que existen para la construccin de documentos.21 HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determinan la forma en la que debe aparecer en el navegador el texto, as como tambin las imgenes y los dems elementos, en la pantalla del ordenador. XHTML, acrnimo ingls de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estndar para las pginas web.22 XHTML es la versin XML de HTML, por lo que tiene, bsicamente, las mismas funcionalidades, pero cumple las especificaciones, ms estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semntica, donde la informacin, y la forma de presentarla estn claramente separadas. Sirve nicamente para transmitir la informacin que contiene un documento, dejando para hojas de estilo (como las hojas de estilo en cascada) y JavaScript su aspecto y diseo en distintos medios. CSS, las hojas de estilo en cascada (Cascading Style Sheets) son un lenguaje formal usado para definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML)23. Es un mecanismo que permite a autores y agentes de usuario asociar modos de presentacin a los documentos HTML. Generalmente es utilizado nicamente para mejorar la presentacin grfica en pantalla, pero la especificacin incluye otros medios, como impresoras o lectores de voz. JavaScript JavaScript es un lenguaje creado por la empresa Netscape (creadora de uno de los navegadores ms conocidos). Es el lenguaje de programacin ms utilizado en Internet para aadir interactividad a las pginas web. Nace a partir de LiveScript, un lenguaje de scripts diseado especficamente para Netscape Navigator. Netscape, junto a Sun, cambiaron su nombre a JavaScript y se lo incorpor en la versin 2.0 del Netscape Navigator. JavaScript es utilizado para la creacin de acciones y procesos de automatizacin en pginas web. Puede ser insertado entre el cdigo HTML e interpretado y ejecutado por el navegador, actualmente todos los navegadores lo soportan.24 Es un lenguaje interpretado, es decir, que no requiere compilacin, con una sintaxis semejante a la del lenguaje Java y el lenguaje C25. Todos los navegadores web interpretan el lenguaje JavaScript, el cual en conjunto con
21 22
Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera 23 Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera 24 Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera 25 Lenguaje de programacin.
17
el DOM son utilizados para interactuar dentro de una pgina web. Por qu JavaScript y no otro lenguaje de programacin? Porque: es moderno (tiene pocos aos) es sencillo (su hermano mayor, Java, es bastante ms complejo) es til es potente (permite la Programacin Orientada a Objetos26) es barato (solo necesitamos un editor de texto y un navegador) es visual El cdigo en JavaScript se embebe en la pgina HTML y permite reconocer eventos de usuario y reaccionar a ellos. Puede manipular tanto objetos nativos HTML como otros elementos, por ejemplo, controles ActiveX27. XMLHttpRequest XMLHttpRequest es un API que puede invocarse desde JavaScript y otros lenguajes de script incluidos en un navegador web, que se usa para transferir y manipular datos XML hacia y desde el navegador web, establecindose un canal de conexin independiente entre el lado del cliente de la pgina web y el servidor.28 Los datos devueltos por la llamada a XMLHttpRequest sern, por lo general, obtenidos desde bases de datos en el servidor. La llamada puede devolver datos en XML o, ms generalmente, en cualquier otro formato textual, como JSON o incluso texto plano. Interaccin tradicional con el servidor vs. Interaccin AJAX En las aplicaciones web tradicionales, las peticiones al servidor se realizan en forma sincrnica, es decir, cuando se produce algn evento en la pgina, esta enva una peticin al servidor anexando si es necesario datos. Estos datos son enviados a travs de los mtodos POST29 o GET30, si bien existen otros no muy utilizados. La comunicacin del cliente con el servidor se realiza a travs de peticiones HTTP, en tanto este ltimo responde mediante datos HTML, CSS, etc. Al tener una peticin de un cliente, el servidor procesa la misma y enva la respuesta correspondiente, mientras tanto el navegador web bloquea la aplicacin que est corriendo a la espera que finalice la ejecucin de la peticin en el servidor.
La Programacin Orientada a Objetos (POO u OOP segn sus siglas en ingls) es un paradigma de programacin que usa objetos y sus interacciones para disear aplicaciones y programas de computadora. Est basado en varias tcnicas, incluyendo herencia, modularidad, polimorfismo y encapsulamiento. Su uso se populariz a principios de la dcada de 1990. Actualmente son muchos los lenguajes de programacin que soportan la orientacin a objetos. Fuente: http://www.desarrolloweb.com 27 ActiveX es una tecnologa de Microsoft para el desarrollo de pginas dinmicas. Tiene presencia en la programacin del lado del servidor y del lado del cliente, aunque existan diferencias en el uso en cada uno de esos dos casos. Fuente: http://www.desarrolloweb.com 28 Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera 29 Enva los datos normalmente al programa CGI mediante el protocolo HTTP, utilizando la codificacin enctype. Fuente: http://www.webtaller.com 30 Enva los datos aadiendo los argumentos del formulario al URL, utilizando como separador de las variables el smbolo "?". Fuente: http://www.webtaller.com
26
18
Es decir que cada vez que se realiza una peticin sincrnica con el servidor, esto hace que se recargue totalmente la pgina requerida, haciendo ms lento y menos interactiva a esta aplicacin (ver figura 1). Al realizar peticiones de forma asincrnica el navegador web no bloquea la aplicacin que est corriendo. Esto se debe a que el mismo no debe esperar por la finalizacin de la ejecucin de una peticin en el servidor, dado que se notifica al navegador web cuando esto ocurre. Para lograr esta funcionalidad se utiliza el objeto XMLHTTPRequest, que es el encargado de la comunicacin asincrnica entre el cliente y el servidor. Este objeto constituye una capa intermedia entre la interfaz del usuario y el servidor, si bien el mismo se encuentra cargado e interpretado en el cliente web. La comunicacin del cliente con el objeto XMLHTTPRequest o motor AJAX se realiza mediante JavaScript, en tanto las respuestas de este son HTML, CSS, etc. En cuanto a la comunicacin con el servidor, el motor AJAX utiliza solicitudes HTTP y recibe como respuesta datos XML, JSON o texto (ver figura 2).
Figura 2: Modelo clsico de aplicaciones web vs. modelo AJAX de aplicaciones web.
19
Figura 3: Modelo sincrnico (tradicional) vs. modelo asincrnico (AJAX)
Bloques de una aplicacin AJAX En este tipo de aplicacin siempre se observaran bsicamente tres bloques o capas, los cuales se encargan de las diferentes tareas a llevar a cabo para obtener una aplicacin AJAX. Estar presente el bloque o capa de presentacin o interfaz, el cual adems de ser el encargado de la relacin con el usuario deber manejar las acciones o eventos que sucedan en la pgina, los cuales derivarn ya sea en la creacin del objeto XMLHTTPRequest o utilizacin de alguna de sus funcionalidades. Tambin deber contemplar las respuestas que reciba y hacer conocer esto al usuario. Otro de los bloques que se observa es la capa lgica, generalmente implementado en lenguaje JavaScript, y es la encargada de implementar todas las funcionalidades que permitan crear y manipular el objeto XMLHTTPRequest. Por lo que este bloque interacta tanto con la capa de presentacin como con la de manejo de datos. El ltimo bloque presente en toda aplicacin AJAX es la capa de datos, implementado
20
mediante scripts de servidor (ASP31, php32, jsp33, etc.) y es la encargada de la manipulacin de los datos en el servidor, los cuales pueden estar almacenados en bases de datos o archivos de cualquier tipo. Adems podra ejecutar procesos en los que no necesariamente tenga que recuperar datos de algn dispositivo de almacenamiento. Caractersticas del objeto XMLHTTPRequest XMLHttpRequest es una interfaz empleada para realizar peticiones HTTP y HTTPS34 a servidores web. Utiliza codificaciones basadas en texto para la transferencia de datos: texto plano, XML, JSON, HTML y codificaciones particulares especficas. Se pueden generar varias instancias del objeto XMLHTTPRequest como sean necesarias para mantener la comunicacin con el servidor. La primera versin de XMLHttpRequest fue desarrollada Microsoft que lo introdujo en la versin 5.0 de Internet Explorer. Utilizando un objeto ActiveX, por lo que puede ser utilizada desde cualquier entorno de desarrollo de software con soporte para esta tecnologa, es decir, prcticamente la totalidad de plataformas generalistas de desarrollo para Microsoft Windows35. Microsoft ha seguido manteniendo y actualizando esta tecnologa en sus sucesivas versiones. A partir de la versin 7 de Internet Explorer la interfaz se ofrece de manera integrada. Al ser integrada, el acceso a la interfaz se realiza enteramente con objetos proporcionados por el navegador y no mediante libreras externas. El proyecto Mozilla incorpor la primera implementacin integrada de XMLHttpRequest en la versin 1.0 de la suite Mozilla en al ao 2002. Esta implementacin sera seguida por Apple36 (a partir de sus navegadores Safari 1.2, Konqueror), Opera Software (a partir de su navegador Opera 8.0) e iCab37 desde la versin 3.0b352. El World Wide Web Consortium present el 27 de septiembre de 2006 el primer borrador para una especificacin estndar de la interfaz. El proceso de estandarizacin se encuentra en su ltima fase desde el 27 de febrero de 2007 con la publicacin del borrador definitivo. La versin actual del objeto data del 15 de abril de 2008 y est etiquetada como borrador final (last call working draft); este borrador es el resultado de varias revisiones. Mientras no se alcance una versin definitiva, los desarrolladores de aplicaciones web debern tener en cuenta las diferencias entre implementaciones o bien utilizar paquetes o
Microsoft Active Server Page (ASP) es una tecnologa de script que corre del lado de servidor y puede ser usado para crear aplicaciones Web dinmicas e interactivas. Fuente: http://help.websiteos.com/websiteos_sp/definicion_de_as1.htm 32 Lenguaje de programacin usado generalmente en la creacin de contenidos para sitios web. Fuente: http://www.alegsa.com.ar/Dic/php.php 33 JavaServer Pages (JSP) es un mtodo de creacin de pginas web dinmicas en servidor usando el lenguaje Java. Fuente: http://geneura.ugr.es/~jmerelo/JSP/ 34 Versin segura del protocolo HTTP. Utiliza un canal cifrado para enviar y recibir informacin sensible. El nivel de cifrado depende del navegador usado y del servidor remoto. Es utilizado especialmente por sistemas que manejan dinero, transacciones comerciales o uso de claves. El puerto estndar para el protocolo suele ser el 443. Fuente: http://www.alegsa.com.ar 35 Windows es una familia de sistemas operativos desarrollados y comercializados por Microsoft. Fuente: http://www.alegsa.com.ar 36 Compaa de informtica norteamericana creadora de los primeros ordenadores personales, los Macintosh. Fuente: http://tecnologia.glosario.net/terminos-tecnicos-internet/apple-106.html 37 iCab es un navegador para MacOS Fuente: http://www.tagoror.com/enciclopedia/es/wikipedia/i/ic/icab.html
31
21
frameworks que realicen esta funcin. XMLHttpRequest es una interfaz para realizar llamadas mediante HTTP, por lo que es recomendable un buen conocimiento de este protocolo. Es importante el manejo correcto de la cach38 en el servidor HTTP, en los proxy39 cach intermedios y en el navegador web. Otro punto importante es el manejo de hojas de caracteres, la codificacin de texto y su expresin mediante cabeceras HTTP y MIME40. XMLHttpRequest utiliza UTF-841 para la codificacin de cadenas de texto y objetos binarios. La nica excepcin a esta regla es la transmisin de cadenas XML cuando estos datos XML especifiquen explcitamente una codificacin alternativa, en caso contrario se usar UTF-8 por defecto. Es importante tener esto en cuenta en entornos dnde se mezclen varias codificaciones, por ejemplo, pueden producirse errores de visualizacin de caracteres al incorporar funcionalidad AJAX a una pgina web codificada con ISO 8859-142. El interface se presenta encapsulado en una clase. Para utilizarlo la aplicacin cliente debe crear una nueva instancia mediante el constructor43 adecuado. Es posible realizar peticiones sncronas y asncronas al servidor; en una llamada asncrona el flujo de proceso no se detiene a esperar la respuesta como se hara en una llamada sncrona, si no que se define una funcin que se ejecutar cuando se complete la peticin: un manejador de evento. Creando el objeto XMLHttpRequest Para asegurarse que se podr disponer de una instancia del objeto XMLHttpRequest en cualquier navegador web, se debe tener en cuenta el mismo ya que la forma de instanciar o implementar este objeto depende de la plataforma en la que se encuentra navegando. Para versiones de Microsoft Internet Explorer (IE) se instancia un objeto ActiveX de la siguiente manera: objAjax = new ActiveXObject('Msxml2.XMLHTTP'); Esto solo para algunas versiones de IE. Existen versiones de IE en las cuales el objeto ActiveX se instancia de forma diferente: Para Navegadores basados en Netscape, Safari, Opera, etc., se instancia un objeto propio XMLHttpRequest: objAjax = new ActiveXObject("Microsoft.XMLHTTP");
Es una copia que el navegador mantiene en nuestra computadora de las pginas visitadas recientemente, de esta manera si el usuario requiere volver a entrar a estos sitios ya lo har a travs de su disco duro y no desde Internet. Fuente: http://tecnologia.glosario.net/terminos-tecnicos-internet/cache-237.html 39 El Proxy es un servidor que est conectado normalmente al servidor de acceso de un proveedor y que va almacenando toda la informacion que los usuarios reciben de la WEB, por tanto, si otro usuario accede a traves del proxy a un sitio previamente visitado, recibir la informacion del servidor proxy en lugar del servidor real. Fuente: http://www.definicion.org/proxy 40 Multipurpouse Internet Mail Extensions - Extensiones de Correo Internet Multipropsito, son una serie de especificaciones dirigidas al intercambio transparente de todo tipo de archivos a travs de Internet. Fuente: http://www.alegsa.com.ar/Dic/mime.php 41 (Universal Transformation Format, es un mtodo que convierte caracteres Unicode (que usan 16 bits cada uno) a caracteres de 7 u 8 bits. Fuente: http://www.alegsa.com.ar/Dic/utf.php 42 Usar la codificacin iso-8859-1 permite crear pginas en espaol sin necesidad de utilizar entidades HTML para acentos y otras letras especiales del idioma. Fuente: http://www.hispamedios.com/articles/id33-charset-iso-8859-1 43 El constructor de una clase es un mtodo estndar para inicializar los objetos de esa clase. Es una funcin que se ejecuta siempre al crear un objeto. Fuente: http://www.mitecnologico.com/Main/ElConstructor
38
22
objAjax = new XMLHttpRequest(); Para lograr una aplicacin web basada en Ajax se deben tener muy presente estas diferencias a la hora de implementar una instancia del objeto. Algunos mtodos y propiedades del objeto XMLHTTPRequest Una vez instanciado el objeto XMLHttpRequest teniendo en cuenta la diferencia entre navegadores, se debe hacer uso de sus mtodos para llevar a cabo una solicitud al servidor y procesar la respuesta del mismo. El mtodo open: establece los parmetros de la peticin que se realiza al servidor. Requiere 2 parmetros: mtodo HTTP que puede ser GET o POST y URL44 que puede ser absoluta o relativa. Adems acepta de forma opcional otros 3 parmetros: el tercero un valor booleano que indica si la peticin es asincrnica o sincrnica, el cuarto indica el usuario y el quinto el password. ojbAjax.open("GET", url, true)
En este caso se utiliza el mtodo de envo GET y la peticin se hace de forma asincrnica.
Por defecto, las peticiones realizadas son asncronas. Si se indica un valor false al tercer parmetro, la peticin se realiza de forma sncrona, esto es, se detiene la ejecucin de la aplicacin hasta que se recibe de forma completa la respuesta del servidor. Los ltimos 2 parmetros opcionales permiten indicar un nombre de usuario y una contrasea vlidos para acceder al recurso solicitado. El mtodo send: realiza la peticin HTTP al servidor. Requiere de un parmetro que indica la informacin que se va a enviar al servidor junto con la peticin HTTP. Si no se envan datos, se debe indicar un valor igual a null. En otro caso, se puede indicar como parmetro una cadena de texto, un arreglo de bytes o un objeto XML DOM. objAjax.send(null);
En este caso no se envia informacin al servidor.
Propiedad onreadystatechange: guarda el estado de la peticin que se ha realizado al servidor y se utiliza como manejador de eventos ya que se invoca cada vez que el estado ha cambiado. Generalmente invoca a una funcin JavaScript. objAjax.onreadystatechange = function() Propiedad readyState: valor numrico que almacena el estado de la peticin. Este mtodo es utilizado en la funcin que se dispara en onreadystatechange con el objetivo de determinar si la peticin esta lista. Los valores son: 0: an no iniciado 1: cargando 2: cargado 3: inactivo 4: listo
Uniform Resource Locator, es decir, localizador uniforme de recurso. Una URL es una direccin que permite acceder a un archivo o recurso como ser pginas html, php, asp, o archivos gif, jpg, etc. Se trata de una cadena de caracteres que identifica cada recurso disponible en la web. Fuente: http://www.alegsa.com.ar/Dic/url.php
44
23
Propiedad status: cdigo de estado HTTP devuelto por el servidor. Al igual que readyState es utilizado en la funcin disparada por onreadystatechange. Algunos de sus valores son: 200 para una respuesta correcta, 404 para no encontrado, 500 para un error de servidor, entre otros estados. Propiedad responseText: el contenido de la respuesta del servidor en forma de cadena de texto. Propiedad responseXML: el contenido de la respuesta del servidor en formato XML. El objeto devuelto se puede procesar como un objeto DOM. objAjax.onreadystatechange = function() { if(objAjax .readyState == 4) { if(objAjax.status == 200) { return objAjax.responseText; } } }
Ejemplo sencillo combinando mtodos y propiedades.
Otros mtodos y propiedades: Mtodo o propiedad Descripcin Representa al cdigo de estado HTTP devuelto por el servidor en forma de cadena de texto: OK, Not Found, Internal Server Error, etc. Detiene la peticin actual Devuelve un arreglo asociativo con todas las cabeceras de la respuesta del servidor Devuelve una cadena de texto con el contenido de la cabecera solicitada Permite establecer cabeceras personalizadas en la peticin HTTP. Se debe invocar el mtodo open() antes que setRequestHeader()
statusText abort() getAllResponseHeaders() getResponseHeader(cabecera)
setRequestHeader(cabecera, valor)
Justificacin y relevancia
En lo que se refiere a libreras AJAX no hay una solucin generalizada. Existen mltiples soluciones, pero no hay una clara visin de cual utilizar en cada circunstancia. Este trabajo dar certezas sobre las pros y las contras de las distintas alternativas utilizadas hoy en da, buscando la ms factible segn la circunstancia y el entorno de trabajo con el cual se cuente. 24
La relevancia de este trabajo es ayudar acerca de un tema relativamente nuevo en el mundo del desarrollo web y donde, a causa de esto, todava existen ms dudas que certezas. Se debe ser consciente de que las posibilidades u opciones son muchas y muchas veces queda a criterio del desarrollador la seleccin de una u otra, ya sea por aspectos tcnicos o por gustos personales. Esta tesina no pretende ser la solucin definitiva a este problema, pero si pretende ser una herramienta ms que guie al desarrollador a tomar una decisin firme, correcta y oportuna.
Factibilidad del estudio

Factibilidad Tcnica El proyecto es tcnicamente posible dado que se trabajara con servidores que se pueden emular sobre una PC de escritorio. Los softwares y entornos integrados de desarrollo que se utilizarn no necesitan requerimientos inalcanzables para ser ejecutados. Un inconveniente surge a la hora de obtener datos sobre la performance de las libreras, dado que resulta imposible simular el comportamiento de la aplicacin ante un acceso de grandes volmenes de usuarios y de datos. Factibilidad Econmica El coste del estudio es relativamente bajo dado que el software que se utilizar es libre, la descarga de las libreras a estudiar puede realizarse a travs de Internet. Existen casos en el que las libreras son licenciadas los cuales sern tratados solo tericamente, ya que para el estudio prctico es imposible costearlos. En el desarrollo de la tesina se trabajar de forma prctica solo con libreras de distribucin libre. Factibilidad Operativa Operativamente el desarrollo del proyecto es factible dado que la informacin sobre el tema es accesible a travs de libros, internet y revistas de actualidad. Las libreras con las que se trabajara son de distribucin libre y la mayora de las mismas posee una buena documentacin sobre s misma. El mayor inconveniente que surge es el lenguaje de la informacin que se encuentra sobre el tema, dado que prcticamente en su totalidad se encuentra en ingles, lo que puede aparejar problemas de interpretacin. Para disminuir la posibilidad de error de interpretacin se utilizarn herramientas de traduccin.
25
Objetivos
Generales Mostrar las libreras ms importantes y representativas existentes en el mercado para desarrollar con metodologa AJAX. Investigar las posibilidades existentes para identificar en que caso aplicar alguna de ellas. Especficos Explicar mediante conceptos claros y ejemplos prcticos las caractersticas ms importantes y sobresalientes de las libreras AJAX estudiadas. Mostrar la utilidad de cada librera y la conveniencia o no de su aplicacin en ciertos campos o aplicaciones especficas.
Hiptesis
Para la seleccin de una librera a la hora de encarar un proyecto web con metodologa AJAX se deben tener en cuenta la factibilidad econmica del proyecto. Si se dispone de capital suficiente como para utilizar una librera propietaria o si debemos utilizar una librera gratuita. Para proyectos pequeos conviene utilizar tambin libreras pequeas que contengan un reducido nmero de funciones y de recursos grficos. Tambin se debe tener en cuenta el tipo de aplicacin, ya sean aplicaciones comerciales, publicitarias, multimedias, de entretenimiento, sistemas de gestin empresarial, etc. La calidad y cantidad de recursos grficos que se deseen tener tambin influirn en la seleccin de la librera. La cantidad de concurrencias de usuarios y la utilizacin o no de bases de datos con elevada o no cantidad de transacciones tambin influirn en le decisin a tomar. La experiencia del desarrollador o grupo de desarrolladores y los conocimientos que posean sern de gran importancia de forma que la curva de aprendizaje sea lo menor posible o si es posible nula. La plataforma del lado del servidor que se utilizar, mas el lenguaje de programacin elegido, juegan un papel muy importante a la hora de desarrollar con AJAX. Es posible que para plataformas de Microsoft (para citar un ejemplo) sea conveniente utilizar una librera de esta misma empresa para que se integre correctamente.
Variables
Las variables las podemos englobar en: Flexibilidad: En la flexibilidad englobamos la capacidad que tiene la librera de adaptarse a los cambios del entorno. Independencia: Aqu se engloba la capacidad de independencia que posea la librera con el lenguaje de programacin de la aplicacin y con la plataforma utilizada. Costo: Se refiere bsicamente al costo de aprendizaje, a la dificultad de utilizacin (complejidad) y esencialmente al costo econmico de la licencia. 26
Universo de Estudio y Dimensin Temporal

Universo de estudio Estudio de las caractersticas de las libreras AJAX mas utilizadas en el mercado. Temas comprendidos en la tesina Conceptos bsicos e introductorios: Web 2.0 y Rich Internet Aplication (RIA) AJAX: Conceptos bsicos Explicacin de los componentes fundamentales de esta tecnologa: HTML, JSON, JavaScript, CSS, XMLHttpRequest, DOM, XML, XHTML Frameworks: conceptos Estudio detallado de la mayora de las libreras de AJAX existentes en el mercado con sus caractersticas, complejidades, historia, con ejemplos prcticos de aplicacin. Conclusin acerca de las mejores alternativas a la hora de seleccionar una librera para encarar un proyecto.
Tcnicas e instrumentos
Recoleccin de datos de internet Consulta de libros relacionados con el tema Generacin de ejemplos prcticos en un entorno de desarrollo domestico Discusin e intercambio de opiniones entre los responsables del desarrollo del presente trabajo
27
Diagrama de Gantt
28
Captulo 2: Frameworks, conceptos
29
Qu es un framework?
Desde el punto de vista del desarrollo de software, un framework es una estructura de soporte definida, en la cual otro proyecto de software puede ser organizado y desarrollado.45 Un framework representa una arquitectura de software que provee una estructura y una metodologa de trabajo. Los frameworks son diseados con el intento de facilitar el desarrollo de software, permitiendo a los diseadores y programadores pasar ms tiempo identificando requerimientos de software que tratando con los tediosos detalles de bajo nivel de proveer un sistema funcional. Los frameworks tienen un inconveniente, y es la cantidad de cdigo innecesario con la cual contar la aplicacin (muchos de los mtodos y objetos que proveen este tipo de tecnologas ni siquiera son utilizados dentro de la aplicacin, generalmente se utiliza una mnima parte del potencial de un framework).
Qu es un framework web?
Un framework web podemos definirlo como un conjunto de componentes que componen un diseo reutilizable que facilita y agiliza el desarrollo de sistemas web.
Qu es un framework Ajax?
Es un framework para aplicaciones web que ayuda a desarrollar aplicaciones basadas en AJAX.
45
http://www.alegsa.com.ar/Dic/framework.php
30
Captulo 3: Frameworks JavaScript
31
Prototype
Prototype es un framework que facilita el desarrollo de aplicaciones web con JavaScript y AJAX. A pesar de que incluye decenas de utilidades, la librera es compacta y est programada de forma muy eficiente. Prototype se ha convertido en poco tiempo en una referencia bsica de AJAX y es la base de muchos otros frameworks y libreras relacionadas como script.aculo.us, OpenRico, etc. Las primeras versiones de Prototype no incluan ningn tipo de documentacin, lo que dificultaba su uso y provocaba que la mayora de usuarios desconocieran su verdadero potencial. Afortunadamente, las versiones ms recientes del framework disponen de una completa documentacin de todas las funciones y mtodos que componen su API46. La documentacin incluye la definicin completa de cada mtodo, sus atributos y varios ejemplos de uso. Prototype evita que el programador tenga que conocer todos los detalles del lenguaje JavaScript y las complejidades existentes de los modelos DOM de las pginas. Es una herramienta que implementa las tcnicas AJAX y su potencial es aprovechado al mximo cuando se desarrolla con Ruby On Rails47. Principales caractersticas de Prototype: Soporte AJAX Soporte para la gestin de DOM y el objeto XMLHttpRequest. Funciones JavaScript de gran utilidad Manejador de eventos JavaScript puede ser escrito bastante similar a Ruby Posee un objeto AJAX que envuelve y simplifica el uso del objeto XMLHttpRequest con mtodos como Ajax.Request(), Ajax.Updater(), Ajax.PeriodicalUpdater() Posee un mtodo $() (funcin Dlar) el cual simplifica y mejora a la funcin del DOM document.getElementById() A diferencia de la funcin del DOM, podemos enviar varios ID de elementos (o elementos en s) y $() nos devolver un arreglo de los elementos solicitados Agrega la funcin document.getElementsByClassName() al DOM el cual recibe como parmetro el nombre de una clase CSS y devuelve un arreglo con los elementos de la clase CSS solicitada
Una interfaz de programacin de aplicaciones o API (del ingls Application Programming Interface) es un grupo de rutinas (conformando una interfaz) que provee un sistema operativo, una aplicacin o una biblioteca, que definen cmo invocar desde un programa un servicio que stos prestan. En otras palabras, una API representa un interfaz de comunicacin entre componentes software. Fuente: http://www.alegsa.com.ar/Dic/api.php 47 Es un framework para el desarrollo de aplicaciones web, est basado en el patrn de diseo Modelo Vista Controlador. Fuente: http://www.maestrosdelweb.com/editorial/rubyonrails/
46
32
Agrega otra funcin de similares caractersticas identificada por $$() pero que recibe como parmetro una cadena CSS y devuelve un arreglo de elementos que correspondan a la cadena CSS solicitada. Prototype contiene un amplsimo rango de funciones que permiten poder escribir el cdigo JavaScript de forma mucho ms rpida, que los resultados sean mucho ms claros y que las aplicaciones sean mucho ms fciles de mantener, ya que mucho del trabajo necesario nos lo da ya hecho. Por un lado incluye funciones de carcter general que permiten realizar mucho ms rpidamente ese tipo de tareas repetitivas que prcticamente hay que hacer en todos los scripts, o sea, nos permite hacer lo mismo pero con muchsimo menos cdigo. Cuenta con un sistema para la creacin de formularios HTML basados en JavaScript y desde luego, lo que ms nos interesa: cuenta con mtodos para tratar el objeto XMLHttpRequest y mtodos y objetos para simplificar las tareas utilizando el DOM. Vamos a ver alguna de las herramientas ms tiles y genricas mencionadas anteriormente, dando algunos ejemplos prcticos de uso. Funcin $ (dlar) Es la funcin ms popular de Prototype. Permite agilizar varias tareas que normalmente son repetitivas. Se trata en gran medida de un atajo que nos permite de forma mucho ms corta hacer referencia al mtodo DOM getElementById().
Mtodo DOM JavaScript var nuevosdatos = document.getElementById(idElemento);
Prototype var nuevosdatos = $(idElemento);
Podemos observar que mediante Prototype se agiliza notoriamente la escritura
Otra de las ventajas que posee esta funcin es que permite aceptar mltiples elementos id como argumentos, los cuales los colocan en un arreglo de elementos. var nuevosdatos = document.getElementById(idElemento); var nuevosdatos = $(id1, id2, id3); nuevosdatos[0] contiene el valor de un elemento con ID = id1. nuevosdatos[1] contiene el valor de un elemento con ID = id2. nuevosdatos[2] contiene el valor de un elemento con ID = id3. Funcin $F Es otra de las funciones genricas ms tiles de la librera. Devuelve un campo de entrada de un formulario donde debemos darle como argumento el id de ese campo de entrada.
33
<script type = text/javascript> function prueba(){ alert( $F(campo1) ); } </script> </head> <body> <input type = text id = campo1 name = campotexto> <input type = button value = Ok onclick = prueba();>
Ejemplo 1 (desarrollado y ejecutado en el entrono local de trabajo)
En este ejemplo, al presionar el botn se ejecutar la funcin JavaScript prueba la cual a travs de la funcin $F mostrar un alert() con el valor que contenga en ese momento el input representado por el id campo1. El objeto Form Este objeto presente dentro de la librera, engloba distintos mtodos muy tiles para poder simplificar el trabajo en la manipulacin de formularios HTML. Mtodo getElements(idFormulario): devuelve el nmero de campos que posee un formulario. campos = Form.getElements(idFormulario); Mtodo serialize(idFormulario): Este mtodo devuelve un string de pares (parmetro - valor) codificado para ser utilizado por el mtodo Get. campos = Form.serialize(idFormulario); Ejemplo: <head> <script type = text/javascript> function prueba(){ string = Form.serialize(form1); } </script> </head> <body> <form id = form1> <input type = text id = campo1 name = campotexto value = campo de texto> <select id = select name = select> <option value = 1 selected>Uno</option> <option value = 2>Dos</option> </select> 34
<input type = button value = Ok onclick = prueba();> </form> </body>

Ejemplo 2 (desarrollado y ejecutado en el entrono local de trabajo)
En este ejemplo una vez ejecutada la funcin prueba, mediante el mtodo serialize(), la variable string contendr el siguiente valor: campotexto=campo%20de%20texto&select=1 Mtodo enable(idFormulario): este mtodo habilita un formulario para su uso por parte del usuario. Form.enable(idForm); Mtodo disable(idFormulario): este mtodo deshabilita un formulario. Form.disable(idForm); Mtodos Ajax Para trabajar con peticiones asincrnicas Prototype incorpora el objeto ajax que nos permite de modo sencillo incluir distintos mtodos para llevar a cabo ese tipo de peticiones al servidor. Comenzaremos con una funcin (que no est dentro del objeto ajax) muy til para trabajar con AJAX, la funcin try.these(). Mtodo Try.these(): Esta funcin permite llevar a cabo una rutina repetitiva en caso de que el primer intento devuelva un error. Por lo tanto es muy til para poder crear una instancia del objeto XMLHttpRequest que funcione para todos los navegadores.
Mtodo manual
function createREQ() { try { req = new XMLHttpRequest(); /* p.e. Firefox */ } catch(err1) { try { req = new ActiveXObject('Msxml2.XMLHTTP'); /* algunas versiones IE */ } catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); /* algunas versiones IE */ } } } }, function() { }, function() { function createREQ() { return Try.these{ function() {
Prototype
return new ActiveXObject(Msxml2.XMLHTTP)
return new ActiveXObject(Microsoft.XMLHTTP)
return new XMLHttpRequest()
35
} catch (err3) { req = false; } } } return req; }
Ejemplo 3 (obtenido de http://www.librosweb.es y probado localmente)
Podemos observar claramente en este ejemplo como este mtodo simplifica enormemente la creacin del objeto XMLHttpRequest. Objeto Ajax: Como dijimos anteriormente, prototype.js define tambin un objeto Ajax que est designado para poder simplificar el desarrollo del cdigo javascript necesario cuando construimos aplicaciones AJAX. Este objeto cuenta con una serie de clases48 que encapsulan el cdigo que necesitamos para enviar peticiones al servidor, para monitorear el progreso de esas peticiones y para tratar con los datos devueltos. Ajax.Request(): Este mtodo se utiliza para tratar con todos los detalles que tienen que ver con la creacin de una instancia del objeto XMLHttpRequest y con el envo de la peticin al servidor correctamente formateada. var miAjax = new Ajax.Request(url, {method: post, parameters: misdatos, onComplete: responsefunction}); url: define la localizacin del recurso del servidor que es llamado. method: define el mtodo de envo de datos (POST o GET). misdatos: es un string serializado conteniendo los parmetros de la peticin. onComplete: es el nombre de la funcin de respuesta que maneja la respuesta del servidor. Como observacin podemos agregar que la notacin utilizada en el segundo parmetro de la funcin es propia de JSON explicada anteriormente. El parmetro onComplete puede ser remplazado, segn se requiera, por alguna otra funcin que refleje cualquiera de los 4 estados que puede tener la respuesta del servidor a la peticin (propiedad readystate del objeto XMLHttpRequest). onComplete: valor de la propiedad readystate = 4 onLoading: valor de la propiedad readystate = 1 onLoaded: valor de la propiedad readystate = 2 onInteractive: valor de la propiedad readystate = 3
Una clase es la definicin de las caractersticas concretas de un determinado tipo de objetos. Es decir, de cules son los datos y los mtodos de los que van a disponer todos los objetos de ese tipo. Fuente: http://www.devjoker.com/asp/ver_contenidos.aspx?co_contenido=130
48
36
Parmetros opcionales: asynchronous: sincrnico false -> le indicamos que la peticin se haga de modo
Ajax.Updater(): Este mtodo permite poder actualizar un elemento de la pgina mediante el uso de peticiones asincrnicas de tipo AJAX. var miAjax = new Ajax.Updater(target, url, {method: get, parameters: misdatos}); target: id del elemento de destino a actualizar. url: define la localizacin del recurso del servidor que es llamado. method: define el mtodo de envo de datos (POST o GET). misdatos: es un string serializado conteniendo los parmetros de la peticin. Ajax.PeriodicalUpdater(): nos permite estar de modo constante, repetitivo creando una instancia del mtodo Ajax.Updater(), as podemos hacer que un elemento de la pgina se est actualizando de modo constante con un intervalo de tiempo que tenemos que indicar. Puede ser muy til para algn tipo de aplicaciones, como por ejemplo lectores RSS, ya que nos asegura que el visitante siempre ver informacin que est actualizada cada cierto tiempo sin que necesite tener que actualizar la pgina. var miAjax = new Ajax.PeriodicalUpdater(target, url, {frequency: 3, decay: 2}); target: id del elemento de destino a actualizar. url: define la localizacin del recurso del servidor que es llamado. frequency: retraso en segundos entre sucesivas actualizaciones decay: indica el incremento en el retraso de actualizaciones en el caso de que no se observen cambios en las peticiones (se incrementa el espacio entre peticin y peticin). Es un modo de liberar recursos para que no sea tan intensivo el uso de peticiones al servidor. Event.observe: Una de las caractersticas de prcticamente todas las aplicaciones que funcionan con Ajax, es la necesidad de usar gestores de eventos. Lo que permite el uso de Event.observe() es crear esos gestores de eventos programticamente mediante cdigo. Tambin nos provee de un sistema para limpiar el gestor de eventos cuando la pgina se descarga previniendo de posibles errores en el Internet Explorer y otros navegadores ya que esta funcin recibe el propio objeto de evento como un argumento sin tener que usar el window.event de Internet Explorer. Si queremos dejar de or un evento lo podemos hacer mediante el uso de Event.stopObserving(). Event.observe (element, name, observer, [useCapture]); element = objeto o id de un elemento del que queremos capturar el elemento. Si es el id de un elemento el que colocamos como parmetro, entonces el mismo va colocado entre comillas simples. name = nombre del evento que queremos capturar (load, click, etc.). observer: la funcin que har el trabajo cuando el evento sea disparado. useCapture: Si es true maneja el evento en la fase de captura, si es false maneja el evento cuando ya es realizado. 37
Por supuesto que, como observamos anteriormente, estas no son las nicas funciones que posee la librera, sino que existen muchas ms. Este solamente es un pantallazo general que muestra algunos de los objetos y mtodos ms importantes de Prototype. Pero este pantallazo y las experiencias que uno vive a la hora de programar con la ayuda de Prototype, nos sirven para poder asegurar que la potencia de dicha librera es notable. Es un framework sencillo de usar, liviano, de fcil instalacin y por sobre todas las cosas, nos facilita enormemente la difcil pero emocionante tarea de programar aplicaciones con AJAX.
Rico
Se trata de una librera de cdigo JavaScript creada para generar un entorno web ms interactivo. La librera es gratuita y de cdigo abierto y se utiliza frecuentemente para creacin de efectos web basados en AJAX. Simplemente incluyendo un solo archivo de cdigo JavaScript podremos generar toda una serie de efectos como el Drag and Drop49, animaciones, diferentes efectos como el acorden y algunos otros ms. Funciona en casi todos los navegadores excepto Safari, aunque se est trabajando en ello para su utilizacin en un futuro inmediato. Rico es proporcionado libre y gratuitamente a cdigo abierto para uso personal o comercial bajo la licencia Apache 2.0.50 y su funcionamiento est basado en Prototype. Incluye funciones para el soporte de: drag-and-drop efectos de animacin efecto acorden calendarios, mandos de rbol y recogedor de colores formateo de nmeros y de fechas ventanas pop-up y mens con sombras grillas con barra que contienen columnas modificables en su tamao y diversos ttulos y textos los cuales pueden poblarse con contenido dinmico va AJAX, adems de soporte para editar el contenido de estas grillas Soporte de mltiples lenguajes para los distintos componentes (francs, alemn, italiano, portugus, espaol, chino, coreano, ruso y ucraniano). La distribucin del framework Rico est subdividida en 3 componentes: Src: contiene el ncleo de rico, incluyendo el cdigo Javascript, las hojas de estilo CSS de la librera y los archivos de imgenes
Tcnica que permite relacionar dos programas, dos ventanas o dos partes de un mismo programa. Por ejemplo, es posible llevar un cono que representa un archivo sobre el cono de la papelera de reciclaje y el archivo pasar a la misma. Fuente: http://www.alegsa.com.ar/Dic/arrastrar%20y%20soltar.php 50 Licencia de software libre. Fuente: http://www.gnu.org/licenses/license-list.es.html
49
38
Plugins: contiene cdigo que se ejecuta del lado del servidor. Da soporte a los componentes Rico como son LiveGrids y SimpleGrids. Estos plugins son generalmente provistos por lenguajes como ASP, PHP y .Net. Tambin contiene un plugin para el lenguaje de programacin Perl51 con funciones limitadas. Examples: Contiene cdigo fuente de ejemplo en lenguajes como ASP, PHP, .Net, Perl y HTML. Dentro de este directorio se encuentra un subdirectorio denominado data el cual contiene bases de datos para poder ejecutar y probar los ejemplos de funcionamiento del componente LiveGrid. All podemos encontrar bases de datos provistas para MSAcces52, Oracle53 and MySQL54 e instrucciones de instalacin de los datos en SQL Server55. Vamos a comentar las caractersticas ms destacables de Rico 2.0, ya que es la ltima versin existente. Rico Grids Vamos a explicar, desarrollar y mostrar algn ejemplo de las grillas o Rico Grids que son el componente ms importante y distintivo de la librera. La librera Rico soporta dos tipos diferentes de grillas: LiveGrid y SimpleGrid. Nota: Rico 2.0 extiende los juegos de componentes de las versiones anteriores. El LiveGrid ha sido modificado para incluir filtros, modificacin de tamao de columnas y muchas otras modificaciones. El ncleo de Rico 2.0 ha sido diseado para permitir adaptar los componentes ms fcilmente. Los datos en la grilla LiveGrid son siempre almacenados en un arreglo de 2 dimensiones de JavaScript. A medida que el usuario realiza un scrolling56 vertical de la grilla, los datos son completados dinmicamente desde el arreglo JavaScript hacia la grilla. Esto se realiza mediante AJAX. En cambio dentro de una SimpleGrid los datos no son actualizados dinmicamente, sino que son completados una nica vez mediante DOM sin la utilizacin de un arreglo en JavaScript. De todos modos los dos tipos de rejas poseen ciertos rasgos comunes como los son:
Es un lenguaje de programacin creado en 1987. Fuente: http://www.pergaminovirtual.com.ar/definicion/PERL.html 52 Microsoft Access es un sistema gestor de bases de datos relacionales. Fuente: http://www.galeon.com/ortihuela/access.htm 53 Oracle es un sistema de gestin de base de datos relacional (o RDBMS por el acrnimo en ingls de Relational Data Base Management System), desarrollado por Oracle Corporation. Fuente: http://www.alegsa.com.ar/Dic/oracle.php 54 MySQL es un sistema de gestin de bases de datos multiusuario, multiplataforma y de cdigo abierto. Fuente: http://www.alegsa.com.ar/Dic/mysql.php 55 Microsoft SQL Server es un sistema de gestin de bases de datos relacionales (SGBD) capaz de poner a disposicin de muchos usuarios grandes cantidades de datos de manera simultnea. Microsoft SQL Server constituye la alternativa de Microsoft a otros potentes sistemas gestores de bases de datos como son Oracle, Sybase ASE, PostgreSQL, Interbase, Firebird o MySQL. Fuente: http://diccionario.reverso.net 56 Desplazamiento. En este caso se refiere al desplazamiento de una pgina. Fuente: http://diccionario.reverso.net
51
39
Ttulos de las columnas que se mantienen en el encabezado de la pantalla y no se mueven de la misma a la hora de hacer scroll en la columna. Columnas fijas en el lado izquierdo de la grilla Columnas rezisables (modificable su tamao) Estilos CSS comunes Compatibilidad con los diferentes idiomas antes mencionados Compatibilidad con los componentes Rico pop-up. Un ejemplo donde se puede observar la utilizacin de esta tecnologa es en listas sin paginacin con OpenRico LiveGrid Al utilizar un buscador web los resultados se muestran utilizando tcnicas de paginacin que obligan al usuario a navegar entre las pginas resultantes si desea ampliar la informacin, normalmente utilizando los botones anterior/siguiente que fuerzan la carga de nuevas pginas. OpenRico LiveGrid propone una tcnica alternativa a la tpica paginacin de resultados. En combinacin con tcnicas de AJAX, su implementacin permite mostrar los resultados de bsqueda en una nica tabla de tamao fijo cuya barra de scroll posibilita desplazarnos a cualquier resultado especfico en el orden de bsqueda sin necesidad de recargar la pgina.
Figura 4: Imagen de un buscador desarrollado con Rico mediante tecnica AJAX (http://www.versioncero.com)
El comportamiento de LiveGrid es el siguiente: al arrastrar la barra de scroll se hace uso de comandos AJAX que realizan peticiones al servidor web de los resultados de bsqueda correspondientes al orden y posicin establecidos por la barra de scroll, de forma que en cuanto se reciben se incorporan directamente a la lista de resultados. LiveGrid es una nueva tecnologa en incorporarse al framework Rico 2.0. Para poder entender un poco el comportamiento y la facilidad de construir grillas que brinda este componente mostraremos el cdigo fuente de un ejemplo bsico de creacin de una grilla. En este ejemplo vamos a mostrar como cargar datos desde un arreglo javascript y mostrarlos en un LiveGrid. Dems est decir que javascript no es el nico medio por el cual se pueden obtener datos, sino tambin se pueden obtener de una tabla HTML, de un archivo XML, a travs de una consulta SQL57 a una base de datos (ya sea a travs de php, jsp, .Net, etc.) o de alguna funcin o librera propia.
El Lenguaje de consulta estructurado (SQL) es un lenguaje utilizado para base de datos desarrollado entre 1974 y 1975 en IBM Research. Por esos aos se llamaba SEQUEL (Structured English QUEry Language) y serva como interfaz para un sistema experimental de base de datos. Fuente: http://www.alegsa.com.ar/Dic/sql.php
57
40
A modo de ejemplo trataremos el caso de javascript. Cargamos los datos que se van a mostrar en un arreglo javascript. var myData = [ [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'], [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'], [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'], [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5'] ]; Cargamos los archivos javascript y CSS que son necesarios para mostrar los datos. Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css'); Los parmetros antes utilizados cumplen las siguientes funciones: LiveGrid: Carga el javascript de Rico y el archivo CSS necesario para desplegar un LiveGrid con un buffer esttico (no AJAX) LiveGridMenu: Este modulo carga el men predefinido de la grilla. Este men proporciona el acceso a todas las capacidades de LiveGrid. Permite, entre otras cosas, ajustar el tamao de las columnas. Adems se brinda la posibilidad de escoger si trabajar con el men o no y de crear un men personalizado adaptndolo a las necesidades de la aplicacin. greenHdg.css: Rico viene con algunos estilos CSS predefinidos para el LiveGrid. Podemos escoger entre uno de estos o crear uno propio personalizado. Algunos de los estilos que posee son: coffee-with-milk, grayedout, greenHdg, iegradient (Internet Explorer solamente), tanChisel y Warmfall. Cargamos los datos del arreglo javascript dentro de un objeto buffer de Rico: var buffer = new Rico.Buffer.Base(); buffer.loadRowsFromArray(myData); Definimos las opciones de la grilla, incluyendo el nombre (cabeceras) de las columnas: var opts = { useUnformattedColWidth: false, defaultWidth: 90, visibleRows: 'data', frozenColumns: 1, columnSpecs: [{Hdg:'Column 1',type:'number', ClassName:'alignright'}, {Hdg:'Column 2'}, {Hdg:'Column 3'}, {Hdg:'Column 4'}, {Hdg:'Column 5'}] }; Instanciamos el LiveGrid pasndole como parmetro el id de la grilla, la instancia del objeto buffer y las opciones de la grilla. var ex1=new Rico.LiveGrid ('ex1', buffer, opts);
41
Para habilitar el men pop-up de la grilla que Rico provee por defecto le asignamos al objeto LiveGrid una instancia del Rico.GridMenu(); ex1.menu=new Rico.GridMenu(); Existe la posibilidad de que el mtodo Rico.loadModule pueda terminar despus del evento window.onload. Entonces para asegurarnos que la inicializacin del LiveGrid se realiza despus de que se hayan cargado los mdulos de Rico, deberemos pasar las operaciones de inicializacin (todo el cdigo antes mostrado) al mtodo Rico.onLoad(). Reuniendo todo el cdigo javascript quedara de la siguiente manera: <script type='text/javascript'> Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css'); Rico.onLoad( function() { var myData = [ [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'], [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'], [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'], [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5'] ]; var opts = { useUnformattedColWidth: false, defaultWidth: 90, visibleRows: 'data', frozenColumns: 1, columnSpecs: [{Hdg:'Column 1',type:'number', ClassName:'alignright'}, {Hdg:'Column 2'}, {Hdg:'Column 3'}, {Hdg:'Column 4'}, {Hdg:'Column 5'}] }; var buffer=new Rico.Buffer.Base(); buffer.loadRowsFromArray(myData); var ex1=new Rico.LiveGrid ('ex1', buffer, opts); ex1.menu=new Rico.GridMenu(); }); </script>
Ejemplo 4 (obtenido de http://openrico.sourceforge.net)
No mostraremos todos los casos de carga de datos mencionados anteriormente ya que el procedimiento es muy similar, cambiando nicamente el tipo de objeto buffer que se crear, por ejemplo, para cargar datos desde un archivo XML se procede de la siguiente manera: new Rico.Buffer.AjaxXML('/controller/action?format=xml'); Estilos CSS Como mencionamos anteriormente, cuando cargamos los mdulos necesarios para mostrar los datos, debamos pasar como parmetro un archivo de estilos CSS. En el caso de
42
que los datos los mostremos en una grilla, estas, asociadas a algn estilo, se vern de la siguiente manera: coffee-with-milk
grayedout
greenHdg
iegradient (Internet Explorer solamente)
tanChisel
Warmfall
43
Compatibilidad de LiveGrid con los distintos navegadores de internet LiveGrid ha sido testeado por los diseadores en los navegadores web y sistemas operativos que se detallan a continuacin, obteniendo resultados satisfactorios, excepto en los puntos remarcados:
Sistema Operativo Navegador Internet Explorer 6 Internet Explorer 7 Firefox 1.5 al 2.0 Firefox 3.0 Opera 9 Safari 2.0 Safari 3.0 Camino Konqueror 3.5 OK OK 1 OK
(Informacin obtenida de la pgina oficial del proyecto, http://openrico.sourceforge.net/)
Windows XP OK OK OK OK OK 1,2
Macintosh 10.4
Linux (Knoppix 5)
OK 1
OK
OK
Observaciones: 1. La barra de scroll desaparece (permanece oculto) cuando el men de la grilla es desplegado. 2. En Opera, para usar el doble click para invocar a los mens, se debe deshabilitar la opcin Doble click en el texto para mostrar el men contextual configurndolo a travs de Opciones -> Preferencias -> Etiquetas Avanzadas -> Toolbars. Podemos observar que LiveGrid abarca una amplia gama de navegadores y de sistemas operativos en los cuales puede funcionar sin inconvenientes. Efectos de animacin Rico 2.0 mantiene una animacin sensible a los efectos y transiciones mostrando los cambios al usuario de manera ms rica que las aplicaciones web tradicionales. Al contrario de
44
la mayora de los efectos, Rico 2.0 puede interrumpirse, pausarse, reiniciarse, y tiene otros efectos para habilitar interaccin sensible con el usuario. Rico proporciona varios efectos cinemticos que se efectan en una interfaz muy simple. Efecto Acorden: Uno de los efectos que la utilizacin de esta librera logra es el llamado Efecto Acorden en el cual se dispone de una cuadricula subdividida en distintas partes y a medida que el usuario clickea alguna de estas partes, la misma despliega la informacin que contenga dentro, generando un efecto acorden.
Figura 5: Imagen de un acordeon desarrollado con Rico (http://openrico.sourceforge.net)
En la imagen podemos ver el ejemplo que se encuentra dentro de la documentacin que posee la librera. En este momento el usuario realiz un click en la primera fila, por lo tanto las dems filas se agrupan para mostrar la informacin inherente a la fila seleccionada. En caso de que se seleccione otra fila, se generar un efecto acorden reacomodando todas las filas para mostrar la informacin de la seleccionada. Por supuesto que la informacin contenida dentro de cada una de las filas puede ser refrescada mediante la utilizacin de AJAX. Drag & Drop: Las aplicaciones de escritorio utilizan ya desde hace un tiempo el Drag & Drop (arrastre y deje caer) en sus interfaces para simplificar la interaccin del usuario. Rico provee de una interfaz muy sencilla para lograr que nuestra aplicacin web permita el drag and drop. En el ejemplo que mostramos a continuacin (tambin perteneciente a la documentacin que se encuentra dentro de la carpeta de la librera) se muestran dos zonas, la de la izquierda posee algunos nombres de personas los cuales mediante la tcnica de drag & drop se pueden arrastrar y colocar en la zona ubicada a la derecha. Adems debajo de estas dos zonas se encuentra un recuadro en el cual, a medida que se realizan las acciones antes mencionadas, se muestra dinmicamente un registro de log mostrando informacin de los movimientos realizados por el usuario, y debajo de esta se muestra el cdigo fuente necesario para generar el efecto.
45
Figura 6: Imagen de un ejemplo utilizando la tcnica del Drag & Drop desarrollado con Rico (http://openrico.sourceforge.net)
AJAX Una caracterstica de Rico es que nos provee un muy buen soporte para trabajar con peticiones de tipo AJAX al servidor. Para ello cuenta con un objeto global llamado AjaxEngine (dentro de la librera Rico se encuentra la clase AjaxEngine). A diferencia de lo que ocurre con Prototype, el AjaxEngine de Rico nos provee de un sistema que, adems de realizar peticiones utilizando el objeto XMLHttpRequest, define un tipo de respuesta en formato XML que consiste en una serie de elementos (etiquetas) con el nombre response. El AjaxEngine decodifica ese cdigo XML y a partir de l puede construir dos tipos de respuestas: unas que sirvan para actualizar elementos DOM de la pgina y otras que sirven para actualizar objetos javascript. Una vez que se incluye en la aplicacin la librera Rico, automticamente se genera una instancia de la clase AjaxEngine que puede ser utilizada. Por lo tanto AjaxEngine es el mecanismo de Rico para poder aadir capacidades AJAX a las pginas web, requiere un proceso de 3 pasos para llevar a cabo la actualizacin de los elementos de una pgina va AJAX. Como veremos en el ejemplo a continuacin, se simplifican enormemente todas las tareas que tienen que ver con la peticin y la recepcin de los datos devueltos por el servidor. Los pasos antes comentados podramos resumirlos de la siguiente manera: Paso 1: Registrar el gestor de peticin Se realiza de la siguiente manera: ajaxEngine.registerRequest(mipet, ricotest2.php); Lo que aqu hacemos es asociar el nombre mipet a una peticin a la rutina del servidor que se encuentra en el archivo ricotest2.php. Esta peticin va a obtener un archivo XML bien formateado, por lo tanto el archivo ricotest.php debe generar una estructura 46
determinada. El archivo XML debe cumplir la siguiente estructura para poder trabajar con Rico: <ajax-response> <response type=element id=mostrar> <p> <addres> Apache/2.0.58 (Win32) PHP/5.1.4 Server at Port 80 </addres> </p> </response> <response type=element id=titular> <h3>Alguna informacin</h3> </response> </ajax-response>
Las etiquetas <ajax-response> y <response> deben estar obligatoriamente en la estructura XML
Paso 2: Registrar el gestor de respuesta ajaxEngine.registerAjaxElement(mostrar); En este caso, el mtodo a utilizar depende del tipo de dato que nos va a devolver el servidor. Estos mtodos pueden ser registerAjaxElement o registerAjaxObject ya que Rico permite gestionar la devolucin tanto del tipo de datos Element como del tipo de datos Object. Las respuestas de tipo Element estn pensadas para actualizar elementos de pgina HTML, pero uno de los grandes aportes de Rico es que las respuestas de tipos Object pueden tener manejadores para procesos de respuesta dentro del propio cdigo javascript. Por lo tanto podemos llevar a cabo modificaciones en el propio cdigo javascript mediante el uso de registerAjaxObject. Paso 3: Hacer la llamada mediante un gestor de evento onClick=ajaxEngine.sendRequest(mipet); Ejemplo: Mostrar la hora del servidor sin refrescar la pagina en un campo de texto al presionar un botn. <head> <script src = rico.js></script> <script languaje = javascript type=text/javascript> function llamarRico(){ ajaxEngine.registerRequest(mipet, ricotest2.php); //registramos el gestor de peticin ajaxEngine.registerAjaxElement(showtime); //registramos el gestor de respuesta } 47
</script> </head> <body onLoad=llamarRico()> //llamamos a la funcin Rico en el evento onLoad del //body <input type=button value=Dime hora onClick=ajaxEngine.sendRequest(mipet);> //en el evento onCLick del botn envo la peticin <div id=showtime> //esta es la div en la que se mostrara la hora del servidor </div> </body> El ejemplo anterior enva la peticin a un archivo ricotest2.php el cual se encargar de generar un archivo XML correctamente formateado para trabajar con rico. El archivo XML generado para este ejemplo deber tener la siguiente estructura: <ajax-response> <response type=element id=showtime> //posee el id del elemento de pgina (en este caso un div) en el cual se //mostrar la hora Hora del servidor </response> </ajax-response>
Ejemplo 5 (obtenido de http://openrico.sourceforge.net y probado localmente)
Podemos decir con certeza que Rico amplia las capacidades de Prototype incluyendo componentes visuales, utilizando hojas de estilos incluidas en la librera o creadas por el programador.
script.aculo.us
script.aculo.us es una coleccin de libreras en JavaScript que ayuda al desarrollador web a agregar funcionalidades AJAX a sus proyectos. Proporciona diferentes componentes visuales que permiten realizar tareas especficas de aplicaciones de escritorio como arrastrar y soltar elementos, campos de textos autocompletables, autocorreccin de texto, etc. Esta librera fue publicada en junio del 2005. La actual versin del framework es la 1.8.1 lanzada el 3 de enero del 2008. Al igual que muchas otras, script.aculo.us est basada en Prototype, por lo tanto podremos decir que script.aculo.us es un complemento que proporciona componentes grficos a dicha librera. La instalacin es muy sencilla y basta con descomprimir el archivo (obtenido mediante descarga de la pgina oficial http://script.aculo.us/) dentro de la carpeta de nuestro proyecto web para luego poder referenciarla. 48
Un aspecto muy importante de esta librera es su licencia. La librera se distribuye bajo la licencia MIT58. Composicin de la librera Una vez descomprimido el archivo no encontraremos con una estructura de carpetas como la siguiente: lib: en este directorio de encuentra la librera Prototype.js src: aqu se encuentran los archivos (componentes) JavaScript propios de la librera. test: dentro de este directorio podremos encontrar una serie de ejemplos de los ms variados, los cuales podremos ejecutar dentro de un navegador web y adems estudiar su cdigo fuente. Instalacin La instalacin es extremadamente sencilla. Basta con colocar una etiqueta de tipo <script> dndole a su atributo la ubicacin del archivo a importar. <script src="javascripts/prototype.js" type="text/javascript"> </script> <script src="javascripts/scriptaculous.js" type="text/javascript"> </script> Por defecto al importar el archivo scriptaculous.js carga todo los dems archivos JavaScript necesarios para efectuar distintos tipos de efectos (drag and drop, sliders, etc.), pero existe la posibilidad de seleccionar los mdulos que necesitemos de la siguiente forma: <script type="text/javascript" src="/javascript/scriptaculous.js?load=effects,dragdrop"> </script> Los scripts que se pueden cargar de esta manera son: effects, dragdrop, builder, controls y slider. Efectos: Esta librera provee una enorme cantidad de efectos basados en JavaScript que no precisamente utilizan la tecnologa AJAX. Es decir, son mtodos JavaScript que se ejecutan en el lado del cliente sin intervencin de un objeto que interacte con el servidor. Debido a que el objetivo de esta tesina es mostrar las capacidades AJAX que poseen las diferentes libreras existentes en el mercado, obviaremos estos componentes y nos centraremos nicamente en los mtodos que proveen de dicha funcionalidad a nuestras aplicaciones. Componentes AJAX La clase padre que contiene todas las subclases y mtodos para trabajar con AJAX es, justamente, la clase Ajax.
La licencia MIT es una de tantas licencias de software que ha empleado el MIT (Massachusetts Institute of Technology). Esta licencia no tiene copyright, lo que permite su modificacin. Esta licencia permite reutilizar el Software as licenciado tanto para ser software libre como para ser software no libre, permitiendo no liberar los cambios realizados al programa original. Fuente: http://blackshell.usebox.net/archivo/289.php
58
49
Ajax.InPlaceEditor: Este componente permite convertir un elemento HTML en un campo de texto editable automticamente disparado mediante un evento, generalmente un click del ratn. new Ajax.InPlaceEditor( element, url, {options}); El constructor de este objeto admite tres parmetros: el primero de ellos es el elemento al cual queremos aplicarle la propiedad de convertirlo en un campo editable, el segundo elemento es la ubicacin (URL) del archivo al cual queremos enviar los datos editados (submit) y el tercer elemento es opcional y permite configurar ciertas opciones. Opciones:
Nombre okControl
Valor por defecto button
Descripcin
Valores posibles
Qu tipo de botn Ok se utilizar button, en el modo de edicin. link, false Qu tipo de botn Cancel se button, utilizar en el modo de edicin. link, false El texto que tendr el botn que realiza el envo de datos (submit). El texto que tendr el botn para cancelar el envo de datos. El texto que aparecer mientras se realiza la actualizacin de los datos en el servidor. El mensaje que aparecer cuando se coloque el puntero del mouse sobre el texto editable. El id asignado al elemento.
cancelControl
link
okText
ok
cancelText savingText
cancel Saving
clickToEditText
Click to edit
formId externalControl null
Id de un elemento que acta como control externo utilizado para entrar al modo de edicin. Activa o desactiva la edicin onClick para que solo un mando externo pueda habilitar la edicin. La altura en filas del campo de texto (mayor a 1 el elemento se convierte en un rea de texto).
externalControlOnly
false
rows
onComplete
function(transport, Cdigo que se ejecutar si la element) {new actualizacin en el servidor se Effect.Highlight(element, realiz exitosamente. {startcolor: 50
this.options.highlightcolor} );} onFailure function(transport) Cdigo que se ejecutar si se {alert(Error produjo algn error en la communicating with the actualizacin de datos. server: + transport.responseText.stri pTags());} Nmero de columnas del rea de texto. Cumple la misma funcin que el atributo cols cuando utilizamos un campo de texto de una lnea (rows=1) Ajax.InPlaceEditor.defaultH ighlightColor #FFFFFF inplaceeditor-saving El color del momento final de actualizacin. El color que toma el objeto al finalizar la actualizacin. La clase CSS que se agrega al elemento cuando se muestra el texto que indica que se est realizando la actualizacin (Saving) La clase CSS utilizada para el formulario de edicin. Texto recuperado del servidor y mostrado por pantalla. Si el parmetro loadTextURL es utilizado, entonces el texto especificado en este parmetro se mostrar mientras la informacin del servidor est siendo procesada. Es una funcin que se ejecutar justo antes de que la peticin sea enviada al servidor, debe devolver los parmetros a ser enviados en la URL. Si esta opcin est en verdadero, el formulario enva los datos cuando el elemento pierde el enfoque. Opciones especiales que podemos pasarles a las clases Prototype.
cols size
highlighcolor highlightendcolor savingClassName
formClassName loadTextURL loadingText
inplaceeditor-form null Loading
callback
function(form) {Form.serialize(form)}
submitOnBLur
false
ajaxOptions
{}
51
El componente del lado del servidor recibe el valor enviado mediante el mtodo POST a travs de una variable llamada value para procesar la informacin, y debe devolver el nuevo valor como parte del cuerpo de la respuesta. Ejemplo: En este sencillo ejemplo podemos ver el funcionamiento de este componente. <p id="editme"> Click me, click me! </p> <script type="text/javascript"> new Ajax.InPlaceEditor('editme', '/demoajaxreturn.php'); </script> Se trata de un prrafo con un texto dentro que al clickearlo con el mouse se convierte automticamente en un campo editable que contiene un valor el cual podremos enviarlo a una URL especifica (mediante el mtodo POST) para trabajarlo en el servidor.
Luego de clickear el texto:
Ejemplo 6 (obtenido de http://wiki.github.com y probado localmente)
Podemos ver que el mismo se transform en un campo editable en el cual podemos modificar el valor y, presionando el botn Ok, se enva el dato a la URL (en este caso particular demoajaxreturn.php) especificada. Ajax.InPlaceCollectionEditor: Este componente tiene un comportamiento similar al anterior con la singular diferencia de que en lugar de generar un campo de texto editable genera una lista desplegable con opciones seleccionables por el usuario. new Ajax.InPlaceCollectionEditor( element, url, { collection: [array], [moreOptions] } ); El constructor de este objeto admite tres parmetros: el primero de ellos es el elemento al cual queremos aplicarle la propiedad de convertirlo en una lista desplegable, el segundo elemento es la ubicacin (URL) del archivo al cual queremos enviar los datos editados (submit) y el tercer elemento es opcional y permite configurar algunas opciones. Dentro de estas opciones existe una que es fundamental y es la opcin que le indica a la librera los valores que debe tener la lista desplegable generada. Ejemplo: <p id="tobeedited">three</p> <script> new Ajax.InPlaceCollectionEditor('tobeedited', '_ajax_inplaceeditor_result.php, {collection: ['one','two','three'], ajaxOptions: {method: 'get'} }); 52
</script> Se trata de un prrafo con un texto dentro que al clickearlo con el mouse se convierte automticamente en una lista desplegable que contiene un valor el cual podremos enviarlo a una URL especifica (mediante el mtodo POST) para trabajarlo en el servidor.
Luego de clickear el texto:
Ejemplo 7 (obtenido de http://wiki.github.com y probado localmente)
Podemos ver que el mismo se transform en una lista desplegable en la cual podemos seleccionar algn valor y, presionando el botn Ok, se enva el dato a la URL (en este caso particular _ajax_inplaceeditor_result.php) especificada. Ajax.Autocompleter: Este componente permite generar palabras autocompletadas con datos recuperados desde el servidor. Muy til para generarlo con informacin recuperada desde una base de datos. new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options); El constructor de este objeto admite tres parmetros: el primero de ellos es el id del campo de texto desde el cual el servidor toma los datos para brindar las opciones de autocompletar, el segundo es el id del elemento (generalmente un elemento div) en el cual se mostraran las distintas opciones de texto que el usuario podr elegir, la tercera opcin indica la ubicacin del archivo que realizar la consulta en el lado del servidor y devolver los datos, y el cuarto parmetro es opcional y permite configurar algunas opciones. Opciones:
Nombre paramName
Valor por defecto Nombre del elemento
Descripcin Nombre del parmetro para el texto tecleado por el usuario en el campo a autocompletar Frecuencia con la que se debe disparar una peticin AJAX La cantidad mnima de caracteres que se deben ingresar en el campo de texto antes de comenzar una peticin El elemento que
Valores posibles
frequency
0.4
minChars
select
null
53
contiene el texto que ser puesto en el campo de entrada indicator null El id de un elemento para desplegar mientras la demanda AJAX est siendo procesada. til para mostrar al usuario alguna imagen o texto mientras se lleva a cabo el procesamiento. Funcin que se ejecuta despus de que el usuario seleccione un elemento de la lista de sugerencias. Por defecto el comportamiento consiste en seleccionar el elemento, mostrarlo en el cuadro de texto y ocultar la lista de sugerencias. Si se indica una funcin propia, no se ejecuta este comportamiento por defecto. Similar a la opcin updateElement. En este caso, la funcin indicada se ejecuta despus de la funcin por defecto y no en sustitucin de esa funcin por defecto.
updateElement
null
afterUpdateElement
null
Ejemplo: en este ejemplo observaremos como trabajar con este componente. <script language="javascript" src="scriptaculous-js-1.8.1/lib/prototype.js" type="text/javascript"></script> //incluimos la librera prototype.js <script language="javascript" src="scriptaculous-js-1.8.1/src/scriptaculous.js" type="text/javascript"></script> //incluimos la librera scriptaculous <body> <form method="get" action=""> //formulario de envo de datos <input type="text" id="search" name="search" autocomplete="off" /> //campo de entrada de datos <br /> <div id="update" style="display: none; position:relative;"></div> 54
//elemento en el cual se mostrara la lista de sugerencias </form> //fin del formulario <script language="javascript" type="text/javascript"> new Ajax.Autocompleter('search','update','response.php', { tokens: ','} ); //funcin autocompleter, se pasa como parmetro el id del campo de texto (search), el id del elemento en el cual se mostrara la lista y el archivo que procesar la peticin (response.php) </script> </body> Nota: el archivo response.php procesa la informacin a partir del parmetro enviado (en este caso search) y devuelve como resultado de este procesamiento una lista del tipo <ul> <li> <li> <li> </ul> o en su defecto cualquiera de sus variantes.
Podemos ver que a medida que introducimos el texto dentro del campo, debajo de l se muestra una lista con distintas opciones a seleccionar. Al seleccionar una de estas opciones el campo de texto se autocompletar con la informacin elegida.
Ejemplo 7 (desarrollado y probado localmente)
Para finalizar con este pantallazo a esta potente librera, podemos decir que el universo de componentes y utilidades que posee es mucho mayor. Estamos obviando elementos como el Slider el cual es un componente que permite modificar el tamao, forma o color de algn objeto mediante un deslizador de tipo scroll; o como el Autocompleter.local el cual es un componente que permite utilizar un arreglo vectorial de cadenas de texto para ser usados en el proceso de autocompletado de texto de un campo especfico. Sin embargo queda claro que no hacemos hincapi en este tipo de componentes debido a que no utilizan tecnologa AJAX y son componentes JavaScript puros en los cuales no existe procesamiento alguno del lado del servidor. 55
jQuery
Podemos afirmar que jQuery es la librera JavaScript que ha irrumpido con ms fuerza como alternativa a Prototype. Como sucede con todas las libreras exitosas, actualmente recibe contribuciones de decenas de programadores. jQuery tambin ha sido programada de forma muy eficiente y su versin comprimida apenas ocupa 20 KB. Comparte con Prototype muchas ideas e incluso dispone de funciones con el mismo nombre. Sin embargo, su diseo interno tiene algunas diferencias drsticas respecto a Prototype, sobre todo el encadenamiento de llamadas a mtodos. La documentacin de jQuery es muy completa en ingls e incluye muchos ejemplos. Adems, tambin existen algunos recursos tiles en espaol para aprender su funcionamiento bsico. Funciones y mtodos La funcin bsica de jQuery tiene el mismo nombre que en Prototype, ya que se trata de la funcin Dlar $(). A pesar de compartir el nombre con la funcin anloga de Prototype, posee diferencias que hacen de esta funcin mucho ms potente. La cadena de texto que se pasa como parmetro puede hacer uso de Xpath59 o de CSS para seleccionar los elementos. Adems, separando expresiones con un caracter , se puede seleccionar un nmero ilimitado de elementos. Ejemplos: $('a') //Selecciona todos los enlaces de la pgina $('#primero') // Selecciona el elemento cuyo id sea "primero" $('h1.titular') // Selecciona todos los h1 con class "titular" $('a, #primero, h1.titular') // Selecciona todo lo anterior $('p[a]') // Selecciona todos los prrafos de la pgina que tengan al menos un enlace $('input:radio') // Selecciona todos los botones de seleccin de tipo radio de los formularios de la pgina $('a:contains("Imprimir")') // Selecciona todos los enlaces que contengan la palabra "Imprimir" $('div:visible') // Selecciona los div que no estn ocultos $("ul#menuPrincipal li:even") // Selecciona todos los elementos pares de una lista $("ul#menuPrincipal li:odd") // Selecciona todos los elementos impares de una lista $("p:lt(5)") // Selecciona los 5 primeros prrafos de la pgina Las posibilidades de la funcin $() van mucho ms all de estos ejemplos sencillos, ya que soporta casi todos los selectores definidos por CSS360 (algo que dispondrn los navegadores dentro de un tiempo). Como se puede comprobar, las posibilidades de la funcin $() son prcticamente
XPath (XML Path Language) es un lenguaje que nos sirve para buscar informacin dentro de un documentos con esctructura en XML, XPath permite buscar y seleccionar teniendo en cuenta la estructura jerrquica del XML. Fuente: http://www.carlosleopoldo.com/post/que-es-el-xpath-y-para-que-sirve/ 60 Nueva versin de CSS. Posee nuevas propiedades. Es la evolucin de CSS.
59
56
ilimitadas. Funciones para eventos Una de las utilidades ms interesantes de jQuery est relacionada con el evento onload de la pgina. Las aplicaciones web ms complejas suelen utilizar un cdigo similar al siguiente para iniciar la aplicacin: window.onload = function() { }; Hasta que no se carga la pgina, el navegador no construye el rbol DOM, lo que significa que no se pueden utilizar funciones que seleccionen elementos de la pgina, ni se pueden aadir o eliminar elementos. El problema de window.onload es que el navegador espera a que la pgina se cargue completamente, incluyendo todas las imgenes y archivos externos que se hayan enlazado. jQuery propone el siguiente cdigo para ejecutar las instrucciones una vez que se ha cargado la pgina: $(document).ready(function() { }); La gran ventaja del mtodo propuesto por jQuery es que la aplicacin no espera a que se carguen todos los elementos de la pgina, sino que slo espera a que se haya descargado el contenido HTML, con lo que el rbol DOM ya est disponible para ser manipulado. De esta forma, las aplicaciones JavaScript desarrolladas con jQuery pueden iniciarse ms rpidamente que las aplicaciones JavaScript tradicionales. En realidad, ready() no es ms que una de las muchas funciones que componen el mdulo de los eventos. Todos los eventos comunes de JavaScript (click, mousemove, keypress, etc.) disponen de una funcin con el mismo nombre que el evento. Si se utiliza la funcin sin argumentos, se ejecuta el evento: $('p').click() // Ejecuta el evento 'onclick' en todos los prrafos de la pgina $('div#menu').mouseover() // Ejecuta el evento 'mouseover' sobre un 'div' con id 'menu' No obstante, el uso ms habitual de las funciones de cada evento es el de establecer la funcin manejadora que se va a ejecutar cuando se produzca el evento: $('p').click(function() { alert($(this).text()); }); // Establece la funcin manejadora del evento 'onclick' a todos los prrafos de la pgina $('#elFormulario :input').blur(function() { valida($(this)); }); // Establece la funcin manejadora del evento 'onblur' a los elementos de un formulario Entre las utilidades definidas por jQuery para los eventos se encuentra la funcin toggle(), que permite ejecutar dos funciones de forma alterna cada vez que se pincha sobre un elemento: 57
$("p").toggle(function(){ alert("Me acabas de activar"); },function(){ alert("Me acabas de desactivar"); }); En el ejemplo anterior, la primera vez que se pincha sobre el elemento (y todas las veces impares), se ejecuta la primera funcin y la segunda vez que se pincha el elemento (y todas las veces pares) se ejecuta la segunda funcin. Funciones para efectos visuales Las aplicaciones web ms avanzadas incluyen efectos visuales complejos para construir interacciones similares a las de las aplicaciones de escritorio. jQuery incluye en la propia librera varios de los efectos ms comunes: $('a').hide() // Oculta todos los enlaces de la pgina $('div:hidden').show() // Muestra todos los 'div' que estaban ocultos $('div').toggle() // Muestra los 'div' que estaba ocultos y oculta // los 'div' que eran visibles Todas las funciones relacionadas con los efectos visuales permiten indicar dos parmetros opcionales: el primero es la duracin del efecto y el segundo parmetro es la funcin que se ejecuta al finalizar el efecto visual. Otros efectos visuales incluidos son los relacionados con el fundido o fading (fadeIn() muestra los elementos con un fundido suave, fadeOut() oculta los elementos con un fundido suave y fadeTo() establece la opacidad del elemento en el nivel indicado) y el despliegue de elementos (slideDown() hace aparecer un elemento desplegndolo en sentido descendente, slideUp() hace desaparecer un elemento desplegndolo en sentido ascendente, slideToggle() hace desaparecer el elemento si era visible y lo hace aparecer si no era visible). Funciones para AJAX Como sucede con Prototype, las funciones y utilidades relacionadas con AJAX son parte fundamental de jQuery. El mtodo principal para realizar peticiones AJAX es $.ajax() (importante no olvidar el punto entre $ y ajax). A partir de esta funcin bsica, se han definido otras funciones relacionadas, de ms alto nivel y especializadas en tareas concretas ($.get(), $.post(), $.load(), etc.). La sintaxis de $.ajax() es muy sencilla: $.ajax(opciones) Al contrario de lo que sucede con Prototype, la URL que se solicita tambin se incluye dentro del arreglo asociativo de opciones. $.ajax({ url: '/ruta/hasta/pagina.php', type: 'POST', async: true, 58
data: 'parametro1=valor1&parametro2=valor2', success: procesaRespuesta, error: muestraError }); La siguiente tabla muestra todas las opciones que se pueden definir para el mtodo $.ajax(): Opcin async Descripcin Indica si la peticin es asncrona. Su valor por defecto es true, el habitual para las peticiones AJAX Permite indicar una funcin que modifique el objeto XMLHttpRequest antes de realizar la peticin. El propio objeto XMLHttpRequest se pasa como nico argumento de la funcin Permite establecer la funcin que se ejecuta cuando una peticin se ha completado (y despus de ejecutar, si se han establecido, las funciones de xito o error). La funcin recibe el objeto XMLHttpRequest como primer parmetro y el resultado de la peticin como segundo argumento. Indica el valor de la cabecera Content-Type utilizada para realizar la peticin. Su valor por defecto es application/x-www-formurlencoded Informacin que se incluye en la peticin. Se utiliza para enviar parmetros al servidor. Si es una cadena de texto, se enva tal cual, por lo que su formato debera ser parametro1=valor1&parametro2=valor2. Tambin se puede indicar un arreglo asociativo de pares clave/valor que se convierten automticamente en una cadena tipo string El tipo de dato que se espera como respuesta. Si no se indica ningn valor, jQuery lo deduce a partir de las cabeceras de la respuesta. Los posibles valores son: xml (se devuelve un documento XML correspondiente al valor responseXML), HTML (devuelve directamente la respuesta del servidor mediante el valor responseText), script (se evala la respuesta como si fuera JavaScript y se devuelve el resultado) y JSON (se evala la respuesta como si fuera JSON y 59
beforeSend
complete
contentType
data
dataType
se devuelve el objeto JavaScript generado) error Indica la funcin que se ejecuta cuando se produce un error durante la peticin. Esta funcin recibe el objeto XMLHttpRequest como primer parmetro, una cadena de texto indicando el error como segundo parmetro y un objeto con la excepcin producida como tercer parmetro Permite considerar como correcta la peticin solamente si la respuesta recibida es diferente de la anterior respuesta. Por defecto su valor es false Indica si se transforman los datos de la opcin data para convertirlos en una cadena de texto. Si se indica un valor de false, no se realiza esta transformacin automtica Permite establecer la funcin que se ejecuta cuando una peticin se ha completado de forma correcta. La funcin recibe como primer parmetro los datos recibidos del servidor, previamente formateados segn se especifique en la opcin dataType Indica el tiempo mximo, en milisegundos, que la peticin espera la respuesta del servidor antes de anular la misma El tipo de peticin que se realiza. Su valor por defecto es GET, aunque tambin se puede utilizar el mtodo POST La URL del servidor a la que se realiza la peticin
ifModified
processData
success
timeout
type
url
Adems de la funcin $.ajax() genrica, existen varias funciones relacionadas que son versiones simplificadas y especializadas de esa funcin. As, las funciones $.get() y $.post() se utilizan para realizar de forma sencilla peticiones GET y POST: $.get('/ruta/hasta/pagina.php'); // Peticin GET simple $.get('/ruta/hasta/pagina.php', { articulo: '34' }, function(datos) { alert('Respuesta = '+datos); }); // Peticin GET con envo de parmetros y funcin que procesa la respuesta Las peticiones POST se realizan exactamente de la misma forma, por lo que slo hay que cambiar $.get() por $.post(). Por lo tanto viendo el ejemplo anterior podemos decir que la sintaxis de estas funciones es: 60
$.get(url, datos, funcionManejadora); El primer parmetro (URL) es el nico obligatorio e indica la URL solicitada por la peticin. Los otros dos parmetros son opcionales, siendo el segundo (datos) los parmetros que se envan junto con la peticin y el tercero (funcionManejadora) el nombre o el cdigo JavaScript de la funcin que se encarga de procesar la respuesta del servidor. La funcin $.get() dispone a su vez de una versin especializada denominada $.getIfModified(), que tambin obtiene una respuesta del servidor mediante una peticin GET, pero la respuesta slo est disponible si es diferente de la ltima respuesta recibida. jQuery tambin dispone de la funcin $.load(), que es idntica a la funcin Ajax.Updater() de Prototype. La funcin $.load() inserta el contenido de la respuesta del servidor en el elemento de la pgina que se indica. La forma de indicar ese elemento es lo que diferencia a jQuery de Prototype:
<div id="info"></div>
// Con Prototype new Ajax.Updater('info', '/ruta/hasta/pagina.php'); // Con jQuery $('#info').load('/ruta/hasta/pagina.php'); Al igual que suceda con la funcin $.get(), la funcin $.load() tambin dispone de una versin especfica denominada $.loadIfModified() que carga la respuesta del servidor en el elemento slo si esa respuesta es diferente a la ltima recibida. Por ltimo, jQuery tambin dispone de las funciones $.getJSON() y $.getScript() que cargan y evalan/ejecutan respectivamente una respuesta de tipo JSON y una respuesta con cdigo JavaScript. Funciones para CSS jQuery dispone de varias funciones para la manipulacin de las propiedades CSS de los elementos. Todas las funciones se emplean junto con una seleccin de elementos realizada con la funcin $(). Si la funcin obtiene el valor de las propiedades CSS, slo se obtiene el valor de la propiedad CSS del primer elemento de la seleccin realizada. Sin embargo, si la funcin establece el valor de las propiedades CSS, se establecen para todos los elementos seleccionados. $('div').css('background'); // Obtiene el valor de una propiedad CSS // En este caso, solo para el primer 'div' de la pgina $('div').css('color', '#000000'); // Establece el valor de una propiedad CSS // En este caso, para todos los 'div' de la pgina $('div').css({ padding: '3px', color: '#CC0000' }); // Establece varias propiedades CSS // En este caso, para todos los 'div' de la pgina Adems de las funciones anteriores, CSS dispone de funciones especficas para obtener/establecer la altura y anchura de los elementos de la pgina: $('div').height(); // Obtiene la altura en pxel del primer 'div' de la pgina 61
$('div').height('150px'); // Establece la altura en pxel de todos los 'div' de la pgina $('div').width(); // Obtiene la anchura en pxel del primer 'div' de la pgina $('div').width('300px'); // Establece la anchura en pxel de todos los 'div' de la pgina Funciones para nodos DOM La funcin $() permite seleccionar elementos (nodos DOM) de la pgina de forma muy sencilla. jQuery permite, adems, seleccionar nodos relacionados con la seleccin realizada. Para seleccionar nodos relacionados, se utilizan funciones de filtrado y funciones de bsqueda. Los filtros son funciones que modifican una seleccin realizada con la funcin $() y permiten limitar el nmero de nodos devueltos. La funcin contains() limita los elementos seleccionados a aquellos que contengan en su interior el texto indicado como parmetro: $('p').contains('importante'); // Slo obtiene los prrafos que contengan la palabra // 'importante' La funcin not() elimina de la seleccin de elementos aquellos que cumplan con el selector indicado: $('a').not('.especial'); // Selecciona todos los enlaces de la pgina, salvo el que // tiene una 'class' igual a 'especial' $('a').not($('.especial')); // La siguiente instruccin es equivalente a la anterior La funcin filter() es la inversa de not(), ya que elimina de la seleccin de elementos aquellos que no cumplan con la expresin indicada. Adems de una expresin, tambin se puede indicar una funcin para filtrar la seleccin: $('ul').filter('.menu'); // Selecciona todas las listas de elementos de la pgina y se // queda slo con las que tengan una 'class' igual a 'menu' Una funcin especial relacionada con los filtros y buscadores es end(), que permite volver a la seleccin original de elementos despus de realizar un filtrado de elementos. $('a').filter('.pinchame').click(function(){ alert('Ests abandonando este sitio web'); }).end().filter('ocultame').click(function(){ $(this).hide(); return false; }).end(); El cdigo anterior obtiene todos los enlaces de la pgina $(a) y aplica diferentes funciones manejadoras del evento click en funcin del tipo de enlace. Aunque se podran incluir dos instrucciones diferentes para realizar cada filtrado, la funcin end() permite encadenar varias selecciones. El primer filtrado ($(a).filter(.pinchame))) selecciona todos los elementos de la pgina cuyo atributo class sea igual a pinchame. Despus, se asigna la funcin manejadora para el evento de pinchar con el ratn mediante la funcin click().
62
A continuacin, el cdigo anterior realiza otro filtrado a partir de la seleccin original de enlaces. Para volver a la seleccin original, se utiliza la funcin end() antes de realizar un nuevo filtrado. De esta forma, la instruccin .end().filter(ocultame) es equivalente a realizar el filtrado directamente sobre la seleccin original $(a).filter(.ocultame)). El segundo grupo de funciones para la manipulacin de nodos DOM est formado por los buscadores, funciones que buscan/seleccionan nodos relacionados con la seleccin realizada. De esta forma, jQuery define la funcin children() para obtener todos los nodos hijo o descendientes del nodo actual, parent() para obtener el nodo padre o nodo ascendente del nodo actual (parents() obtiene todos los ascendentes del nodo hasta la raz del rbol) y siblings() que obtiene todos los nodos hermano del nodo actual, es decir, todos los nodos que tienen el mismo nodo padre que el nodo actual. La navegacin entre nodos hermano se puede realizar con las funciones next() y pev() que avanzan o retroceden a travs de la lista de nodos hermano del nodo actual. Por ltimo, jQuery tambin dispone de funciones para manipular fcilmente el contenido de los nodos DOM. Las funciones append() y prepend() aaden el contenido indicado como parmetro al principio o al final respectivamente del contenido original del nodo. Las funciones after() y before() aaden el contenido indicado como parmetro antes de cada uno de los elementos seleccionados. La funcin wrap() permite envolver un elemento con el contenido indicado (se aade parte del contenido por delante y el resto por detrs). La funcin empty() vaca de contenido a un elemento, remove() elimina los elementos seleccionados del rbol DOM y clone() copia de forma exacta los nodos seleccionados. Otras funciones tiles jQuery detecta automticamente el tipo de navegador en el que se est ejecutando y permite acceder a esta informacin a travs del objeto $.browser: $.browser.msie; // 'true' para navegadores de la familia Internet Explorer $.browser.mozilla; // 'true' para navegadores de la familia Firefox $.browser.opera; // 'true' para navegadores de la familia Opera $.browser.safari; // 'true' para navegadores de la familia Safari Recorrer arreglos y objetos tambin es muy sencillo con jQuery, gracias a la funcin $.each(). El primer parmetro de la funcin es el objeto que se quiere recorrer y el segundo parmetro es el cdigo de la funcin que lo recorre (a su vez, a esta funcin se le pasa como primer parmetro el ndice del elemento y como segundo parmetro el valor del elemento): var vocales = ['a', 'e', 'i', 'o', 'u']; $.each( vocales, function(i, n){ alert('Vocal nmero ' + i + " = " + n); }); // Recorrer arreglos var producto = { id: '12DW2', precio: 12.34, cantidad: 5 }; $.each( producto, function(i, n){ alert(i + ' : ' + n); 63
}); // Recorrer objetos

Nota: Todos los ejemplos y definiciones incluidas en esta seccin fueron obtenidos del paper Introduccin a AJAX de Javier Eguluz Perez el cual fue descargados de la pgina www.librosweb.es. Los ejemplos fueron testeados localmente.
Dojo Toolkit
Dojo Toolkit es una librera de cdigo abierto escrita en JavaScript para ayudar a desarrollar aplicaciones web. Provee de un API bien concebido y de un juego de herramientas que ayuda al desarrollador a abstraerse de los problemas cotidianos que implica el desarrollo con JavaScript. Estas herramientas eliminan las complejidades propias del manejo de objetos DOM, animaciones, AJAX, internacionalizacin, normalizacin del teclado, accesibilidad, etc. Dojo es un Framework que contiene widgets61 para facilitar el desarrollo de aplicaciones web que utilicen tecnologa AJAX. Contiene un sistema de empaquetado inteligente, los efectos de UI, drag and drop APIs, widget APIs, abstraccin de eventos, almacenamiento de APIs en el cliente, e interaccin de APIs con AJAX. Dojo resuelve asuntos de usabilidad comunes como pueden ser la navegacin y deteccin del navegador, soportar cambios de URL en la barra de URLs para luego regresar a ellas (bookmarking), y la habilidad de degradar cuando AJAX/JavaScript no es completamente soportado en el cliente. Proporciona una gama ms amplia de opciones en una sola biblioteca JavaScript y es compatible con navegadores antiguos. La ltima versin de la librera es la 1.2.0 la cual la podemos encontrar en distintas versiones: Dojo Base: incluye AJAX, eventos, consultas basadas en CSS, animaciones, JSON, utilidades de idioma, entre otros. Se distribuye todo en un solo archivo dojo.js el cual contiene todas las caractersticas enumeradas anteriormente. Dojo Toolkit 1.2.0: Este paquete contiene Dojo + Dijit + DojoX (explicaremos estos componentes ms adelante) Dojo ShrinkSafe: Interesante herramienta que, aunque no encuadre dentro de las libreras AJAX, vale la pena mencionar ya que su utilizacin brinda un complemento muy til. Proporciona una interfaz web para comprimir cdigos fuente de JavaScript, y reducir su tamao (los bytes que ocupan) notablemente, hasta en un tercio, dependiendo del cdigo en cuestin. La interfaz permite introducir el cdigo nicamente en forma de fichero. Como resultado de la compresin, genera un fichero que el usuario puede guardar en su PC, con el nombre que desee. La nica opcin de configuracin permite elegir entre eliminar los retornos de lnea o no. Si se selecciona eliminarlos, el cdigo resultante ocupar una nica (e inmensa) lnea. Dojo ShrinkSafe basa la compresin en un intrprete JavaScript desarrollado por el proyecto Mozilla, llamado Rhino62. Por este motivo, este compresor es muy fiable, garantizando que el cdigo comprimido seguir funcionando exactamente igual que el original. Eso s, adems de ocupar menos, el cdigo comprimido es casi ilegible, por lo que hay que conservar siempre la versin original.
Componente con el cual un usuario interacta en una interfaz grfica. Son ejemplos de widget las ventanas, cajas de texto, checkboxs, listbox, entre otros. Son utilizados por los programadores para hacer aplicaciones con interfaces grficas. Fuente: http://www.alegsa.com.ar/Dic/widget.php 62 http://www.mozilla.org/rhino/
61
64
Instalacin Existen 3 formas principales de instalar Dojo: Utilizando el CDN63 (Content Delivery Network) de AOL64: Este mtodo es rpido y no requiere ningn tipo de instalacin. Solamente se requiere incluir Dojo a travs de un tag65 <script> que apunte al CDN de AOL. Con este mtodo evitamos utilizar espacio extra en nuestro servidor para almacenar la librera. Instalar Dojo en el propio servidor de la aplicacin: Este es el mtodo tradicional en el cual alojamos la librera en el propio servidor donde corre la aplicacin. Primero debemos descargarla desde internet (recordemos que es una librera gratuita), luego descomprimir el contenido dentro de nuestro servidor web. Asumiendo que lo instalamos dentro de la carpeta js de nuestro sitio, la estructura de directorios debera quedar de la siguiente manera:
Figura 7: Estructura de directorios de Dojo
Una vez que lo tenemos ya descomprimido y colocado en nuestro sitio abrimos nuestro navegador en la direccin http://nuestrositio/js/dojo0.9.0/dijit/themes/themeTester.html y, si todo funciona con normalidad, deberemos ver una pgina como la siguiente:
Las CDN suministran contenidos albergados en servidores distribuidos geogrficamente que se instalan en los extremos de varias redes en funcin de la proximidad fsica del navegante. Fuente: https://www.idg.es/comunicaciones/impart.asp?id=126791 64 Empresa estadounidense que presta servicios de internet a nivel global. Fue fundada en 1983 bajo el nombre CVC. Es propiedad de Time Warner desde el 11 de enero de 2001. Tiene su sede en Dulles, Virginia. Fuente: http://www.alegsa.com.ar/Dic/aol.php 65 Los tags (etiquetas) son los comandos que los programas navegadores leen e interpretan para armar y dar forma a las pginas de Internet. Fuente: http://web.uservers.net/ayuda/soluciones/paginas-y-html/-que-es-un-tag_Mjg.html
63
65
Figura 8: Pgina de testeo de la librera Dojo
Subversion66: Para aquellas personas que lo desean, tambin existe la posibilidad de descargar desde los repositorios de subversion la ltima versin actualizada del cdigo fuente de la librera, el que muchas veces contiene errores debido a la falta de pruebas y testeos. Por lo tanto esta opcin no es muy recomendada. Dijit: La librera de Widgets de Dojo Dojo es una librera Ajax desarrollada ntegramente en JavaScript, por lo tanto en s misma no posee componentes grficos ni widgets que hagan la experiencia del usuario ms llevadera. De esto se encarga Dijit, la cual es una librera incluida dentro de Dojo (nicamente en la versin Dojo Toolkit) que posee widgets que se integran fcilmente con Dojo y hacen que los componentes tpicos de los formularios HTML sean ms vistosos a los usuarios. Posee la particularidad de brindar la posibilidad de utilizarlos de 2 maneras: declaratoriamente usando los atributos especiales dentro de las etiquetas HTML o programticamente a travs de JavaScript. Todo en Dijit est diseado para ser accedido globalmente, adaptndose a los usuarios con idiomas, culturas, y habilidades diferentes. Las traducciones de idiomas, texto bidireccional y la representacin cultural de cosas como los nmeros y las fechas son todos encapsulados dentro de los widgets. Muestra de widgets: Existe una gran cantidad de elementos o widgets que brinda Dijit para su utilizacin; vamos a mostrar algunos de ellos para tener una muestra de todo lo que se puede hacer con esta librera para mejorar notoriamente la experiencia del usuario. CheckBox ComboBox
Subversion es un controlador de versiones empleado en la administracin de archivos utilizados en el desarrollo de software o contenido. Fuente: http://www.osmosislatina.com/subversion/basico.htm
66
66
CurrencyTextBox
DateTextBox
FilteringSelect
Slider
TextBox
ValidationTextBox
AccordionContainer
StackContainer
TabContainer
Button, ComboButton, DropDownButton
Menu
ProgressBar
67
ColorPalette
Tree
Editor
Figuras 9: Widgets de Dijit (http://dojotoolkit.org)
Temas: Dijit provee tambin una serie de Temas que modifican el aspecto de cada uno de los componentes anteriores. La librera incluye 3 temas, pero no quita la posibilidad de que un programador experto en CSS pueda disear otros adaptndolos a sus necesidades. Tundra
68
Soria
Noir
Figuras 10: Temas de Dijit (http://dojotoolkit.org)
Funcionamiento La mejor forma de estudiar el funcionamiento es a travs de un ejemplo. Vamos a desarrollar un ejemplo concreto explicando cada una de las partes que lo componen para poder comprender el funcionamiento y el poder de esta librera. La primer parte del cdigo consiste en un tpico esqueleto HTML con 3 cosas: Una llamada a un par de hojas de estilo CSS de la librera Un elemento script en la cabecera del documento. Este elemento (dojo.js) es el responsable se cargar la librera JavaScript que nos dar acceso a todas las funcionalidades. En el cuerpo del documento se carga la clase CSS tundra propia de la librera. <html> 69
<head> <title>Dojo: Hello World!</title>  <style type="text/css"> @import "dojoroot/dijit/themes/tundra/tundra.css"; @import "dojoroot/dojo/resources/dojo.css" </style> <script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"> </script> </head> <body class="tundra"> </body> </html> Creando el botn widget: Ahora pasaremos a la parte ms importante y a la vez interesante de todas. Crearemos un Widget que har las veces de botn con el texto Hola Mundo. El widget contiene 3 estados visuales (mouseOut, mouseOver, mouseDown) que mejoran notoriamente la experiencia del usuario. El primer paso para crear el botn es decirle a Dojo que cargue el mdulo apropiado. En el encabezado agregamos otra seccin <script> de la siguiente forma: <script type="text/javascript"> dojo.require("dijit.form.Button"); </script> La lnea dojo.require() le dice a la librera que cargue el botn widget. Si omitiramos esta lnea, entonces el botn que utilizaramos seria uno estndar de HTML. Una vez que tengamos cargado este widget podremos utilizarlo para crear botones de la siguiente manera: <button dojoType="dijit.form.Button" id="helloButton"> Hello World! </button>
Figura 11: Imagen que se obtendr como resultado de la ejecucin del cdigo anterior
El atributo importante en este elemento HTML es el atributo dojoType que le dice a la librera que utilice el widget especificado para crear el elemento cuando la pgina es cargada. Es este caso estamos utilizando un elemento button pero llegado el caso podemos utilizar un elemento input o cualquier otro elemento HTML siempre y cuando est presente en la librera y lo carguemos previamente. 70
Conectando un evento al widget: Dojo nos permite gestionar eventos de una forma distinta a la habitual pero de forma sencilla. En lugar de colocar una funcin o mtodo dentro del evento onClick del elemento tenemos la posibilidad de crear un tag HTML especfico colocando dentro el cdigo JavaScript que queremos que se ejecute. De esta manera el evento es gestionado directamente por la librera. Veamos un ejemplo: <button dojoType="dijit.form.Button" id="helloButton"> Hello World! <script type="dojo/method" event="onClick"> alert('You pressed the button'); </script> </button> Podemos observar que definiendo un tag script dndole al atributo type un valor dojo/method y especificando el tipo de evento que queremos utilizar solo nos queda escribir el cdigo que queremos ejecutar. Esto nos permite tener un cdigo ms ordenado y aprovechar al mximo todas las virtudes de DOM nivel 267 dentro del script. Gracias al aprovechamiento de esta especificacin podemos detectar cuando el usuario presiona el botn Ctrl o Shift de su teclado entre otras ventajas. Leyendo datos desde el servidor: Dojo provee de un mtodo para obtener datos desde el servidor. Este mtodo se llama xhrGet. Posee la particularidad de recibir como parmetro una funcin que es la que se ejecutar ante algn evento especificado y una funcin que mostrar un mensaje de error en caso de que se produzca alguno. En primer lugar debemos definir las funciones de respuesta antes mencionadas dentro de dos etiquetas script. <script> function helloCallback(data,ioArgs) { alert(data); } function helloError(data, ioArgs) { alert('Error when retrieving data from the server!'); } </script> Aqu definimos 2 funciones: una que se ejecutar al dispararse algn evento del documento y la otra que es la que se ejecutar en caso de que se produzca un error. Los dos argumentos de las funciones son importantes y no se debe omitir ninguno de ellos. El primero de ellos (data) corresponde a los datos que el servidor devolver (en caso de que esto suceda) y el segundo corresponde a un objeto Dojo que raramente es modificado y
Est construido sobre el nivel 1 y consiste de 14 mdulos. Entre los mdulos ms importantes se encuentran el mdulo de manejo de eventos de usuarios y el mdulo de hojas de estilo. Este ltimo representa los estilos que se le pueden asignar a un documento Fuente: http://www.adrformacion.com
67
71
por lo tanto no haremos mencin a l. Ahora lo que haremos es escribir el cdigo necesario para que estas funciones se ejecuten ante un evento, en este caso un click sobre el botn. <script type="dojo/method" event="onClick"> dojo.xhrGet( {url:'response.txt', load: helloCallback, error: helloError }); </script> Como podemos observar se sigue la misma metodologa comentada anteriormente en la cual se coloca dentro de un tag de tipo script el cdigo que se ejecutar ente el evento onCLick del botn, en este caso, a diferencia del ejemplo anterior en la cual se mostraba un mensaje sin intervencin del servidor, la funcin xhrGet() del objeto Dojo es la que se encarga de recuperar los datos devueltos. Los parmetros necesarios son 3: la URL del archivo del servidor que procesar la peticin y devolver la informacin requerida, la funcin que se ejecutar en caso de una respuesta favorable de parte del servidor, y por ltimo la funcin a ejecutar en caso de que se produzca un error. Como curiosidad podemos ver que el archivo colocado dentro del parmetro URL es un documento de texto plano. En este caso lo que se mostrar al ejecutarse la funcin AJAX es el texto que contenga este archivo. Enviando datos hacia el servidor mediante el mtodo GET: Para el ejemplo de envo de datos hacia el servidor vamos a utilizar el mismo mtodo xhrGet() del ejemplo anterior, el cual realizaba la lectura de los datos. La diferencia radica en que en el caso del envo de datos se incorpora un nuevo parmetro: content. Veamos el ejemplo debajo. <button dojoType="dijit.form.Button" id="helloButton"> Hello World! <script type="dojo/method" event="onClick"> dojo.xhrGet({ url: 'HelloWorldResponseGET.php', load: helloCallback, error: helloError, content: {name: dojo.byId('name').value } }); </script> </button> Please enter your name: <input type="text" id="name"> 72
Podemos ver que el parmetro content le permite al programador enviar valores al servidor en forma de parmetros. En este caso el mtodo byId() recupera el valor del elemento del documento actual que posea el valor name en el atributo Id. Por lo tanto a travs de la URL (recordemos que estamos utilizando el mtodo GET) viajar un parmetro de nombre name que contendr el valor del elemento identificado con el id name. Dems est decir que no es obligatorio enviar los datos a un archivo php, podemos utilizar cualquier tecnologa de servidor como jsp, perl, ASP, Rubi, etc. Por lo tanto podemos afirmar que Dojo es una librera independiente del lenguaje utilizado del lado del servidor. Enviando datos hacia el servidor mediante el mtodo POST: Para el envo de datos a travs del mtodo POST es necesario realizar algunas modificaciones al cdigo anterior. Se debe crear un formulario que encierre al elemento o los elementos que contienen los datos e indicarle que el envo de los mismos se realizar mediante este mtodo. <form id="myForm" method="POST"> Please enter your name: <input type="text" name="name"> </form> Adems en lugar de utilizar el mtodo xhrGet() haremos uso en este caso del mtodo xhrPost(). <script type="dojo/method" event="onClick"> dojo.xhrPost({ url: 'HelloWorldResponsePOST.php', load: helloCallback, error: helloError, form: 'myForm' }); </script> Podemos observar que en este caso no se utiliza en el mtodo xhrPost() el parmetro content, sino que este es reemplazado por el parmetro form, en el cual se debe colocar el id del formulario en cuestin.
Nota: Todos los ejemplos y definiciones incluidas en esta seccin fueron obtenidos de la pgina oficial del proyecto (http://dojotoolkit.org). Los ejemplos fueron testeados localmente.
Anna
Anaa es un acrnimo se An Ajax API. Es una sencilla pero completa librera escrita en JavaScript con funciones para cargar y guardar informacin desde y hasta el servidor. El cdigo de Anaa es fcil de entender y de extender. Al ser una librera JavaScript pura, permite trabajar con cualquier lenguaje del lado del servidor. La librera es open source bajo licencia GPL 2.068. Su instalacin es sencilla, basta con descargar el archivo .zip de su sitio oficial,
General Public License (Licencia Pblica General). Licencia creada por la Free Software Foundation y orientada principalmente a los trminos de distribucin, modificacin y uso de software libre. Fuente: http://www.alegsa.com.ar/Dic/gpl.php
68
73
descomprimirlo en la raz de nuestra aplicacin e incluir el archivo anaa.js que es el corazn de la librera. Descripcin de sus atributos y funciones bsicas Atributos: AACaching Valor: Boolean Descripcin: Este atributo puesto en verdadero permite el cacheo del browser y en falso deshabilita esta funcionalidad. Lo recomendable es dejarlo en falso para asegurarnos que la aplicacin est realmente interactuando con el servidor. Deshabilitando el cacheo reducimos la performance de la aplicacin en archivos grandes, pero habilitndolo podemos obtener resultados no deseados. Funciones: AACreate Argumentos: ninguno Retorna: ningn valor Sintaxis: AACreate(); Descripcin: Este mtodo es llamado para crear una instancia del objeto XMLHttpRequest. AARead Argumentos: url: El archivo a cargar callback: La funcin que se llamar cuando el archivo es cargado. element: un elemento de la pgina actual el cual ser objeto de actualizacin mediante AJAX. Retorna: ningn valor Sintaxis: AARead(url, callback, element); Descripcin: Este mtodo es llamado para leer un documento. El tipo de documento es determinado por la extensin. AALoadXML Argumentos: url: un archivo XML callback: La funcin que se llamar cuando el archivo es cargado. element: un elemento de la pgina actual el cual ser objeto de actualizacin mediante AJAX. Retorna: ningn valor Sintaxis: AALoadXML(url, callback, element); Descripcin: Carga un archivo XML. AALoadHTML: 74
Argumentos: url: La pagina web a cargar callback: La funcin que se llamar cuando el archivo es cargado. storage-id: el identificador del tag (usualmente una <div>) que ser utilizado para almacenar el contenido de la pgina cargada. param: un string, usualmente el id del div donde colocaremos la informacin que ser mostrada. retorna: nada. Retorna: ningn valor Sintaxis: AALoadHTML(url, callback, storage-id, param); Descripcin: Carga el contenido de una pgina HTML dentro de una variable o tag definida en la pgina actual. Por lo tanto esta funcin nos permite acceder a datos de otra pgina mediante los mtodos del Document Object Model (DOM). Antes de llamar a esta funcin, se debe declarar una variable o tag para almacenar el contenido de la pgina a cargar. Este mtodo llama a una funcin definida por el usuario y pasada como argumento que procesa el cuerpo de la pgina HTML cargada. Tambin se pasa como argumento el id del elemento en el cual desplegar o almacenar los datos extrados. AAWrite: Argumentos: url: el script a ejecutar con el parmetro a enviar data: el string de parmetros a enviar (mtodo get) en la URL function: parmetro opcional. Nombre de la funcin callback69 a llamar. Retorna: ningn valor Sintaxis: AAWrite(url, data [, function] ); Descripcin: Funcin que se utiliza para enviar datos a un script. AAHead: Argumentos: url: ubicacin del archivo en el servidor key: llave en el encabezado function: Nombre de la funcin callback a llamar. element: Tag para la funcin Retorna: ningn valor Sintaxis: function AAHead(url, key, function, element) Descripcin: Lee el encabezado de un archivo AAGetBody:
Un Callback es un cdigo ejecutable que es pasado cmo un argumento a otro cdigo. Esto permite al software de la capa de alto nivel llamar a una subrutina (funcin) definida en una capa de bajo nivel. Fuente: http://www.carlosleopoldo.com/post/que-es-un-callback/
69
75
Argumentos: content: Es un string, usualmente se trata del contenido del responseText cuando este es cargado. Retorna: un string Sintaxis: function AAGetBody(content) Descripcin: Extrae el contenido de la etiqueta del cuerpo de un string que contiene la pgina web.
Bindows
Bindows es una framework AJAX para crear aplicaciones ricas de internet creado por MB Technologies70. Internamente utiliza DHTML y utiliza mtodos basados en XML para comunicarse con el servidor. El lenguaje de programacin es JavaScript. Tiene su origen en las fuerzas reas de EEUU y una madurez de ms de cuatro aos. Esto lo posiciona como uno de los framework ms maduros para afrontar la nueva generacin de sistemas web. El nombre Bindows proviene de la combinacin de Business Intelligence (BI)71 y Windows. El Framework Bindows incluye un abanico de clases o API (de Programacin Orientada a Objetos) para implementar todo tipo de controles de usuario en una aplicacin web, como ventanas, campos de texto, de seleccin, solapas, reglas, barras de desplazamiento, mens, grficas, barras de progreso, etc. Todo sin tener que escribir ni una lnea de HTML, sino directamente programando con la API de Bindows. Forma de trabajo El framework sigue el estilo de programacin de Swing (Java)72 y el Document Object Model (DOM). Los nombres de las clases comienzan con el prefijo 'Bi'(por ejemplo, BiObject, BiRadioButton, etc.). Las aplicaciones Bindows son ajenas a: Servidor: cualquier servidor (Java, .NET, PHP, etc., puede ser usado con Bindows) Sistema operativo: Cualquier sistema operativo puede ser usado en el cliente (mientras posea un navegador) Lenguaje de programacin: Cualquier lenguaje es soportado. Bindows soporta
MB Technologies es una empresa de tecnologa registrada en el pas de Georgia pero que posee los laboratorios de desarrollo de Bindows en Suecia. Esta empresa est centrada en proporcionar soluciones de negocio a gobiernos y grandes corporaciones. Fuente: http://mb.bindows.net/ 71 Inteligencia de Negocios (BI por sus siglas en ingls) es la combinacin de herramientas, tcnias y metodologas que, apoyadas de las Tecnologas de Informacin, facilitan la explotacin y el anlisis de informacin para convertirla en conocimiento y con ello apoyar a la toma de decisiones. Fuente: http://www.biconsulting.com.mx/index.php?option=com_content&view=article&id=51&Itemid=58 72 Swing es un paquete grfico que ha aparecido en la versin 1.2 de Java. Est compuesto por un amplio conjunto de componentes de interfaces de usuario que funcionen en el mayor nmero posible de plataformas. Fuente: http://pisuerga.inf.ubu.es/lsi/Invest/Java/Tuto/IV_3.htm
70
76
Unicode73 Navegador: la mayora de los navegadores son soportados (por ejemplo, Internet Explorer 5.5 o superior, Mozilla Firefox 1.4 y superiores, Netscape 7.1 y superiores, K-Meleon, Camino, entre otros) Para entender el funcionamiento y la forma de trabajo con esta librera estudiaremos un pequeo ejemplo funcional explicando las partes ms importantes del cdigo y la configuracin de los archivos que definen el ambiente de trabajo. Lo primero que se debe hacer es configurar un archivo XML llamado Application Description File (ADF) que Bindows utiliza para definir las aplicaciones. Login.xml <?xml version="1.0"?> <Application defaultPackages="Core,Gui,Loaders,Grid,TreeView"> <Window caption="Login"> <Window caption="Login" id="wLogin" width="250" height="180" showMinimize="false" showMaximize="false" resizable="false" showClose="false" canMinimize="false"> <GroupBox left="5" top="5" right="5" height="100"> <Label left="10" top="15" id="lLogin" text="Username:" /> <Label left="10" top="55" id="lPassword" text="Password:" /> <TextField left="100" top="10" id="tUsername" /> <PasswordField left="100" top="50" id="pPassword" /> </GroupBox> <Button left="80" width="80" top="115" text="Login" id="bLogin" onaction="oLogin.authenticate();"/> </Window> </Window> <Resources> <Script src="login.js" /> </Resources>
Estndar industrial cuyo objetivo es proporcionar el medio por el cual un texto en cualquier forma e idioma pueda ser codificado para el uso informtico. Fuente: http://www.alegsa.com.ar/Dic/unicode.php
73
77
</Application> Como podemos ver, a travs de tags instanciamos y configuramos diferentes componentes de Bindows. En el ejemplo anterior se instancio un componentes Caption, un componente GroupBox y un componente Button. Podemos ver que dentro de la tag Resources se declaran los scripts que va a utilizar la aplicacin. En este caso est incluido el archivo login.js. Podemos ver adems que existe un botn llamado bLogin, el cual llama al mtodo oLogin.authenticate() en el evento onaction. Este mtodo se encuentra en la clase principal de la aplicacin. Ahora veamos el archivo login.js: login.js // Implementacin del patrn Singleton74 _p = login.prototype; // Instanciamos la clase principal var oLogin; // Definimos la clase principal function login () { } // Creamos una nueva instancia de la aplicacin login.main = function () { oLogin = new login; } // Definimos los mtodos _p.authenticate = function () { // serializamos la entrada de datos del usuario var userInput = new Object; userInput.username = application.getComponentById("tUsername").getText(); userInput.password = application.getComponentById("pPassword").getText(); var sendData = BiJson.serialize(userInput); // recibimos los datos del servidor var data = new Object; // creamos un objeto BiJsonLoader()
Singleton es un patrn de diseo que obliga al programador a tener una sola instancia de una clase, es decir, globalmente slo se podr disponer de un objeto de ese tipo. Fuente: http://rfog.blogsome.com/2008/03/03/singleton-con-y-sin-singleton/
74
78
var loader = new BiJsonLoader(); // escuchamos para cargar el evento loader.addEventListener("load", function () { data = this.getData(); if (data.AUTH_OK) { alert("Welcome!") } else { alert("You are not welcome!") } }, loader); // enviamos los datos al servidor loader.load("login.php?userinput=" + sendData); } En cada aplicacin Bindows existe una clase principal de aplicacin. En este caso la clase es login. Dentro del script js hemos capturado el prototipo de login en la variable _p y le hemos adjuntado el mtodo autenticate(). Este mtodo es el que dispara el evento onaction del botn bLogin declarado. El mtodo prepara un objeto JSON con los textos ingresados en los campos login y password y se lo enviar al archivo login.php del lado del servidor web. El login.php recibir el objeto JSON, lo decodificar, realizar la validacin de login, y responder con un objeto JSON. Este objeto JSON de respuesta es alojado en la variable data. Una vez que tenemos listo nuestro Application Description File, nuestra lgica de eventos y la lgica de negocio del lado del servidor, podremos lanzar la aplicacin Bindows. Esto se realiza a travs de un archivo html. index.htm <html> <head> <title>Login</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Cache-Control" content="no-cache"> <link type="text/css" rel="StyleSheet" href="../Bindows/html/css/bimain.css"> <script type="text/javascript" src="../Bindows/html/js/application.js"></script> </head> 79
<body> <script type="text/javascript">application.start("../Bindows/html", "login.xml"); </script> </body> </html> En index.htm indicamos donde se encuentra el framework Bindows y la aplicacin xml a ejecutar. En este caso se trata de login.xml. Objetos y programacin orientada a objetos La programacin en Bindows es orientada a objetos. Una aplicacin Bindows es usualmente una combinacin de componentes y objetos a medida. Bindows provee a los programadores a una larga lista de objetos, organizados en un rbol de clases. El programador de aplicaciones puede usar estos objetos directamente o creando nuevos componentes a medida. Widgets Son los elementos ms importantes de la librera ya que brindan el aspecto visual caracterstico de los sistemas operativos Windows. Bindows soporta los siguientes widgets: Labels (etiquetas) buttons (botones) checkboxs (cajas de chequeo) radio buttons (radio botones) textareas (reas de texto) mens (mens) toolbars (barra de herramientas) statusbar (barra de estado) tooltips (ayuda emergente) grillas trees (rboles) sliders (deslizadores) progress bars (barras de progreso) mapa de imgenes
80
Figura 11: Pantalla de ejemplo de una aplicacin diseada con Bindows (http://www.bindows.net)
Licencia El sistema es de libre uso, aunque slo para fines no comerciales, con lo que podemos descargar el kit de desarrollo (SDK Software Development Kit) libremente, aunque en una versin de evaluacin. Este contiene el API Bindows y una serie de ejemplos y documentacin para empezar a manejarlo. Si se desea utilizar en aplicaciones comerciales hay que pagar una licencia. Ventajas Las ventajas ms importantes de utilizar Bindows es disponer de una interfaz de usuario muy avanzada en aplicaciones que se ejecutan en el navegador y se comportan como aplicaciones Windows. Todo ello con un lenguaje del cliente como JavaScript, lo que permite independencia del servidor donde est alojado. Como la mayora de las acciones se desarrolla en el cliente sin cambiar de pgina, reduce las llamadas al servidor y el ancho de banda necesario para atender a los usuarios. Tambin, desde el punto de vista del programador, permite el desarrollo de una manera mucho ms estructurada y separando la programacin en el lado del cliente y del servidor. El modo de desarrollo est orientado a la creacin de cdigo JavaScript y XML, por lo que en principio no hara falta ni conocimientos de HTML ni CSS. Todo ello sin instalar ningn control en los navegadores del cliente, que siempre es una gran ventaja.
Nota: Todos los ejemplos y definiciones incluidas en esta seccin fueron obtenidos de la pgina oficial del proyecto Bindows www.bindows.net
Cuando usar frameworks JavaScript?

Los frameworks JavaScript aqu estudiados poseen 2 principales caractersticas que debemos tener en cuenta: la primera es la gratituidad de las mismas ya que, a excepcin de Bindows que posee una licencia para su uso comercial, nos permite desarrollar aplicaciones AJAX evitando el costo de licencias que muchas veces son elevados e imposibles de costear, 81
por lo tanto una de las cuestiones a tener en cuenta es la cantidad de recursos (econmicos) con los cuales contamos. La segunda caracterstica es la libertad de desarrollar aplicaciones independientes del lenguaje utilizado en el lado del servidor debido a que las mismas estn basadas ntegramente en JavaScript y se ejecutan del lado del cliente. Es recomendable usar este tipo de libreras cuando la aplicacin a desarrollar no requiere de grandes ni lujosos efectos grficos o multimediales, ya que estn limitadas a proveer de componentes JavaScript limitados en prestaciones graficas (la mayora de estos componentes estn diseados a partir de la combinacin de JavaScript con hojas de estilo CSS). No se integran con Web Services lo que tambin es una limitante en el caso de querer utilizar este tipo de tecnologas. Los volmenes de datos a traficar no son una limitante para este tipo de libreras. Si lo que queremos realizar es una aplicacin de tipo funcional, con detalles estticos interesantes pero limitados, de bajo costo, abstraernos de la complejidad de JavaScript y DOM, logrando con esto mayor velocidad en el desarrollo, este tipo de libreras son las recomendables.
82
Captulo 4: Libreras ultralivianas JavaScript
83
Introduccin
Existen una infinidad de libreras JavaScript a las que nosotros denominamos ultralivianas. Esta definicin expresa la naturaleza de las mismas en cuanto a su tamao, sencillez de uso, funcionalidades que posee y casos de uso en los cuales utilizar alguna de ellas es lo ms conveniente. Todas las libreras mencionadas anteriormente son las ms importantes, si definimos por importantes como la suma de variables como el xito que tienen en el mercado, su tamao, complejidad, componentes que posee, sublibreras contenidas, archivos CSS, etc. Todas las libreras mencionadas dentro de este captulo son livianas, al punto de llegar a pesar 33Kb descomprimidas (si lo comparamos por ejemplo con Prototype que ocupa 100Kb podemos entender lo que queremos decir con livianas). Debido a la sencillez de uso y funcionalidad limitada que poseen dichas libreras, expondremos a grandes rasgos sus caractersticas ms relevantes sin ahondar mucho en detalles tcnicos menores.
AJS
AJS es una librera JavaScript pura muy pequea ya que descomprimida no supera los 30KB. Caractersticas que incluye: Funciones fciles de usar para trabajar con Ajax Efectos Drag and Drop Funciones para trabajar con DOM Soporta JSON Documentacin y ejemplos de todas las funciones ms importantes Soporta todos los navegadores modernos, desde IE hasta Firefox pasando por Opera y Safari. Posee un script en Python75 para examinar el cdigo fuente de una pgina y detectar cdigo JavaScript, permitiendo generar un archivo con todo este cdigo mucho ms pequeo y comprimido. Licencia MIT Versin: La ltima versin estable disponible para la descarga es la 4.5, la cual contiene la librera en s y un conjunto de ejemplos y la documentacin correspondiente. Contras: Funcionalidades limitadas Efectos visuales limitados
Lenguaje de programacin de propsito general, orientado a objetos, que tambin puede utilizarse para el desarrollo web. Fuente: http://www.desarrolloweb.com/articulos/1325.php
75
84
No soporta navegadores antiguos, como por ejemplo Netscape 4 o IE 5
Fleegix.js
Provee de una librera ligera y liviana basada en JavaScript para desarrollar interfaces web dinmicas con funcionalidades AJAX. El cdigo no intenta convertir JavaScript en algn otro lenguaje. Es JavaScript puro y ordinario. Est distribuida bajo licencia Apache 2. Funciona en la mayora de los navegadores modernos (Internet Explorer 6 o superior, Safari 2 o superior, Firefox 1 o superior). Cdigo: El cdigo de Fleegix incluye la mayora de las funciones bsicas que se necesitan para programar aplicaciones AJAX, como son: Un sistema de eventos JSON Serializacin de elementos HTML Manipulacin de CSS Efectos visuales Plugins: Esta librera posee una interesante variedad de plugins que se pueden utilizar para hacer nuestras interfaces ms atractivas como por ejemplo calendarios JavaScript, utilidades de fecha, utilidades de conversin de colores, entre otros. Versiones: Fleegix.js 0.5.0 versin comprimida (19 Kb) Fleegix.js 0.5.0 versin comprimida en formato gzip (6.4 Kb) Fleegix.js 0.5.0 versin descomprimida (45 Kb)
Rialto
Rialto (Rich Internet Application Toolkit) es una librera JavaScript basada en widgets. Es independiente del lenguaje utilizado en el servidor por lo tanto pude utilizarse con los distintos lenguajes que hemos ido nombrando anteriormente. Es una librera ideal para utilizarla en aplicaciones web de tipo corporativas y no es muy aconsejable para ser utilizada en sitios web comerciales o de entretenimiento debido a la falta de componentes visuales que posee. Los componentes bsicos que esta librera incorpora son puntuales y se agrupan en formularios, drag & drop, rboles, listas de datos con columnas ajustables, pop up. Estos componentes pueden ser de gran utilidad a la hora de desarrollar una aplicacin corporativa que sea estticamente agradable para el usuario y que disminuya el costo de programacin. La librera es distribuida bajo licencia Apache.
85
Figura 12: Pantalla de ejemplo de un formulario con algunos componentes de Rialto (http://rialto.improve-technologies.com/rialtoDemo/demo2/demoRialto.html)
Cuando usar libreras ultralivianas JavaScript?

Este tipo de libreras es recomendable en aplicaciones pequeas en las cuales no se manipulen grandes volmenes de datos ni tampoco se requiera de grandes capacidades grficas. Proveen funcionalidades AJAX puntuales y limitadas pero muy tiles si queremos abstraernos de la complejidad de programacin de JavaScript. Son idelaes para aplicaciones que contengan formularios de entrada de datos ya que estticamente mejora notoriamente (con poco esfuerzo) en comparacin con los componentes estndar de HTML. Son libreras de tamao reducido pero potentes a la hora de desarrollar una aplicacin poco compleja y pequea.
86
Captulo 5: Libreras de lenguaje o plataforma especfica. Microsoft
87
Atlas
A mediados de 2006 Microsoft anuncia el lanzamiento herramienta para desarrollo con AJAX. Esta herramienta se denomina Atlas y est destinada a la realizacin de aplicaciones AJAX que posibiliten al desarrollador librarse de la programacin de cdigo JavaScript. Qu es atlas? Atlas es el framework AJAX de Microsoft el cual est preparado para ser integrado con el lenguaje ASP 2.0 tambin propiedad de la misma empresa. Se basa en ser un framework que interacta de manera asncrona entre el cliente y el servidor, dejando un pequeo archivo JavaScript en el cliente que luego en el servidor se comunica con su ASP 2.0. Arquitectura de Atlas Arquitectnicamente hablando, el framework Atlas est hecho de dos elementos distintos: una biblioteca de scripts del cliente y un conjunto de extensiones de servidor que integran Atlas con ASP.NET. La biblioteca de scripts del cliente est totalmente escrita en JavaScript por lo que funciona con cualquier navegador moderno. Los desarrolladores pueden escribir pginas web ricas basada en Atlas utilizando casi el mismo enfoque que conocen como desarrollo clsico de pginas basadas en ASP.NET. Atlas y ASP.NET en conjunto ofrecen un desarrollo de extremo a extremo, sin embargo, Atlas no est limitado ni vinculado a la plataforma de servidor ASP.NET. Ms precisamente, Atlas es totalmente independiente del servidor y puede trabajar con cualquier servidor web. La biblioteca de scripts del cliente Atlas puede ser utilizada en cualquier cliente y cualquier servidor, es decir que, si se trata Atlas con una plataforma de servidor distinta a ASP.NET 2.0, se deber proporcionar a Atlas los servicios y componentes necesarios en un formato que sea vlido para la plataforma de servidor. Por ejemplo, para un servidor web Apache76 con PHP de apoyo, debe tener el Atlas y el director de scripts escrito como generador de mdulos de PHP. En una plataforma ASP.NET, estos componentes estn disponibles a la instalacin de Atlas. Instalacin de Atlas Para empezar a utilizar Atlas, primero se debe descargar la versin ms reciente del framework. Si se tiene una versin de Visual Studio77 instalado, el paquete tambin configura el entorno de desarrollo integrado. En particular, contiene el Microsoft.Web.Atlas.dll y un archivo de configuracin Web.config. Este archivo de configuracin contiene todas las entradas adicionales necesarias para ejecutar correctamente aplicaciones Atlas. El montaje Atlas tambin incorpora un montn de archivos JavaScript que forman la biblioteca de scripts de cliente. Desarrollo de aplicaciones Atlas La forma ms adecuada para desarrollar aplicaciones Atlas es mediante la plantilla de
El Servidor Apache HTTP es un servidor Web de tecnologa Open Source slido y para uso comercial desarrollado por la Apache Software Foundation Fuente: http://web.mit.edu/rhel-doc/4/RH-DOCS/rhel-rg-es-4/ch-httpd.html 77 Es un entorno de desarrollo para crear aplicaciones que utilizan la tecnologa .NET y que forma parte de la familia de Visual Studio de Microsoft. Fuente: http://es.kioskea.net/telecharger/telecharger-294-visual-studio-2008-express
76
88
Visual Studio ya que realiza el montaje de los archivos necesarios de la carpeta bin a la nueva ubicacin del proyecto, adems de agregar un archivo web.config que contiene todos los ajustes necesarios para ejecutar una aplicacin Atlas. Tambin es posible crear una aplicacin Atlas sin el uso de Visual Studio, aadiendo manualmente la DLL78 Microsoft.Web.Atlas.dll en la carpeta bin de la aplicacin y editando un archivo web.config con todas las configuraciones necesarias. Componentes clave Atlas es un framework parte cliente y parte servidor. La mayora de las aplicaciones del lado del cliente utilizan una biblioteca JavaScript para la gestin de la interfaz de usuario de la pgina y llaman al servidor basndose en componentes. Los componentes del servidor generan la respuesta para el cliente y emiten scripts predefinidos y, a veces, se extiende la biblioteca cliente. Los componentes del lado de servidor de Atlas incluyen servicios web, controles ad hoc79, y la notacin de objetos de JavaScript (JSON). La biblioteca cliente: Est orientada a objeto y resuelve todas las cuestiones de compatibilidad de navegadores. La parte fundamental de la biblioteca cliente de Atlas es la capa de red que gestiona la complejidad de hacer llamadas a travs del objeto XMLHttpRequest. Esta capa permite al cliente comunicarse con los servicios web y pginas web a travs de llamadas asincrnicas, tambin proporciona una serie de comportamientos tales como arrastrar y soltar, popup flotante y una serie de controles que aprovechan plenamente la ejecucin del lado del cliente. Componentes del lado del servidor: Est constituido por servicios web y componentes basados en ASP.NET incluyendo los perfiles de usuarios, funciones de composicin y globalizacin. Los controles de servidor permiten manejar los comportamientos que estn vinculados a determinadas elementos segn la respuesta emitida desde la parte de servidor. El modelo de programacin de Atlas Atlas ofrece dos escenarios de desarrollo: server-centric y client-centric. En ambos casos, acaban teniendo aplicaciones web ricas con gran cantidad de cdigo JavaScript, la diferencia est en el modelo de programacin que se aplica. Un modelo server-centric permite aadir incrementalmente interfaces de usuario AJAX basada en el enriquecimiento de las aplicaciones existentes. Tambin le permite crear nuevas aplicaciones plenamente basadas en AJAX con un enfoque clsico de servidor centrado. Mantiene la parte fundamental de interfaz de usuario y lgica de aplicacin en el servidor, escrito en VB. NET o C #. Al mismo tiempo, las aplicaciones se benefician de las capacidades del navegador a travs de cdigo JavaScript. Su exposicin a JavaScript, sin embargo, es mnima, casi nula. Elegir un modelo server-centric en ASP.NET permite a los desarrolladores aadir una buena dosis de interactividad a las aplicaciones web con una muy breve curva de aprendizaje. Aprovechar plenamente del JavaScript y el DOM del navegador es el potencial de
Es la implementacin de Microsoft del concepto de bibliotecas (libreras) compartidas en sistemas Windows y OS/2. Fuente: http://www.alegsa.com.ar/Dic/dll.php 79 Que es apropiado o est dispuesto especialmente para un fin. Fuente: http://www.wordreference.com/definicion/ad+hoc
78
89
Atlas. De esta manera, puede proporcionar una significativa y rica experiencia de usuario interactiva. Es posible crear mash-ups80 y widgets para asemejar a una aplicacin de escritorio. En este modelo se utiliza un grupo ad hoc de controles de servidor y un framework de clases y servicios de aplicacin expuestos a los cdigos de cliente. Estas herramientas generan eventos que son escritos en JavaScript y emitidos por los controles de servidor Atlas. Este modelo es el ms parecido al clsico modelo de programacin de ASP.NET. Solo se debe utilizar un conjunto diferente de controles de servidor y estos controles junto con el framework Atlas hacen el trabajo. El marco de pginas de Atlas: Atlas requiere del lado del servidor en tiempo de ejecucin del componente ScriptManager. Este componente garantiza que la pgina contiene cualquier bloque de scripts necesarios para el navegador actual. El ScriptManager trabaja con actualizaciones incrementales y es responsable de la correcta emisin de scripts y de las referencias en la pgina del cliente para llamar a los servicios web, servicios de depuracin y servicios en tiempo de ejecucin. Toda pgina Atlas debe incluir una instancia de la ScriptManager. Es posible colocar el control en una pgina maestra, y poner a disposicin de todas las pginas de contenido. Solicitud de Servicios: Atlas suministra un par de servicios de aplicacin estndar para el cliente. Estos servicios de aplicacin se presentan en forma de servicios web, pero debe considerarse como verdaderos servicios de aplicacin. Ellos son el servicio de autenticacin y el perfil de servicio. El servicio de autenticacin es una envoltura para el ingreso y las operaciones de validacin de usuario. El perfil de servicio recupera del diccionario del usuario los datos en el formato definido por el perfil de modelo de datos en web.config. El perfil de servicio interacta con el perfil predeterminado que ASP.NET provee para realizar su trabajo. Controles de servidor: Las aplicaciones Atlas pueden utilizar los mismos controles, modelo de objetos y eventos que se utilizan para ASP.NET. Adems, agrega un nuevo conjunto de controles como calendarios, cajas de texto enriquecido, lista que actan como contenedores para los componentes de cliente Atlas. Estos controles de servidor emiten cdigo de script que puede utilizar la biblioteca cliente de Atlas. Los extensores de control son otro elemento clave en Atlas, son los componentes especiales para aadir capacidades de cliente a cualquier control ASP.NET. Incluyen herramientas de autocompletado y de arrastrar y soltar. Ellos se aplican como un bloque de cdigo de script declarativo adjunto a la ampliacin del control ASP.NET. En el modelo de programacin Client-Centric la diferencia clave est en el conocimiento y el uso de JavaScript. Esta es la nica herramienta disponible en la mayora de los navegadores. La biblioteca cliente Atlas contribuye a que el cdigo JavaScript sea an ms poderoso con un rico sistema de tipo en tiempo de ejecucin y un marco de clases. Los extensores definen los comportamientos que pueden asociarse a una variedad de controles ASP.NET. Un extensor es un componente que opera en el cliente, pero se puede conectar a su objetivo de control en el servidor. Cuando un control ASP.NET se ampla, este obligada a secuencias de comandos del cliente que proporciona el comportamiento deseado. Se pueden actualizar las propiedades, llamar a los mtodos, y proporcionar la
Es una aplicacin web que combina datos provenientes de distintas fuentes en una nica herramienta que las integra Fuente: http://blog.internexo.com/2008/02/qu-es-un-mashup.html
80
90
funcionalidad deseada, esto puede hacerlo desde el servidor utilizando extensores o desde el cliente a travs de script. Algunos script de comportamientos estn predefinidos en el sistema Atlas, incluido el de autocompletar, de popup, etc. Reduccin de servicios externos: Atlas puede conectarse fcilmente a los servicios web para enviar y recuperar datos, descarga automticamente los metadatos de servicios web y genera un proxy JavaScript donde el objeto XMLHttpRequest realiza llamadas a estos servicios. Este proxy JavaScript libera de tratar directamente con el Simple Object Access Protocol (SOAP) o Lenguaje de descripcin de servicios web (WSDL). Se pueden construir servicios web para Atlas, ya sea utilizando Windows Communication Foundation (WCF) o el clsico ASP.NET. Atlas consume servicios web de la misma manera, independientemente de que sean construidos con ASP.NET o alguna otra tecnologa. Adems Atlas incluye un cdigo de puente que permite a los desarrolladores crear puertas de enlace local a cualquier servicio web. De esta manera, el navegador se comunica exclusivamente con el cdigo de puente ubicado en el servidor. El puente, a su vez, interacta con el servicio web especificado (en cualquier lugar de Internet) y recoge los datos de la aplicacin cliente. Secuencias de comandos XML de Atlas: Atlas establece su propio mecanismo de canales de comunicacin entre el cliente y el servidor. Los componentes que existen en el cliente son totalmente diferentes de las que existen en el servidor. Desde un punto de vista de programacin, el cliente est dominado por JavaScript, sobre el servidor se utilizan los idiomas tales como C # y Visual Basic. NET. Al igual que los controles ordinarios de ASP.NET, los controles de servidor de Atlas emiten HTML y scripts. Adems, para la compatibilidad de navegador, tiene que ser HTML puro que contienen marcas que pueden interpretarse por los principales analizadores HTML. El HTML debe ser lo suficientemente compleja para contener toda la informacin que Atlas necesita en tiempo de ejecucin, debe crear un modelo de programacin para los elementos del cliente, pero no debe ser tan compleja para los navegadores. Para el enlace de los elementos HTML y script del lado del cliente con los controles, as como para proteger a los desarrolladores de las diferencias en los modelos de programacin del navegador, Atlas introduce un nuevo lenguaje declarativo llamado diseo de secuencias de comandos XML. Objetivos y beneficios de XML Script: Atlas ofrece una ruta alternativa declarativa basado en secuencias de comandos XML. Con XML, se crea una capa de cdigo declarativo que, sobre la base de las etiquetas HTML existentes y la informacin proporcionada vinculante, se extiende a la pgina DOM para crear una red de componentes de lgica programable similar a los controles de servidor ASP.NET. La idea es permitir que los desarrolladores puedan definir el comportamiento de pginas Atlas como una capa separada. De este modo, cada pgina es concebida de tres capas: contenido, estilo y comportamiento. El comportamiento de la pgina de un cliente puede ser expresado a travs de cdigo JavaScript imperativo, pero utilizando un enfoque declarativo tiene sus propias ventajas: los controles de servidor pueden generar ms fcilmente marcas de cdigo JavaScript. a travs de un enfoque declarativo, se indican a los elementos de la pgina lo que har, pero no la forma en que lo har. 91
La gestin de todos los elementos de una pgina web rica moderna es una tarea difcil y propensa a errores. Esta metodologa de uso de XML es sin duda una herramienta para hacerlo mejor y ms rpido. El XML basado en la sintaxis de scripts XML de Atlas se origina en la necesidad de insertar marcas en la pgina sin comprometer e interferir con la actividad normal del analizador HTML. Script XML en accin: Para este ejemplo se considera la necesidad de tener una etiqueta y una caja de texto y se debe reflejar la entrada de la caja de texto en la etiqueta sin hacer POST hacia el servidor. Se debe tener en cuenta que para que los scripts XML funcionen, la pgina debe incluir un control ScriptManager como se muestra en el siguiente fragmento de cdigo: <atlas:ScriptManager ID="scriptManager1" runat="server" /> <asp:textbox runat="server" id="TextBox1" /><br /> <asp:label runat="server" id="Label1" /> En la siguiente lnea se incluyen como ayuda a los navegadores: <input name="TextBox1" type="text" id="TextBox1" /> <br /> <span id="Label1"> </span> Para obtener el comportamiento deseado, se aaden algunas marcas de lneas de scripts XML: <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <textBox id="TextBox1" /> <label id="Label1"> <bindings> <binding dataContext="TextBox1"dataPath="Text" property="Text" /> </bindings> </label> </components> </page> </script>
Ejemplo 8 (obtenido http://www.asp.net/ajax/)
El <textBox> indica al cliente Atlas que TextBox1 es un elemento HTML del tipo Atlas TextBox control. <textBox> es una etiqueta que est representada a travs de una caja Web.UI.Text definida en la biblioteca cliente de Atlas. Del mismo modo, el elemento <label> es una instancia de la Web.UI.Label. En particular, el control Label tiene su propiedad Text vinculada a la propiedad Text (el 92
atributo DataPath), del TextBox1. Como resultado de ello el contenido de la propiedad Text est asociado con la propiedad Text de la etiqueta. En el cliente, el control TextBox JavaScript es un objeto cuya propiedad Text se ajusta al valor de los elementos existentes. Asimismo, la etiqueta de control de cliente se asigna a un objeto JavaScript cuya propiedad Text se une al texto en una etiqueta <span>. Esta clase implementa un sistema de notificacin de cambio de propiedad por medio de controles, que permiten cambiar otros controles a su propio valor de la propiedad. El sistema de notificacin siempre est atento a los reguladores de la propiedad Text que se invoquen y son disparados en el evento onchange. Como resultado, Atlas puede actualizar la propiedad Text de un cuadro de texto. El componente ScriptManager: Cualquier pgina Atlas se caracteriza por tener una instancia del control de servidor ScriptManager. Definido en el Microsoft.Web.UI, es el cerebro detrs de la mayor parte de la infraestructura de servidor de Atlas y organiza tambin un buen nmero de funcionalidades del cliente. Por ejemplo, el control ScriptManager es responsable de la emisin de un montn de scripts XML para hacer referencia a los servicios web y ampliar los controles. Del mismo modo, el control ScriptManager se encarga de la tarea de la actualizacin parcial de las pginas del cliente a travs del control UpdatePanel. El ScriptManager posee un evento llamado PageError. El evento se desencadena por cualquier error que se produce en la pgina. Tiene la forma siguiente: public delegate void PageErrorEventHandler(object sender, PageErrorEventArgs e); El evento se extiende a los contenidos en la clase EventArgs con dos miembros adicionales, como se muestra aqu: public class PageErrorEventArgs : EventArgs { public PageErrorEventArgs(Exception error); public Exception Error { get; } public string ErrorMessage { get; set; } }
Por ltimo, el control ScriptManager tiene un mtodo llamado GetCurrent que los controles suelen utilizar para recuperar el actual administrador de scripts en la pgina. El control ScriptManager regula una serie de actividades en el contexto de pginas de Atlas. Atlas Bootstrapping: Como se ha mencionado, el control ScriptManager es el centro neurlgico de Atlas. Una pgina de Atlas requiere una gran cantidad de scripts que son esenciales para usar la biblioteca Atlas a travs de un API que coincida con la capacidad del actual navegador. Los scripts del administrador determinan que nivel de ficheros van a estar vinculados, y lo hace sobre la base del valor de la propiedad EnableScriptComponents. No todas las pginas de Atlas requieren el mismo conjunto de capacidades del cliente, pero todas necesitan un conjunto mnimo de cdigo JavaScript. En vista de ello, el script hace referencia al gestor de AtlasRuntime.js. El control ScriptManager busca la configuracin en el archivo Web.config y determina si la actual construccin requiere informacin de depuracin. Manejo de excepciones en las pginas Atlas: El control ScriptManager pueden atrapar las excepciones planteadas durante la carga 93
parcial de la pgina, y puede mostrar las definidas por el usuario en una plantilla en el contenido de la propiedad ErrorTemplate: <atlas:ScriptManager ID="scriptManager" runat="server"EnablePartialRendering="true"> <ErrorTemplate> An error occurred </ErrorTemplate> </atlas:ScriptManager>
Cuando se produce un error Atlas se encarga de visualizar el mismo y deshabilitar los dems componentes de la pgina. Agregar referencias externas: Una pgina Atlas puede tener un nmero de referencias a archivos JavaScript y a servicios web. Se pueden programar enlace a servicios requeridos, utilizando los mtodos adecuados de registro. Tambin se puede agregar mediante programacin a travs de referencias de scripts y servicios de las colecciones. Por ltimo, se puede definir estticamente en tiempo de diseo enlaces a los links y a los servicios web ASP.NET utilizando tags: <atlas:ScriptManager ID="scriptManager1" runat="server"> <Services> <atlas:ServiceReference Path="YourService.asmx" /> </Services> </atlas:ScriptManager>
La clase ServiceReference con tres propiedades: public class ServiceReference{ public bool GenerateProxy {get; set;} public string Path {get; set; } public string Type { get; set; } } La propiedad GenerateProxy es verdadera por defecto e indica si los scripts de administrador tienen que crear una clase proxy de JavaScript obligatoria para los servicios web. La Ruta de la propiedad indica la direccin URL de un servicio web ASP.NET (en el mismo servidor que la aplicacin). El cdigo siguiente muestra cmo agregar archivos de script de Atlas a una pgina: <atlas:ScriptManager runat="server" id="scriptManager"> <Scripts> <atlas:ScriptReference ScriptName="AtlasUIGlitz" /> <atlas:ScriptReference Path=" MyControls.js" Browser="Firefox" /> <atlas:ScriptReference Path="MyControls.js" />
94
</Scripts> </atlas:ScriptManager>
El ScriptReference cuenta con tres propiedades, como se muestra en la siguiente definicin de clase: public class ScriptReference{ public string Browser { get; set; } public string Path { get; set; } public FrameworkScript ScriptName { get; set; } } La propiedad ScriptName se utiliza para conectar los archivos en Atlas. Atlas.js y AtlasRuntime.js son necesarios para cualquier pgina. Todos los dems archivos son opcionales y se vinculan a travs de script de referencia. Configuracin de la aplicacin: Una aplicacin Atlas es principalmente una aplicacin ASP.NET con algunos requisitos de configuracin adicional. En su mayor parte, las marcas y los scripts son generados por los componentes de servidor. Los bloques de construccin de Atlas se regirn entonces en tiempo de ejecucin por los mdulos que amplan la conexin con ASP.NET. Un proyecto Atlas tiene un requisito fundamental, y este es tener la dll de Atlas en la carpeta Bin. La dll tiene el nombre Microsoft.Web.Atlas. Este montaje incluye como recursos una serie de archivos JavaScript que forman la biblioteca cliente de Atlas. Cambios en el archivo Web.config: Atlas requiere un archivo Web.config hecho a la medida. Si se crea el Atlas mediante un proyecto de Visual Studio, este archivo se crea automticamente. De lo contrario se debe crear un archivo Web.config que contenga al menos la siguiente informacin: Una seccin Microsoft.Web Declaracin de los prefijos para controles de servidor definidos en el Microsoft.Web.UI y namespaces81 Microsoft.Web.UI.Controls Un mdulo HTTP llamado ScriptModule para conectar cada solicitud dirigida a mtodos pblicos en la pgina Un controlador HTTP a fin de que las solicitudes de la clases JavaScript de proxy puedan ser servidas La siguiente secuencia de comandos de configuracin define una nueva seccin denominada Microsoft.Web: <configSections> <sectionGroup name="microsoft.web"type="Microsoft.Web.Configuration.MicrosoftWebSectionGrou p">
Espacio de nombre (en ingls: Namespace) en su acepcin ms simple es un conjunto de nombres en el cual todos los nombres son nicos. Fuente: http://www.zator.com/Cpp/E4_11_8c.htm
81
95
<section name="converters" type="Microsoft.Web.Configuration.ConvertersSection" /> </sectionGroup> </configSections> La seccin convertidores es una lista de todos los convertidores, por defecto JSON es utilizado por Atlas. Se agregan otros: <microsoft.web> <converters> <add type="Microsoft.Web.Script.Serialization. Converters.DataSetConverter" /> <add type="Microsoft.Web.Script.Serialization. Converters.DataRowConverter" /> <add type="Microsoft.Web.Script.Serialization. Converters.DataTableConverter" /> </converters> </microsoft.web>
Un convertidor de Atlas JSON es una clase que hereda de una clase abstracta82 denominada JavaScript-Converter. De forma predeterminada, los convertidores definen objetos de tipo ADO.NET (DataSet, DataTable, y DataRow). En general, no se necesita tener un convertidor de JSON para todo tipo de llamadas. Atlas automticamente pueden serializar y deserializar un montn de tipos y clases de JavaScript. La mayora de las veces, no es necesario un convertidor JSON para serializar objetos. Sin embargo, puede recurrir a un convertidor JSON sin necesidad de tener un control total sobre la serializacin. Normalmente, se crea un convertidor cuando el objeto es demasiado complejo como una clase de JavaScript. <pages> <controls> <add namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Atlas" tagPrefix="atlas" /> <add namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Atlas" tagPrefix="atlas" /> </controls> </pages>
Invocacin de mtodo remoto: En el caso de una llamada a un servicio web, cada pgina Atlas debe tener habilitado obligatoriamente un gestor de scripts de control. Adems, si la pgina coloca una llamada a un servicio web, el gestor de scripts debe estar vinculado a cada servicio web utilizado, como se
Las clases abstractas presentan un nivel de "abstraccin" tan elevado que no sirven para instanciar objetos de ellas. Representan los escalones ms elevados de algunas jerarquas de clases y solo sirven para derivar otras clases. Fuente: http://www.zator.com/Cpp/E4_11_8c.htm
82
96
muestra en el siguiente cdigo: <atlas:ScriptManager ID="scriptManager1" runat="server"> <Services> <atlas:ServiceReference Path="~/WebServices/MyDataService.asmx" /> </Services> </atlas:ScriptManager>
Se debe agregar un servicio de referencia para cada nodo de servicios web que la pgina pueda llamar. Puede hacer referencia a un servicio web, ya sea estticamente en tiempo de diseo o dinmicamente mediante la adicin de un servicio de referencia del administrador de scripts. Como se muestra a continuacin: ServiceReference service = new ServiceReference(); service.Path = "~/WebServices/MyDataService.asmx"; service.GenerateProxy = true; scriptManager1.Services.Add(service);
La mejor ubicacin para este cdigo es el evento Page_Load de la pgina. Atlas generar un cliente proxy JavaScript, objeto de referencia para cada servicio web. Como resultado de ello, usted puede escribir cdigo de script de cliente en la pgina que invoca los mtodos del servicio web a travs de una clase JavaScript. Ejemplo: si se tiene una pgina con una lista desplegable para seleccionar un nombre de cliente y un botn. <body> <form id="form1" runat="server"> <atlas:ScriptManager ID="scriptManager1" runat="server"> <Services> <atlas:ServiceReference Path="~/WebServices/MyDataService.asmx" /> </Services> </atlas:ScriptManager> <asp:DropDownList ID="CustomerList" runat="server"DataSourceID="CustomerDataSource"DataTextField="CompanyName"DataValu eField="ID" /> <asp:ObjectDataSource ID="CustomerDataSource" runat="server" TypeName="IntroAtlas.CustomerManager" SelectMethod="LoadAll"> </asp:ObjectDataSource> <input type="button" value="Find customer" onclick="findCustomer()" /> <hr /> <div id="CustomerData" style="visibility:hidden"> <table> 97
<tr> <td class="label">ID</td> <td style="width:10px;" /> <td><span id="companyID"></span></td> </tr> <tr> <td class="label">Company</td> <td style="width:10px;" /> <td><span id="companyName"></span></td> </tr> <tr> <td class="label">Contact</td> <td style="width:10px;" /> <td><span id="companyContact"></span></td> </tr> <tr> <td class="label">City</td> <td style="width:10px;" /> <td><span id="companyCity"></span></td> </tr> <tr> <td class="label">Country</td> <td style="width:10px;" /> <td> <span id="companyCountry"></span> </td> </tr> </table> </div> </form> </body>
La lista desplegable se rellena utilizando la base de datos de control de cdigo fuente vinculada al objeto de la capa de acceso a datos). Una vez que un cliente ha sido seleccionado, los usuarios hacen clic en el botn y ejecutan cdigo JavaScript. Para no iniciar un POST completo, necesitamos que se use un tpico botn HTML, como en el cdigo de ejemplo, o utilizar un botn de ASP. <asp:Button ID="Button1" runat="server" OnClientClick="findcustomer();return false;" 98
Text="Find customer" /> En el cliente tendremos la siguiente funcin function findCustomer() { var list = document.getElementById("CustomerList"); var custID = list.options[list.selectedIndex].value IntroAtlas.WebServices.MyDataService.LookupCustomer( custID,onSearchComplete); }
El tpico cdigo JavaScript para el evento del botn recupera el valor seleccionado actualmente en la lista desplegable y, a continuacin, invoca un mtodo de servicio web a travs de la clase proxy. El cdigo JavaScript de la clase proxy tiene el mismo nombre que la clase de servicio web (IntroAtlas.WebServices.MyDataService, en el ejemplo) y las caractersticas de muchos mtodos, ya que hay mtodos de la web original en el servicio web. Basndose en el ejemplo anterior, el servicio web MyDataService.asmx tiene al menos un mtodo llamado Web LookupCustomer. El siguiente cdigo muestra un extracto del cdigo de servicio web: namespace IntroAtlas.WebServices{ [WebService(Namespace = "http://introatlas.book/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class MyDataService : System.Web.Services.WebService { public MyDataService() {} [WebMethod] public Customer LookupCustomer(string id) { return CustomerManager.Load(id); } } } El cdigo JavaScript del proxy para el servicio web se genera en el servidor por Atlas y es vinculado a la pgina del cliente como cdigo de script. El mtodo LookupCustomer JavaScript en la clase proxy tiene un argumento extra: la funcin a invocar cuando los resultados de los servicios web estn listos. Esta funcin se llama onSearchComplete. En el ejemplo: function onSearchComplete(data){ document.getElementById("CustomerData").style.visibility = "visible"; document.getElementById("companyID").innerText = data.ID; document.getElementById("companyName").innerText = data.CompanyName;
99
document.getElementById("companyContact").innerText = data.ContactName;document.getElementById("companyCity").innerText = data.City; document.getElementById("companyCountry").innerText = data.Country; }

JSON garantiza que la entrada del argumento de la funcin sea un objeto JavaScript y de que los resultados de la serializacin contengan el valor de retorno. El objeto representado por los datos cuenta como parmetro de muchos componentes, ya que hay bienes pblicos en el tipo original del cliente devuelto por el mtodo LookupCustomer. La funcin de llamada de JavaScript utiliza los resultados del mtodo de servicio web para actualizar porciones de la pgina actual utilizando la interfaz DOM. Llamada a un mtodo de la pgina: Adems de llamar a un servicio web de cliente dentro de la pgina, tambin puede invocar un mtodo en el mismo servidor de la pgina. Este segundo enfoque es, lgicamente, similar a la de scripts de ASP.NET 2.0. Un mtodo de pgina Atlas es un mtodo pblico decorado con un atributo particular: el WebMethod. Dicho de otro modo, mediante la definicin de mtodos de pgina transformamos la pgina ASP.NET en una especie de servicio web disponible para Atlas y sus pginas clientes. Para poder utilizar el atributo WebMethod, se debe System.Web.Services en la pgina. <%@ Import Namespace="System.Web.Services" %> A continuacin, se debe aadir un control ScriptManager y un botn o cualquier elemento cliente de marcas HTML que desencadena un evento. Por ejemplo: se tiene un cuadro de texto para el tipo de identificacin de cliente y un botn. <asp:TextBox ID="CustomerID" runat="server" /><input type="button" value="Find customer" onclick="findCustomer()" /> El manejador en JavaScript es similar al manejador que hemos creado para el ejemplo anterior, excepto que utiliza un proxy. Esta vez, el objeto de proxy se llama PageMethods: function findCustomer(){ var id = document.getElementById("CustomerID").value; PageMethods.LookupCustomer(id, onSearchComplete); } La funcin OnSearchComplete es exactamente igual que la del ejemplo anterior. El PageMethods proxy es creado por Atlas basado en el contenido de un nuevo bloque de scripts: <script type="text/C#" runat="server"> [WebMethod] public Customer LookupCustomer(string id){ return LookupCustomerInternal(id); } </script> 100 importar el namespace
Atlas analiza la seccin <script> en la que el tipo de atributo se establece como texto en C # y emite en consecuencia un objeto JavaScript PageMethods. Estos mtodos deben ser definidos en una lnea de etiqueta correcta <script>. Sin embargo, para evitar escribir la mayora de los mtodos de la lnea de cdigo, puede simplemente hacer que el flujo de cdigo caiga en un miembro protegido que se define en la clase de cdigo subyacente. Mtodos de servicios web frente a los mtodos de la pgina: Los dos enfoques son funcionalmente equivalentes, aunque cada uno corre a travs de un modelo de aplicacin distinta. En ambos casos, sin embargo, termina llamando a un pedazo de cdigo que se define en el cliente. Si se opta por una simple solucin de servicio web, se obtiene un servicio reutilizable que puede ser configurado para aceptar peticiones de otros clientes. El cdigo para el servicio se separa de la pgina que est utilizando, y varias pginas puede llamar a un servicio web. De esta manera se gana flexibilidad y reutilizacin. Por otro lado, los mtodos de pgina permiten publicar una pgina web como un servicio en el marco de la aplicacin. La perspectiva es claramente diferente. Los mtodos de pgina son una solucin ms rpida para escribir y, teniendo ese enfoque, es esencialmente una solucin de corto alcance, cuyo alcance no supera los lmites de la pgina. Los servicios web son una ms amplia y una forma de reutilizacin que probablemente debera ser la nica opcin a tener en cuenta en las aplicaciones de empresa. Se debe tener en cuenta que los servicios web en Atlas son servicios web alojados en la misma mquina del servidor. Es debido a que Atlas necesita un servicio especial de HTTP para generar el cdigo JavaScript proxy.
Cuando usar Atlas?

Si la plataforma de desarrollo de la aplicacin en el lado del servidor es .NET de Microsoft, la tecnologa de programacin es ASP.NET y la aplicacin posee una gran complejidad, nos vemos prcticamente en la obligacin de utilizar esta librera, la cual ya est diseada y pensada para integrarse a estas tecnologas. Por supuesto que debemos tener en cuenta otros aspectos no menos importantes como es el costo econmico de programacin. Si bien la librera es gratuita y ya est integrada a la plataforma .NET, debemos saber que para aprovechar al mximo las capacidades y virtudes y evitar problemas a la hora de sentarnos a programar, es necesario (casi obligatorio) utilizar la IDE de desarrollo Visual Estudio de Microsoft (en cualquiera de sus versiones) la cual posee un costo de licenciamiento bastante elevado. La excelente integracin que posee esta librera con servicios web (el objeto XMLHttpRequest puede realizar llamadas directas a estos servicios) la coloca en una posicin de privilegio si lo que desamos es consumir servicios directamente desde la librera. Para aplicaciones complejas, orientadas a servicios, en plataforma .Net y con grandes volmenes de datos traficados, esta librera es la que cubrir la mayor parte de nuestras expectativas.
101
Captulo 6: Libreras de lenguaje o plataforma especfica. JSP
102
AjaxAnywhere
AjaxAnywhere es una librera AJAX de licencia GPL orientada al trabajo con pginas JSP (Java Server Pages) o JSF (Java Server Faces). Est diseado para convertir cualquier componente de una pgina JSP o JSF existente en un componente AJAX sin necesidad de escribir el complejo cdigo JavaScript. En contraste con otras libreras, AjaxAnywhere no est orientado a componentes, por lo que no encontraremos componentes como autocompletar, grillas de datos como las que se encuentran en Rico, drag & drop, etc. Esta librera simplemente logra delimitar dentro de la misma pgina zonas en las cuales sea necesario refrescar mediante AJAX. Su propsito es simplificar la tarea de dotar a un conjunto de pginas JSP ya existentes de capacidades AJAX. Para trabajar con esta librera no es necesario realizar cambios al cdigo subyacente. Segn sus desarrolladores, esta librera posee las siguientes ventajas: Disminuir la cantidad de cdigo JavaScript necesario. Debido a la ausencia de una convencin o estandarizacin por parte de los distintos navegadores en cuanto a su comportamiento frente a cdigo JavaScript o manipulacin de objetos DOM, hacen que escribir cdigo compatible con todos los navegadores mediante JavaScript sea mucho ms dificultoso que hacerlo mediante JSP. Fcil de integrar en las aplicaciones existentes. Permite combinar la forma tradicional de trabajar refresco de pgina completa junto con refrescos de tipo AJAX en la misma aplicacin. Licencia gratis y de cdigo abierto. Instalacin Al igual que la mayora de las libreras AJAX existentes, la instalacin es sumamente sencilla. Se debe descargar de la pgina oficial de AjaxAnywhere el archivo .jar correspondiente. Una vez descargado el archivo, deberemos descomprimirlo en una carpeta temporal y extraer de ella el archivo aa.js. Este archivo lo colocamos dentro de la carpeta raz de documentos de nuestro sitio. El archivo .jar completo lo colocamos dentro de la carpeta WEB-INF/lib de nuestra aplicacin. En el archivo web.xml deberemos agregar el siguiente cdigo que se utiliza para agregar el filtro AjaxAnywhere para urls dinmicas. <filter> <filter-name>AjaxAnywhere</filter-name> <filter-class>org.ajaxanywhere.AAFilter</filter-class> </filter>
<filter-mapping> <filter-name>AjaxAnywhere</filter-name> <url-pattern>*.jsp</url-pattern> 103
</filter-mapping> <filter-mapping> <filter-name>AjaxAnywhere</filter-name> <url-pattern>*.do</url-pattern> </filter-mapping> <filter-mapping> <filter-name>AjaxAnywhere</filter-name> <url-pattern>*.htm</url-pattern> </filter-mapping> Modo de trabajo La idea es simple: Marcar las zonas de la pgina en las cuales queremos capacidades AJAX mediante las tags propias de la librera El envo de los datos los realiza a travs de una API propia de la librera y no de la forma tradicional. Las zonas de refresco de la pgina pueden ser actualizadas mediante dos mtodos: mediante javascript del lado cliente o mediante la API de AjaxAnywhere. En el lado servidor se genera un archivo XML que contiene el HTML actualizado. En el lado cliente el JavaScript de AjaxAnywhere recibir este XML y actualizar las zonas seleccionadas. AjaxAnywhere pretende ser una librera ajax sin utilizacin de JavaScript. Ejemplo de utilizacin de AjaxAnywhere: Vamos a mostrar un ejemplo de lista dependiente donde al seleccionar una de ellas la otra se actualiza automticamente.
Figura 13: Ejemplo de utilizacin de la librera (http://ajaxanywhere.virtual.vps-host.net:8080/examplewebapp-1.2/localesframe.jsp)
Para poder mostrar en detalle y poder entender el funcionamiento de la librera, tomaremos como punto de partida una aplicacin jsp tradicional y la adaptaremos para utilizarla con AjaxAnywhere, de esta forma podremos ver ms fcilmente las diferencias y ventajas de utilizar esta tecnologa. <%@ page pageEncoding="UTF-8" import="java.util.*"%> 104
<% String currentLanguage = request.getParameter("language"); if (currentLanguage==null) currentLanguage="en"; Locale[] availableLocales = Locale.getAvailableLocales(); Map languagesDisplay = new TreeMap(); Map countries = new TreeMap(); for (int i = 0; i < availableLocales.length; i++) { Locale loc= availableLocales[i]; languagesDisplay.put(loc.getLanguage(), loc.getDisplayLanguage(Locale.ENGLISH)); if (loc.getDisplayCountry(Locale.ENGLISH).length()>0 && loc.getLanguage().equals(currentLanguage)) countries.put(loc.getCountry(), loc.getDisplayCountry(Locale.ENGLISH)); } %> Sin AjaxAnywhere <%@ include file="/locales_counter.jsp"%> <form method="POST" name=main> <select size="10" name="language" onchange="this.form.submit()"> <%@ include file="/locales_options_lang.jsp"%> </select> <select size="10" name="country" > <%@ include file="/locales_options_countries.jsp"%> </select> </form> La primera lista contiene todos los idiomas disponibles en el JVM (Java Virtual Machine)83. La segunda lista contiene pases que usan el idioma seleccionado. Cuando en la primera lista seleccionamos alguno de los idiomas existentes, la segunda lista se actualiza automticamente con los pases que usan el idioma seleccionado. El siguiente cdigo muestra que facilmente podemos realizar esto utilizando AjaxAnywhere. <%@ page pageEncoding="UTF-8" import="java.util.*"%> <%@ page import="org.ajaxanywhere.AAUtils"%>
Una Mquina virtual Java (en ingls Java Virtual Machine, JVM) es una aplicacin que interpreta y ejecuta programas escritos en el lenguaje de programacin Java. Especficamente puede interpretar el bytecode generado al compilar en Java. Lo que hace la JVM es terminar de compilar el bytecode en lenguaje mquina para que la aplicacin Java pueda ser ejecutada en un dispositivo especfico. Fuente: http://www.alegsa.com.ar/Dic/maquina%20virtual%20java.php
83
105
<%@ taglib url="http://ajaxanywhere.sourceforge.net/" prefix="aa" %>

<%
String currentLanguage = request.getParameter("language"); if (currentLanguage==null) currentLanguage="en"; Locale[] availableLocales = Locale.getAvailableLocales(); Map languagesDisplay = new TreeMap(); Map countries = new TreeMap(); for (int i = 0; i < availableLocales.length; i++) { Locale loc= availableLocales[i]; languagesDisplay.put(loc.getLanguage(), loc.getDisplayLanguage(Locale.ENGLISH)); if (loc.getDisplayCountry(Locale.ENGLISH).length()>0 && loc.getLanguage().equals(currentLanguage)) countries.put(loc.getCountry(), loc.getDisplayCountry(Locale.ENGLISH)); } El siguiente cdigo no es necesario que se coloque dentro de una pgina jsp. Si estamos utilizando algn framework que implemente el MVC (Modelo Vista Controlador)84 como por ejemplo Struts85, este cdigo debe ser ejecutado dentro del Controller. Para Struts por ejemplo, este cdigo va dentro de una clase Action. if (AAUtils.isAjaxRequest(request)){ AAUtils.addZones(request, "countriesList"); } %> <script src="aa/aa.js"></script><script>ajaxAnywhere.formName = "main";</script> <%@ include file="/locales_counter.jsp"%> <form method="POST" name=main> Podemos observar que aqu el formulario no posee el atributo action, esto significa que el formulario es enviado a la propia URL, en este caso la propia pgina JSP. Sin embargo, esto no es una restriccin, ya que si lo deseamos podemos enviar los datos a una URL diferente. <select size="10" name="language" onchange="ajaxAnywhere.submitAJAX();"> <%@ include file="/locales_options_lang.jsp"%>
Modelo Vista Controlador (MVC) es un patrn de arquitectura de software que divide el cdigo de una aplicacin separando los datos de una aplicacin, la interfaz de usuario, y la lgica de control en tres componentes distintos. Fuente: http://www.programacionweb.net/articulos/articulo/?num=505 85 Struts es un marco de trabajo (framework) utilizado para desarrollar aplicaciones web mediante la plataforma J2EE (Java 2 Enterprise Edition). Implementa el patrn Modelo Vista Controlador (MVC) y se distribuye como software libre. Fuente: http://www.hachisvertas.net/wiki/index.php?title=Que_es_struts
84
106
</select> <aa:zone name="countriesList"> <select size="10" name="country" > <%@ include file="/locales_options_countries.jsp"%> </select> </aa:zone> </form> El componente AAFilter debe colocarse en el archivo web.xml a la hora de la instalacin de la librera. <filter> <filter-name>AjaxAnywhere</filter-name> <filter-class>org.ajaxanywhere.AAFilter</filter-class> </filter> <filter-mapping> <filter-name>AjaxAnywhere</filter-name> <url-pattern>*.jsp</url-pattern> </filter-mapping>
Ejemplo 21: (obtenido de 1.2/localesframe.jsp y probado localmente) http://ajaxanywhere.virtual.vps-host.net:8080/example-webapp-
Vamos a explicar detalladamente lo que realizamos anteriormente: En primer lugar utilizamos la etiqueta personalizada <aa:zone> para marcar la zona que debe ser refrescada En segundo lugar incluimos el archivo aa.js y a la propiedad formName del objeto ajaxAnywhere le asignamos el nombre del formulario. Adems en el evento onChange de la lista de idiomas ejecutamos el mtodo submitAjax que es el que enva los datos al motor AJAX para realizar la bsqueda y posterior actualizacin. Finalmente en el lado servidor se utiliza la clase AAUtil para indicar que zonas son las que deben ser refrescadas. SI el nombre de la zona fuera conocida antes de enviar los datos, tambin podramos llevar a cabo esta lgica en el lado cliente: ajaxAnywhere.getZonesToReload = function() { return "countriesList"; } Una de las caractersticas particulares que posee este framework con respecto a otros, es que se integra con MyFaces86, una implementacin de la Apache Software Foundation del framework Java Server Faces (JSF)87.
Implementacin de Apache Software Fundation de Java Server Faces. Fuente: http://www.programacion.com/java/noticia/1393/ 87 JSF (Java Server Faces) es un framework de desarrollo basado en el patrn MVC (Modelo Vista Controlador). Fuente: http://www.desarrolloweb.com/articulos/2380.php
86
107
Para poder utilizar los componentes de Java Server Faces bastar con colocar las etiquetas <aa:zoneJSF> el lugar de <aa:zone>. La facilidad de utilizacin de AjaxAnywhere, su integracin con JSP y tecnologas como JSF y MyFaces permite realizar interfaces de usuario intuitivas y agradables a la vista y al uso, haciendo que las aplicaciones web desarrolladas en JSP no tengan nada que envidiar a las aplicaciones de escritorio.
Cuando usar AjaxAnywhere?

Al igual que Atlas con .NET, esta librera est pensada para dotar de capacidades AJAX a aplicaciones web desarrolladas en JSP (Java Server Pages). El objetivo de la librera (y uno de los grandes beneficios para los que buscan evitar JavaScript) es programar aplicaciones con AJAX pero sin utilizar JavaScript. Su integracin con JSF y MyFaces permite desarrollar excelentes interfaces grficas con muy poco esfuerzo y a bajo costo. Si tenemos una aplicacin JSP funcional, sin capacidades AJAX y desamos aplicarle dicha tecnologa, deberemos usar AjaxAnywhere ya que se integra perfectamente a aplicaciones existentes. En definitiva, si el sistema esta programado en JSP, AjaxAnywhere es la mejor alternativa.
108
Captulo 7: Libreras de lenguaje o plataforma especfica. ColdFusion
109
AjaxCFC
AjaxCFC es un framework derivado de ColdFusion88 que permite acelerar y facilitar el desarrollo y la implementacin de aplicaciones AJAX ofreciendo integracin entre JavaScript y ColdFusion. Provee adems de funciones integradas que brindan seguridad, como as tambin funciones que permiten debugear89 las aplicaciones. Permite adaptar nuestras aplicaciones a cualquier tipo de ambiente ayudando a superar los problemas de compatibilidad que se pueden presentar a la hora de ejecutarlas en distintos navegadores. Caractersticas destacables de AjaxCFC ColdFusion es un lenguaje orientado a objetos, sigue las mejores prcticas de la programacin orientada a objetos y de los patrones de diseo90. Al ser AjaxCFC un framework derivado de ColdFusion, podemos decir que hereda esta caracterstica permitiendo crear nuestros propios componentes y fachadas AJAX. Integracin con Model-Glue91 y Mach-II92, dos de los ms importantes y ms ampliamente utilizados frameworks Modelo Vista Controlador en la comunidad ColdFusion. Trabaja sin inconvenientes con distintas versiones y alternativas de ColdFusion como son ColdFusion MX 6.0, 6,1, 7.0, Scorpio, y Blue Dragon. El servidor retorna JavaScript puro en lugar de XML o JSON lo cual mejora notoriamente la performance en las respuestas a las peticiones. Completa integracin con el framework log4javascript93, facilitando el debug de las aplicaciones desarrolladas. Licencia Apache 2.0. Ejemplos Vamos a mostrar algunos ejemplos de aplicacin de esta librera sin ahondar mucho en el uso de ColdFusion ya que escapara al objetivo de mostrar el uso de AjaxCFC. El primer ejemplo consiste en un formulario sencillo con un campo de texto y un botn de envo de datos. El texto ingresado es enviado al servidor y, mediante AJAX, se muestra debajo una vez que el servidor devuelve la informacin.
Es un servidor de aplicaciones web completas desde el servidor, para desarrollar y entregar aplicaciones de comercio electrnico escalables. Fuente: http://help.websiteos.com/websiteos_sp/definici_n_de_coldfusion_mx.htm 89 Aplicacin o herramienta que permite la ejecucin controlada de un programa o un cdigo, para seguir cada instruccin ejecutada y localizar as bugs o errores (proceso de depuracin), cdigos de proteccin, etc. Fuente: http://www.alegsa.com.ar/Dic/debugger.php 90 Un patrn de diseo es una solucin a un problema que se usa repetidamente en contextos similares con algunas variantes en la implementacin. Fuente: http://www.bitacoras.sidar.org/g4/index.php?2005/08/16/8-patrones-de-disentildeo-de-interaccioacuten-iintroduccioacuten 91 Model-Glue es un framework orientado a objetos de aplicaciones web basado en el Modelo Vista Controlador. Su objetivo es simplificar el desarrollo de aplicaciones orientadas a objetos desarrolladas en ColdFusion. Est publicada bajo licencia LGPL. 92 Mach-II es un framework web de cdigo abierto y orientado a objetos basado en el Modelo Vista Controlador. Fue el primer framework orientado a objetos para ColdFusion. 93 Es un framework basado en el framework log4j de java que permite debugear aplicaciones en tiempo de ejecucin. Fuente: http://log4javascript.org
88
110
Cdigo del cliente: <script type='text/javascript'> _ajaxConfig = { '_cfscriptLocation':'echoTest.cfc', '_jsscriptFolder':'../js', 'debug':true}; //_ajaxConfig: es un arreglo al cual se le debe indicar la ubicacin y el nombre del oyente CFC y la ubicacin de la carpeta js de la librera. El parmetro debug indica en este caso que deseamos debugear la aplicacin a la hora de ejecutarla. </script> //incluimos el archivo ajax.js presente en la librera <script type='text/javascript' src='../js/ajax.js'></script> <script type="text/javascript"> function doEcho(){ // tomamos el valor del campo de texto var str = $('echoInput').value; // reiniciamos (limpiamos) el campo de texto $('echoInput').value=''; // enfocamos nuevamente el cursor en el campo de texto $('echoInput').focus(); // enviamos los datos a ColdFusion DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'echo', str, doEchoResult); //la funcin DWREngine._execute() se encarga del envo de los datos al servidor. Los parmetros que necesita son la localizacin del oyente CFC (el archivo que recibir el dato), el nombre del mtodo que se ejecutar, el argumento enviado a al mtodo y la funcin del lado del cliente que tratar con los datos devueltos (en este caso doEchoResult). } // funcin callback function doEchoResult (r) { // agrego la respuesta recibida a una div llamada echoScreen mediante su propiedad innerHTML. $('echoScreen').innerHTML = $('echoScreen').innerHTML + '<BR>' + r; } 111
</script> //aqu vemos el formulario utilizado <fieldset> <legend>ajaxCFC simple echo example</legend> //en el evento onsubmit del formulario se ejecuta la funcin ajax <form onsubmit="doEcho();return false;"> <input type="Text" id="echoInput"><input type="submit" value="enter"> </form> </fieldset> Cdigo ColdFusion del servidor: <cfcomponent extends="ajax"> <cffunction name="echo" output="no" access="private"> <cfargument name="str" required="Yes" type="string"> <cfreturn arguments.str /> </cffunction> </cfcomponent>
Ejemplo 22: (obtenido de http://www.robgonda.com/blog/projects/ajaxcfc/examples/echo)
En el ejemplo anterior podemos ver cmo podemos integrar fcilmente mediante esta librera JavaScript con ColdFusion. Siguiendo con los ejemplos tenemos un formulario que contiene 3 campos de texto en los cuales el usuario tiene la posibilidad de ingresar su email, su nombre y su apellido. Al enviar estos datos el sistema valida en primer lugar que todos los campos necesarios estn completos y luego examina que el email no exista, de ya existir se le informa al usuario y no se permite el almacenamiento de la informacin. A modo de ejemplo la informacin se guarda en la sesin del usuario, una vez que la informacin se guarda, el servidor enva nuevamente la informacin al cliente y es mostrado el email almacenado en pantalla.
Cdigo del cliente: <script type='text/javascript'>_ajaxConfig = {'_cfscriptLocation':'user.cfc', '_jsscriptFolder':'../js'};</script> //configuramos el arreglo _ajaxConfig <script type='text/javascript' src='../js/ajax.js'></script> //incluimos el archivo ajax.js
112
<script type="text/javascript"> //la variable returnHelper es la que contendr el resultado de la funcin sncrona. Es el puente entre la funcin callback y la funcin de validacin var returnHelper = ''; function validateForm(frm) { var valid = true; var msg = ''; // controlamos si el email fue ingresado if (frm.email.value == '') { valid = false; msg = msg + '* Email is required\n'; } // controlamos si el nombre fue ingresado if (frm.fname.value == '') { valid = false; msg = msg + '* First Name is required\n'; } // controlamos si el apellido fue ingresado if (frm.lname.value == '') { valid = false; msg = msg + '* Last Name is required\n'; } // controlamos si el email ya existe if (frm.email.value != '') { DWREngine.setAsync(false); DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'userExists', frm.email.value, setHelper); if (returnHelper == true) { valid = false; msg = msg + '* Email already exists\n'; } } if (msg != '') alert(msg); return valid; } function setHelper(r) {
113
returnHelper = r; } </script> //cdigo HTML <fieldset> <legend>ajaxCFC synchronous form validation example</legend> //en el evento onsubmit del formulario se ejecuta la validateForm() <cfoutput><form name="frm" action="#script_name#" onsubmit="return validateForm(this);" method="post"> <table border="1" frame="box" rules="groups" cellpadding="5"> <tr><td> email: *<br> <input type="Text" name="email"> </td></tr> <tr><td> First Name: *<br> <input type="Text" name="fname"> </td></tr> <tr><td> Last Name: *<br> <input type="Text" name="lname"> </td></tr> <tr><td align="center"> <input type="submit" name="submit" value="create account"> </td></tr> </table> </form></cfoutput> </fieldset> Cdigo ColdFusion del servidor: <cfcomponent extends="ajax"> <cffunction name="userExists" output="no" access="private" returntype="boolean"> <cfargument name="email" type="string" required="Yes"> <cfreturn listFindNoCase(session.formValidation1,arguments.email) neq 0 /> </cffunction> 114
</cfcomponent>
Ejemplo 23 (obtenido de http://www.robgonda.com/blog/projects/ajaxcfc/examples/formValidation1)
La gran desventaja que podemos observar de esta librera es la falta de actualizacin que sufre. En la pgina oficial de descarga de la librera AjaxCFC (http://ajaxcfc.riaforge.org/) vemos que la ltima actualizacin realizada data del 30 de agosto del ao 2007 (versin 1.1 alpha 3). Las versiones de ColdFusion con las cuales trabaja AjaxCFC son MX 6.0, 6,1, 7.0.x, Scorpio, Blue Dragon, pero no es compatible para ser implementado junto a Adobe ColdFusion 8 (la cual es la primera y hasta ahora nica versin desarrollada ntegramente por Adobe). Adems de las desventajas antes mencionadas que trae la falta de actualizacin de la librera, posee otra muy importante que es la compatibilidad con los distintos navegadores de internet. Puede presentar inconvenientes con navegadores que fueron actualizados luego de la ltima fecha de actualizacin del framework (como por ejemplo Internet Explorer 8, Mozilla Firefox 2.0.0.7 en adelante, etc.).
Cuando usar AjaxCFC?

Podemos decir que AjaxCFC es una librera completa para realizar aplicaciones AJAX en ColdFusion. Logra de forma sencilla integracin de ColdFusion con JavaScript y adems, al ser una librera orientada a objetos y que permite trabajar con los distintos frameworks MVC de ColdFusion, posee todas las ventajas propias de dichas tecnologas mencionadas. Por lo tanto podemos decir que si por diversos motivos el lenguaje de programacin de nuestra aplicacin web desarrollada es ColdFusion, AjaxCFC es la mejor alternativa a la hora de incorporar funcionalidades AJAX.
115
Captulo 8: Libreras multilenguaje
116
Sajax (Simple Ajax Toolkit)

Sajax es un framework para realizar aplicaciones web aplicando tecnologa AJAX, facilitando las tareas al desarrollador. Trabaja con una interesante variedad de lenguajes como son ASP, ColdFusion, Perl, php, Python, Rubi on Rails entre otros. Las llamadas a las funciones de estos lenguajes la librera la realiza mediante JavaScript, permitiendo actualizar una pgina web sin necesidad de refrescar completamente la pgina, concepto fundamental de AJAX. Los desarrolladores de esta librera aseguran que SAJAX realiza el 99% del trabajo a la hora de desarrollar una aplicacin AJAX, dejndole apenas el 1% de responsabilidad al programador. La librera es de cdigo abierto en todas sus versiones (bajo licencia BSD94) pero en la actualidad sus desarrolladores brindan un servicio de soporte que consta de soporte online (va email) y con un servicio para ayudar a los programadores en el lugar de trabajo a la hora de desarrollar una aplicacin con SAJAX. A la primera de las opciones nos podemos suscribir abonando la suma de u$s 199 por ao, siendo la opcin ms econmica, ya que la segunda opcin (la de los propios desarrolladores de SAJAX trabajando en el proyecto) cuesta u$s 150 la hora. Versin Esta librera consta con versiones desde la 0.1 hasta la 0.12 que es la versin ms actual de la librera, la cual data del 30 de enero del 2006. La falta de actualizacin que posee la librera puede resultar una desventaja a la hora de implementar la misma en la actualidad. Instalacin Al ser una librera portable y liviana no posee grandes dificultades de instalacin. Descargamos la librera del sitio oficial teniendo la posibilidad de descargarla mediante un archivo .zip o un .tgz. Este archivo comprimido lo debemos descomprimir dentro de la raz de nuestra aplicacin para poder utilizarla. Tengamos en cuenta que ya se encuentran dentro las carpetas correspondientes a cada lenguaje que soporta SAJAX (una carpeta para php, una para Perl, una para Rubi, etc.) por lo tanto con una descarga ya basta para tener soporte de todos los lenguajes con los cuales trabaja SAJAX. Luego lo nico que debemos hacer es importar archivo Sajax.* de acuerdo al lenguaje que estamos utilizando. Por ejemplo, si estamos trabajando con php con la siguiente lnea de cdigo ya estamos habilitados para trabajar con SAJAX: require("Sajax.php"); Cmo trabaja SAJAX?
La licencia BSD pertenece al grupo de licencias de software Libre. Esta licencia tiene menos restricciones en comparacin con otras como la GPL estando muy cercana al dominio pblico. La licencia BSD al contrario que la GPL permite el uso del cdigo fuente en software no libre. Es muy similar en efectos a la licencia MIT. Fuente: http://informaticanicaragua.net/index.php?topic=184.0
94
117
La mejor forma de entender el funcionamiento bsico de esta librera es mediante un ejemplo: 1. Incluimos la librera require("Sajax.php"); 2. Inicializamos la librera y le decimos que funcin php es la que deseamos exportar. En este caso la funcin (del lado del servidor, por supuesto) en cuestin es multiply, la cual recibe dos parmetros y realiza la operacin aritmtica de multiplicacin. function multiply($x, $y) { return $x * $y; } sajax_init(); //inicializamos la librera. sajax_export("multiply"); // exportamos la funcin php hacia JavaScript sajax_handle_client_request(); // instanciamos el servicio al cliente. 3. Configuramos nuestro HTML incluyendo la librera JavaScript generada. <html> <head> <title>Test</title> <script> <? sajax_show_javascript(); ?> function set_math_result(result) { document.getElementById("z").value = result; } function do_the_math() { var x, y; x = document.getElementById("x").value; y = document.getElementById("y").value; //nuestra funcin php multiply() la mapeamos con la funcin JavaScript x_multiply() x_multiply(x, y, set_math_result); } </script> </head> <body> <input type="text" name="x" id="x" value="2" size="3"> 118
<input type="text" name="y" id="y" value="3" size="3"> = <input type="text" name="z" id="z" value="" size="3"> <input type="button" name="check" value="Calculate" onclick="do_the_math(); return false;"> </body> </html>
Ejemplo 24 (obtenido de http://www.modernmethod.com/sajax/sajax-0.12/php/example_multiply.php.txt y probado localmente)
Podemos observar que con unos simples pasos tenemos una funcin AJAX totalmente funcional. Solo basta con mapear la funcin del lado del servidor (php, Ruby, Perl, ASP, etc.) con una funcin JavaScript del lado del cliente. Compatibilidad con los navegadores Segn sus desarrolladores la compatibilidad es absoluta con Internet Explorer 6 y Mozilla Firefox. Se pueden experimentar problemas con Opera y debido a la falta de actualizacin es muy probable que tambin se experimenten problemas con versiones de Internet Explorer superiores a la 6. Limitaciones Es una librera AJAX pura, no posee componentes visuales ni nada que se le parezca. Otra contra que podemos ver es que no posee una versin para trabajar con JSP, lo cual hace que la librera pierda un considerable mercado.
WebORB
WebOrb es una plataforma que permite el desarrollo, implementacin u ejecucin de Aplicaciones Ricas de Internet (RIA). El producto facilita la conectividad entre clientes ricos (desarrollados mediante tecnologas como Flex95, Flash96, AJAX) y aplicaciones desarrolladas del lado del servidor (mediante lenguajes como .NET, Java, Ruby on Rails, PHP, Web Services XML, etc.). Es una plataforma gratuita para todas las implementaciones de servidor, a excepcin de los productos de soporte los cuales son pagos. Las distintas plataformas de desarrollo ofrecidas por WebOrb se dividen en: WebORB for .NET o
95
Disponible para .NET 2.0 y versiones anteriores
Adobe Flex (hasta 2005 Macromedia Flex) es un trmino que agrupa una serie de tecnologas publicadas desde Marzo de 2004 por Macromedia para dar soporte al despliegue y desarrollo de Aplicaciones Enriquecidas de Internet, basadas en su plataforma propietaria Flash. Fuente: http://www.jestudis.com/blogProgramadorPost.php?noticia=6 96 Flash es una tecnologa para crear animaciones grficas vectoriales independientes del navegador y que necesitan poco ancho de banda para mostrarse en los sitios web. La animacin en Flash se ve exactamente igual en todos los navegadores, un navegador slo necesitan un plug-in para mostrar animaciones en Flash. Fuente: http://www.masadelante.com/faq-flash.htm
119
o o o o
Licencia gratuita Provee de servicios como RTMP (mensajera de tiempo real)97, Flash Remoting98 y Flex Data Services99 Incluye generador de cdigo de lado cliente, navegador de servicio y verificador de servicios Soporta clientes AJAX
WebORB for Java o o o o o Puede ser implementado bajo cualquier arquitectura de servidor que cumpla con el estndar J2EE o ejecutarse sin instalacin previa. Licencia gratuita Provee una implementacin completa de Flash y Flex Remoting Management y Data Management Incluye generador de cdigo de lado cliente, navegador de servicio y verificador de servicios Soporta clientes AJAX
WebORB for Ruby on Rails o o o Implementacin de cdigo abierto de Flex RPC (Remote Procedure Call) y Flash Remoting. Licencia MPL (Mozilla Public Licence)100 Soporte completo para AMF0 y AMF3101
WebORB for php o o o

97
Alternativa Open Source de AMFPHP Licencia MPL (Mozilla Public Licence) Soporte completo para AMF0 y AMF3
RTMP (Real Time Messaging Protocol) es un protocolo de comunicacin el cual pertenece a la empresa Adobe Systems. Fuente: http://www.mytvhosting.com/lang-es/questions-live-streaming-video-using-flash-media-server-3mytvhostingcom/28-current-users/80-streaming-rtmp 98 F lash Remoting es un protocolo desarrollado por Adobe que permite hacer conexiones a bases de datos e intercambio de datos entre servidores y Flash (del lado cliente). Fuente: http://www.cristalab.com 99 Flex Data Services conciste en un conjunto de funciones de gestin de datos para el servidor que permite a los desarrolladores proporcionar rpidamente aplicaciones Flex con grandes volmenes de datos. Flex Data Services mejora el marco de trabajo Flex del cliente proporcionando una conectividad de datos de alto rendimiento con los datos y la lgica empresarial existentes del servidor. Fuente: http://flex.cubika.com 100 La Licencia Pblica de Mozilla es una licencia de cdigo abierto y software libre. Fue desarrollada originalmente por Netscape Communications Corporation y ms tarde su control fue traspasado a la Fundacin Mozilla. Cumple completamente con la definicin de software de cdigo abierto de la Open Source Initiative (OSI) y con las cuatro libertades del software libre enunciadas por la Free Software Foundation (FSF). Sin embargo la MPL deja abierto el camino a una posible reutilizacin no libre del software, si el usuario as lo desea, sin restringir la reutilizacin del cdigo ni el relicenciamiento bajo la misma licencia. Fuente: http://www.diclib.com/cgi-bin/d1.cgi?l=es&base=es_wiki_10&page=showid&id=24744 101 AMF (Action Message Format) es un formato binario de datos basado en SOAP utilizado principalmente para intercambiar datos entre una aplicacin Adobe Flash y una base de datos. Fuente: www.adobe.com/es
120
Rich Client System Es un framework que se ejecuta dentro de WebORB que posee un conjunto de rutinas, protocolos, herramientas y componentes del software que facilitan el desarrollo de aplicaciones ricas de internet. Est basado en las tecnologas estndar disponibles en los navegadores web. Escondiendo la complejidad del mecanismo subyacente, este sistema proporciona una interfaz fcil de usar para las siguientes tareas: Conexin a un objeto de servidor o web service Manejar las conexiones remotas sincrnicas y asincrnicas a objetos o servicios Obtener el estado del progreso de una invocacin asincrnica Mostrar informacin eficaz ligada a resultados de una consulta a bases de datos. Realizar operaciones de envi de datos El framework est constituido de diferentes capas las cuales estn integradas entre s para brindar un ambiente poderoso para aplicaciones clientes basadas en AJAX. Trabaja estrechamente con el servidor WebORB para adaptar los mtodos de llamada de los clientes al ambiente del servidor.
Los componentes ms notables son: Communication Stack: podemos decir que es el subsistema ms poderoso de Rick Client System. Proporciona un API unificado para conectarse a cualquier servicio web implementado en WebORB. Utiliza una tecnologa que permite conectarse a cualquier tipo de servicio remoto y trabajarlo como si se tratara de un objeto local. El Communication Stack es una aplicacin basada en AJAX que soporta peticiones sincrnicas y asincrnicas permitiendo que la aplicacin cliente pueda llamar a cualquier mtodo de cualquier objeto remoto pudiendo recibir algn valor de retorno instantneamente (mtodo sincrnico) o va callback (mtodo asincrnico). Para poder entender mejor este componente desarrollaremos un ejemplo sencillo de funcionamiento. Este ejemplo muestra como un cliente JavaScript le enva a travs de un argumento datos a un mtodo de una clase desarrollada en .NET (recordemos que tambin se puede implementar en otras tecnologa como Java o Rubi on Rails), este mtodo trata con la informacin y devuelve el resultado del procesamiento nuevamente al cliente. 121
Configuracin del cliente: Para habilitar la invocacin de un cliente a un objeto .NET ubicado en WebORB, el framework Rich Client System debe ser importado antes de que cualquier invocacin se lleve a cabo. <script language="javascript" src="WebORB.js"></script> Configuracin del servidor: El cdigo del servidor debe ser implementado dentro de una aplicacin ASP.NET habilitada en WebORB. Copiamos el archivo ASP compilado (assembly) dentro de la carpeta /bin de la aplicacin y WebORB automticamente expondr este objeto para su utilizacin a travs de Rich Client System. Pasar un argumento primitivo al mtodo del servidor: El cliente invoca al mtodo echoInto dentro de la clase PrimitiveTest implementada en ASP.NET. El mtodo toma un argumento de un entero primitivo. Cdigo c# namespace weborb.tests{ public class PrimitiveTest { public int echoInt( int intArg ){ return intArg; } } } El siguiente cdigo del lado del cliente invoca al mtodo .Net del servidor WebORB. Cdigo JavaScript var proxy = webORB.bind( "weborb.tests.PrimitiveTest", "weborb.aspx" ); // creamos un objeto webORB.bind pasndole como argumento la clase y la URL // donde se encuentra el archivo var syncResult = proxy.echoInt( 21 ); // a la variable syncResult le asignamos el resultado de la funcin echoInt // mapeada a travs del objeto proxy // Para invocar asincrnicamente nicamente debemos agregar como // argumento un objeto Async proxy.echoInt( 21, new Async( echoIntResponse ) ); function echoIntResponse( result ){ }
Ejemplo 25 (obtenido de http://www.themidnightcoders.com)
De la misma forma que se envan argumentos simples, como se muestra en el ejemplo anterior, se pueden enviar argumentos mltiples, arreglos, objetos JavaScript, mapeo de clases JavaScript contra clases .NET, manejo de excepciones, entre muchas otras funciones.
122
Data binding module: Rich Client System lleva a cabo un manejo especial para invocaciones remotas que devuelvan datos en respuesta a consultas en bases de datos. El sistema contiene el API que permite la extraccin de datos resultantes de una consulta. Adems posee informacin adicional (va API) como por ejemplo los nombres de las columnas (campos) consultadas y el nmero total de registros. Si el servidor WebORB devuelve una cantidad de datos suficiente como para que sea necesario paginar, Rich Client System permite la recuperacin de los mismos en un juego de pginas que hacen mucho ms dinmica la actuacin de la aplicacin y mejora notablemente la experiencia del usuario. Podemos observar el siguiente ejemplo para graficar mejor el funcionamiento del componente Data Binding Module. Se trata de un formulario muy sencillo que permite ingresar a una base de datos informacin acerca de un contacto. Automticamente al completar los datos y presionar el botn Create Contact la base de datos es actualizada con la nueva informacin y esta aparecer en la grilla situada debajo. Si la grilla supera los 10 contactos, se genera una nueva pgina accesible a travs del link que se sita en la parte inferior. Podemos observar que en la cuarta columna de la grilla se nos presenta la opcin de editar el registro correspondiente o de eliminarlo definitivamente de la base de datos. Cuando la pgina es cargada, esta realiza una llamada a un objeto del lado del servidor, el cual se encarga de implementar la lgica necesaria para recuperar, eliminar o actualizar los datos desde la base de datos. Cdigo fuente: Lo primero que se debe hacer es importar la librera Rich Client System: <script language="javascript" src="WebORB.js"> </script> En el evento onLoad del cuerpo de la aplicacin colocamos la funcin loadPhoneBook() que es la que realizar la invocacin remota asincrnica al objeto del servidor que interactuar con la base de datos. <body onLoad="loadPhoneBook();"> Como mencionamos anteriormente, la funcin loadPhoneBook() realiza la invocacin asincrnica del mtodo remoto (lado del servidor) para recuperar los contactos desde la base de datos.
123
proxy = webORB.bind( "weborb.examples.primer.PhoneBook", "http://www.themidnightcoders.com/examples/weborb.aspx"+ "?activate=application" ); proxy.getAllContacts( new Async( processContacts ) );

Ejemplo 26 (obtenido de http://www.themidnightcoders.com)
Al igual que en el ejemplo anterior, creamos un objeto webORB.bind pasndole como argumento el paquete donde se encuentra la clase y la URL del archivo. El objeto proxy ahora contiene todos los mtodos mapeados de la clase PhoneBook. Pasndole como parmetro al mtodo getAllContats un objeto Async, hacemos que esta peticin se realice se forma asincrnica. Al instanciar al objeto Async le debemos pasar como parmetro el nombre de la funcin que se encargara de la lgica para actualizar los datos en el browser. En el caso del ejemplo anterior este mtodo se llama processContacts(). Por lo tanto cuando el servidor termine la ejecucin del mtodo getAllContacts y responda, Rich Client System invoca al mtodo processContacts para actualizar el browser. Para resumir un poco todo lo que comentamos anteriormente: 1. El cliente invoca al mtodo getAllContacts() en un objeto remoto va servidor WebORB. WebORB despacha la llamada al objeto PhoneBook (weborb.examples.primer.PhoneBook). 2. Este objeto ejecuta la consulta a la base de datos y devuelve el conjunto de datos. 3. WebORB esconde el resultado para las demandas de paginacin subsecuentes y construye la primera pgina del cliente. 4. Rich Client System procesa la respuesta e invoca a la funcin processContacts(). Esta funcin fue especificada en el objeto Async cuando se realiz la invocacin a la funcin remota getAllContacts(). La funcin processContacts() contiene la lgica para renderizar y mostrar los datos en el navegador.
Figura 14: Esquema del funcionamiento del ejemplo anterior (obtenido de http://www.themidnightcoders.com)
Interactive messaging client: Rich Client System provee un componente especial para habilitar una comunicacin dinmica bidireccional entre el cliente y el servidor. Los clientes pueden utilizar este componente para establecer una comunicacin peer to peer (punto a punto)102 y enviar mensajes. Utilizando este componente los desarrolladores tienen la
Interconexin directa entre dos dispositivos a travs de una lnea de transmisin de datos. Fuente: http://www.alegsa.com.ar/Dic/conexion%20punto%20a%20punto.php
102
124
posibilidad de crear fcilmente aplicaciones que integren dentro un servicio de mensajera instantnea. TODO: Debido a que este framework se encuentra en pleno desarrollo, podemos encontrar en la pgina oficial informacin acerca de los nuevos componentes que se piensan implementar en un futuro. Nombraremos algunos de ellos de manera de poder visualizar un poco ms hacia donde esta librera est apuntando. Dynamic rich user interface widgets: es un framework extensible para desarrollar componentes personalizados as como tambin widgets listos para usar. El juego de componentes que contiene este framework incluir TreeView, Datagrid, Listbox, Progress bar, Tab panel, etc. Estos pueden integrarse fcilmente a los objetos del servidor que utilicen el componente Communication Stack para proveer una actualizacin de los datos dinmica y en tiempo real. Event System: Los diseadores de aplicaciones ricas de internet podrn usar este sistema de eventos para disparar funciones a travs de los componentes de usuarios de la interfaz. Este sistema proporciona un framework extensible capaz de ocuparse de subscripciones y transmisiones de notificacin. Adems de las notificaciones de eventos locales, el sistema de eventos puede entregar eventos del lado del servidor a travs de objetos que utilizan el componente Communications Stack. Drag-and-drop: Se proporcionara de un componente fcil de usar para proporcionar la funcionalidad de arrastrar y soltar. Los diseadores tendrn la posibilidad de marcar individualmente componentes de interfaz para realizar esta operacin que acerca las aplicaciones web an ms a las aplicaciones de escritorio. En conclusin, Rich Client System es una implementacin basada en AJAX que permite a los clientes que utilicen esta tecnologa conectarse al servidor WebORB. En este momento, WebORB es el nico servidor capaz de procesar las demandas de Rich Client System.
Backbase
Backbase es un framework empresarial de componentes AJAX que permite agregar una capa de presentacin para sistemas web. Es un framework que presenta grandes prestaciones y es muy completo si se lo compara con algunos pequeos frameworks que existen en el mercado. Esta solucin comercial que contiene componentes visuales AJAX permite realizar acabados semejantes a los sistemas de escritorios. Backbase est basado en estndares abiertos (XHTML, CSS, JavaScript, XML), no requiere plugins y se desempea de forma correcta en la mayora de los browsers. Ofrece ms de 50 componentes, se ejecutan en cualquier plataforma: J2EE, .NET, PHP, ColdFusion, etc. Tiene cuatro versiones: Client, Java, .NET y Community. La Community Edition es la versin no comercial del Client Edition y est disponible para la descarga gratuita para uso no comercial. Las distintas ediciones de Backbase Las cuatro ediciones distintas de este framework poseen diferentes caractersticas que graficamos en el siguiente cuadro:
125
Edicin Componentes Herramientas de desarrollo Componentes JSF del servidor Plugin Eclipse103 Controles .NET del servidor Plugin Visual Studio .NET Plataformas Cualquier servidor web PHP ColdFusion Perl J2EE .NET Licenciamiento Gratis para uso no comercial Por CPU
Community
Client
Java
.NET
Las soluciones Backbase La tecnologa AJAX de Backbase est diseada para hacer un desarrollo muy eficiente creando ms atractivas RIAs con poca utilizacin de cdigo. Proveen las ms usadas tecnologas: Enterprise AJAX Framework, un nico Visual AJAX Builder y Rich Application.
Eclipse es principalmente una plataforma de programacin, usada para crear entornos integrados de desarrollo (del Ingls IDE). Fuente: http://plataformaeclipse.com/
103
126
Enterprise AJAX Framework: es un marco de trabajo que ofrece flexibilidad de desarrollo y posibilidad de eleccin de tecnologa y metodologa. Se eliminan muchas de las complejidades del desarrollo con AJAX, funciona con todos los entornos del lado del servidor e incluye mdulos pre-construidos de Java con JSF, Struts, Spring104 y un mdulo de servicio de datos. Visual AJAX Builder: incluye un verdadero diseador WYSYWYG105 con el apoyo de Prototype. Permite a los desarrolladores exponer sus aplicaciones visuales con funcionalidades de tipo arrastrar y soltar. Rich Engagement Application: consiste en formularios, navegadores y chat. Estas aplicaciones pre-construidas pueden ser fcilmente personalizadas para satisfacer necesidades especficas. Training, Consulting & Support: para ayudar a sus proyectos AJAX Backbase provee de entrenamiento, consultora y servicio de soporte tcnico de forma remota y en sitio. El servicio est disponible durante todo el ciclo de desarrollo. Rich Client Framework El framework incluye un pequeo motor AJAX (Ajax Engine) que es un pequeo servidor que corre en el cliente. La gran diferencia entre los navegadores son resueltos por el framework con una capa de abstraccin. Con backbase un widget o funcin trabaja de la misma forma en todos los navegadores. La naturaleza orientaba a objeto del framework asegura la organizacin y mantenimiento de cdigo. Backbase se conecta a cualquier servidor o ambientes como Java, PHP, .Net y servicios web. Incluye los servicios de datos y los mdulos de JSF, Struts y Spring.
Figura 15: Esquema del funcionamiento de Backbase (obtenido de http://www.backbase.com)
El Ajax Engine proporciona una API que permite solicitar servicios. Al llamar a mtodos
Spring es un framework de Java que facilita la creacin de aplicaciones. Fuente: http://sentidoweb.com/2006/12/26/spring-framework-de-java.php 105 Acrnimo de What You See is What You Get (lo que ves es lo que tienes). Tcnica que ofrece la reproduccin exacta en la pantalla de un texto tal como aparecera despus en formato impreso. Fuente: http://www.definicion.org
104
127
y propiedades y pasar argumentos tal como se definen en la API, los desarrolladores aprovechan la flexibilidad incorporada y se centran en la funcionalidad de su aplicacin. El motor proporciona un par de APIs, una declarativa y un JavaScript para que las tareas puedan ser realizadas a travs de funciones de mandos XML, Javascript o una combinacin de ambos. Incluye una librera de componentes muy completa, con ms de 250 widgets y funciones pre construidas que se pueden crear o mejorar. Los widgets estn construidos en XHTML, CSS, JavaScript y XML y pueden ser usados en cualquier pgina. Es posible cargar fcilmente datos desde el servidor. Componentes JSF son contenidos utilizando un modulo del lado del servidor. Pueden ser utilizados con otros componentes JSF existentes. AJAX funciona mejor cuando est estrechamente unida a su servidor de aplicaciones. Los servicios de datos proporcionan esto, son capaces de conectar las aplicaciones existentes del lado del servidor con el cliente AJAX. La comunicacin es bidireccional y los servicios de datos se encargan de los protocolos, los datos transformados, la serializacin y el intercambio de datos.
Figura 16: Esquema del funcionamiento de Backbase (obtenido de http://www.backbase.com)
Los servicios de datos backbase se ejecutan en el servidor de aplicaciones, esto permite tanto conectar con la base de datos como con aplicaciones. Esta funcionalidad se comunica al navegador utilizando formatos como XML o JSON. Los servicios de datos responden a eventos tanto del cliente como del servidor, este puede recibir instrucciones y datos y debe realizar una accin correspondiente. Ejemplo Backbase Hola Mundo Se debe tener instalado el framework cliente de backbase en el root del servidor web, caso contrario se debe descargar el mismo desde el sitio oficial y proceder a descomprimir el archivo .zip en el directorio raz del servidor web. Una buena prctica es tener una carpeta para el framework y crear una nueva carpeta que contendr el proyecto. La jerarqua de carpetas sera la siguiente: -- htdocs | Backbase_4_2_1 (la versin ser la disponible en el momento de la descarga) | | | bindings | | | demos | | | engine 128
| | | templates | HolaMundo (denominacin del proyecto) Se crea una pgina HTML dentro de la carpeta del proyecto: <html> <head> <title>Backbase - Welcome</title> <script type="text/javascript" src="../Backbase_4_2_1/engine/boot.js"></script> </head> <body> <script xmlns="http://www.w3.org/1999/xhtml" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:e="http://www.backbase.com/2006/xel" type="application/backbase+xml"> <xi:include href="../Backbase_4_2_1/bindings/config.xml" /> <div> <e:handler event="click" type="text/javascript"> alert('Hola Mundo!!!!'); </e:handler> Click aqu </div> </script> </body> </html>
Ejemplo 27 (obtenido de http://www.backbase.com)
El archivo contiene una pgina HTML normal con algunas caractersticas especiales: El cdigo es compatible con XHTML, lo que significa, por ejemplo, que todas las etiquetas deben estar debidamente cerradas. El motor de JavaScript Backbase en boot.js se ha cargado en la cabecera de la pgina HTML. Todo el cdigo Backbase de secuencia de comandos est contenido en las etiquetas con type = "application / backbase + xml". Para utilizar la Biblioteca de etiquetas Backbase (BTL), se debe incluir la aplicacin bindings para las etiquetas: <xi:include href="../Backbase_4_2_1/bindings/config.xml"/> Podemos ver que en la utilizacin de nombres de XML, el framework cliente utiliza varios nombres, que debern estar debidamente declarados. 129
Esto fue un simple y tpico ejemplo Hola Mundo. A continuacin se ampliara este Hola Mundo, utilizando las etiquetas de la BTL. Tambin demostraremos la funcionalidad de AJAX en el framework cliente mostrando un formulario con un campo de entrada, que, cuando se enva, provoca una respuesta que se mostrar en algn lugar de la pgina sin actualizar la misma. La BTL puede ser codificada en dos maneras, ya sea exclusivamente utilizando JavaScript, o sin el uso de JavaScript. La segunda versin del ejemplo utiliza la especificacin de Backbase para la ejecucin del lenguaje XML (XEL) y comandos de pginas. Cualquier combinacin de estos dos estilos es tambin posible como muchos ejemplos que la documentacin Backbase muestra. El esqueleto de la pgina tiene el mismo aspecto que la pgina que se muestra en el Hola Mundo, con la excepcin de una declaracin de espacio de nombre que tenemos que aadir para utilizar la BTL: xmlns: b = http://www.backbase.com/2006/ BTL. Aadir esta declaracin a la etiqueta HTML. En el cuerpo de la pgina, tenemos ahora un campo de entrada, un botn OK, y un globo, donde se mostrara un mensaje. <input id="myInput" type="text"/> <button style="margin-left: 10px;" onclick="javascript: showBalloon();"> OK </button> <b:balloon label="Backbase says:" id="myBalloon" mode="top-center" timeout="10s" width="250px" /> El globo es un widget tomado de la BTL. Tiene una etiqueta, pero no el contenido. Queremos construir el contenido del globo, usando el valor en el campo de entrada. Cuando el usuario hace clic en Aceptar, el evento onclick es capturado y la funcin showBalloon () de JavaScript debe ser ejecutada. function showBalloon() { var oBalloon = bb.document.getElementById('myBalloon'); var oInput = bb.document.getElementById('myInput'); var sValue = bb.getProperty(oInput,'value'); bb.command.setText(oBalloon,'Hello: ' + sValue,'replaceChildren'); oBalloon.setAttribute('open', 'true'); } El objeto que se utiliza en el cdigo es bb que es de particular inters. El Cliente Backbase en tiempo de ejecucin crea un motor adicional al DOM, como una capa que protege de incompatibilidades de navegadores e interpreta funcionalidades especificas de Backbase. Por lo tanto, es necesario utilizar el objeto bb.document proporcionado por el Cliente en tiempo de ejecucin, en lugar del objeto de documento proporcionada por el navegador. Se obtiene el globo y el campo de entrada por id, el valor del campo de entrada, y se configura como un nuevo nodo de texto en el globo. Por ltimo, se muestra el mismo. Agrupando todo:
130
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:b="http://www.backbase.com/2006/btl"> <head> <title>Hello Backbase</title> <script type="text/javascript" src="../Backbase_4_2_1/engine/boot.js"></script> <script type="text/javascript"> function showBalloon() { var oBalloon = bb.document.getElementById('myBalloon'); var oInput = bb.document.getElementById('myInput'); var sValue = bb.getProperty(oInput,'value'); bb.command.setText(oBalloon,'Hello: ' + sValue,'replaceChildren'); oBalloon.setAttribute('open', 'true'); } </script> </head> <body style="height: 100%"> <script type="application/backbase+xml"> <xi:include href="../Backbase_4_2_0/bindings/config.xml" /> <div style="margin: 80px; width: 300px;"> Please type your name and click OK: <br/> <br/> <input id="myInput" type="text"/> <button style="margin-left: 10px;" onclick="javascript: showBalloon();">OK</button> <b:balloon label="Backbase says:" id="myBalloon" mode="top-center" timeout="10s" width="250px" /> </div> </script> </body> </html>
El anterior es un ejemplo en el que se usa el BTL con widgets de una forma sencilla usando JavaScript. Backbase tambin proporciona un lenguaje declarativo de marcas que se puede utilizar para manipular la BTL y otros elementos. XEL usa nombres de comandos y puede hacer su cdigo ms compacto y ms transparente. Adems de la BTL, tenemos que declarar tambin el XEL y los nombres de comandos. xmlns:c=http://www.backbase.com/2006/command
131
xmlns:e=http://www.backbase.com/2006/xel El manejador de evento en el botn es de particular inters: <e:handler event="click"> <c:setText select="concat('Hello: ',id('myInput')/property::value,'!')" destination="id('myBalloon')" mode="replaceChildren" /> <c:setAttribute with="id('myBalloon')" name="open" select="'true'" /> </e:handler> El valor en el nodo de texto es el concatenado de la cadena de tres partes, donde la parte central es una expresin XPath que extrae el valor del campo de entrada. El destino del recin creado nodo de texto es el globo. Un comando setAttribute se utiliza para abrir el globo. <htmlxmlns=http://www.w3.org/1999/xhtml xmlns:xi=http://www.w3.org/2001/XInclude xmlns:b=http://www.backbase.com/2006/btl xmlns:c=http://www.backbase.com/2006/command xmlns:e="http://www.backbase.com/2006/xel"> <head> <title>Hello Backbase</title> <script type="text/javascript" src="../Backbase_4_2_1/engine/boot.js"></script> </head> <body style="height: 100%"> <script type="application/backbase+xml"> <xi:include href="../Backbase_4_2_0/bindings/config.xml" /> <div style="margin: 80px; width: 300px;"> Please type your name and click OK: <br/> <br/> <input id="myInput" type="text"/> <button style="margin-left: 10px;"> OK <e:handler event="click"> <c:setText select="concat('Hello: destination="id('myBalloon')" mode="replaceChildren" /> ',id('myInput')/property::value,'!')"
<c:setAttribute with="id('myBalloon')" name="open" select="'true'" /> </e:handler> </button> <b:balloon label="Backbase says:" id="myBalloon" mode="top-center" timeout="10s" width="250px"/> </div> </script> 132
</body> </html>
El resultado es el mismo, le ventaja radica en poder adaptar su desarrollo a sus conocimientos y necesidades con la seguridad de saber que el framework soporta diferentes formas de desarrollo para un mismo requerimiento. En los anteriores ejemplos se han utilizado las novedades del framework de backbase pero no se ha realizado una consulta asincrnica al servidor. Este es el siguiente paso. El esqueleto de la pgina ser similar al ejemplo anterior con la diferencia que debemos declarar el siguiente espacio de nombres de comando: xmlns:bf=http://www.backbase.com/2007/forms Por lo que el cdigo completo sera el siguiente: <html xmlns=http://www.w3.org/1999/xhtml xmlns:xi=http://www.w3.org/2001/XInclude xmlns:bf="http://www.backbase.com/2007/forms"> <head> <title>Hello Server</title> <script type="text/javascript" src="../Backbase_4_2_1/engine/boot.js"> </script> </head> <body style="height: 100%"> <script type="application/backbase+xml"> <xi:include xmlns:xi=http://www.w3.org/2001/XInclude href="../Backbase_4_2_1/bindings/config.xhtml_btl.chameleon.xml"> </xi:include> <div style="margin: 80px"> Please type your name and click OK: <br/> <br/> <form class="demo_form" action="response.php" bf:destination="id('server-response-area')" method="post"> <input id="name" name="name" type="text"/> <input type="submit" style="margin-left: 10px;" value="OK" /> </form> <div id="server-response-area" style="background: #FFFFC8;" /> </div> </script> </body> 133
</html>
De la accin que se especifica en el formulario, usted puede ver que response.php se invoca cuando el formulario se presenta. El formulario tambin se especifica una BF: destino. Esto significa que el motor Backbase tendr en cuenta la forma de presentar un AJAX utilizando XMLHttpRequest. Para un desarrollador es completamente transparente la comunicacin asincrnica que se est utilizando, sin embargo: En el lado del cliente, se tiene que considerar que la respuesta del servidor debe ir. En nuestro ejemplo se trata de un div con el ID de servidor de respuesta. Se debe especificar tambin la forma en que la respuesta del servidor se colocar con respecto a otros nodos de DOM en el lugar de destino. De forma predeterminada, esta es appendChild, pero utilizando el BF: modo de atributo puede reemplazar el contenido del destino, aadir como primer hijo, y as sucesivamente. La secuencia de comandos de servidor que recibe la solicitud debe ser consciente de que no debe enviar una pgina completa en el regreso, y que la respuesta debe ser vlido XHTML. El cdigo php sera el siguiente: <?php header('Content-type: application/xml'); echo '<?xml version="1.0" encoding="UTF-8"?>' ?> <div xmlns="http://www.w3.org/1999/xhtml"> <?php $myname = $_POST['name']; echo "<p>"; echo "The server says: Hello <strong>$myname</strong>! - on: "; echo date('l jS \of F Y h:i:s A'); echo "</p>\n"; ?> </div> A fin de que el navegador reconozca que es XML lo que recibe, la cabecera de la respuesta debe estar configurada adecuadamente. Los anteriores son simples ejemplos de utilizacin de herramientas bsicas suministradas por backbase. La potencia de backbase radica en la gran cantidad de elementos disponibles y la fcil integracin con lenguajes de lado de servidor en sus peticiones asincrnicas. Cundo usar Backbase? Backbase es un framework AJAX de gran potencia ideal para ser utilizados en proyectos en los cuales la cantidad de requerimientos hacen que encarar el mismo sin la utilizacin de un framework sea una tarea casi imposible. Backbase proporcionar herramientas que facilitaran el desarrollo de aplicaciones asincrnicas y su adaptacin al 134
lenguaje del servidor se hace de forma rpida y sencilla. Es recomendable para aquellos proyectos en los cuales el volumen del negocio justifique el costo del framework, ya que para proyectos comerciales las versiones de Backbase tienen un costo. Dicho costo ser absorbido por la gran cantidad de beneficios junto con la velocidad de desarrollo que Backbase provee para proyectos tipo RIA.
135
Captulo 9: Complementos grficos para libreras JavaScript
136
jQuery UI
jQuery UI es una API para jQuery que provee abstracciones de bajo nivel y de alto nivel, un conjunto de widgets con temas, todo construido por encima de la biblioteca jQuery. Esta API provee de un Core Interaction que le da vida a elementos HTML muy fcilmente a travs de funciones para drag & drop, sorting (ordenamiento), selecting (seleccin), resizing (modificacin de tamao) y muchos otros efectos ms. Por encima del core se construyen varios widgets reusables que incluyen los famosos acordeones, date pickers (calendarios), dilogos, sliders (deslizadores) y tab (solapas). Core Interaction: En este ejemplo mostraremos como de forma muy sencilla se puede hacer un elemento HTML draggable, o sea que admita la propiedad de dragg (arrastrar con el mouse). <html> <head> <script src="http://code.jquery.com/jquery-latest.js"> </script> //importamos la librera jquery <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"> </script> //importamos el core de jquery ui <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"> </script> //importamos el mdulo que permite aplicar la propiedad de dragg <script> $(document).ready(function(){ $(".block").draggable(); //cuando el documento est cargndose se le aplica al estilo block la propiedad de ser draggable }); </script> <style> .block { border: 2px solid #0090DF; background-color: #68BFEF; width: 150px; height: 70px; margin: 10px;
137
} </style> </head> <body> <div class="block"> //creamos una id de tipo block. Esta tendr la posibilidad de ser arrastrado con el mouse. </div> </body> </html>
Ejemplo 30 (obtenido de http://docs.jquery.com/UI/Draggables)
Con un cdigo muy similar podemos definir elementos como dropables (zona de drop), listas de elementos ordenables, elementos resizables (se les puede modificar su tamao), etc. Adems de proveer una abstraccin de la propia librera jQuery, al API UI de jQuery provee de elementos grficos como algunos widgets y hojas de estilos CSS para aplicar efectos ms interesantes a nuestras pginas.
138
Captulo 10: Conclusin
139
Las aplicaciones web tradicionales y las aplicaciones de escritorio estaban alejadas a una gran distancia en cuanto a la experiencia que el usuario posea a la hora de utilizarlas cotidianamente. La interfaz de las aplicaciones de escritorio era ms amigable al usuario final debido a la rapidez de las respuestas y a otras cuestiones relacionadas con el diseo grfico de las mismas. Por este motivo se busc la forma de acercar la web a los usuarios finales mejorando las caractersticas que las hacan desagradables al uso. As fue que apareci la llamada Web 2.0 con AJAX a la cabeza como la metodologa de desarrollo por excelencia. La Web 2.0 logra acercar da a da las aplicaciones web a las aplicaciones de escritorio haciendo ms amigable su utilizacin. A medida que AJAX se fue haciendo popular entre los desarrolladores web se vio la necesidad de construir libreras que aprovechen al mximo las virtudes de AJAX y que abstraigan al programador de cuestiones repetitivas y de bajo nivel, centrndose en brindar herramientas amigables y prcticas para construir aplicaciones ms rpidamente, aplicaciones bien diseadas que faciliten el mantenimiento, aplicaciones agradables con efectos propios de las aplicaciones de escritorio, con gsaficos y de rpida ejecucin. Durante este ltimo tiempo el abanico de posibilidades se fue abriendo de forma asombrosa, la gran cantidad y diversidad de libreras existentes en la actualidad permiten al desarrollador trabajar cmoda y fcilmente con la tecnologa AJAX aunque muchas veces tambin dificultan la tarea de definir cul es la ms adecuada en cada caso, muchas veces por la similitud que presentan las mismas en cuanto a sus prestaciones. A la hora de seleccionar una librera se deben tener en cuenta aspectos importantes como la licencia, el tipo de aplicacin a desarrollar (comercial, funcional, multimedial), interaccin con bases de datos, cantidad de transacciones, volumen de datos traficados y tecnologa utilizada en el lado del servidor. Si lo que se busca es independencia total con la tecnologa de desarrollo utilizada en el servidor, las libreras basadas en JavaScript son la solucin ideal. El trabajo se realiza del lado del cliente disminuyendo la carga de trabajo del servidor y nos abstraemos por completo del lenguaje de programacin utilizado en este. Libreras como Prototype, script.aculo.us, jQuery se encuadran dentro de esta categora. Por supuesto que adems se debe considerar un aspecto importante que es la utilizacin de recursos y efectos grficos como pueden ser hojas de estilos, widgets, temas, o presentaciones multimediales. No todas las libreras JavaScript proporcionan de estas caractersticas incluidas. Existe libreras JavaScript puras que solamente proporcionan funcionalidad AJAX. Si lo que queremos es incluir dichas caractersticas podemos utilizar libreras como Dojo, Rico, la extensin de la librera jQuery, jQueryUI, que contiene widgets y elementos grficos, La mayora de las libreras estudiadas en esta tesina son de licencia libre y gratuita a causa de la imposibilidad de costear libreras pagas para estudiarlas y probarlas. De todos modos podemos afirmar que el mercado existente dentro del mundo Open Source es excelente en calidad y prestaciones, brindando herramientas de las ms diversas y aplicables en un amplio espectro. Se debe tener en cuenta adems la compatibilidad de los navegadores y la frecuencia de actualizacin de las libreras. Si la frecuencia de actualizacin de una librera es notoriamente inferior a la frecuencia de actualizacin de los navegadores, la misma puede quedar obsoleta en cuanto a ciertas funcionalidades trayendo problemas de compatibilidad. 140
Un ejemplo claro de esta problemtica es la librera Sajax que desde el ao 2006 no recibe ninguna actualizacin. Tenemos adems libreras que trabajan con un lenguaje del lado del servidor especfico. Entre ellas podemos nombrar a AjaxCFC para trabajar con ColdFusion y AjaxAnywhere para trabajar con jsp y jsf. Por lo tanto si al desarrollar una aplicacin decidimos seleccionar estos lenguajes, nos veremos en la necesidad de seleccionar alguna de estas libreras ya que se integran completamente a dichos lenguajes. En cuanto a una plataforma de servidor de Microsoft, con ASP.NET como lenguaje de programacin, nos vemos prcticamente en la obligacin de utilizar a la librera Atlas ya que fue diseada especialmente para ser parte de esta plataforma. Las denominadas libreras ultralivianas JavaScript, como por ejemplo AJS, poseen funcionalidades limitadas as como tambin efectos grficos limitados o nulos. Estas libreras son tiles si justamente la aplicacin web que estamos desarrollando requiere de habilidades o caractersticas AJAX puntuales, sin necesidad de una interfaz completamente AJAX ni muy compleja en cuanto a efectos grficos. Esto no significa que la aplicacin en si tambin tenga que ser pequea en cuanto a procesamiento de datos y concurrencia de usuarios. Estas libreras se pueden utilizar e integrar fcilmente y con buenos resultados en aplicaciones extremadamente complejas pero que no requieran capacidades AJAX elevadas. Independientemente de las habilidades y preferencias, surge un hecho claramente: para escribir buenas aplicaciones AJAX es necesario la utilizacin de un framework.
141
Bibliografa Libros
Code Name Atlas for ajax development, Copyright 2007, Dino Esposito Introduccin a AJAX, Creative Commons, Javier Eguluz Prez Como se hace una tesis, Umberto Eco, versin castellana de Luca Baranda y Alberto Clavera Ibaez.
Revistas
Users .code ao III nmero 25 Articulo "RIA (Rich Internet Aplication): La Nueva Web", Juan A. Cabrera Users .code ao III nmero 31 Articulo "AJAX", Ing. Daniel Alejandro Galanti
Papers
Tecnologas sobre HTTP y la WWW Core JavaScript ECMAScript, Hugo Minni, 2004 Hacer Ajax utilizando DOJO, L. I. Jos Alberto Lpez Razo, 2006 Prototype + Script.aculo.us: Mejorando la experiencia del usuario con Sitios web altamente interactivos, Francisco J. Caldern S., 2006
Sitios Web consultados

www.softdownload.com.ar 05/11/2006 15:58 www.illasaron.com.es 27/10/2006 10:20 http://www.maestrosdelweb.com 27/06/2007 17:45 http://www.librosweb.es 08/02/2007 21:25 http://faiberts.googlepages.com/comofuncionaajax 14/06/2008 18:51 http://www.openrico.org/rico/home.page 23/06/2008 23:42 http://www.versioncero.com/noticia/136/rico 24/06/2008 22:52 http://www.pixelydixel.com/2005/06/rico-no-solo-de-flash-vive-el-web.html 24/06/2008 22:58 http://www.versioncero.com/noticia/212/listas-sin-paginacion-con-openricolivegrid 24/06/2008 23:13 http://openrico.sourceforge.net/examples/index.html 25/06/2008 14:00 http://www.librosweb.es/ajax/capitulo10/el_framework_prototype.html 26/06/2008 14:01 http://lineadecodigo.com/2007/02/25/obtener-el-contenido-de-una-capa-conprototype/#more-470 26/06/2008 14:07 http://www.tufuncion.com/mejor-framework-ajax 26/06/2008 14:14 142
http://maracay.velug.org.ve/descargas/prototype.pdf 26/06/2008 14:45 http://prototypejs.org/download 14/07/2008 21:00 http://jerome.sadou.free.fr/jerome/doc/RicoLiveGridPhpEnglishHowTo.pdf 21/07/2008 22:59 http://ajaxanywhere.sourceforge.net 04/08/2008 14:37 http://multimedios.programacion.com/java/noticia/1396 04/08/2008 14:45 http://ajaxanywhere.sourceforge.net/quickStart.html 11/08/08 23:33 http://ajaxanywhere.sourceforge.net/install.html 11/08/08 23:33 http://myfaces.apache.org 12/08/08 13:50 http://ajaxanywhere.sourceforge.net/jsf.html 12/08/08 14:26 http://www.querycat.com/faq/e0b33a6558a3970b438dbd81b3528463 18/08/2008 20:10 http://www.themidnightcoders.com/doc20/?t=31 18/08/2008 20:12 http://www.themidnightcoders.com/rcs 18/08/2008 20:39 http://www.themidnightcoders.com/examples/ajaxdotnetguide.htm 18/08/2008 23:26 http://www.themidnightcoders.com/examples/phonebook.htm 21/08/2008 23:04 http://www.themidnightcoders.net/examples/messageserver/chat/mapchatajax.ht m 21/08/2008 23:11 http://script.aculo.us 25/08/2008 14:09 http://github.com/madrobby/scriptaculous/wikis 25/08/2008 14:12 http://www.ribosomatic.com/articulos/121/scriptaculous-guia-rapida-parte-1 25/08/2008 14:31 http://www.tutorialspoint.com/script.aculo.us/scriptaculous_overview.htm 26/08/2008 22:27 http://github.com/madrobby/scriptaculous/wikis/ajax-inplaceeditor 28/08/2008 21:32 http://github.com/madrobby/scriptaculous/wikis/ajax-inplacecollectioneditor 03/09/2008 22:51 http://www.java2s.com/Code/JavaScript/AjaxLayer/DemooftheAjaxInPlaceCollectionEditor.htm 03/09/2008 23:13 http://html.conclase.net/w3c/html401-es/struct/lists.html 15/09/2008 14:13 http://www.scribd.com/doc/2892870/Introduccion-Ajax 15/09/2008 14:25 http://github.com/madrobby/scriptaculous/wikis/autocompleter-local 15/09/2008 22:19 http://github.com/madrobby/scriptaculous/wikis/slider 15/09/2008 22:20 http://www.robgonda.com/blog/projects/ajaxcfc 29/09/2008 22:18 http://www.timdown.co.uk/log4javascript 29/09/2008 23:20 143
http://www.robgonda.com/blog/projects/ajaxcfc/examples/echo 29/09/2008 23:41 http://www.danvega.org/blog/index.cfm/2006/12/4/ajaxCFC-Login-Form 29/09/2008 23:58 http://sitepen.com/labs/guides/?guide=DojoQuickStart 02/10/2008 15:11 http://www.modernmethod.com/sajax/faq.phtml 07/10/2008 09:19 http://www.anaa.eu 07/10/2008 10:45 http://www.anaa.eu/manual.html 07/10/2008 11:07 http://www.definicion.org/wysywyg 07/10/2008 21:57 http://www.mytestbox.com/es/miscellaneous/content-delivery-networks-cdn-list 14/10/2008 14:29 http://dojotoolkit.org/downloads 17/10/2008 21:19 http://www.elcodigo.net/cgibin/DBread.cgi?tabla=herramientas&campo=0&clave=60&info=1 17/10/2008 http://dojotoolkit.org/book/dojo-book-0-9/hello-world-tutorial 17/10/2008 23:34 http://www.adrformacion.com/cursos/ajax/leccion3/tutorial1.html 20/10/2008 15:14 http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit-0 22/10/2008 14:00 http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/dijit-glance 22/10/2008 14:15 http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/themes-and-design 22/10/2008 14:48 http://orangoo.com/labs/AJS/ 24/10/2008 14:03 http://www.backbase.com/ 15/05/2008 15:00 http://blog.unijimpe.net/backbase-ajax-framework/ 20/04/2008 20:15 http://js.fleegix.org/ 24/10/2008 14:40 http://js.fleegix.org/download 24/10/2008 14:54 http://rialto.improve-technologies.com/wiki/ 27/10/2008 22:00 http://rialto.improve-technologies.com/rialtoDemo/demo2/demoRialto.html 17/10/2008 22:14 http://ui.jquery.com/ 27/10/2008 23:35 http://docs.jquery.com/UI#Core_Interaction 28/10/2008 14:17 http://docs.jquery.com/UI/Draggables 28/10/2008 14:42 http://www.genbeta.com/2005/09/13-zimbra-correo-y-calendario-libres-al-maspuro-estilo-gmail 31/10/2008 14:10 http://www.zimbra.com/ 31/10/2008 14:28 http://www.zimbra.com/demos/zimbra_overview.html 21/10/2008 14:38 http://es.wikibooks.org/wiki/Bindows 05/11/2008 21:00
144
http://mb.bindows.net/ 05/11/2008 21:27 http://www.desarrolloweb.com/articulos/presentacion-bindows.html 21:33 05/11/2008
http://www.bindows.net/bindows/html/bimain.html?Adf=http%3A%2F%2Fwww.bi ndows.net%2Fbindows%2Ftest%2FBindowsTest.xml;AdfName=BindowsTest;Params =0 07/11/2008 23:05 http://www.asp.net/atlas/ 12:00 actualmente http://www.asp.net/ajax/ 10/10/2006
http://www.techtear.com/2007/03/26/los-mashups-uno-de-los-pilares-de-la-web20/ 18/11/2008 22:11 http://www.quimicaviva.qb.fcen.uba.ar/contratapa/aprendiendo/capitulo12.htm http://www.psicomundo.com/argentina/estudiantes/tesina.htm http://materias.fi.uba.ar/7500/
145

Tesina Ajax

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tesina Ajax

Caricato da

Copyright:

Formati disponibili

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Integrantes del trabajo

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Tiempo Nombre Caractersticas

Pasado Web 1.0 Internet expositiva de lectura Indexacin simple

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Desarrollo del problema

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Figura 1: Tecnologas agrupadas bajo el concepto de AJAX

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Figura 3: Modelo sincrnico (tradicional) vs. modelo asincrnico (AJAX)

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

statusText abort() getAllResponseHeaders() getResponseHeader(cabecera)

Ajax: Capacidades de las libreras existentes en el mercado

Factibilidad del estudio

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Universo de Estudio y Dimensin Temporal

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Captulo 2: Frameworks, conceptos

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Captulo 3: Frameworks JavaScript

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Mtodo DOM JavaScript var nuevosdatos = document.getElementById(idElemento);

Prototype var nuevosdatos = $(idElemento);

Podemos observar que mediante Prototype se agiliza notoriamente la escritura

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

<input type = button value = Ok onclick = prueba();> </form> </body>

return new ActiveXObject(Msxml2.XMLHTTP)

return new ActiveXObject(Microsoft.XMLHTTP)

return new XMLHttpRequest()

Ajax: Capacidades de las libreras existentes en el mercado

} catch (err3) { req = false; } } } return req; }

Ejemplo 3 (obtenido de http://www.librosweb.es y probado localmente)

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

Ajax: Capacidades de las libreras existentes en el mercado

iegradient (Internet Explorer solamente)