luauf.com » AJAX http://luauf.com Sistemas Operativos, Bases de Datos, Programación y Redes Mon, 14 May 2012 01:15:43 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Introducción a GWT http://luauf.com/2008/06/23/introduccion-a-gwt/ http://luauf.com/2008/06/23/introduccion-a-gwt/#comments Mon, 23 Jun 2008 23:50:38 +0000 Luciano http://luauf.com/?p=460 Mucho se puede hablar acerca de GWT, como son mis primeros pasos y este post está dedicado a quienes también quieran dar sus primeros pasos, intentaré ser breve y preciso.

GWT es un framework open source de Google para el desarrollo en Java, que permite compilar esa aplicación y traducirla a Javascript y HTML. De esta forma podrás escribir complejas aplicaciones que hagan uso de AJAX, pero sin tener la menor idea de AJAX.

Sin más preámbulos, ayudado por Google Web Tookit – Documentación en español vamos a descargar GWT y crear el primer y clásico Hola Mundo.

  • Primero de todo, descargamos Google Web Toolkit
  • Descomprimimos el archivo, esto nos genera un directorio que debemos agregar al path a la variable de entorno PATH:
    • En Linux, hacemos un export de la variable PATH, agregándole el path del GWT. Es una buena idea hacer el export al abrir el shell en el archivo $HOME/.bashrc.
    • En Windows, a través de Propiedades del Sistema -> Opciones avanzadas -> Variables de entorno y Variables de usuario o Variables del Sistema.
  • Para crear una nueva aplicación nos valemos de un script applicationCreator (o applicationCreator.cmd para Windows).
    • Para crear una aplicación, en una consola ejecuto applicationCreator com.luauf.client.Hola, esto nos creará la estructura de directorios y el archivo src/luauf/client/Hola.java.
    • Al mismo nivel del directorio src, creará dos scripts (de igual forma que el script applicationCreator, si utilizamos Windows los scripts tendrán la extensión .cmd.
      • Hola-shell: este script corre la aplicación en “Hosted Mode”. El navegador web “Hosted” de GWT permite correr y ejecutar aplicaciones GWT pero sobre bytecodes de una máquina virtual.
      • Hola-compile: convierte el código fuente Java a JavaScript, transformando tu aplicación Java a su equivalente aplicación JavaScript. application.
    • En primera instancia, lo que haremos será correr nuestra aplicación, ejecutando el script Hola-shell.
  • También es posible crear una aplicación GWT con todos los archivos de proyecto para Eclipse, uno de los IDE por excelencia para el desarrollo y depuración de aplicaciones Java.
    • Para crear una aplicación GWT para Eclipse, debemos correr applicationCreator -eclipse GWTHola com.luauf.client.Hola, y luego, para crear la base de la aplicación y los archivos de configuración para eclipse projectCreator -eclipse GWTHola.
    • Luego, desde Eclipse importamos el proyecto desde File -> Import -> Existing Projects into Workspace”

Esto es todo por ahora, el próximo paso será empezar a programar.

]]> http://luauf.com/2008/06/23/introduccion-a-gwt/feed/ 0 Servlets, NetBeans y AJAX http://luauf.com/2008/05/24/servlets-netbeans-y-ajax/ http://luauf.com/2008/05/24/servlets-netbeans-y-ajax/#comments Sat, 24 May 2008 22:33:20 +0000 Luciano http://luauf.com/?p=318 Este artículo es la continuación del ejemplo iniciado con Introducción a Java Servlets con NetBeans. El objetivo es modificar el proyecto realizado, para que los datos que se envían al Servlet se hagan por medio del objeto XMLHttpRequest y que mediante DOM accedamos y modifiquemos algunas partes de nuestro documento actual. En resumen, el objetivo es incorporar AJAX a nuestro proyecto. Por lo tanto, también recomiendo leer una Introducción teórica a AJAX, ya que en este artículo me enfocaré exclusivamente en el código.

Sobre el proyecto inicial de Introducción a Java Servlets con NetBeans, realizaremos las siguientes modificaciones:

  • Del lado del cliente:
    • En el formulario de envío de datos se quitará el botón submit y se agregará un nuevo botón, que en su evento onclick ejecutará una función Javascript.
    • Se agregará una función Javascript, que instanciará el objeto XMLHttpRequest, enviará los datos al servidor y procesará la respuesta del Servlet.
  • Del lado del servidor:
    • Se modificará el código de la respuesta enviada por el Servlet, antes enviaba todo un documento HTML (<HTML><HEAD>…. </HEAD><BODY>…</BODY></HTML>). Ahora solo enviará un fragmento de código HTML, pues el mismo, procesado por el cliente, se insertará en la página HTML existente, pues con el objeto XMLHttpRequest el cliente se evita cargar de nuevo la página (uno de los principales objetivos de AJAX)

Haciendo efectivos los cambios mencionados, el cliente queda así:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Hello World</title>
    </head>

    <script>
    function Enviar() {

        var obj = false;

        if (window.XMLHttpRequest) {
            //Cuidado aqui, el objeto XMLHttpRequest no esta disponible en versiones previas a IE7
            obj = new XMLHttpRequest();
        } else {
            return false;
        }
        obj.onreadystatechange = function () {
            if ( obj.readyState == 4 && (obj.status == 200 || window.location.href.indexOf ("http")==- 1)) {
                document.getElementById("Respuesta_Hello").innerHTML = obj.responseText;
            } else {
                //procesando...
            }   
        };
        obj.open("GET", "Servlet_Hola?nombre=" + document.getElementById("nombre").value , true);
        obj.send(null);

        return (true);
    }
    </script>

    <body>

        <form action="Servlet_Hola" method="GET">
        Ingrese su nombre: <input type="text" name="nombre" value="" size="45" id="nombre" />
        <input type="button" value="Enviar (con Ajax)" onclick="Enviar();" name="enviarAjax">
        </form>

        <div id="Respuesta_Hello">
            <!-- Este DIV contendra la respuesta enviada por el Servlet -->
        </div>

    </body>

</html>

Por el lado del servidor, el método processRequest del Servlet queda así:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();
    try {
        out.println("<strong>Hola " + request.getParameter("nombre") + "<strong>");
    } finally {
        out.close();
    }
}

Lo ejecutamos, de la misma forma que antes ejecutabamos nuestro proyecto desde NetBeans y probamos tener el comportamiento deseado:

]]> http://luauf.com/2008/05/24/servlets-netbeans-y-ajax/feed/ 7 AJAX: Introducción teórica http://luauf.com/2008/05/04/ajax-introduccion-teorica/ http://luauf.com/2008/05/04/ajax-introduccion-teorica/#comments Sun, 04 May 2008 22:18:02 +0000 Luciano http://luauf.com/?p=232 AJAX (Asynchronous JavaScript And XML) no es el nombre de una nueva tecnología, sinó una combinación de ellas. Básicamente, el principio de AJAX es hacer que las aplicaciones web se comporten de forma más natural, como lo hacen las aplicaciones de escritorio.

Las tecnologías de AJAX:

  • XHTML y CSS: la interfaz de una aplicación AJAX es una página web cargada en un navegador. XHTML y CSS son los dos estándares definidos por la W3C para la construcción de una página web.
  • JavaScript: las aplicaciones AJAX deben ser escritas en algún lenguaje de programación, este lenguaje es JavaScript.
  • XML: aunque podría utilizarse cualquier otro formato basado en texto (por ejemplo JSON), cuando la aplicación del servidor tiene que enviar una serie de datos de forma estructurada al cliente, XML resulta la solución más práctica.
  • El Modelo de Objeto de Documento (DOM): proporciona el mecanismo para acceder desde código a información contenida en un documento de texto basado en etiquedas (XHTML o XML)
  • El objeto XMLHttpRequest: se trata del componente fundamental de una aplicación AJAX. A través de sus propiedades es posible lanzar peticiones en modo asíncrono al servidor y acceder a la cadena de testo enviada en la respuesta.

Las anteriores tecnologías constituyen el núcleo fundamental de AJAX, sin embargo, estas aplicaciones se apoyan de las siguientes tecnologías y estándares:

  • HTTP: al igual que el navegador, el objeto XMLHttpRequest utiliza el protocolo HTTP para realizar las solicitudes al servidor, manejando también las respuestas recibidas.
  • Tecnologías del servidor: una aplicación AJAX debe tener del lado del servidor un programa que atienda las peticiones, genere y envíe las respuestas. Existen numerosas tecnologías, pero puedne emplearse J2EE, ASP.NET o PHP.

Vía: Ajax en J2EE (Antonio J. Martín Sierra)

]]> http://luauf.com/2008/05/04/ajax-introduccion-teorica/feed/ 0