Mootools – Parte II – addEvent
junio 13, 2008
Continuamos con la serie de informes sobre Mootools, vale la pena aclarar que para los ejemplos y las explicaciones, usamos la versión 1.11 de Mootools, ya ha sido liberada la versión 1.2 y trae consigo muchos cambios y nuevas formas de hacer las cosas. Probablemente vamos a tener que reescribir algo del código que hagamos con la versión 1.11. Pero por lo menos vamos a poder tener una introducción al tema con este mini manual.
Sabemos que una página al ser invocada por el navegador va solicitando los objetos a medida que se van necesitando, o van siendo leídos. Es decir que el servidor envía la página y el navegador lo primero que ve es la etiqueta <HTML> luego la etiqueta <HEAD> y carga cada una de las etiquetas que están dentro del HEAD de forma secuencial, y así sucesivamente con cada línea de nuestra página.
El problema se presenta cuando intentamos ejecutar un método Mootools y la librería aun no se ha cargado, o cuando necesitamos asignar un evento a un objeto y el objeto aun no ha sido cargado. En estos casos vamos a tener una Excepción de javascript.
Para evitar esto, debemos asegurarnos ejecutar los métodos y funciones cuando ya estemos seguros que no van a fallar por que el objeto aun no existe. Mootools nos facilita esta tarea, al ayudarnos a detectar la carga de la página. Estos eventos son:
Doomready: Ocurre cuando se ha cargado todo el contenido de la página excepto imágenes.
Load: Ocurre cuando todos los objetos de la página han sido cargados.
Estos eventos son los que nos permiten informar al usuario de que la carga de la página está en proceso o ya finalizó al estilo de aplicaciones como GMAIL.
Para utilizar estos eventos vamos a usar el método AddEvent de Mootools, y lo vamos a asignar al objeto Window.
Ejemplo:
window.addEvent(‘domready’,function(){
// CODIGO …
});
El método addEvent permite asignar a cualquier objeto un evento, y ejecutar una función específica al momento de disparar el evento.
La sintaxis es:
miObjeto.addEvent( ‘click’ , mifuncion )
Un ejemplo para adicionar un evento click a un link podría ser así:
window.addEvent(‘domready’,function(){
$(‘elLinkID’). addEvent(‘click’,function(){
Alert(«Esta es una prueba…»);
});
});
En donde la definición del link dentro del HTML sería:
<a href=»#» id=»elLinkID»>click aquí</a>
Listo, ahora ya tenemos un evento capturado con Mootools. Básicamente los eventos se llaman igual que en HTML pero sin el prefijo «on» es decir el «onClick» ahora es «click».
Y así con los demás eventos como blur, mouseover, etc.
Esto funciona igual con la versión 1.2 ya que es algo estándar y básico del framework.
otra vez publicando de afan, espero que pueda hacer cada vez mejores mis publicaciones…
Mootools 1.2 ya esta Disponible
junio 12, 2008
La página oficial de Mootools informa ahora que se ha liberado la versión 1.2 de la librería Mootools, han cambiado el diseño de la página y por ahora solo está disponible la descarga y la documentación, aun faltan cosas como los demos.
Bueno entraremos a analizar esta nueva versión para ver que cosas nuevas trae y como va a estar la compatibilidad con plugins de la versión 1.1.
Ahora me tocó modificar la entrega 2 de los post sobre mootools que estaba haciendo, aun no se que va a pasar con la versión 1.1 y si va a tener mas soporte, yo creería que no pero vamos a ver que pasa y como se porta esta nueva versión.
Por ahora resta esperar que la página esté completamente lista y que más información van a plublicar… ya me descargue la version 1.1 que pesa apx 60k. empesaré a usarla…
MOOTOOLS – PARTE I – INTRODUCCION
May 27, 2008
Actualmente contamos con muchas opciones al momento de elegir una librería o framework Javascript que nos ayude y facilite la creación de aplicaciones Web 2.0. Estos frameworks nos ayudan a crear animaciones e interactividad con el usuario la cual ofrece una mejor experiencia y facilidad de uso de nuestras aplicaciones así como también las hace más atractivas y vistosas.
En este post hablaré sobre uno de los frameworks que más me ha gustado y que actualmente uso en todos mis nuevos desarrollos, estoy hablando de Mootools.
Mootools es un muy potente framework de trabajo orientado a objeto, desarrollado en Javascript, el cual nos permite crear aplicaciones Web muy dinámicas y con un diseño único, atractivo, interactivo y muy web 2.0.
Al ser una librería escrita en Javascript, es muy sencilla de utilizar y no requiere ningún componente extraño adicional para funcionar, simplemente la incluimos en la página en la que vamos a usarla y la usamos. Eso es todo. Además es compatible con todos los más importantes navegadores actuales permitiendo así olvidarnos un poco del problema de siempre… ver como funciona en un IE6… además ya existen muchísimos plugins como los que hemos tratado en otros artículos por ejemplo MoodalBox, entre otros…
Usando MooTools – Primer acercamiento.
Primero debemos descargar la librería de http://mootools.net/download, en esta página nos ofrece descargar la librería con solo los componentes que requerimos en nuestro desarrollo, esto lo hace con el fin de quitar los componentes que no usaremos y así hacerla aun más liviana de lo que ya es. En nuestro caso seleccionaremos todos los módulos y así poder probar todo lo que necesitamos utilizar.
NOTA: Para efectos de desarrollo es bueno usar la librería completa y luego cuando pasemos a producción podemos usar una versión reducida con solo lo que se necesita.
Ahora solo debemos incluirla en la ruta de nuestro proyecto, y luego en la página o páginas que necesitamos.
<script type=»text/javascript» src=»js/mootools.js»></script>
Recomendación: Al descargar el archivo de la librería queda con un nombre largo tipo mootools-release-x.xx.js.txt, recomiendo que lo renombremos con un nombre más corto como por ejemplo mootools.js.
Cuando la página carga todo su contenido, excepto imágenes esta en un estado llamado domready, y cuando ya ha cargado las imágenes se llama load.
En este caso usaremos el domready para poder ejecutar nuestros ejemplos.
Recodemos que para probar los ejemplos el código JavaScript hay que ponerlo en el head dentro de una función que se ejecute en el momento que la página cargue. Es decir en domready
Ejemplo:
window.addEvent(‘domready’,function(){ // mootools ejecuta cuando pagina esta en estado ready
// CODIGO JS MOOTOOLS
});
Bueno, esto es todo en esta primera parte, pronto publicare una segunda parte con mas detalles y explicando la estructura a usar en un desarrollo usando mootools, por ahora les dejo algunos links con ejemplos de cosas hechas con mootools que igual pueden servirnos para hacer nuestros sitios mas atractivos y funcionales y de paso ir aprendiendo lo básico para usar mootools.
links Ejemplos:
http://ceslava.com/blog/los-mejores-41-ejemplos-del-uso-de-la-libreria-mootools-ajax/
http://www.ajaxman.net/476/video-usando-ajax-y-aspnet/
pd. Pido escusas por la demora en publicar ya que he tenido problemas de conexión a internet entonces no he tenido mucho tiempo para reportar en ninguno de los blogs. espero pronto publicar la segunda parte y dejarla mas completa. gracias por el apoyo.
DG.
Cargar imágenes al estilo Web 2.0
enero 18, 2008
Algunas veces la solución a un problema es más sencilla de lo que pensamos. En el blog CSSLAB, encontré un artículo que habla sobre cómo hacer el efecto de cargar imágenes usando solamente CSS.
Lo único que sugiere el autor del artículo, es que creemos un estilo para la etiqueta IMG en el que se define que el fondo de la etiqueta sea un GIF animado de no más de 2kb, el cual se cargará primero que la imagen y hará ver el efecto de un cargador AJAX.
| img.foto {
border: 1px solid #000; background: url(«cargando.gif») no-repeat center center; } |
Además el autor nos adiciona una URL con varias imágenes de cargadores AJAX que nos pueden resultar muy útiles.
Usando MOOdalBox – un Lightbox para HTML
enero 18, 2008
Hace poco en uno de los proyectos que adelanto, necesitaba mostrar la información de una noticia o evento cuando le daban a un link, pero no quería hacerlo en una página nueva, ya que esto implicaba cargar nuevamente todo el diseño de la página solo para mostrar un par de líneas de texto.
Buscando en la Web encontré MOOdalBox, una librería que utiliza el framework de mootools como base para funcionar pero que permite cargar cualquier contenido HTML dentro de una ventana animada que se sobrepone sobre la página, al mismo estilo de Lightbox pero con HTML.
Esta herramienta es ideal para mostrar porciones de contenido que no justifican una redirección del navegador y que se vuelva a cargar todo el contenido gráfico.
Con MOOdalBox, tenemos la posibilidad de definir el tamaño de la ventana que se requiere mostrar, y es tan sencillo de aplicar que de seguro no dudaremos en usarlo en nuestros proyectos.
Primero debemos descargar lo necesario del sitio de MOOdalBox.
En el archivo comprimido vienen tres carpetas:
-
Css
- Moodalbox.css
-
Img
- Closelabel.gif
- Loading.gif
-
Js
- Mootools.js
- Moodalbox.js
En la cabecera del documento HTML (<HEAD>) deben incluirse las dos librerías y la hoja de estilo.
| <script type=»text/javascript» src=»/js/mootools.js»></script>
<script type=»text/javascript» src=»/js/moodalbox.js»></script> <link rel=»stylesheet» href=»/css/moodalbox.css» type=»text/css» media=»screen» /> |
Y luego solo es necesario incluir rel=»moodalbox» dentro de la etiqueta de hipervínculo en la que necesitamos aplicar este efecto.
| <a href=»paginaDestino.html» rel=»moodalbox» title=»Texto de descripción de la pagina»>Texto del Link</a>. |
Y eso es todo. Ya esta aplicado el efecto y nuestro sitio ya parece más dinámico y Web 2.0.
Links:
Codeline 