Anatips: tooltip para Prototype

Anatips es una librería para hacer tooltips y es muy sencillo de utilizar.
Ha sido probado con Firefox 2+, IE 6+, Opera 9+, y Safari 3.1

Ahora explicaremos como implementarlo en una imagen, para este ejemplo utilizaremos Prototype 1.6.0. Para ello descargaremos Anatips desde aqui, que nos vendrá con Prototype.

Crearemos un archivo .html en incluiremos en el head los javascript y CSS

<script src="builder.js type="text/javascript"></script>
<script src="prototype.js type="text/javascript"></script>
<script src="anatips.js type="text/javascript"></script>
<link href="anatips.css" media="screen" type="text/css" />

Dentro del body incluiremos una imagen con class=”anatips” y con title=”Descripción Tooltip”, el class sera para
identificar que el title debe mostrase como el estilo tooltip de Anatips.

<img src="foo.jpg" class="anatips" title=""/>

Eso es todo, muy simple verdad?

Recursos

Multidropdown: menus relacionales con Prototype

MultiDropDown es un script para realizar la tarea de convertir una respuesta json en
elementos de un dropdown, y poder construir dropdowns relacionales. Este script esta probado en distintos navegadores(Firefox 2+, IE 6+, Safari 9+).

Características

  • Su implementación es muy sencilla.
  • El dropdown puede ser totalmente modificable.
  • Soporta dropdowns dependientes.

Implementación

Para este ejemplo utilizaremos PHP y MySQL, primero entramos a un administrador para MySQL, sea PHPMyAdmin u otro y ejecutamos este script.

CREATE DATABASE `librerias` ;
CREATE TABLE `librerias`.`lista` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nombre` VARCHAR( 50 ) NOT NULL
)
CREATE TABLE `librerias`.`detalle` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`lista_id` INT NOT NULL ,
`nombre` VARCHAR( 50 ) NOT NULL
)
INSERT INTO lista(id ,nombre)
VALUES
('1', 'Javascript'),
('2', 'CSS'),
('3', 'PHP'),
INSERT INTO detalle(`id` ,`lista_id` ,`nombre`)
VALUES
('1', '1', 'Prototype'),
('2', '1', 'Mootools'),
('3', '1', 'jQuery'),
('4', '1', 'YUI'),
('5', '1', 'Dojo'),
('6', '2', 'BluePrint'),
('7', '2', 'DockMenu'),
('8', '2', 'Multibox'),
('9', '3', 'CSS dropdown Menu'),
('10', '3', 'FPDF'),
('11', '3', 'JPGraph'),
('12', '3', 'PHPLinq'),
('13', '3', 'PHPMailer');

Este script creara una DB(librerias), dos tablas (lista y detalle) y llenara con algunos registros las tablas. La tabla detalle es dependiente de lista por en campo lista_id.

Ahora construiremos dos archivos .php (json_lista.php y json_detalle.php), en los cuales incluiremos este código respectivamente.

// json_lista.php
//incluimos la conexion
require 'cn.php';
//guardamos la consulta
$query = "SELECT *FROM lista";
//ejecutamos la consulta
$rs = mysql_query($query);
$rows=array();
//recorremos los registros retornados
while($row=mysql_fetch_assoc($rs))
{
	$rows[]=$row;
}
//devolvemos en formato json la data
echo json_encode($rows);
// json_detalle.php
//incluimos la conexion
require 'cn.php';
//recibimos el parámetro (lista_id)
$param = (int)$_REQUEST['id'];
$rows=array();
//verificamos el parametro
if ($param!=0)
{
	//guardamos la consulta
	$query = "SELECT *FROM detalle WHERE lista_id='$param'";
	//ejecutamos la consulta
	$rs = mysql_query($query);
	//recorremos los registros retornados
	while($row=mysql_fetch_assoc($rs)){
		$rows[]=$row;
	}
}
//devolvemos en formato json la data
echo json_encode($rows);

Eso es todo del lado del servidor, este es un ejemplo claro en el ámbito del trabajo.
Ahora pasemos a la vista del usuario con el html.

Primero debemos incluir la librería Prototype.js y multidropdown.js en el head de tu pagina web.

<script src="prototype.js" type="text/javascript"></script>>
<script src="multidropdown.js" type="text/javascript"></script>

Ahora pondremos dos dropdown, uno sera la lista cabecera y la otra sera su detalle la cual se llenara nuevamente en el evento onchange de la cabecera.

Listas
<select id="lista" name="lista">
<option value="0">vacio</option>
</select>
Detalles
<select id="deta" name="deta">
<option value="0">vacio</option>
</select>

Luego nos queda nada mas que llamar a la función que generara los dropdown.

//parametro url,id_dropdown
getJson('json.php','lista');
//carga de lista dependiente
$('lista').observe('change',
	function(el){
		getJson('json2.php','deta',$F('lista'))
	});

Recursos

Prototype Funciones para Elementos HTML

Prototype Capitulo 04 – Funciones $A(), $H(), $R(), $w()
Siguiendo con las funciones útiles: que trae prototype, en este capitulo concluyo con tales,
les dare una explicacion breve y algunos ejemplos con cada funcion.
1) Utilizando la funcion $A()
La funcion $A() convierte el argumento pasado por parametro en un objeto array
esta funcion combinada con las extensiones que trae prototype hacen mas facil la conversion
de listas enumerables en objetos Array.
una sugerencia para convertir las listas de nodos DOM (DOM nodeList)en array es que puede
ser trabajado mas eficientemente.
Html:

<select id="listaEmp" >
<option value="0001">  Buchanan, Steven    </option>
<option value="0002">  Callahan, Laura     </option>
<option value="0003">  Davolio, Nancy      </option>
</select>
<a onclick="showOptions()"> Show </a>

Javavascript:

showOptions =   function()
{
  var opList  =   $('listaEmp').getElementsByTagName('option');
  var ops     =   $A(opList);
  var emps    =   'Lista de Empleados:n';
  ops.each(
  function(op)
  {
    emps+= op.value+': '+op.innerHTML+'n';
  }
  );
  alert(emps);
}

2) Utilizando la funcion $H()
Esta funcion convierte un array objeto en un hash enumerable
para usarse por ejemplo en una llamada ajax y pasarsela por parametro
Javascript:

testHash    =   function ()
{
  // Primero creamos el objeto
  var params  =   {
  nombre:     'Cesar',
  apellido:   'Mancilla',
  edad    :   '20'
  };
  // Lo transformamos en un Hash
  var hash    =   $H(params);
  alert(hash.toQueryString());
  // -> nombre=Cesar&apellido=Mancilla&edad=20
}
testHash();

3) Utilizando la funcion $R()
Es el alias para crear un objeto objectrange. Este objeto presenta un rango consecutivo de valores que puede ser numerico,
texto, o otro tipo de valores que semanticamente soporte un rango de valores consecutivos. Veamos algunas de sus
funcionalidades:
Javascript:

// Se muestran una iteracion de alertas con el valor actual.
$R(0,10,false).each(function(valor){alert(valor)})
// el recorrido es de 13 veces
$R(0,10,true).each(function(valor){alert(valor)})
// el recorrido es de 12 veces
// Devuelve un booleano si 10 esta incluido en el rango
var bol = $R(0,10).include(10);
alert(bol);
// La funcion $A()
// convierte el objetrange en un array object
// luego inserta la coma ', '
$A($R(0,10)).join(', ');
//-> '0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10'

4) Utilizando la funcion $w()
Con esta funcion podemos crear un array desde una cadena de texto, por cada palabra agregara un campo mas al array.
Javascript:

labels=$w('blogs css javascript tutoriales')
//-> ['blogs', 'css', 'javascript', 'tutoriales']
// muy util por ejemplo para guardar una pagina
// con varias etiquetas separas por un espacio
// ejm:(delicious)
// y despues grabar cada etiqueta para un link
labels.each(function(element){ // guardarLabels(); })

Prototype : Funciones DOM

p style=”text-align: center;”>

Prototype Capitulo 03 – Utilizando la funcion $$()

A veces las usuales herramientas del artesanal DOM

  • document.getElementById()
  • document.getElementsByTagName()
  • document.getelementsByClassName()

no son suficientes para encontrar rapidamente nuestros elementos o colecciones de elementos. Si conoces la la estructura de arbol de DOM sencillamente puedes recurrir a las CSS selectores para realizar un determinado trabajo.

$$('div');
// retorna todos los divs en el documento
$$('#contents');
// es lo mismo que $('contents'),
// solo que devuelve siempre un array
$$('li.faux');
// retorna todos los elementos li
// que tengan clase faux

veamos algo mas complejo en un formulario de Login:

<div id='frmLogin'>
<div class='campo'>
<span class='NombreCampo'>
Nombre Usuario:
</span>
<input type='text' id='txtNombre' value='cesar' />
</div>
<div class='campo'>
<span class='NombreCampo'>
Password:
</span>
<input type='password' id='txtPassword' value='123' />
</div>
<input type='submit' value='Login' />
</div>
<input type='button' onClick='test()' value='Funcion $$()' />
function test()
{
  var s=$$('div#frmLogin .campo input');
  var inputs='';
  for(var i=0; i<s.length; i++)
  {
    inputs+= s[i].value+' // ';
  }
  alert(inputs); //muestra cesar // 123
}
	

Prototype Introduccion

Prototype Capitulo 02 – Introduccion a Prototype

Prototype es una libreria Javascript que esta Orientada a Objetos,
fue escrita por Sam Stephenson. Este bien pensado y excrito trozo de codigo
es compatible con los estandares web, muy enriquesida para la creacion de paginas web interactivas
lo que caracterizan a las Web 2.0.

Si han echado un vistazo al framework Ruby On Rails, se daran cuenta que ya lo tiene incorporado
la razon es sencilla, Prototype esta influenciado directamente
bajo las exigencias de Ruby On Rails.

Prototype soporta multiples navegadores como :
– Mozilla Firefox 1.5+
– Internet Explorer 6.0+ (en extincion)
– Apple Safari 1.0+
– Opera 9+

En esta introduccion ya vamos entrando un poco en la practica, porque yo se que la teoria
a veces aburre un poco, pero siempre es buena para solucionar inquietudes y poder entender
con que fin estamos haciendo algo.

Funciones de Utilidad

Usando la Funcion $()

Una funcion de mucha utilidad y que siempre vas a usar es la Funcion $()
esta funcion es un atajo si se podria decir para el frecuentemente utilizado



document.getElementById('id')

esto es una funcion DOM(Document Object Model) mas adelante explicare que es esto.
Pero el $() va mas halla de la funcion DOM. El Objeto devuelto por este tendra un incremento
de metodos extra para simplificar muchas tareas,como por ejemplo saber su tamaño, mostrar y ocultar el elemento
desplazarlo, etc.

Por otra parte usted podra acceder a los metodos del Objeto de acuerdo al tipo de Elemento que es:

– Element.Methods
– Form.Methods
– Form.Element.Methods

Voy a escribir un ejemplo de los metodos mas usados por mi:

Etiquetas :



<etiqueta id="id">
Contenido...
</etiqueta>

$('id').innerHTML
//-$gt; Contenido...

$('id').hide()
//Oculta el contenido de la etiqueta

//tambien lo puedes hacer en la forma
//multiple, con mas etiquetas

$('id1', 'id2', 'id3').invoke('hide');

//tambien puedes hacer mas optimo el codigo
//al llamar a varios metodos en una sola linea

$('id').update('Cambiando Contenido')
.addClassName('clase')
.show();

//Primero Actualizamos el Contenido del Div.
//Agregamos una clase CSS.
//Lo Mostramos

Formulario



$('frm').serialize()
//hace la serializacion de Elementos del formulario
//para pasarlo como parametros

Elementos de Formulario



$('TextBox').value
//return texto

$('TextBox').focus()
// se enfoca en el elemento del formulario

Ajax : Introducción y Ejemplos

Prototype Capitulo 01 – Introducción a Ajax

Hola a todos, estoy realizando un primer curso en mi blog, y creí que seria un buen tema la del framework prototype (Javascript, Ajax).
En esta intro les escribiré sobre una introducción a Ajax.
página web

Ajax ¿Para que sirve?

Ajax en una propuesta para paginas web que quieran mejorar su interfaz y su usabilidad.
Ocultando interacciones que el usuario final realiza con el servidor (consultas a BD, inserts, updates, etc) para solamente
mostrar las actualizaciones en una parte especifica de la pagina y así agilizar la pagina web ( no esperar largas demoras al actualizarse una pagina ).

Ajax y las Aplicaciones de Escritorio

Si bien una aplicación de escritorio es mucho mas veloz que una en web por su rápida respuesta.
Ajax le da la solución a las aplicaciones Web, ya que con esto agilizaran su respuesta y tendrán las mismas ventajas que tienen las aplicaciones Windows, podrán hacer las mismas acciones y eventos , con una interfaz mucho mas amigable.

Significado

Ajax es simplemente Javascript y XML asincronos (Asynchronous Javascript And XML)

Es solamente otra moda pasajera?

Si bien Microsoft, Google, Amazon, Yahoo, entre otros están totalmente en desacuerdo, pienso que tienen que saber usar Ajax en una aplicación Web.

Ejemplo:

En un proyecto de Tienda virtual el frontend no debería tener mucho de Ajax ya que sus usuarios mas comunes no tendrían por que saber de configuracion de su browser , esto implica la habilitacion del Javascript y si soporta Ajax, Un Ejemplo de aprovechamiento del Ajax seria en el backend de la Tienda Virtual ya que sus Empleados de actualizacion de productos y Pedidos, ya que su lugar de operaciones sera un ambiente apropiado y podrá estar previamente configurado para ejecutar Aplicaciones con Ajax.
En Resumen no deben usar Ajas para impresionar a sus usuarios finales con efectos maravillosos, validaciones con alertas muy llamativas y cosas así.

Google Maps, un Ejemplo claro

Es un muy buen ejemplo de carga de gráficos asincronamente (lo que se dice detrás de la pantalla)
en esta aplicación las imágenes se cargan en un principio y al arrastrar se cargan las del fondo,
es por eso que nos da la impresión de ser un mapa

Como se hace ?

Para simplificar Ajax lo veremos de esta forma

-Solicitud y Respuesta

Esto es una forma en que interactúa el navegador con el servidor, cuando el usuario esta viendo
la pagina web, el navegador utiliza el conocido XMLHttpRequest (XHR), esto hace que diferentes áreas
de la pagina web carguen de manera asíncrona, permitiendo navegar tranquilamente al usuario mientras carga
la pagina completamente (Las partes que se están cargando tienen Callbacks, lo que permite dar
avisos de estados de carga de la pagina)

Como empezar

Primero:

como has echo para implementar Ajax en tus sitios web (si lo has echo)?

si les gusta reinventar la rueda pues están sin resolver el problema o creen que seria un mejor trabajo,
la mayoría de desarrolladores utilizan librerías ya escritas con un buen performance en producción
La elección se basa en el Lenguaje de programación usado del lado del Servidor
Los mas populares son:

DWR(Java), Prototype (PHP),Ajax.net (.NET), entre otros.

Estas librerías hacen que la implementación de Ajax sea muy divertida al momento de programar, también
tienen un buen soporte así como actualizaciones permanentes, estas herramientas nos hacen la vida mas fácil al momento de desarrollar los proyectos.

Espero que les aya gustado esta pequeña introducción pero buena en contenido.
Los capítulos saldrán una vez por semana, el próximo tratara sobre una introducción al framework prototype.