| Artículos | 01 JUN 2004

Creación dinámica de una interfaz de usuario con XML

Tags: Histórico
Jaime Gallo.
El uso de XML y otras tecnologías asociadas como XSLT, nos servirá para comprobar que el diseño y la creación de una interfaz de usuario no dependen exclusivamente del aspecto visual que queramos obtener.

El diseño y la creación de interfaces de usuario (UI) son cuestiones que los desarrolladores de software o los webmasters, en mayor medida, tradicionalmente han ido generando de manera estática, es decir, creaban un contenido visual donde el diseño gráfico está formado por formularios, los cuales a su vez contienen controles como los Datagrids, imágenes o controles ActiveX, en definitiva, todo aquello que habitualmente estamos acostumbrados a ver en cualquier tipo de aplicación, ya sea de escritorio o web.

Diseño estático
La creación de este diseño gráfico se genera mediante el uso de los conocidos entornos de desarrollo que los diferentes fabricantes lanzan al mercado, como por ejemplo Visual Studio.NET de Microsoft o JBuilder de Borland, entre otros. Para diseñar y construir estas UI simplemente nos dedicamos a arrastrar y soltar los diferentes controles que deseemos en el orden y colocación que necesitemos para completar la interfaz según queramos diseñarla.
Como decimos, esto es lo “normal”, y también debería ser normal que la creación de la propia interfaz gráfica se haga en base a unos criterios objetivos. ¿Quién no se ha preguntado alguna vez cómo ir colocando y en qué orden los textos de los controles (botones, etiquetas,...)?, o peor aún, ¿qué lógica seguimos para decidir qué parte visual de nuestra aplicación debe cargarse en primer lugar ?
Pues bien, si quisiéramos seguir un estándar de cómo diseño y programación de un determinado software, deberíamos atender a dos razones principales: ¿sobre qué plataforma queremos ejecutar nuestra aplicación? y ¿quién es el fabricante de dicha plataforma?
La repuesta a nuestras preguntas acerca de cómo diseñar el software deseado tendría que venir dada por los creadores de la plataforma. Por ejemplo, Microsoft posee una documentación conocida como WinLogoProgram, cuya dirección es www.microsoft.com/winlogo. donde se nos da todo tipo de detalles y de explicaciones sobre cómo generar visualmente nuestra aplicación y según unos criterios propuestos por el fabricante se nos indica cómo debemos diseñar, construir y atender a ciertas normas que la mayoría de los programadores desconocen y que pueden ayudar a resolver muchas de las dudas que nos plantea el desarrollo de software para determinados sistemas operativos, en este caso Windows 2000, Windows XP, etc.
Volviendo al camino que habíamos iniciado, la creación estática de UI, ese diseño estático generado mediante un entorno de desarrollo visual, desde el punto de vista práctico está muy bien, pero, ¿qué ocurre si nuestro proyecto tiene muchos formularios con una interfaz diferente?, ¿qué hacemos si nuestra aplicación posee, por ejemplo, 200 formularios? Pues para empezar vamos a tener que dedicar bastante tiempo a arrastrar y soltar controles para terminar el diseño de nuestros formularios.
Por otro lado, podemos encontrarnos que diferentes partes aisladas de muchos de los formularios son comunes respecto a su funcionalidad y a su aspecto visual. Si es así, entonces podemos diseñar nuestras UI en base a controles personalizados creados por nosotros. Este tipo de controles gráficos son los conocidos ActiveX, JavaBeans o, ahora con la plataforma .NET, también podemos generar controles web personalizados conocidos como Web Controls. Mediante este sistema, ahorraremos mucho tiempo en la creación de una interfaz de usuario, pero aun así tardaremos bastante tiempo en terminar el diseño de nuestra aplicación.

Diseño dinámico
La gran pregunta entonces es, ¿cómo acortar este tiempo? La respuesta no es tan simple pero vamos a tratar de proponer algunas soluciones.
¿Por qué, en lugar de generar estas interfaces de usuario en tiempo de diseño, las creamos en tiempo de ejecución? Con ello sólo tendríamos que preocuparnos de la lógica de nuestro sistema; no habría por qué estar “dibujando” la interfaz antes de que el propio formulario se ejecute y se visualice.
Para conseguir esto existen diversas técnicas. La primera y más simple consistiría en usar la colección de controles que poseen los formularios y que nos permiten en tiempo de ejecución, mediante métodos como añadir o remover, agregar o quitar controles de tal manera que sin necesidad de “pintar” nada en el diseño, cuando nuestro formulario se cargue en memoria, ejecutará la carga o descarga de cada uno de los objetos que agreguemos en cualquier instante a la colección Controls.
Con esta técnica generamos nuestra interfaz de usuario dinámicamente, en tiempo de ejecución, que es de lo que se trata. Pero, ¿por qué no ir más allá? En cualquier proyecto de programación lo primero que debe conocer es sobre qué sistema se va a ejecutar su aplicación. ¿Se tratará de un proyecto web? ¿Windows? ¿Se tratará de una aplicación de acceso a datos o no? ¿Trabajará con dispositivos móviles o todos serán PC de sobremesa?
Teniendo esto en cuenta y otros factores no menos importantes en el análisis de nuestro sistema, llegaríamos a conocer la arquitectura candidata en base a la cual usted tendrá que programar el sistema.
En nuestro artículo hablaremos del siguiente ejemplo. Se trata de una aplicación web ASP.NET desarrollada con Microsoft Visual Studio.NET 2003, que accede a un servidor SQL Server y que en función de la información obtenida de la base de datos muestra una determinada interfaz de usuario.

Uso de XML
Como puede comprobar, queremos visualizar una determinada interfaz de usuario en una página web, pero ¿cómo podemos hacerlo saliéndonos de lo normal? La repuesta la encontramos en la tecnología XML.
Debemos tratar de centrarnos en la información que nos interesa del sistema como contenido y no en su aspecto visual, es decir, en los metadatos, y usar esa información añadida como parte principal del desarrollo y sobre la cual nuestra aplicación se irá generando. Esta técnica de crear aplicaciones orientada a los datos y basándonos en la estructura de esos datos se conoce como Data-Driven y es precisamente lo que vamos a hacer con XML.
La tecnología XML surge como un estándar de comunicación entre diferentes tipos de datos, diferentes plataformas y tecnologías que centran su desarrollo en la estructura de la información que manejan y no en su aspecto visual. Por lo tanto, nos permite centrarnos en esos metadatos y usar la información de la manera más apropiada.
La idea es la siguiente:
1. Obtener una relación entre la estructura de los datos que tenemos almacenados en el servidor de base de datos y la UI que se encargará de mostrar esos datos.
2. Ser capaces de transformar esa información en controles gráficos para que sean cargados y visualizados en el navegador.
3. Una vez que la interfaz de usuario esté visible, ser capaces de interactuar con esos controles y enviar la información introducida desde el navegador a la base de datos o donde sea necesario.
Para hacer posible todo esto,

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