martes, 11 de diciembre de 2007

xForm

Hola, hace un tiempo se dio a conocer la nueva generación de formularios web impuesto por la W3C (World Wide Web Consortium), los xForm son formularios web que agregan una caracteristica muy importante a los actuales formularios web, esta es la validación de la información y el cambio en la forma en que se construyen estos formularios web.
Estas paginas gestionan, sin interactuar con el servidor, tanto la presentación como la lógica de la interfaz de usuario y su comunicación con el servidor se restringe al intercambio de datos utilizando técnicas AJAX.
Los xForm es la nueva generación de formularios dinamicos, no solo para la web sino que tambien se convertiran en el estandar para dispositivos moviles.
En este articulo veremos un ejemplo y como se modela un xForm.

Como requisito previo es necesario tener la jdk 1.4, 5 o superior, el ide eclipse y ant. luego vamos a la siguiente url y descargamos el ajaxForms.

http://sourceforge.net/project/showfiles.php?group_id=154001

Una vez que tenemos el template de ajaxForms, lo descomprimos en un directorio, abrimos el eclipse y seteamos este ajaxForms como proyecto en el eclipse, este ajaxForms que descargamos de sourceforge viene listo para comenzar a trabajar con xForm, incluye un buid.xml para trabajar con ant, deployar y probar nuestros xForms.

Entoces, vemos que nuestro ajaxForms tiene como contenido lo siguiente:

En la raiz tenemos 3 carpetas: bin(vacio), lib(ajaxforms.jar y jaxen.jar), web(data.xml, echo.shtml y index.xform)

Más los siguientes archivos:
.classpath
.proyect
buid.properties
build.xml (para ant, recomiendo ant 1.7)
license.txt
readme

Agregamos el buid.xml al show view de ant del eclipse del costado derecho.

1.- Hacemos doble click en clean del buid, para limpiar el proyecto.

2.- Hacemos doble click en buid (default), esto generara en el proyecto una nueva carpeta de nombre build.
Si abrimos esta carpeta vemos que en su contenido se encuentran los siguientes archivos:

Una carpeta de nombre resources, y tres archivos:
data.xml
echo.shtml
index.html

Este ultimo es el formulario web que se genera a partir del index.xform de nuestra raiz del proyecto, corresponde a un html en el cual la mayoria es javascript y ajax, el archivo data.xml es la información inicial con la que se rellena el formulario y el echo.shtml es el action del formulario, vemos además que el archivo index.html generado contiene un log en la parte inferior y que al hacer save apunta al archivo echo.shtml

El archivo index.xform, corresponde a un archivo XML Schema de tipo xsd, en el cual se define el modelo del formulario, los tipos de datos para los imput, etc., es necesario identificar claramente el contenido de este tipo de archivos para poder trabajar con xForm:

En este archivo se identifican dos areas, una es el head y la otra el body.

En el head se define el modelo del formulario (diseño), la instancia de los datos que rellenan el formulario, el action o submit del formulario, y algunas validaciones, y el el body se define el cuerpo del formulario, los action de los botones, los imput, select, etc..

Dejo en ustedes esta introducción y la inquietud de poder seguir investigando esta nueva forma de implementar formularios web.

Saludos y suerte !!

1 comentario:

Erik dijo...

super bien el ejemplo