Kinetic Style Sheets
| ||
Sumario
Kinetic Style Sheet
KSS es un framework para el trabajo con AJAX. Sin embargo, a diferencia de otros frameworks (prototype.js, rico, por ejemplo) no es totalmente necesario saber javascript para obtener los beneficios de AJAX en nuestra aplicación. KSS es a AJAX como CSS a los estilos. De hecho, para describir el dinamismo de nuestra página usamos una sintaxis totalmente compatible con CSS, aunque su semántica es diferente (por ejemplo, no hay modelos de cajas, ni visual). Al igual que CSS se usan selectores para saber a qué elementos del DOM se aplicará el dinamismo definido.
Hello world con KSS
Una página XHTML como la que sigue:
<html> <head> <title>Hello world con KSS /title> </head> <body> <form action="submit"> <label for="name" value="Nombre"/> <input name="name" type="text" value="Hello world!"/> <input type="submit"/> </form> </body> </html>
Los puntos suspensivos es para incluir los javascripts de KSS. Además note el link en negritas como incluye un fichero como si fuera un CSS, pero cuyo parámetro rel es "kukit". Ahora, con un lenguaje similar a CSS, vamos a hacer cuando apretemos el botón de Submit, salga un alert con el contenido de la caja de edición. Este sería el contenido de hworld.kss:
input[type="submit"]:click {
evt-click-preventdefault: True;
action-client: alert;
alert-message: formVar("form", "name");
}
Es simple, el selector input[type="submit"] selecciona a todos los input con u atributo type="submit". En este caso hay uno solo. El :click se refiere al evento de KSS para el cual se aplican las propiedades. La propiedad evt-click-preventdefault es aplicable al evento click, y significa que no se ejecutará la acción por defecto (submit) de ese elemento (el botón) cuando le das click. La propiedad action-client define una acción que se ejecutará en el cliente (navegador) cuando suceda el evento. En este caso es un mensaje en la pantalla (alert). La propiedad alert-message le pasa un parámetro a la acción alert. En este caso tomamos el valor del elemento cuyo atributo name es "name" dentro del formulario cuyo name es "form".
Acciones en el servidor = AJAX
Al igual que la propiedad action-client, existe la propiedad action-server que define una acción que será ejecutada en el servidor. La acción será enviada al servidor con AJAX. En general el valor de action-server puede ser una URL que se ejecuta por AJAX. La URL puede ser relativa. Esa URL debe devolver un XML el cual establece una serie de comandos a ejecutar en el cliente. Entre los comandos que trae KSS por defecto, se incluyen:
replaceInnerHTML
Reemplaza el contenido del elemento en el cual se ejecutó el evento por otro contenido. ===replaceHTML=== Reemplaza todo el elemento en el cual se ejecutó el evento por el contenido devuelto por el servidor.
appendHTML
Añade contenido (como un hijo más) al final del elemento en el cual se ejecuto el evento.
Implementaciones de KS
Hasta la fecha, la única implementación sólida de KSS es AZAX: Un implementación para Zope de este mecanismo. PloneAzax es un producto que expone AZAX hacia Plone. AZAX incluye varias clases para facilitar la construcción de nuevas acciones del servidor.
Fuente
- http://ucipedia.uci.cu/ 17 de octubre del 2011
- Elaborado por la Ing. Dunia Pineda Medina
