TicXML: Generando diferentes interfaces de usuario finales a partir de una única especificación declarativa

Juan Carlos Peña Rodríguez

Índice de contenidos

1. Contexto 2. Motivación y objetivos 3. Análisis y diseño 4. Implementación 5. Ejemplo 6. Conclusiones y trabajos futuros

Contexto

Contexto

Definición de Interfaz de Usuario (UI): Forma en la que los usuarios pueden comunicarse con un sistema.

En la actualidad existen multitud de interfaces de usuario diferentes.

Las interfaces de usuario se pueden clasificar en: Alfanuméricas o gráficas Hardware o software

Contexto

Contexto

Una misma idea de interfaz de usuario, da lugar a diferentes implementaciones dependientes del lenguaje y la plataforma utilizada.

A continuación se muestra un programa de calculadora en diferentes implementaciones:

Aplicación de windows

Java HTML

Contexto La tendencia actual en el desarrollo de software (y en el de

UI) se basa en el uso de modelos. Ejemplo de ello es la propuesta MDA (Model-Driven Architecture) de la OMG, y en lo que se refiere al desarrollo de IU la tendencia de desarrollo basada en modelos está vigente desde principios de los 90, existiendo múltiples propuestas.

Modelo: Idealización de la realidad utilizada para plantear un problema, normalmente de manera simplificada en términos relativos.

Utilización de los modelos: Representaciones de partes del sistema. Elementos activos en el proceso de desarrollo.

Motivación y objetivos

Motivación

Estudio de viabilidad y desarrollo de un sistema que proporcione los pasos necesarios para obtener resultados tácitos, en forma de código, a partir de modelos que especifiquen la configuración de una interfaz de usuario.

Modelo independiente del modo de interacción

Código: Java y HTML

Objetivos Estudiar la manera en la que se desarrollan las interfaces de

usuario, centrándose en las partes comunes y replicadas.

Identificar un marco que respalde la transformación de modelos.

Examinar las propuestas existentes en torno a los modelos sobre las interfaces de usuario.

Seleccionar una propuesta concreta que sirva como base para el desarrollo del sistema.

Estudiar diversos lenguajes de implementación de interfaces de usuario.

Objetivos Definir las ideas y técnicas necesarias para transformar los

modelos de interfaces de usuario en código.

Familiarizarse con algún lenguaje de transformación que permita convertir los modelos en implementaciones.

Implementar una herramienta que integre de una forma cómoda las transformaciones.

Estudiar la eficiencia de la herramienta y la metodología presentada con algún ejemplo de uso.

Análisis y diseño

Análisis Siguiendo con la filosofía de MDA, se llevarán a cabo la

clasificación y transformación de modelos de la siguiente forma:

PIM: Platform Independient Model. Modelo independiente de la plataforma PSM: Platform-Specific Model. Modelo especifico de la plataforma

Para la representación y almacenamiento de modelos es necesario el uso de lenguajes de modelado:

UsiXML XIML TERESA Thinlet Laszlo

Análisis

UsiXML:

Se trata de una propuesta de la universidad católica de Louvain (Bélgica).

Nace con el propósito de describir la interfaz de usuario a partir de diversos modelos de diseño, independientemente de las características concretas de cada lenguaje ó plataforma.

Será uno de los pilares fundamentales en los que se apoyará el trabajo desarrollado.

Análisis

UsiXML:

El trabajo se centrará en el modelo de interfaz de usuario a nivel concreto (CUI, Concrete User Interface).

Hay disponibles un amplio abanico de herramientas relacionadas con la propuesta:

Análisis

Diseño

Se seguirá la hoja de ruta en el diseño y desarrollo del sistema.

Hoja de ruta

Diseño

El primer paso consiste en definir el modelo de la interfaz de usuario.

Se hace uso de la herramienta GrafiXML que permite situar los componentes de manera sencilla, obteniendo como resultado el fichero UsiXML con la especificación de la interfaz.

Hoja de ruta

Diseño Definición del modelo con GrafiXML

Más información en: http://www.usixml.org/index.php5?mod=pages&id=12

Diseño Hoja de ruta

El siguiente pasó consistirá en modificar la especificación obtenida en GrafiXML.

El objetivo de estas modificaciones será el de personalizar el modelo.

Diseño

Modificación y eliminación de atributos:

Especificación CUI-UsiXML

Diseño

Adición de contenedores gráficos:

Especificación CUI-UsiXML

• Consideración previa: un contenedor gráfico sirve para alojar componente gráficos, se utilizan para organizar la disposición de los mismos.

• Ejemplo:

Diseño

Adición de contenedores gráficos:

Especificación CUI-UsiXML

Diseño

Realizando esta serie de modificaciones se obtendrá la especificación de la interfaz en UsiXML de forma correcta en forma de archivo.

Este archivo servirá como base para las transformaciones.

Especificación CUI-UsiXML

Diseño

Se estudiarán las implementaciones finales, es conveniente estudiar la forma de éstas antes de la transformación para poder realizar la misma de la manera más óptima.

Java y HTML muestran dos tipos de lenguajes: de texto plano y etiquetado, respectivamente.

Hoja de ruta

/* Importar librerías… */

public class Main { public Main(){}

public static void main(String[] args) {

/* Aquí los componentes generados en la transformación */

/* Hacer visible la ventana o popup generado en la especificación */variable_ventana_generada.setVisible(true);

}}

- Estructura de un programa en Java

Diseño

* JFrame

* JButton

* JComboBox

Constructor: JFrame(String texto)Métodos: setSize(int x,int y)

Constructor: JButton()Métodos: setText(String text) setEnabled(boolean op)

Constructor: JComboBox(String *opcs) Métodos: setEnabled(boolean op)

- Componentes de interfaz de usuario en Java

Diseño

<HTML>

<HEAD> <TITLE> Titulo, cogido de la especificación CUI </TITLE> </HEAD>

<BODY> Aquí los componentes generados en la transformación </BODY>

</HTML>

- Estructura de un programa en HTML

Diseño

* RadioButton

* Botón

* ComboBox

Etiqueta: <input type="radio">Atributos: disabled, name

Etiqueta: <button>“ok"</button>Atributos: type, disabled

Etiqueta: <select> <option>”op”</opction> </select> Atributos: disabled, name

- Componentes de interfaz de usuario en HTML

Diseño

Diseño

La tarea más importante del desarrollo consiste en la transformación.

Como se expresa en la hoja de ruta, se transformará la especificación CUI-UsiXML a los lenguajes de implementación Java y HTML.

Hoja de ruta

Tareas necesarias para abordar las transformaciones:

• Estudiar cómo se estructura la plataforma destino para realizar una transformación óptima.

• Interpretar los contenedores gráficos para situar los componentes con el orden relativo correcto.

• Transformar los componentes de interfaz de usuario.

Diseño

• Interpretar los contenedores para situar los componentes con el orden relativo correcto

- Los contenedores contienen a componentes gráficos:

<Contenedor … … …><Componente_gráfico1 …/>…<Componente_gráficoN …/>

</Contenedor>

- Tipos de orientaciones:

<box id="b1" name="b" type="vertical"> … </box> - Vertical:

<box id="b1" name="b" type=“horizontal">.. </box> - Horizontal:

Diseño

• Interpretar los contenedores para situar los componentes con el orden relativo correcto

- Añadir componentes a los contenedores:

Diseño

- Recolocación de etiquetas

• Transformar los componentes de interfaz de usuario

Diseño

- Interpretación de etiquetas que dan lugar a componentes distintos

Diseño• Transformar los componentes de interfaz de usuario

- Presencia de atributos que añaden nuevos atributos o rutinas

Diseño• Transformar los componentes de interfaz de usuario

• Implementación de las transformaciones: XSLT

Diseño

• El lenguaje XSLT permite transformar documentos XML en otros documentos, ya sea en XML u otros.

• Se basa en el uso de reglas y plantillas. Mediante la combinación de ambas se pueden conseguir los archivos de salida deseados.

• Es de naturaleza declarativa, el orden en el que se sitúen las plantillas, reglas, etc. no es determinante.

Implementación

Implementación Las ideas presentadas en el apartado anterior darán lugar a

la implementación de una herramienta que automatice el proceso.

La herramienta se llama TicXML (Transform In a Click usiXML) y se encuentra dentro del organigrama de las herramientas de UsiXML:

• TicXML

Implementación

• Se ha construido utilizando el lenguaje de programación Java, para ello se ha utilizado el IDE de libre distribución NetBeans.

• Facilita el proceso mostrando los pasos en forma de wizard.

• Para el manejo de las transformaciones XSLT se han utilizado las librerías Dom4j creadas a tal efecto, con las que se da soporte para cargar y transformar los archivos XML, obteniendo así el archivo resultante.

• TicXML

Implementación

Aquí una foto del splash

Ejemplo

Ejemplo

Video probando todo…

Conclusiones y trabajos futuros

Estudiar la manera en la que se desarrollan las interfaces de usuario, centrándose en las partes comunes y replicadas.

Mediante el estudio de las interfaces de usuario actuales.

Identificar un marco que respalde la transformación de modelos.

La filosofía de la propuesta MDA apoya la utilización de modelos y las transformaciones entre ellos.

Con el trabajo realizado en el presente proyecto final de carrera se puede concluir que se han conseguido los objetivos que se marcaron inicialmente:

Conclusiones

Examinar las propuestas existentes en torno a los modelos sobre las interfaces de usuario.

Recorriendo las propuestas de lenguajes de especificación de interfaces de usuario.

Seleccionar una propuesta concreta que sirva como base para el desarrollo del sistema.

Se seleccionó UsiXML como propuesta base.

Estudiar diversos lenguajes de implementación de interfaces de usuario.

Los elegidos fueron: Java, como representante de los lenguajes de texto plano y HTML como representante de los lenguajes etiquetados.

Conclusiones

Definir las ideas y técnicas necesarias para transformar los modelos de interfaces de usuario en código.

Desarrollo de técnicas de transformación, ideas reflejadas en las animaciones de las transparencias del apartado diseño.

Familiarizarse con algún lenguaje de transformación que permita convertir los modelos en implementaciones.

Se adoptó el lenguaje XSLT para pasar de archivos xml a HTML o Java.

Implementar una herramienta que integre de una forma cómoda las transformaciones.

Implementación de la herramienta TicXML.

Conclusiones

Conclusiones

- Con las ideas presentadas y la evidencia de la posibilidad de llevarlo a cabo con la herramienta TicXML. Se concluye que esta línea de investigación se estima importante y prometedora, ya que si alguna empresa de desarrollo lo utilizara tendría ante sí la posibilidad de portar las herramientas a cualquier lenguaje de los disponibles o futuros de forma totalmente o parcialmente automática, ahorrando así mucho tiempo y, en consecuencia, dinero.

Trabajos futuros Desarrollar transformaciones para más implementaciones, en la

misma línea y de forma similar a las ya realizadas.

Estudio de un sistema similar al presentado cambiando el punto de partida, abordando otro CUI como por ejemplo para teléfonos móviles.

Realización de un sistema complementario que se ocupe de hacer el paso inverso.

Integración de las ideas presentadas a mayor escala, es decir, posibilidad de interactuar con patrones y acciones de forma integrada.

Consideración del comportamiento/funcionalidad que debe ofrecer la aplicación.

BibliografíaMontero, F. Tesis doctoral: Integración de calidad y experiencia en el desarrollo de interfaces de usuario dirigido por modelos. (Julio, 2005)

Brown, A. An introduction to Model Driven Architecture. http://www-128.ibm.com/developerworks/rational/library/3100.html . (Febrero, 2004)

XML. Extensible Markup Language (XML) 1.0 (Fourth Edition). http://www.w3.org/TR/REC-xml/ . (Septiembre, 2006)

Paternò, F. Model Based Design and Evaluation of Interactive Applications, Springer-Verlag, London, 1999.

Vanderdonckt, J. A MDA-Compliant Environment for Developing User Interfaces of Information Systems, Proc. of 17th Conf. on Advanced Information Systems Engineering. CAiSE'05 (Porto, 13-17 June 2005)

UsiXML. USer Interface eXtensible Markup Language. http://www.usixml.org. Consultado en 2007

IdealXML. Pattern-oriented tool IdealXML. http://www.usixml.org/index.php?view=page&idpage=34 . Consultado en 2007

XIML. XIML provides a universal specification for interaction data and knowledge that enables a level of control over user interfaces never befote possible. 1990-2004. http://www.ximl.org/ . Consultado en 2007

GrafiXML. GrafiXML graphical tool. http://www.usixml.org/index.php?view=page&idpage=10 . Consultado en 2007

BibliografíaTERESA. Transformation Enviroment for inteRactivE Systems representAtions. http://giove.isti.cnr.it/teresa.html . Consultado en 2007

Thinlet Thinlet tool. http://www.thinlet.com/ . Consultado en 2007

Laszlo. Laszlo systems. http://www.laszlosystems.com/ . Consultado en 2007

Java. Java programing language. http://java.sun.com/ . Consultado en 2007

Eckel, B. Piensa en Java, Editorial: Prentice may, Año: 2002

JavaAlmanac. The Java Developers Almanac 1.4. http://www.javaalmanac.com . Consultado en 2007

NetBeans. NetBeans IDE. http://www.netbeans.org . Consultado en 2007

HTML. Guía de HTML. http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm . Consultado en 2007

XSLT. XSLT language. http://www.w3.org/TR/xslt . Consultado en 2007

Dom4j. The flexible XML framework for Java. http://www.dom4j.org . (Mayo, 2005)

TicXML: Generando diferentes interfaces de usuario finales a partir de una única especificación declarativa

Juan Carlos Peña Rodríguez