Prototype

De Wikipedia, la enciclopedia libre

Prototype es un framework basado en JavaScript que se orienta al desarrollo sencillo y dinámico de aplicaciones web. Es una herramienta que implementa las técnicas AJAX y su potencial es aprovechado al maximo cuando se desarrolla con Ruby On Rails.

PROTOTYPE Framework AJAX

[editar] INTRODUCCIÓN.

Con la Web 2.0 las tecnicas de desarrollo de páginas web necesitaban dar un gran salto. Con esto en mente nació la ténica AJAX, que basicamente permite el desarrollo agil y sencillo de páginas Web, esto en relación al desarrollador, y provee al cliente un manera más rápida de acceder al servicio que solicita. Prototype es un Framework basado en Java Script orientado a proporcionar al desarrollador de tecnicas AJAX listas para ser usadas. El potencial de Prototype es aprovechado al maximo si se desarrolla con Ruby On Rails, esto no quiere decir que no se puede usar desde otro lenguje, solamente que demandara un "mayor esfuerzo" en el desarrollo.

[editar] TECNICA AJAX

Antes de comenzar a desarrollar PROTOTYPE, es necesario presentar el concepto AJAX, debido a que PROTOTYPE emplea AJAX.

AJAX proviene de Ashyncronous JavaScript And XML. En pocas palabras AJAX es una técnica de desarrollo WEB que incorpora varias tecnologías, como ser el Java Script y XML, consiguiendo de esta manera una forma de navegar rápida, ágil y dinámica.

AJAX funciona de la siguiente manera:

1. Usuario provoca un evento

2. Se crea y configura un objeto XMLHttpRequest

3. El objeto XMLHttpRequest realiza una llamada al servidor

4. La petición se procesa en el servidor

5. El servidor retorna un documento XML que contienen el resultado

6. El objeto XMLHttpRequest llama a la función callback() y procesa el resultado

7. Se actualiza el DOM (Documen Object Model)de la página asociado con la petición con el resultado devuelto

Las características de XMLHttpRequest son:

• Comunicación GET/POST

• Documentos pueden ser texto plano/xml

• Trabaja en background

• Número limitado de peticiones

• Permite especificar un manejador para el control de cambios de estado

• Manejador notifica el estado de la petición:

• Inicializada

• Iniciada

• En proceso de retornar la información

• Operación completada

El Tipo de Respuesta puede ser:

• Documento XML

• Texto

• Procesado en el cliente

• Mostrado directamente

• JavaScript

• Evaluado en JavaScript mediante ‘eval()’

• JSON, “JavaScript ObjectNotation”:

• Es un formato ligero para el intercambio de datos

• Es un subconjunto de la notación literal de objetos de Javascript pero no requiere el uso de Javascript

Propiedades de XMLHttpRequest:

• onreadystatechange: El manejador del evento llamado en cada cambio de estado del objeto

• readyState:Indica el estado del objeto o la petición

• 0 = sin inicializar

• 1 = cargando

• 2 = fin de la carga

• 3 = actualizando la información recibida

• 4 = Operación completada

• status: Estado HTTP devuelto por el servidor

• Error 404 si la página no se encuentra

• Error 200 si todo ha ido bien.

Las ventajas de AJAX son:

• Mayor interactividad

Recuperación asíncrona de datos, reduciendo el tiempo de espera del usuario

• Facilidad de manejo del usuario

El usuario tiene un mayor conocimiento de las aplicaciones de escritorio

• Se reduce el tamaño de la información intercambiada

• Portabilidad entre plataformas

No requieren instalación de plugins, appletsde Java, ni ningún otro elemento

• Código público

Las desventajas de AJAX son:

• Usabilidad: Comportamiento del usuario ante la navegación

• Botón de volver atrás del navegador

Empleo de iframeocultos para almacenar el historial)

Empleo de fragmento identificador del URL (‘#’) y recuperación mediante JavaScript

• Problema al agregar marcadores/favoritos en un momento determinado de la aplicación

Empleo del fragmento identificador del URL (‘#’) y recuperación mediante JavaScript

• Problemas al imprimir páginas renderizadasdinámicamente

• Tiempos de respuestaentre la petición del usuario y la respuesta del servidor

• Empleo de feedback visual para indicar el estado de la petición al usuario

• JavaScript

• Requiere que los usuarios tengan el JavaScriptactivado en el navegador

• En el caso de Internet Explorer 6 y anteriores, que necesita tener activado el ActiveX (En Internet Explorer 7, se implementa como JavaScript nativo)

• Como en DHTML, debe comprobarse la compatibilidad entre navegadores y plataformas

Para más información visite: http://es.wikipedia.org/wiki/AJAX

[editar] PROTOTYPE.

PROTOTYPE (http://prototype.conio.net/) es un framework desarrollado en JavaScript por Sam Stephenson para el desarrollo sencillo y dinámico de páginas WEB. PROTOTYPE nos simplifica gran parte del trabajo cuando se pretende desarrollar páginas altamente interactivas.

[editar] INSTALACION

Para comenzar a trabajar con PROTOTYPE es necesario obtener el frmework, para ello deben dirigirse al sitio http://prototype.conio.net/ y descargar prototype.js y para usarlo deben hacer lo siguiente:

• Enlazar en la página con la etiqueta <script>. <script type="text/JavaScript" src="path/to/prototype.js"></script>

NOTA: si emplean Ruby On Rails no es necesario descargar prototype.js, la librería viene incluida. Para hacer uso de ello simplemente se lo incluye dentro de la las etiquetas <head>: <%= javascript_include_tag 'prototype' %> Aqui ya podemos apreciar que entre Ruby y Prototype forman un gran "equipo"

[editar] FUNCIONES PROTOTYPE.

Ahora que ya lo tenemos instalado es hora de empezar a usar PROTOTYPE. Prototype dispone de funciones sencillas para proporcionar ayuda a la hora de escribir los script.

[editar] Función $()

La Función $() es bastante útil, al principio puede parecer un poco abstracta, esta función es un atajo a la función del DOM document.getElementById(), Un ejemplo para explicarlo.

<div id = "diego" >hola Prototype!</div>

La función $(), puede recibir el id del elemento, o puede recibir el propio elemento, y si recibe más de un elemento devuelve un Array (Arreglo) de elementos.

[editar] Función $A()

Esta función convierte cualquier parámetro en un objeto Array, pero el objeto array de Prototype no es exactamente como el array de javascript, ya que posee una extensión llamada Enumerable, la cual es una copia del lenguaje de programación Ruby, dándole mucha más versatilidad a JavaScript. Un Ejemplo

<div id="Diego"> Hola a Todos! </div> <div id="Mauricio"> Hola! </div> <button onclick="Arreglo()";

[editar] Función $H()

Convierte un objeto en un hash enumerable

<div id="dponce">Hola a Todos!! </div> <button onclick="duh();" id="mponce">clic</button> <script> function duh() {var ObjetoUsuario = {id: 1, login: "dponce", email: "diego.mauricio.ponce@gmail.com"}; // convertimos el objeto a un HASH var el_hash = $H(ObjetoUsuario); $('dponce').innerHTML = el_hash.toQueryString(); } </script>

[editar] Función $F()

Toma un ID y devuelve el valor de cualquier campo de formulario, por ejemplo, un menú select como este:

<select name="ciudad" id="ciudad"> <option selected="Seleccionar" value="SE">Santiago Del Estero</option> <option value="AR">Argentina</option> ... </select> $F('Ciudad') // 'SE'

[editar] Función document.getElementsByClassName()

Recibe una clase CSS como parámetro y devuelve un arreglo con los elementos que tienen como atributo className de la clase CSS.

<div class=”familia” id=”luis”>hola mundo!</div> <div class=”familia” id=”jose”>hola mundo!</div> <div class=”jefe” id=”El Jefe”>uno mas</div> <button onclick=”duh();” id=”padre”>clic</button> <script> function duh(){ var arrayNodosfamilia = document.getElementsByClassName(’familia’); arrayNodosFamilia.each( function(el, indice){ el.innerHTML = indice + ‘:’ + ‘divider ‘ + el.id; el.style.color = ‘blue’; }); } </script>

[editar] Función $$()

Es una mejora de la función document.getElementsByClassName(), recibe como parámetro un selector CSS y devuelve un array con cada elemento que cumpla con el criterio del selector dado, ejemplo.

<div id="ciudad"> <div class="familia" id="luis"><p>hola mundo!</p></div> <div class="familia" id="jose"><p>otro mensaje</p></div> <div class="jefe" id="El Jefe">uno mas</div> </div> <button onclick="duh();" id="padre">clic</button> <div class="familia" id="hijo"><p>ay caramba!</p></div> <script> function duh(){ var arrayNodosFamilia = $$('div#ciudad div.familia p'); arrayNodosFamilia.each( function(el, indice){ el.innerHTML = indice + ':' + 'divider ' + el.id; el.style.color = 'blue'; }); } </script>

Además podemos escribir nuestro código con menos líneas, por ejemplo

[editar] Función Binding

Prototype también añade a la función objeto dos métodos bind y bindAsEventListener. Éstos son usados para asociar una función a un objeto particular de modo que la palabra clave apunte a ese objeto. Supongamos que:

var myObject = new Object();

myObject.message = "Hello!";

myObject.eventHandler = function() {

alert(this.message);

}

$("mydiv").onmouseover = myObject.eventHandler;

Tradicionalmente, se conseguiría un error, porque, cuando el evento llama a la función handler, esta se refiere al elemento mydiv, y no a myObject, entonces this.message es indefinido. Se puede solucionar este problema con:

$("mydiv").onmouseover = myObject.eventHandler.bind(myObject);

Ahora funciona bien, porque la palabra clave se limita a myObject. Siguiendo esto, el bindAsEventListener hace lo mismo, aunque pasa el objeto del evento a través de su función de una manera compatible con el cross-browser.

[editar] Trabajando el DOM

Prototype tiene algunos objetos (Element, Insertion, Observer y Position) que permiten distintas formas de manipular el DOM.

El Objeto ELEMENT

La mayor parte de los métodos de “Element” simplemente toman un ID o una referencia del objeto a Element que usted quiere manipular. Aquí tiene una mirada a algunos de los métodos más útiles:

// Hides an element

Element.hide(element)

// Shows an element

Element.show(element)

// Adds a CSS class to the element

Element.addClassName(element, "cssClassName")

// Removes a CSS class from the element

Element.removeClassName(element, "cssClassName")

// Returns true if element has the CSS class

Element.hasClassName(element, "cssClassName")

El Objeto INSERTION

el objeto Insertion añade FRAGMENTOS de HTML en, y alrededor de, un Elemento. Hay 4 tipos de Insertion: Befote (Antes), Alter (Después), Top (Cima) and Bottom (Inferior). Esto le muestra como añadiría algún HTML antes de un elemento con el ID "myelement":

new Insertion.Before("myelement", "<p>I'm before!</p>");

El Objeto POSITION

El objeto Position puede indicar la posición en pantalla, y proporcionar información sobre la posición en relación con otros elementos de forma compatible con los navegadores. Esto debe ocupar la mayor parte del código complicado de animaciones, efectos y del código de drag-and-drop.

[editar] Manejando Formularios

Los objetos Form y Field prevén un número de funciones simples pero convenientes para trabajar con formularios y campos “input”, así como el código que soporta la puesta en práctica de Ajax con Prototype.

El objeto Form

Generalmente, los métodos del objeto Form toman una ID o una referencia del objeto a un elemento:

// disables the form making all elements read only

Form.disable(form)

// enables a form again

Form.enable(form)

// clears values from all form elements

Form.reset(form)

// returns an array of all form fields in the form

Form.getElements(form)

// focuses on the first form field

Form.focusFirstElement(form)

El objeto Field

El objeto Field trata con elementos individuales del formulario y sus métodos típicamente toman un ID o una referencia del objeto a un elemento de un modo muy similar al objeto Form:

// clears the field, will accept any number of arguments

Field.clear(field)

// returns true if all given fields have a value

Field.clear(field, anotherField)

// gives focus to the field

Field.focus(field)

// selects any text in the field

Field.select(field)

La Serialización del Formulario

En términos de Prototype, serializar un formulario significa leer todos los elementos del formulario y convertirlos en un string URL-codificado similar a la que sería enviado si usted aceptara el formulario. Por ejemplo:

<option value="artistname">Artist Name</option>

<option value="title" selected="selected">Title</option>

</select>

</form>

// query=thing&field=title&submit=Search

Form.serialize($("search"))

Note que Form.serialize ingeniosamente deja de lado las diferentes maneras en que los elementos del formulario son accesados, de modo que inputs, selects, checkboxes y los radio buttons son manejados correctamente. Form.serialize es útil para varias tareas, pero es el mejor cuando trabajamos con Ajax.

Form Observers

Form. Observer y Form.Element. Observer permiten observar un formulario y enviar “callbacks” cuando los datos cambien. Éstos son actualmente dos versiones de cada “observer” que verifican el valor actualizado. El primero es un observador periódico, que trabaja así:

new Form. Observer($("myform"), 1, myCallBackFunction);

new Form.Element. Observer($("myfield"), 1, myCallBackFunction);

Estos “observadores” comprueban cada segundo si los datos se han modificado y, si esto es así, llamará a myCallBackFunction.

El segundo tipo de “observador” está basado en los eventos y sólo realizará la comprobación cuando se produzca la modificación o un clic-evento para los elementos. Ejemplo:

new Form.EventObserver($("myform"), myCallBackFunction);

new Form.Element.EventObserver($("myfield", myCallbackFunction);

Si en todos los campos del formulario se colocan “observadores”, tendremos una manera mucho más eficiente de observar el formulario. Pero, si se quiere “observar” los cambios de elementos que no soportan estos eventos, se debe usar los observadores periódicos.

Es totalmente posible realizar estas funciones sin emplear PROTOTYPE, pero demandaría un gran esfuerzo y muchas líneas de código, en una palabra se intentaría reinventar la rueda, "para que programar algo si ya existe", solamente hay que usarlo y aportar a la modificación do le que ya esta hecho. Por eso PROTOTYPE es un fremework una biblioteca lista para ser usada en un ambiente de producción.

La web 2.0 ya es un hecho y PROTOTYPE está pensado para ello, para aprovechar al máximo la productividad y extender las fronteras de las web's ágiles, dinámicas y sencillas.

[editar] PROTOTYPE Vs...

Otra cosa que se me ocurriría es comparar a Prototype con otro framework, y la primera diferencia que encontraría es saber hacia donde apunta cada una. Supongamos que deseamos implementar Ajax en un proyecto basado en PHP y decidimos emplear PROTOTYPE como framework. no estaría mal, de hecho se puede hacer, pero no sería recomendable dado que para PHP existe otro framework más apropiado llamado XAJAX. En cambio si se desarrolla con Ruby de una la opción es Prototype el cual ya viene integrado en Ruby.

Es difícil compararlos a todos, lo que si es que todos proveen de un mejor servicio tanto para el cliente y una manera de producir más rápida para el desarrollador. Cuando FLASH parecia "copar" el mercado de las aplicaciones web hoy AJAX se lleva el premio todas apuentan a implementar esta Técnica.

Una experiencia reciente. "Estaba rindiendo el examen en la página de microsoft para desarrollador 5 estrellas, y por cada pregunta, que ocupa un porcentaje reducido de la pantalla, se actualizaba la página completa, con lo que se pierden valiosos segundos entre pregunta y pregunta. Haber si los amigos de Microsoft le dan un retoque con ATLAS, así como lo hicieron con Windows Live Mail".

[editar] PROYECTOS BASADOS EN PROTOTYPE

• Ruby on Rails (http://www.rubyonrails.com/ )

• script.aculo.us , Thomas Fuchs (http://script.aculo.us/)

Usando Prototype como base, http://script.aculo.us se especializa en suministrar una rica experiencia al usuario con efectos animados, de arrastrar y soltar (drag and drop) y los componentes poderosos UI. Hay un buen Wiki script.aculo.us sobre el sitio, con un rápido crecimiento de documentación de calidad para ayudarle ha comenzar y páginas de ejemplos

• Rico (http://openrico.org/)

• Behaviour (http://www.ripcord.co.nz/behaviour/)

[editar] ALTERNATIVAS QUE EMPLEAN AJAX

DOJO Toolkit (http://dojotoolkit.org/)

• Biblioteca JavaScript de código abierto

• Proporciona un API para el control y manipulación de historial

• Proporciona en el lado del cliente para la manipulación de URL y marcadores/ favoritos

• Widgets

• Ordenar tablas

• Validación de formularios

• Menus y barras de menús

• Google y Yahoo! Maps

XAJAX (http://www.xajaxproject.org/)

• Es una biblioteca PHP de código abierto

• Abundante documentación

• Fácil de utilizar:

• No requiere gran conocimiento de JavaScript

• Sencillo de emplear:

• Incluir biblioteca en página PHP

• Instanciar el objeto ‘xajax’

• Implementación de nuevas funciones en PHP

XOAD (http://www.xoad.org/ , antes NAJAX)

• Biblioteca orientada a objetos basada en PHP

• Documentación de las clases y tutoriales sencillos

• Emplea JSON y objetos PHP para la comunicación

• Soporta eventos del lado del cliente y del servidor

[editar] CONCLUSIÓN

PROTOTYPE es un framework más que implementa AJAX, si se lo compara con otro puede ganar o perder, pero esta un paso adelante del resto en lo que respecta al desarrollo de páginas ágiles e interactiva. El mundo cambio y hace uso de las bondades de la WEB 2.0, PROTOTYPE brinda su aporte a este auge, para lograr mejores servicios a menor costo de desarrollo.

Con la introducción de AJAX en aplicaciones Web el manejo del objeto XMLHttpRequest se hace simple. En una seuencia en donde el usuario interactúa con la Web y provoca una petición, se crea un objeto XMLHttpRequest, luego este objeto realiza una llamada al servidor solicitando el evento. la petición se procesa en el servidor y devuelve un resultado en formato XML, o texto plano, o JavaScript, etc. que contienen el resultado de la petición. Luego el objeto XMLHttpRequest hace un llamado a la función callback() para procesar el resultado y por ultimo se actualiza el DOM (Documen Object Model) con el resultado devuelto.

De esta manera Ajax permite lograr páginas rápidas y ágiles brindado un servico mejor al usuario.