Tutorial AjaxTags - peruvianportalterrestrialtransport
Contents
1. eventType Tipo de evento que queremos que ejecute la petici n al servidor source Identificador del elemento html que queremos que sea el encargado de lanzar el evento es decir es el elemento sobre el que AjaxTags escuchar el evento definido en la propiedad eventType sourceClass La propiedad sourceClass ser la encargada de almacenar el nombre una clase css Sobre los elementos que utilicen esta clase ser n los posibles disparadores del evento ajax que queremos lanzar Es utilizado para asociar un evento ajax a m s de un lanzador target Con esta propiedad se identificar el elemento html destino de la acci n de AjaxTags es decir ser el contenedor de la informaci n solicitada al servidor parameters En esta propiedad se guardar n los par metros que ser n enviados en la request para que sean accedidos desde el servlet encargado de realizar la consulta solicitada Estos par metros estar n formados por pares atributo valor separados por coma preFunction En esta propiedad se indica el nombre de la funci n javascript que deseamos sea ejecutada antes de realizar la petici n al servidor Normalmente se utiliza para realizar alguna preparaci n antes de la petici n postFunction Es la propiedad que definir el nombre de la funci n javascript que ser ejecutada cuando el servidor devuelva el resultado de la consulta solicitada Puede usarse para encadenar con otros eventos Page 2 02 06 2008 a las 11 082. al basar los interfaces en HTML son f cilmente indexados por los motores de b squeda Como principal desventaja tenemos que el usuario puede haber desactivado Javascript en el navegador as como que se depende de un objeto propietario para las comunicaciones as ncronas Respecto a Flash sus principales ventajas son su presencia pr cticamente universal en toda la web as como su excelente calidad visual pero por contra se depende de un plug in propietario as como de una menor accesibilidad y algo realmente molesto como son los banners y el bot n de skip intro inherente a cualquier animaci n flash Versiones Recomendadas La ltima versi n liberada es la 1 3 algunas de sus principales mejoras respecto a otras versiones son las siguientes Soluci n de diversos problemas de la funci n autocompletar con Internet Explorer Se a aden las funciones anchor area y displayTag Prerequisitos e Incompatibilidades Page 3 02 06 2008 a las 11 08 MADEJA AJAX Tags Prerequisitos Procedemos a describir algunos prerequisitos detectados para la instalaci n en nuestro sistema de AJAXTags La versi n del JDK debe ser la 1 5 o posterior El Servlet container running debe ser la versi n 2 3 o posterior y la versi n de JSP la 1 0 o posterior En las p ginas donde se utilice la funcionalidad de AjaxTags ser n necesarias tambi n las siguientes librerias javascript con sus consiguientes versiones gt Prototyp
3. MADEJA AJAX Tags errorFunction Es la propiedad que almacena la funci n javascript que se ejecutar en caso de que se produzca una excepci n en el servidor Ventajas e Incovenientes En la ficha general de AJAX hay una comparativa de los distintos framework AJAX analizados Por este motivo a continuaci n describimos las ventajas del uso de AjaxTags No hay que programar Javascript a menos que necesites realizar alguna prefunction o postfunction Es myy f cil agregar las funciones de Ajax a una p gina existente sin cambiar ning n c digo existente y sin agregar mucho m s que algunas etiquetas Est bien documentado con un ejemplo disponible Algunos puntos d biles de AjaxTags son los siguientes AjaxTags no te cuenta absolutamente nada sobre alg n problema que suceda en el servidor esto lo tienes que implementar tu Procedemos a realizar una comparativa entre AJAX y su principal competidor Flash Entre las principales ventajas de AJAX se pueden enumerar las siguientes Basado en HTML AJAX se basa en XHTML por lo que es f cilmente estandarizable e Accesible la integraci n de lectores de pantalla las posibilidades de modificar el tama o del texto por el usuario etc e Integraci n con CSS es bastante sencillo separar datos de presentaci n por lo que las aplicaciones son m s escalables Ligereza al ser una p gina con s lo HTML es m s ligera que un front end con Flash Motores de b squeda
4. label gt lt select id sProvincia gt lt option value 1 gt Seleccione una provincia lt option gt lt option value 1 gt Huelva lt option gt lt option value 2 gt Sevilla lt option gt lt option value 3 gt Cadiz lt option gt lt option value 4 gt Cordoba lt option gt lt option value 5 gt Jaen lt option gt lt option value 6 gt Malaga lt option gt lt option value 7 gt Granada lt option gt lt option value Page 8 02 06 2008 a las 11 08 MADEJA AJAX Tags 8 gt Almeria lt option gt lt select gt lt LOGO DE CARGA gt lt span id logolarga style display none gt lt img alt Indicador src lt request getContextPath 5 gt img indicador gif gt Cargando lt DESTINO gt lt label for sMunicipio gt Municipio lt label gt lt select id sMunicipio disabled disabled gt lt option value gt Seleccione un municipio lt option gt lt select gt lt fieldset gt lt form gt lt ajax select baseUrl S contextPath dropdown view source sProvincia target sMunicipio parameters sProvincia sProvincia preFunction initProgress empt yOptionName Seleccione un municipio postFunction resetProgress errorFunction reportError gt lt body gt lt html gt lt span gt Page 9 02 06 2008 a las 11 08
5. MADEJA AJAX Tags AJAX Tags Descripci n La librer a AjaxTags es un conjunto de tags JSP que nos simplifican el uso de JavaScript as ncrono y XML AJAX en p ginas con servidores Java Esto hace posible que los desarrolladores Java no necesiten entrar en profundidad en el c digo de los Javascript para implementar un formulario web tipo AJAX sino que pueden usar los modelos definidos en la librer a AjaxTag facilitando por tanto su labor AjaxTags es diferente de la mayor a de librer as de Ajax ya que proporciona un acercamiento declarativo a Ajax Configuras las acciones de Ajax que quieres que sucedan cuando suceda el evento que hayas configurado Lo nico que tenemos que hacer para utilizar AjaxTags es definir el acontecimiento Ajaz que queremos que se produzca cuando ejecutemos un evento sobre un elemento de la p gina Podemos asociar eventos sobre cualquier elemento de la p gina Esta librer a nos provee de varias herramientas como pueden ser autocompletar carga de combos en funci n de otras inserci n de html en s lo una parte de la p gina etc Esta ficha presenta el contenido acerca de AJAX Tags se muestran a continuaci n enlaces directos a distintos aspectos e Caracter sticas e Ventajas e Inconvenientes e Versiones Recomendadas e Prerequisitos e Incompatibilidades e Modo de Empleo e Enlaces de Inter s Ejemplos de uso Caracter sticas AjaxTags se encarga tanto del Javascript nece
6. e versi n 1 5 0 Scriptaculous versi n 1 7 0 OverLIBMWS Incompatibilidades El c digo Java es independiente del sistema operativo y no est vinculado a ning n componente determinado est implementado usando el JDK 1 4 y requiere un contenedor de Servlets para funcionar El c digo Javascript se ejecuta sin problemas al menos en las versiones 1 0 de Firefox y 5 0 de Internet Explorer Otras incompatibilidades no se han detectado Modo de empleo A continuaci n procedemos a dar unos consejos b sicos tanto para la instalaci n como para la configuraci n de AJAXTags Instalaci n Paso 1 Copiar el fichero jar AjaxTags Copiar el fichero ajaxtags 1 3 jar en el directorio WEB INF lib Paso 2 Definir Referencia TLD Nota este paso no es necesario para Servlet 2 4 containers Para usuarios de JSP 1 x copiar el fichero ajaxtags tld en el directorio WEB INF e incluir una referencia taglib en el fichero web xml el fichero ajaxtags tld se encuentra en la carpeta META INF de ajaxtags 1 3 jar lt taglib gt lt uri gt http ajaxtags org tags ajax lt uri gt lt location gt WEB amp 45 INF ajaxtags tld lt location gt lt taglib gt Paso 3 Crear el manejador del lado del servidor Debe haber un manejador que procese la petici n AJAX ste puede ser un servlet una acci n struts otro JSP o incluso un componente no Java El nico requisito es que este componente devuelva un fichero XML que muestre una lista de resultad
7. h gt 3js overlibmws overlibmws_crossframe js gt lt script gt lt script type text javascript src lt request getContextPath gt 3 s overlibmws overlibmws_iframe j s gt lt script gt lt script type text javascript src lt request getContextPath gt 3js overlibmws overlibmws_hide js gt lt script gt lt script type text javascript src lt request getContextPath 5 gt 3js overlibmws overlibmws_shadow js gt lt script gt lt script type text javascript src Page 7 02 06 2008 a las 11 08 MADEJA AJAX Tags lt request getContextPath 5 gt 3js ajax ajaxtags js gt lt script gt lt script type text javascript src lt request getContextPath gt 3js ajax ajaxtags_controls js gt lt script gt lt script type text javascript src lt request getContextPath gt 3js ajax ajaxtags_parser j s gt lt script gt lt link rel stylesheet type text css href lt request getContextPath gt css ajaxtags css gt lt link rel stylesheet type text css href lt request getContextPath gt css site css gt lt link rel stylesheet type text css href lt request getContextPath gt css displaytag css gt lt head gt lt body gt lt form gt lt fieldset gt lt legend gt Selecci n de Municipio lt legend gt lt ORIGEN gt lt label for sProvincia gt Provincia lt
8. os basada en una solicitud generada por un cliente AJAX Page 4 02 06 2008 a las 11 08 MADEJA AJAX Tags Aqu se puede ver un ejemplo de una clase lt xml version 1 0 encoding UTF4445 8 gt lt ajax amp 45 response gt lt response gt lt item gt lt name gt Record 1 lt name gt lt value amp 621 lt value gt lt item gt lt item gt lt name gt Record 2 lt name gt lt value amp 622 lt value gt lt item gt lt item gt lt name gt Record 3 lt name gt lt value amp 623 lt value gt lt item gt lt response gt lt ajax amp 45 response gt Paso 4 Declarar Referencia TLD en JSP Para cada JSP en el que se quiera usar AJAX tag hay que definirlo al igual que con el resto de librer as tag lt taglib uri http ajaxtags org tags ajax prefix ajax gt Paso 5 Incluir JavaScript Core Cuando usemos AJAX es inevitable el uso de Javascript Se necesitan algunos ficheros de javascript e La librer a de ajaxtags ajaxtags js e La librer a prototype js e La librer a scriptaculous js e Las librer as overlibs Algo importante a tener en cuenta es que el fichero prototype js debe ser incluido antes que el fichero ajaxtags js Un ejemplo de las librer as javascript necesarias para utilizar Ajaxtags es el siguiente lt script type text javascript src lt request getContextPath gt js prototype js gt lt script type text javascript s
9. rc lt request getContextPath gt js scriptaculous scriptaculous js gt lt script type Page 5 02 06 2008 a las 11 08 MADEJA AJAX Tags text javascript src lt request getContextPath 5 gt 3js overlibmws overlibmws js gt lt script type text javascript src lt request getContextPath gt 3js overlibmws overlibmws t95 crossframe js gt lt script type text javascript src lt request getContextPath gt 3 s overlibmws overlibmwss 95 iframe js gt lt script type text javascript src lt request getContextPath gt 3 s overlibmws overlibmwss 95 hide js gt lt script type text javascript src lt request getContextPath gt 3 s overlibmws overlibmwss t95 shadow 3s gt lt script type text javascript src lt request getContextPath gt 3js ajax ajaxtags Js gt lt script type text javascript src lt request getContextPath gt 3js ajax ajaxtagsse t95 controls js gt lt script type text javascript src lt request getContextPath gt 3js ajax ajaxtagsst95 parser js gt Paso 6 Definir Estilos CSS Muchos tags dependen fuertemente de CSS para ayudar a desarrollar su funci n Por ejemplo en el caso de la funci n ajax autocomplete CSS transforma una lista desordenada i e UL gt Ll tags en una lista ordenada Enlaces de inter s P gina oficial de AJAXTags http ajaxtags sourceforge o
10. rg P gina de art culos y ayuda sobre AJAX http www ajaxmatters com P gina con consejos sobre buen uso de AJAX http ajaxpatterns org Peque o tutorial aportado por Java Center AjaxTags paf Page 6 02 06 2008 a las 11 08 MADEJA AJAX Tags Ejemplos de uso A continuaci n procedemos a mostrar un ejemplo del uso de la funci n ajax autocomplete para ver con un poco m s de detalle el uso de estas librer as Como se ha comentado anteriormente esta funci n nos va mostrando una lista de valores que coinciden con lo introducido en un formulario de texto Esto se hace en tiempo real por lo que a cada pulsaci n veremos como se va refrescando el resultado de dicha lista coincidente He aqu una p gina de ejemplo que implementa esta funci n lt html xml1ns http www w3 org 1999 xhtml gt lt head gt lt meta http equiv Content Type content text html charset 150 8859 1 gt lt title gt Ejemplo AjaxTags lt title gt lt script type text javascript src lt request getContextPath gt 3js prototype js gt lt script gt lt script type text javascript src lt request getContextPath gt 3js scriptaculous scriptaculous js gt lt script gt lt script type text javascript src lt request getContextPath gt 3js overlibmws overlibmws js gt lt script gt lt script type text javascript src lt request getContextPat
11. sario en la parte del cliente como de los mecanismos de respuesta en el servidor Dentro de la librer a AjaxTags podemos encontrar entre muchas otras las siguientes funciones e Auto complete recupera una lista de valores que coinciden con la cadena de caracteres introducidos en un formulario de texto a la vez que el usuario los va escribiendo e Callout muestra un rea o ventana emergente al hacer clic sobre un elemento de la p gina sensible al contexto al tener asociado alg n tipo de evento de rat n e Select DropDown al usar esta caracter stica el sistema trabaja con dos combos de tal forma que al realizar una selecci n en el primer men desplegable se cargan resultados en el segundo men en funci n de la primera selecci n Por ejemplo modelos de coches en funci n de una marca determinada Form Update se actualiza el valor de un campo de texto vac o calcul ndose a partir de los valores de otros campos del formulario Toggle intercambia el valor de variables ocultas de un formulario y al mismo tiempo visualiza una imagen en lugar de otra Page 1 02 06 2008 a las 11 08 MADEJA AJAX Tags Editor crea un editor en la misma ventana Tab Panel Tab activa una serie de propiedades de ventana basadas en AJAX Terminolog a b sica En esta secci n vamos a describir los elementos comunes para cualquier definici n de AjaxTags baseUrl Url que queremos que ejecute la librer a AjaxTags cuando se produzca el evento
Download Pdf Manuals
Related Search