Post on 23-Jan-2016
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