Piwi, Happy Widgets for Happy People

  • 10 October, 3:33am |
  • piwi

Últimamente el equipo de desarrollo (el activo) de Jaws (ion, imsck8, kad y yo) estabamos creando muchos widgets para Jaws. Sin embargo llegué a encontrar algunas cosas 'fastidiosas' en las herramientas que hemos creado para Jaws. Un ejemplo.. es eso: los widgets. Los JawsWidgets (los actuales) hacen maravillas, a un botón le agregan miles de cosas y te regresan widgets 100% xhtml.... pero... son inutiles si las quieres usar en otra aplicación, en mi caso he estado creando muchas herramientas de administración para el Tec usando gran parte de Jaws MVC (Model View Controller)y resulta fastidioso andar renombrando los archivos, cambiando el nombre de las clases.... etc..etc.. así que decidimos separar las cosas por proyectos: Un proyecto por separado que te permita hacer widgets con la misma facilidad que se hace en ASP.NET (o tratar de llegarle mas que nada).

Pues hemos creado un nuevo proyecto: piwi - Happy Widgets for Happy people.

La idea de piwi es como ya la mencionamos, crear widgets de manera fácil, 'customizables' y en un estilo de programar en C# y Gtk. La separación de los Widgets es muy parecida a Gtk, incluso me basé en Gtk para armar el diagrama de distribución de los Widgets, así como de los directorios. Hay tres tipos de Widgets:

  • Bin: Widgets que pueden tener funciones de JavaScript y tienen interacción con el usuario (es decir, pueden ser 'clickeados').
  • Containers: Los famosos 'contenedores'. Van a ser aquellos widgets que pueden contener a otros: Cajas (Box: Hbox, Vbox), TreeView's, ViewPort's, Toolbars.
  • Misc: Todos aquellos que practicamente ni al caso: Labels, Datagrids (no es ni contenedor ni bin), Forms (ni uno, ni otro), etc.

El tipo de Widgets de Bin pueden tener acciones, ¿Qué quiere decir?. Que se les pueden 'pegar' acciones de Javascript de la manera más fácil, veamos un ejemplo:

$button = new Button ("boton", "Boton");
$button->SetSubmit ();
$button->SetStock (STOCK_CANCEL);
$button->AddEvent (new JSEvent (ON_CLICK, "javascript:alert('Hola Mundo');"));
$button->Show ();
 

Vamos, algo muy fácil: se crea un objeto, se le da la propiedad de 'submit', sino se le da nignuna propiedad: reset o submit pues es un simple button. Luego se le declara un STOCK (piwi cuenta con 52 stocks), y la parte intersante viene: Eventos:

Se le va a agregar un Evento JS, es decir: un evento JavaScript, el cual es muy fácil de entenderle: va a ser ejecutado cuando se le de click: ON_CLICK y va a ejecutar esa acción. Cada widget (y los oficiales de piwi) van a contar con validadores de eventos, es decir: no se va a agregar un evento que no es soportado (de acuerdo a la spec de XHTML), como por ejemplo agregar un ON_CHANGE regresarí a un error ya que los botones no pueden tener ese atributo.

Otra ventaja de los Widgets es que pueden ser: multieventos de un mismo tipo. Es decir, yo puedo agregar el número de eventos que quiera a mi widget y todos pueden ser: ON_CLICK. Las pruebas que he hecho con 10 eventos de tipo ON_CLICK me regresan un botón 100% valido de XHTML.

Y así como creamos el botón pues va a ser igual para cualquier widget, y sea Entry, Combo (contamos con 3 tipos: Normal, con Imágenes y de Grupos), TextArea's, etc.

Por ejemplo:

$entry = new Entry ("cajita", "Una cosa");
$entry->SetAutoStyle ();
$entry->AddEvent (new JSEvent (ON_CHANGE, "javascript:alert(this.value)"));
$entry->AddEvent (new JSEvent (ON_CHANGE, "javascript:alert(calcMD5(this.value));",
                                                           "http://jaws.com.mx/templates/controlpanel/md5.js"));
$entry->Show ();
 

Esto es más que obvio (aunque a muchas personas no les guste la: obviedad). Creamos un Entry, le agregamos un AutoStyle (que va a ser: piwi).. un dato curioso que se me olvidó: Los widgets son 100% customizables a CSS y el CSS que regresan es iguall 100% CSS. Y se le van a agregar dos eventos de tipo ON_CHANGE: El primero va a mostrar una alerta del contenido del valor y el siguiente va a hacer una alerta con el valor MD5 ejecutando la función calcMD5 que se encuentra en http://jaws.com.mx/templates/controlpanel/md5.js, ¿Qué nos regresa?.

Link dump

| Archives | Feed |

Categories