Juan Carlos Peña Rodríguez

1. TicXML: Generando diferentes interfaces de usuario finales a partir de una única especificación declarativa Juan Carlos Peña Rodríguez

2. Í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

3. Contexto

4. 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.

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

6. 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 HTML Java

7. 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.

8. Motivación y objetivos

9. 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

10. 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.

11. 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.

12. Análisis y diseño

13. 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

14. Análisis • Para la representación y almacenamiento de modelos es necesario el uso de lenguajes de modelado: • UsiXML • XIML • TERESA • Thinlet • Laszlo

15. 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.

16. 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:

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

18. Diseño Hoja de ruta • 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.

19. Diseño • Definición del modelo con GrafiXML Más información en: http://www.usixml.org/index.php5?mod=pages&id=12

20. 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.

21. Diseño Especificación CUI-UsiXML • Modificación y eliminación de atributos:

22. Diseño Especificación CUI-UsiXML • Adición de contenedores gráficos: • Consideración previa: un contenedor gráfico sirve para alojar componente gráficos, se utilizan para organizar la disposición de los mismos. • Ejemplo:

23. Diseño Especificación CUI-UsiXML • Adición de contenedores gráficos:

24. Diseño Especificación CUI-UsiXML • 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.

25. Diseño Hoja de ruta • 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.

26. Diseño - Estructura de un programa en Java /* 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); } }

27. Diseño - Componentes de interfaz de usuario en Java Constructor: JFrame(String texto) Métodos: setSize(int x,int y) • * JFrame • * JButton • * JComboBox Constructor: JButton() Métodos: setText(String text) setEnabled(boolean op) Constructor: JComboBox(String *opcs) Métodos: setEnabled(boolean op)

28. Diseño - Estructura de un programa en HTML <HTML> <HEAD> <TITLE> Titulo, cogido de la especificación CUI </TITLE> </HEAD> <BODY> Aquí los componentes generados en la transformación </BODY> </HTML>

29. Diseño - Componentes de interfaz de usuario en HTML Etiqueta: <input type="radio"> Atributos: disabled, name • * RadioButton • * Botón • * ComboBox Etiqueta: <button>“ok"</button> Atributos: type, disabled Etiqueta: <select> <option>”op”</opction> </select> Atributos: disabled, name

30. Diseño Hoja de ruta • 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.

31. Diseño • 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.

32. 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: - Vertical: <box id="b1" name="b" type="vertical"> …</box> - Horizontal: <box id="b1" name="b" type=“horizontal">.. </box>

33. Diseño • Interpretar los contenedores para situar los componentes con el orden relativo correcto - Añadir componentes a los contenedores:

34. Diseño • Transformar los componentes de interfaz de usuario - Recolocación de etiquetas

35. Diseño • Transformar los componentes de interfaz de usuario - Interpretación de etiquetas que dan lugar a componentes distintos

36. Diseño • Transformar los componentes de interfaz de usuario - Presencia de atributos que añaden nuevos atributos o rutinas

37. Diseño • Implementación de las transformaciones: XSLT • 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.

38. Implementación

39. 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:

40. Implementación • TicXML • 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.

41. Implementación • TicXML Aquí una foto del splash

42. Ejemplo

43. Ejemplo Video probando todo…

44. Conclusiones y trabajos futuros

45. 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 • 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.

46. 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.

47. 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.

48. 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.

49. 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.

50. Bibliografía