Las librerías de YUI nos ofrecen una buena base para programar con Javascript de manera compatible con todos los navegadores más utilizados. En el artículo anterior conocimos las generalidades de la librería YUI y en el presente vamos a practicar con la tercera versión de este producto.

YUI3 es la versión más actual de las librerías de desarrollo del lado del cliente de Yahoo!, que se encuentra ya en producción en el sitio de Yahoo!, pero que todavía algunas de sus utilidades son experimentales o están en fase beta. En el momento de escribir este artículo de DesarrolloWeb.com, las YUI2 están más trabajadas y tienen una gama mayor de componentes ya creados y listos para usar, pero pensamos que merece la pena pasar a ver directamente YUI3, por ser un producto con horizonte más lejano.

Nuestro objetivo en este artículo es mostrar un sencillo ejemplo con YUI3 que nos permita identificar las partes más fundamentales de la programación con este framework, que está inspirado en la sección "Getting Started" de la documentación de las librerías.

Descarga de YUI 3

Podemos encontrar las YUI3 en la página de Yahoo! Developer Network:

http://developer.yahoo.com/yui/3/

La descarga está en tres versiones. YUI Seed, que contiene el Javascript necesario para empezar a trabajar con YUI. El kit completo para desarrolladores, con más de 5 megas de recursos y el configurador de dependencias, en el que podremos decidir qué librerías descargar, qué componentes o widgets, etc. Nosotros para nuestros primeros ejemplos nos hemos contentado con descargar el YUI Seed, de unos 15KB.

Con ello hemos obtenido un archivo llamado yui-min.js que tendremos que incluir en la página para tener acceso a las funcionalidades Javascript básicas de YUI.

Primer ejemplo con YUI3

Como primer paso para poder utilizar las YUI 3, tenemos que incluir en la cabecera de la página, etiqueta HEAD, el script descargado, de esta manera:

<script src="yui-min.js" type="text/javascript"></script>

A partir de este momento podremos escribir nuestro primer script en YUI3:

YUI().use('node', function(Y) {
   var objCapa1 = Y.one("#capa1");
   objCapa1.set("align", "center");
   objCapa1.setContent("hola, esto está cargado con YUI");
});

Este script accede a un elemento de la página, con identificador "capa1", modifica el valor de su atributo align y luego escribe dentro un nuevo contenido. Pero veámoslo por partes.

YUI().use('node'...

Indica que queremos utilizar las librerías "node" de YUI, que sirven para acceder a los elementos de la página y hacer cosas con ellos.

YUI().use('node', function(Y) {

Si nos fijamos, al método use() le pasamos, aparte de la señal de que vamos a usar las librerías "node", una función. Esta función se ejecutará cuando se hayan cargado las funcionalidades asociadas a la librería solicitada, "node", si es que no estaban cargadas previamente, y sólo se ejecutará cuando el navegador esté listo para recibir acciones. Esta es por tanto la manera más adecuada de empezar a escribir código donde pensamos utilizar las funcionalidades de YUI.

Como vemos, en la función enviada en el segundo parámetro del método use(), recibe a su vez otro parámetro llamado "Y" -fijarse en (Y)-. Esto quiere decir que dentro del código de la función tendremos una variable Y que contendrá una instancia del objeto YUI. Esta instancia la podemos utilizar para iniciar cualquier tipo de acción en la página.

var objCapa1 = Y.one("#capa1");

En esta línea estamos accediendo a un elemento de la página, que tiene identificador (atributo ID de la etiqueta HTML) "capa1". Para obtener esa referencia al elemento utilizamos un método del objeto YUI, Y.one(), enviando como parámetro el selector del elemento que queremos traernos. Vemos aquí que para iniciarlo todo hemos utilizado el objeto YUI recibido como parámetro en Y.

A partir de ahora, con la variable objCapa1 podemos acceder a un objeto del DOM de la página, extendido con las funcionalidades del framework.

objCapa1.set("align", "center");

Con esta línea cambiamos el atributo "align" del elemento y le ponemos el valor "center".

objCapa1.setContent("hola, esto está cargado con YUI");

Con esta línea cambiamos el contenido que hay dentro de ese elemento. El efecto es que cambiará el texto que hay escrito en la "capa1".

El código completo de nuestra página sería el siguiente:

<html>
<head>
   <title>Ejemplo 1 de YUI 3</title>
   <script src="yui-min.js" type="text/javascript"></script>
   <script>
   YUI().use('node', function(Y) {
      var objCapa1 = Y.one("#capa1");
      objCapa1.set("align", "center");
      objCapa1.setContent("hola, esto está cargado con YUI");
   });
   </script>
</head>
<body>
   <div id="capa1">
      Esta capa la creo para probar cosas con YUI 3
   </div>
</body>
</html>

El ejemplo puede verse en marcha en una página aparte.

Conclusión al primer script YUI

En mi modo de ver, YUI3 tiene muy buena pinta, pero quizás en los primeros pasos me ha costado más entender cómo funcionar con esta librería que con otros frameworks Javascript como pueden ser jQuery o Mootools.

Como ocurre habitualmente, a medida que se van haciendo más ejemplos se encuentra más natural la programación con estas librerías, pero de momento el primer script básico es posible que nos sorprenda bastante, aunque realmente no hayamos hecho nada del otro mundo.

Este es el cuarto framework Javascript que investigo y del cual publico artículos en desarrollo web .com y seguramente mi manera de explicar las cosas haya variado bastante desde que comencé. Por eso, si te sorprende lo que estamos haciendo en este artículo, quizás te venga bien estudiar antes otros frameworks Javascript que hemos explicado ampliamente en desarrolloweb en el pasado.

Quiero recomendar aquí un par de manuales muy completos con los que hemos pretendido que cualquier persona con conocimientos básicos de Javascript pueda adentrarse en el mundo de los frameworks, de una manera más o menos sencilla. Si te interesa, entra en el Manual de jQuery o el Manual de Mootools.