| Artículos | 01 ENE 2000

Desarrollo con Internet Explorer: behaviors

Tags: Histórico
Componentes web
Francisco Charte.
Siguiendo con la serie de artículos iniciada en el número anterior, vamos a estudiar un nuevo tipo de componentes creados a partir de HTML y código de Script: los ‘behaviors’. A través de ellos podremos modificar o mejorar el comportamiento de los elementos habituales que aparecen en una página web, con todas las ventajas asociadas a los componentes, esto es sobre todo, su reutilización. También nos brindan la posibilidad de definir nuevas etiquetas, especiales y únicas, para nuestros documentos HTML.

A partir de la versión 5.0 de Microsoft Internet Explorer se ha añadido un nuevo tipo de componentes reutilizables llamados behaviors’. Con ellos es posible encapsular determinados comportamientos y funcionalidades en un archivo de texto, de forma que se puedan reutilizar aplicándolos a cualquier elemento HTML a través de hojas de estilo (CSS) o definiendo nuevas etiquetas mediante XML. Aunque actualmente sólo están reconocidos por el navegador de Microsoft existe un propuesta ante el World Wide Web Consortium (W3C) para que sea incorporado al HTML 4.0 y CSS estándar.
Al contrario que los Scriptlets vistos en el número anterior, estos behaviors no tienen por que disponer de una interfaz de usuario (pueden ser componentes puros con todas sus ventajas) y están más extendidos. Son menos tediosos de emplear, ya que no requieren la utilización de una etiqueta <OBJECT> e incluso pueden definirse como etiquetas HTML completamente nuevas, tal y como veremos.

Un ejemplo bastante clarificador
Veamos las ventajas que proporciona el emplear behaviors mediante un ejemplo. Supongamos que queremos que los hipervínculos de nuestras páginas no sólo nos lleven a otros sitios web (su comportamiento por omisión), sino que además deseamos que al pasarle por encima con el cursor, se resalten cambiando el color del fondo y del texto (Figura 1). Esto no es nada excesivamente complicado de conseguir mediante Script (más tarde veremos ejemplos más complejos), pero nos va a dar una idea precisa de lo que se quiere transmitir. En el ejemplo de la Figura 1 para colocar los tres links que se observan, el código HTML necesario es:
<BODY>
<FONT SIZE= 7><B><CENTER>
<A ID=”Resal1” HREF=”http://www.idg.es”> IDG Communications España </A><BR>

<A ID=”Resal2” HREF=”http://www.idg.es/iworld/”> Revista iWorld </A><BR>

<A ID=”Resal3” HREF=”http://www.idg.es/pcworld/”> Revista PC World </A><BR>
</CENTER></B></FONT>
</BODY>
Para conseguir el efecto deseado con colores diferentes en cada caso será necesario escribir código para los eventos OnMouseOver y OnMouseOut de cada uno de los elementos. Podríamos intentar manejarlos de manera centralizada en otro objeto de orden superior como por ejemplo Document, pero en cualquier caso se debe hacer referencia a cada uno de los elementos individualmente. Esto convierte en tedioso el implementar la funcionalidad en cada nuevo elemento o en los de otras páginas, obligándonos a cortar y pegar código continuamente para después retocarlo. En nuestro ejemplo el código necesario para cada elemento es análogo al siguiente:
<SCRIPT LANGUAGE=vbscript>
<!—
Option Explicit
‘Propiedades para guardar el antiguo estado
Private pAntBackColor
Private pAntForeColor
Sub Resal1_OnMouseOver()
pAntBackColor = Resal1.style.backgroundcolor
pAntForeColor = Resal1.style.color
Resal1.style.backgroundcolor = “#FF0000”
Resal1.style.color = “#FFFFFF”
End Sub
Sub Resal1_OnMouseOut()
Resal1.style.backgroundcolor = pAntBackColor
Resal1.style.color = pAntForeColor
End Sub
Como vemos, un código muy simple que, sin embargo, se convierte en pesado de repetir si el número de elementos con esta funcionalidad es muy elevado. Imagínese el lector si la funcionalidad es mucho más complicada de implementar por código... Lo que se hace es cambiar el comportamiento de una etiqueta HTML (en este caso un link, aunque podría ser otra cualquiera), de ahí el nombre ‘behavior’. Éstos permiten localizar en un solo sitio todo el código necesario para modificar el comportamiento de un elemento HTML, de forma que se haga sencillo de usar y de cambiar: sólo hay que tocar en un archivo para que todos los demás estén modificados. Se podrían usar Scriptlets para conseguir un efecto similar, pero probablemente requerirían más trabajo.
Veamos a continuación el código de la misma página web anterior pero esta vez empleando un behavior:
<HTML XMLNS:PCW>
<HEAD>
<TITLE> PCWorld: Ejemplo nº 2 de uso de “Behaviors” </TITLE>
<STYLE>
@media all {
PCW\:RESAL {behavior: url(resalte.htc);}
}
</STYLE>
</HEAD>
<BODY>
<FONT SIZE= 7><B><CENTER>
<PCW:RESAL URL=”www.idg.es” BackColor=”#FF0000”> IDG Communications España </PCW:RESAL><BR>
<PCW:RESAL URL=”www.idg.es/iworld/” BackColor=”#00FF00”> Revista IWorld </PCW:RESAL><BR>
<PCW:RESAL> Revista PCWorld </PCW:RESAL><BR>
</CENTER>
</B></FONT>
</BODY>
</HTML>
¡Ni rastro de código! Solamente una notación “extraña” (que enseguida se explicará) para los estilos de la página y un nuevo tipo de TAG HTML de nombre <PCW:RESAL>. Todo el código de Script se ha trasladado a un archivo externo (‘resalte.htc’ en este caso). Desde luego si lo comparamos con lo anterior, éste es mucho más simple y sencillo de mantener. Si necesitamos añadir una nueva etiqueta como las anteriores que se resalte al pasarle por encima, sólo tendremos que definirla con el nuevo TAG y podremos olvidarnos de más complicaciones.

Cómo escribir behaviors
Al igual que con los Scriptlets, debemos pensar en un behavior como en una “caja negra” donde nosotros como programadores vamos a introducir código, pero de la que, cuando sea utilizada, solamente se van a ver unos cuantas propiedades, métodos y eventos, lo que se conoce como interfaz de programación. Se trata de simples archivos de texto a los que se hará referencia desde una página web y en los que hemos escrito un determinado código de Script y hemos definido una interfaz. En el caso de los Behaviors a los archivos que contienen su definición se le suele asociar la extensión HTC de Hyper-Text Component.

Propiedades de un behavior
Para definir una propiedad en un componente de tipo Behavior, se debe utilizar la etiqueta <PROPERTY>. El único parámetro que debemos especificar es el nombre de la propiedad que se denota con la palabra NAME. Así por ejemplo, para definir una propiedad que se llame ‘BackColor’, tendríamos que escribir al principio de nuestro behavior:
<PROPERTY NAME=”BackColor” />
Nótese que se debe cerrar la etiqueta con una barra inclinada hacia la derecha sino no sería válida la definición de la propiedad. Una vez hecho esto, podremos acceder a esta propiedad directamente desde el código de Script que se escriba en el componente, de forma que sabremos qué valor le ha asignado el usuario.
Lo que se acaba de describir es la manera más sencilla de defin

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información