Prototype / Scriptaculous: agosto 2011

martes, 30 de agosto de 2011

¿Cómo incluir Prototype a nuestro documento HTML?

Para poder utilizar Prototype es necesario hacer unos cambios en nuestro encabezado HTML y por supuesto incluir la librería en nuestro documento HTML. A continuación mostramos la estructura de un documento que admite el uso de Prototype.

Como primera medida debemos descargar la librería de Prototype. Es recomendable hacer esta descarga periódicamente para aprovechar las nuevas versiones que se van publicando en el sitio oficial.

La descarga consiste en un único archivo con extensión js y nombre prototype con su numero de version, por ejemplo prototype1.6.0.3.js. Este es el archivo que debemos incluir en nuestro documento.

Bien, veamos un ejemplo concreto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="prototype1.6.0.3.js"></script>

</head>

<body>

</body>

</html>

En negrita aparece el código necesario que debemos incluir en nuestro documento HTML para poder utilizar la librería de Prototype.

domingo, 28 de agosto de 2011

MÉTODO Observe

El método observe de prototype, como su nombre lo indica, observa el compartamiento de algún elemento o grupo de elemtos del DOM a la espera de algún suceso o evento previamente definido. De esta manera cuando ocurre el evento esperado observe lo detecta y ejecuta una función definida por el usuario.

Veamos un ejemplo

Supongamos que queremos ejecutar una función cuando el usuario hace click en un boton. Si usasemos javascript sería algo así:

function mi_funcion(){

alert("Esta es mi función");

}

</javascript>

De esta forma al clickear (evento onClick) el botón "Ejecutar función" invocamos a la función javascript mi_función.

Ahora veamos el mismo ejemplo utilizando Prototype:

$('mi_boton').observe('click',function(){

alert("Esta es mi función");

});

</javascript>

Vea que cuando definimos el botón no incluimos el evento onClick, en su lugar definimos una ID para el botón. Ahora desde javascript utilizamos la función $ para "atrapar" nuestro botón y le agregamos el método observe, indicando que "observe" a nuestro botón a la espera del evento "click". Cuando el evento sucede observe ejecuta la función que hemos definido.

Vea que que en javascript utilizamos el evento Onclick mientras que en Prototype lo denominamos simplemente click. En general todos los eventos de javascript son referenciados en Prototype sin el on y en minúsculas.

Evento javascript Referencia en Prototype

onClick click

onFocus focus

onBlur blur

onChange change

onSubmit submit

Ahora, si queremos observar por ejemplo una caja de texto con id="caja1" y ejecutar una función cuando esta reciba foco, podemos definir el siguiente código Prototype:

$('caja1').observe('focus',function(){

cuerpor de la función

});

viernes, 26 de agosto de 2011

Sistema de FAQ's con Prototype

Si bien este ejemplo fue pensado para un sistema de FAQ's puede usarse en cualquier caso en que se desee presentar información reducida al usuario y solo a pedido de éste mostrar la información completa.

La idea consiste en mostrar una pregunta o parte de un texto, en caso de que el visitante se vea interesado por el artículo completo podrá hacer click en un icono junto al texto para ver toda la información. Es especialmente útil cuando necesitamos ahorrar espacio en nuestra página o si queremos concentrar los enunciados propuestos en una sola pantalla para luego ir mostrando a pedido la totalidad de los textos.

El código es muy sencillo de implementar y totalmente configurable mediante CSS, así podrás adaptarlo rapidamente a tu sitio.

Ver ejemplo

miércoles, 24 de agosto de 2011

Marcar / Desmarcar un grupo checkbox a la vez

En este ejemplo pretendemos mostrar como manipular facilmente un grupo de checkbox, marcarlos o desmarcarlos todos a la vez. Si ha usado Gmail recordará que la lista de mails tiene a la izquierda un checkbox que nos permite seleccionar ese correo para luego aplicarle alguna función. Pero en la cabecera de la lista hay un checkbox con el texto "Marcar todos" o "Seleccionar todos" que nos permite seleccionar todos los checkbox de la lista.

Bien, aquí les dejamos una forma de hacer esto con Prototype.

Ver ejemplo

lunes, 22 de agosto de 2011

FUNCIÓN $$

A diferencia de la función $ que sirve para identificar un elemento del DOM ya sea a través de su id o clase css, la función $$ se utiliza para recorrer todo el documento en busca de elementos del DOM que correspondan a una clase css, una etiqueta HTML etc., devolviendo un arreglo con todos los elementos encontrados, esta función viene a reemplazar a la función getElementsByTagName de javascript.

Por ejemplo, desde javascript es posible acceder a todos los div de un documento con la siguiente función:

nodes = document.getElementsByTagName('div');

Usando prototype sería:

nodes = $$('div');

Dado que la función $$ devuelve un array necesitamos de una herramienta que nos permita recorrer ese array, y así poder trabajar con cada elemento del array. Por ello la función $$ se utiliza frecuentemente junto al método each de la siguiente manera:

$$('div').each(function(elem){alert(elem.id)});

Aquí con la sentencia $$ recorremos todo el documento buscando las etiquetas div, a continuación each recorre el array devuelto por $$ y por cada elemento encontrado muestra su id.

Veamos algunos ejemplos más de como utilizar la función $$ de Prototype.

//Darle color de fondo verde a todos los div del documento html
$$("div").each(function(elem){elem.style.backgroundColor="green";})

//Darle color de fondo rojo a todos los div del documento html que cuya clase css sea mi_clase
$$("div.mi_clase").each(function(elem){elem.style.backgroundColor="red";})

//Mostrar el valor de todos los objetos input cuyo contenedor (div) tiene clase mis_ botones
$$(".mis_botones input").each(function(elem){alert (elem.value);})

//Mostrar el valor de todos los input con clase mis_botones
$$("input.mis_botones").each(function(elem){alert (elem.value);})

//Mostrar todas las etiquetas "a" cuyo contenedor tenga id=cajita1
$$("#cajita1 a").each(function(elem){alert (elem);})

//Idem anterior pero que la etiqueta "a" tenga el atributo TITLE "ni idea"
$$("#cajita1 a[title='ni idea']").each(function(elem){alert (elem);})

//Idem anterior pero que la etiqueta "a" tenga el atributo TITLE distinto a "ni idea"
$$("#cajita1 a[title!='ni idea']").each(function(elem){alert (elem);})

//Selecciona todos los elementos que esten con el atributo disabled
$$(":disabled").each(function(elem){alert (elem);})

//Selecciona todos los elementos input que esten con el atributo disabled
$$("input:disabled").each(function(elem){alert (elem);})

//Selecciona todos los elementos input que sean boton que esten con el atributo disabled
$$("input[type='button']:disabled").each(function(elem){alert (elem);})

//Dentro de una misma funcion $$ puedo seleccionar más de un elemento
$$("input[type='button']","a","select").each(function(elem){alert (elem);})

sábado, 20 de agosto de 2011

Habilitar / Deshabilitar un Formulario con un checkbox

Ya hemos visto la función que nos ofrece Prototype para activar o desactivar un formulario. En este ejemplo usamos la misma herramienta pero ésta se ejecuta cuando el usuario tilda un checkbox. Hasta tanto no lo haga el formualario permanece inactivo.

Tambien hacemos un pequeño cambio en el estilo del formulario para mostrar claramente a nuestro visitante que el formulario se encuentra activo y listo para recibir datos.

Ver ejemplo

jueves, 18 de agosto de 2011

Textbox con texto de ayuda

En este ejemplo mostramos un tip muy usado en los Textbox, se trata de mostrar un valor inicial en la caja de texto (una ayuda generalmente en color gris) que al momento en que el usuario da foco a la caja para completarla dicha ayuda desaparece.

En caso de que el usuario no ingrese texto a la caja y cuando ésta pierde el foco, el texto de ayuda vuelve a aparecer.

Ver ejemplo

martes, 16 de agosto de 2011

FUNCIÓN $

La función $ viene a reemplezar a la función getElementById de javascript. En principio tiene la misma funcionalidad más algunas mejoras. Recordemos que esta función nos permite acceder a cualquier elemento del DOM conociendo su ID.

Por ejemplo, definamos estas líneas de código HTML:

Ahora en javascript definimos la función mostrar_contenido()

function mostrar_contenido(){
var contenido = document.getElementById('caja_texto').value;
alert (contenido);
}

Esta función utilizando Prototype sería:

function mostrar_contenido(){
var contenido = $('caja_texto').value;
alert (contenido);
}

En cualquier caso, al clickear el boton "Mostrar contenido", se invocará a la función mostrar_contenido(), la cual mostrará el contenido actual de la caja de texto.

La vuelta de tuerca de la función $ es que nos permite a diferencia de getElementById referenciar a más de un elemento a la vez.

Por ejemplo, definamos estas líneas de código HTML:

Ahora definamos esta función utilizando Prototype:

function mostrar_contenido(){
var contenido = $('caja_texto1','caja_texto2','caja_texto3').value;
alert (contenido[0].value+' - '+contenido[1].value+' - '+contenido[2].value);
}

Al clickear el boton "Mostrar contenido", se invocará a la función mostrar_contenido(), la cual mostrará el contenido actual de todas las cajas de texto.

Ver ejemplo

domingo, 14 de agosto de 2011

Mostrar mensajes de ayuda cuando un textbox recibe foco

Cuando un usuario completa un formulario queda elegante brindarle ayuda cuando va a completar un campo. En este ejemplo ofrecemos al visitante un cuadro de ayuda que aparece cuando alguna caja de texto de nuestro formulario recibe foco, al perderlo el mensaje desaparece.

La misma técnica la podríamos usar al momento de validar el contenido de una caja de texto, mostrando si correspondiere un mensaje de error junto al textbox inválido. Más adelante veremos como validar formularios con Prototype.

Ver ejemplo

viernes, 12 de agosto de 2011

Habilitar / Deshabilitar un Formulario con Prototype

La idea de este ejemplo es muy sencilla pero muy útil. Consiste en habilitar o deshabilitar todos los elementos de un formulario según sea la necesidad utilizando una simple función de Prototype.

De esta manera podremos habilitar o deshabilitar el uso de un formulario o su carga de dados según las condiciones que deba cumplir el usuario para poder utilizarlo. Por ejemplo, hasta tanto no acepte las condiciones de uso no le es posible completar el formulario.

Ver ejemplo

miércoles, 10 de agosto de 2011

Mostrar u Ocultar contenido con Prototype

En este ejemplo veremos como mostrar u ocultar contenido a pedido del usuario. Es necesario que el contenido que vamos a ocultar o mostrar se encuentre dentro de un DIV.

Inicilamente mostramos el contenido y un botón que al clikearlo lo oculta, automaticamente se oculta el contenido y el mismo botón cambia de valor permitiendo volver a mostrar el contenido oculto.

Es una buena herramienta por ejemplo para ocultar parte de un texto el cual se mostrará solo si el usuario deseea continuar leyendo el artículo.

Ver ejemplo

lunes, 8 de agosto de 2011

Cambiar estilos css con Prototype

En el post anterior vimos como prototype maneja los estilos css. En este caso vamos a mostrar otra forma de hacer lo mismo pero sin salirnos de nuestra declaración CSS.

La idea es generar dos clases CSS distintas, le asigno al div una de las clases, al momento del evento javascript para modificar los estilos del div utilizo prototype para cambiar el nombre de la clase que tiene actualmente asignado por el nombre de la otra clase que previamente habíamos definido.

De esta manera no tenemos que lidear con los cambios que impone Prototype en el manejo de CSS ya que estamos haciendo nuestras declaraciones css como siempre o como estamos acostumbrados a hacerlas.

Ver ejemplo

sábado, 6 de agosto de 2011

Manejo de CSS con prototype

Utilizando prototype es posible modificar el estilo css de cualquier elemento del DOM o de un grupo de elementos luego de un evento.

Por ejemplo, si queremos modificar el color de fondo de una caja div cuyo id es caja:

$('caja').setStyle({backgroundColor: '#993344'});

Si queremos modificar más de un atributo css los separamos por comas:

$('caja').setStyle({backgroundColor: '#993344' , borderWidth:'4px'});

Para hacer referencia a cualquier estilo css prototype cambia ligeramente el nombre del estilo. Vea el siguiente cuadro:

Declaración en CSS                       Declaración en Prototype

background-color: #996655;              backgroundColor: '#996655'
border-color: red;                               borderColor: 'red'
text-align: center;                              textAlign: 'center'
width: 150px;                                    width: '150px'
border-bottom-color: blue;                   borderBottomColor: 'blue'

Observe que la declaración de valores es igual que en CSS, solo que debe ir entre comillas. El nombre del estilo cambia solo cuando en CSS interviene el guión medio, en este caso prototype elimina el guión medio y pone en mayúsculas la primer letra de la palabra que le sigue al guión.

Cambiar los estilos de una caja DIV

En el ejemplo anterior vimos como prototype puede trabajar sobre todos los DIV del documento html al mismo tiempo. En este caso veremos como cambiar los estilos de cada uno de los DIV del documento html.

El ejemplo presenta tres "cajas" y tres eventos javascript que nos permiten modificar los estilos de cada "caja" por separado. En este caso al pulsar un botón se cambian los estilos de una de las cajas, al pulsar otro cambian los estilos de otra caja.

Ver ejemplo

Cambiar el color de fondo a todos los DIV

En este ejemplo utilizamos prototype para cambiar el color de fondo de todos los DIV que haya en el documento html.

El documento html tiene definidos varias "cajas" del tipo <div></div>. Cada una de ella tiene asignado un estilo diferente, pero al ejecutarse un evento javascript cambiamos el color de fondo de todas las "cajas" al mismo tiempo.

Ver ejemplo

Grupos de TextBox reciben distintos estilos al recibir o perder enfoque

En el ejemplo anterior mostramos como cambiar el estilo a todos los textbox de un formulario. En este caso mostramos una variante en la que dentro de un mismo formulario definimos dos grupos de textbox independientes, de tal modo que cada grupo recibe distintos estilos cuando recibe o pierde enfoque.

Resulta interesante cuando estamos trabajando con formulario muy grandes, con este ejemplo podemos diferenciar las secciones de éste "jugando" con los estilos. que reciben en este caso las cajas de texto.

Ver ejemplo

TextBox cambian de estilo al recibir o perder el enfoque

Utilizando Prototype podemos facilmente cambiar el estilo a las cajas de texto (textbox) de un formulario según éstas reciban o pierdan enfoque.

De este modo al momento de insertar contenido en la caja de texto ésta cambiará su estilo para diferenciarse del resto de las cajas de texto del formualario que no tienen foco. Al cambiar el foco hacia otro textbox ésta cambiará su estilo para notar que ya no está en foco mientras que la caja a la que dimos foco cambiará su estilo para mostrar que es la caja de texto activa en ese momento.

Ver ejemplo

Prototype / Scriptaculous

Páginas

martes, 30 de agosto de 2011

¿Cómo incluir Prototype a nuestro documento HTML?

domingo, 28 de agosto de 2011

MÉTODO Observe

viernes, 26 de agosto de 2011

Sistema de FAQ's con Prototype

miércoles, 24 de agosto de 2011

Marcar / Desmarcar un grupo checkbox a la vez

lunes, 22 de agosto de 2011

FUNCIÓN $$

sábado, 20 de agosto de 2011

Habilitar / Deshabilitar un Formulario con un checkbox

jueves, 18 de agosto de 2011

Textbox con texto de ayuda

martes, 16 de agosto de 2011

FUNCIÓN $

domingo, 14 de agosto de 2011

Mostrar mensajes de ayuda cuando un textbox recibe foco

viernes, 12 de agosto de 2011

Habilitar / Deshabilitar un Formulario con Prototype

miércoles, 10 de agosto de 2011

Mostrar u Ocultar contenido con Prototype

lunes, 8 de agosto de 2011

Cambiar estilos css con Prototype

sábado, 6 de agosto de 2011

Manejo de CSS con prototype

Cambiar los estilos de una caja DIV

Cambiar el color de fondo a todos los DIV

Grupos de TextBox reciben distintos estilos al recibir o perder enfoque

TextBox cambian de estilo al recibir o perder el enfoque

Entradas populares