Bienvenidos sean a este post, hoy veremos otra forma de crear un plug-in.
En este post vimos como era implementar widgets de la libreria jQuery UI los cuales nos permitian poder implementar desde mejores estilos para los elementos hasta elementos nuevos, en ese caso implementamos mejoras en los botones y una barra de desplazamiento (slider), por lo general este tipo de widgets nos proveen un API para los programadores, esto permite que podemos crear los nuestros propios, por lo tanto cuando creamos uno en realidad estamos creando un nuevo elemento de interfaz para el usuario el cual extendera la libreria jQuery UI, ahora la pregunta es: que es un widget?
Un widget es una pieza intrincada de funcionalidad
Pero no debemos desesperar porque la libreria de jQuery UI posee un factory, metodo fabrica, el cual se puede utilizar mediante $.widget() la cual nos facilita enormente la creacion y nos asegura que nuestro codigo conocera perfectamente los estandard de la API que debe utilizar, las caracteristicas mas interesantes e importantes que nos brinda factory son:
- Le asigna un estado al plug-in, esto nos permitira manipularlo como queramos
- Automaticamente genera opciones predeterminadas personalizables para las opciones definidas por el usuario
- Nos permte combinar multiples metodos de plug-in con un metodo del objeto jQuery
- Podemos tener controladores de eventos personalizados que tendran acceso a la informacion de la instancia del widget
Pero basta de palabrerio y pasemos a la accion.
Creando un widget
Para implementar este ejemplo vamos a necesitar el codigo que vimos en el post anterior, en caso de no poseerlo les dejo un link para descargarlo:
Simplemente extraigan todos los archivos en un directorio y listo, con esto completado nuestro siguiente paso sera descargar la libreria jQuery UI, para ello deberan ir a la siguiente URL:
En la seccion de downloadas podran descargar la libreria, lo necesario o completa, una vez descargada deben extraer todos los archivos en el directorio donde esta el proyecto, para este caso y facilitar la implementacion voy a renombrar el nombre del directorio de la libreria a jqueryui en el destino, ya veran porque, y ya con eso tenemos todo preparado solo nos resta preparar nuestro codigo.
Nota: Si desean ahorrarse el trabajo de jQuery UI, al final esta el archivo con los codigos y la libreria descargada.
Nuestra primera modificacion sera en el archivo develop.html donde modificaremos la seccion head de la siguiente manera:
<head>
<title>Stock de Verduleria</title>
<link rel="stylesheet" href="estilo.css" type="text/css"/>
<link rel="stylesheet" href="jqueryui/jquery-ui.min.css" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="jqueryui/jquery-ui.min.js"></script>
<script src="plugin.js"></script>
<script src="codigo.js"></script>
</head>
Es similar al que teniamos antes pero ahora agregamos primero el archivo css con los estilos de la libreria y luego la libreria en si, observen como lo tenemos en otro directorio lo debimos informar, por esta razon le modifique el nombre, con esto ya tenemos implementada la libreria pasemos al siguiente tema.
Nota: Para este ejemplo vamos a usar a tooltip, el cual ya existe pero al volverlo a implementar elimina al anterior y nos permite ver el tema de este post sin demasiada complejidad.
Nuestra siguiente modificacion sera en el mismo archivo pero en el tbody donde lo modificaremos de la siguiente manera:
<tbody>
<tr>
<td><a href="01.html" data-tooltip-text="Nutritivo">Pimiento</a></td>
<td>12</td>
<td>5.5</td>
</tr>
<tr>
<td><a href="02.html" data-tooltip-text="Deliciosa">Berenjena</a></td>
<td>10</td>
<td>3.25</td>
</tr>
<tr>
<td><a href="03.html" data-tooltip-text="AntiVampiros">Ajo</a></td>
<td>20</td>
<td>1.23</td>
</tr>
<tr>
<td><a href="04.html" data-tooltip-text="Roja y rica">Tomate</a></td>
<td>15</td>
<td>2.29</td>
</tr>
</tbody>
Si lo comparamos con el anterior solamente agregaoms un link en cada uno de las verduras en stock, lo direccionamos a una pagina pero agregamos un campo que por el momento no funcionara donde habra un mensaje en el link cada vez que pasemos sobre este, ahora nuestro siguiente paso sera ir al archivo plugin.js y dentro del namespace jQuery agregaremos el siguiente codigo:
$.widget('mhm.tooltip', {
_create: function() {
this._tooltipDiv = $('<div></div>');
.addClass('mhm-tooltip-text' +
'ui-widget ui-state-highlight ui-corner-all')
.hide().appendTo('body');
this.element
.addClass('mhm-tooltip-trigger')
.on('mouseenter.mhm-tooltip',
$.proxy(this._abrir, this))
.on('mouseleave.mhm-tooltip',
$.proxy(this._cerrar, this));
}
});Para crearlo siempre deberemos pasar dos parametros primero:
- el namespace, en este caso sera mhm
- el identificador del metodo, el que usaremos para invocarlo
Estos son a eleccion nuestra, despues crrearemos distintas propiedades de tipo function las cuales representaran distintas acciones, en este caso la primera sera para crearlo, la nomenclatura cuando empieza con el guion bajo indica que es de tipo privada, de esto hablaremos mas adelante, lo primero que haremos sera definir un objeto para el elemento actual, que tambien sera privado, y este lo usaremos para contener el texto del link que establecimos en develop.html, a este le aplicaremos una clase, en realidad sera solo un nombre porque no existe, despues tambien le pasaremos distintas clases de la libreria, esconderemos este elemento y por ultimo lo agregamos al body.
Despues usamos a this.element el cual nos servira para decirle que debe usar el elemento que seleccionamos y ningun otro, le aplicamos una clase de forma similar al anterior, y despues dos eventos mediante la funcion on, el primero es para cuando el mouse este sobre el link y el otro para cuando sale, el primero llamara a la funcion abrir y el segundo a cerrar, las cuales son dos propiedades que aun no existen, pero observen que ambos eventos le pasamos el namespace seguido del identificador del metodo, tengan esto en cuenta cuando creen los propios, la funcion proxy es la encargada de pasar los controladores de eventos, esto nos permite cambiar lo que se refiere en this en un metodo, facilitando que podemos referenciar a la instancia dentro del metodo abrir o cerrar, ya tenemos el metodo que creara el plug-in pero nos faltan los metodos abrir y cerrar, para ello deben agregarlos como propiedades y para ello tomaremos el bloque anterior y lo cambiaremos de la siguiente manera:
$.widget('mhm.tooltip', {
_create: function() {
this._tooltipDiv = $('<div></div>')
.addClass('mhm-tooltip-text ' +
'ui-widget ui-state-highlight ui-corner-all')
.hide().appendTo('body');
this.element
.addClass('mhm-tooltip-trigger')
.on('mouseenter.mhm-tooltip',
$.proxy(this._abrir, this))
.on('mouseleave.mhm-tooltip',
$.proxy(this._cerrar, this));
},
_abrir: function() {
var elemOffset = this.element.offset();
this._tooltipDiv.css({
position: 'absolute',
color: '#000',
left: elemOffset.left,
top: elemOffset.top + this.element.height()
}).text(this.element.data('tooltip-text'));
this._tooltipDiv.show();
},
_cerrar: function() {
this._tooltipDiv.hide();
}
});Observen que de la propiedad anterior no tocamos nada sino que le agregamos una coma y despues agregamos las dos propiedades, hablemos de la primera:
_abrir: function() {
var elemOffset = this.element.offset();
this._tooltipDiv.css({
position: 'absolute',
color: '#000',
left: elemOffset.left,
top: elemOffset.top + this.element.height()
}).text(this.element.data('tooltip-text'));
this._tooltipDiv.show();
},Primero la establecemos como privada, primero definiremos un objeto donde almacenaremos el valor offset del elemento seleccionado, nuestro siguiente paso ser aplicar el metodo css al div que almacenamos al objeto tooltipDiv, en este estableceremos los parametros de dicho div, para despues por medio de text le aplicamos el texto que agregamos en el link, para ffinalmente mostrarlo, lo siguiente sera definir la otra propiedad/funcion llamada cerrar, esta unicamente ocultara nuevamente el div en el objeto, es decir haran las acciones de los eventos que comentamos anteriormente, para finalizar solo nos resta ir al archivo codigo.js y agregar el siguiente bloque de codigo:
$(document).ready(function() {
$('a').tooltip();
});Como pueden ver aplicamos el metodo sobre cada link existente en el documento, ahora probemos a ver como funciona mediante el siguiente video
Observen como sobre cada link nos muestra cada uno de los de mensajes asignados, es decir que tenemos nuestro primer widget creado con la fabrica de la libreria jQuery UI, pasemos al sigueinte tema.
Destruyendo el widget
Si conocen lenguajes como C++ sabran que existen los constructores y los destructores, los primeros son los encargados de crear los objetos de las clases en memoria con todos los datos necesarios y cuando lo liberemos ya sea que se termino su ciclo de vida o terminemos el programa se llamara al destructor para eliminarlo de la memoria, si bien estos procesos son automaticos tambien podemos configurarlos para que hagan otras tareas, aqui sucede lo mismo si bien definimos un constructor (create) para hacer las tareas de creacion del metodo y hacer las llamadas cuando se disparen los eventos, si bien no es necesario un destructor podemos crearlo para que libere elementos adicionales al metodo, por ejemplo el div que creamos, para entender el concepto vamos a agregar una nueva propiedad a nuestro widget:
destruir: function() {
this._tooltipDiv.remove();
this.element
.removeClass('mhm-tooltip-trigger')
.off('.mhm-tooltip');
$.widget.prototype.destroy.apply(this, arguments);
}Observen como lo primero que hacemos es remover al «div» almacenado en tooltipDiv, despues en el elemento seleccionado removeremos la clase que agregamos y por ultimo apagamos todos los eventos asociados, para finalmente destruir todos los argumentos cargados, en este caso para invocarlo deberiamos hacerlo de la siguiente manera:
$('a').tooltip('destruir');Pero vamos a hacer algo mas divertido como es el siguiente tema.
Activar y desactivar widgets
Tal como se indica en el titulo tambien podemos activar o desactivar los widgets, para ello podemos hacerlo de una forma muy simple y es atraves de this.options.disabled seteandolo como true o false, para ello usaremos la opcion disable, la cual establecera como true a esta opcion y cuando no lo informamos siempre sera false, veamos la modificacion que debemos hacer en el metodo abrir:
_abrir: function() {
if(!this.options.disabled) {
var elemOffset = this.element.offset();
this._tooltipDiv.css({
position: 'absolute',
color: '#000',
left: elemOffset.left,
top: elemOffset.top + this.element.height()
}).text(this.element.data('tooltip-text'));
this._tooltipDiv.show();
}
},Simplemente agregamos un condicional donde mientras disabled sea false, gracias al signo de negacion, ejecutara el bloque de instrucciones de siempre, de lo contrario lo omitira, para desacctivarlo simplemente debemos usarlo de la siguiente manera:
$('a').tooltip('disable');Para activarlo nuevamente deben llamarlo sin argumento como haciamos antes, pasemos al siguiente tema.
Opciones para el widget
Para que podamos habilitar la posibilidad de opciones o estableccer valores, tal como hicimos con el metodo sobra en el post anterior, debemos hacer lo mismo que anteriormente, es decir agregar una nueva propiedad al widget:
opciones: {
offsetX: 10,
offsetY: 10,
contenido: function() {
return $(this).data('tooltip-text');
}
}
Dos detalles no la declaramos como privada porque necesitaremos acceder a ella por fuera del widget y segundo no es una funcion sino simplemente un conjunto de valores, donde estableceremos el offset para x e y, asi como tambien el contenido de cada elemento seleccionado, mediante el retorno de la data etiquetada que tenemos, nuestra siguiente modificacion sera en la funcion abrir:
_abrir: function() {
if(!this.options.disabled) {
var elemOffset = this.element.offset();
this._tooltipDiv.css({
position: 'absolute',
color: '#000',
left: elemOffset.left + this.opciones.offsetX,
top: elemOffset.top + this.element.height()
+ this.opciones.offsetY
}).text(this.element.data('tooltip-text'));
this._tooltipDiv.show();
}
},El cambio fue sutil pero suficiente, en este caso incorporamos por medio de this.opciones los valores de offfsetX y offsetY en las propiededs left y top respectivamente, el resto del metodo abrir sigue exactamente igual pero esto afectara en la ubicacion del mensaje los cuales se veran asi
Pero a su vez nosotros podemos pasar estos parametros como opciones, para ello debemos ir al archivo codigo.js y para verlo en accion cambiaremos la linea de llamado a tooltip de la siguiente forma:
$('a').tooltip({offsetX: 20, offsetY: 25});Aqui establecera dos valores para offsetX y offsetY permitiendo ubicar al mensaje en otra distancia, pueden probarlo y ver como reacciona ahora cuando pasemos sobre este, nos quedan los ultimos dos temas.
Submetodos
Esto es basicamente permitirle a los usuarios que puedan llamar a algun metodo dentro del widget, un ejemplo cercano pero no exacto fue cuando creamos el destructor, donde podemos llamarlo desde las opciones pero cuando hablamos de submetodos nos referimos a metodos que hacen publicos metodos que son privados y puedan ser llamados tal como hicimos con el destructor, de forma reducida podemos decir que habitualmente se llama encapsulacion donde permitimos o restringuimos el acceso a ciertas partes del codigo, para entender el concepto vamos a agregar las siguiente dos propiedades:
abrir: function() {
this._abrir();
},
cerrar: function() {
this._cerrar();
}Observen que solo sacamos el guion bajo, respetamos el nombre para saber a quien corresponde, y en cada uno solamente llamamos al metodo privado correspondiente y con this le indicamos que es solamente para el objeto actual, por lo tanto ahora podemos llamarlo de la siguiente manera:
$('a').tooltip('abrir');Esto lo hicimos asi solo a modo ilustrativo pero de existir otros metodos mas especificos se puede conceder el acceso de esta forma, pasemos al ultimo tema.
Disparando eventos
Esto sera solo a modo ejemplo pero no estara en el codigo final, cuando hablamos de dispara eventos nos referimos a brindar la capacidad de poder soportar eventos personalizados en nuestro plug-in, para ello podriamos modificar los metodos abrir y cerrar de la sigueinte forma:
_abrir: function() {
if(!this.options.disabled) {
var elemOffset = this.element.offset();
this._tooltipDiv.css({
position: 'absolute',
color: '#000',
left: elemOffset.left + this.opciones.offsetX,
top: elemOffset.top + this.element.height()
+ this.opciones.offsetY
}).text(this.element.data('tooltip-text'));
this._tooltipDiv.show();
this._trigger('abrir');
}
},
_cerrar: function() {
this._tooltipDiv.hide();
this._trigger('cerrar');
},Observen que en ambos metodos solo agregamos un llamado a trigger, el cual le permmitra al codigo escuchar por nuevos eventos personalizados, no debemos preocuparnos porque automaticamente el evento se le agrega como prefijo el nombre del widget, por lo tanto en el metodo abrir el llamado a abrir ahora se llamara tooltipabrir y sera creado cada vez que se llame al widget, por otro lado ahora podriamos aplicar este evento a cada elemento mediante .on(‘tooltipabrir’), esto es solo la punta del iceberg sobre este tema y mas adelante ahondaremos, antes de finalizar les dejo todos los archivos del proyecto asi como los modificados en este post:
En resumen, hoy hemos visto como crear un plug-in mediante la libreria jQuery UI, como utilizar a la fabrica (widget) para crearlo desde una forma muy basica hasta ver temas bastante complejos pero que se implementan de forma sencilla gracias a la fabrica, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 