520 likes | 645 Views
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.
E N D
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 • 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.
Contexto • Las interfaces de usuario se pueden clasificar en: • Alfanuméricas o gráficas • Hardware o software
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
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 • 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 • 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
Análisis • 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:
Diseño Hoja de ruta • Se seguirá la hoja de ruta en el diseño y desarrollo del sistema.
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.
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 Especificación CUI-UsiXML • Modificación y eliminación de atributos:
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:
Diseño Especificación CUI-UsiXML • Adición de contenedores gráficos:
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.
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.
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); } }
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)
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>
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
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.
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.
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>
Diseño • Interpretar los contenedores para situar los componentes con el orden relativo correcto - Añadir componentes a los contenedores:
Diseño • Transformar los componentes de interfaz de usuario - Recolocación de etiquetas
Diseño • Transformar los componentes de interfaz de usuario - 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 • 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.
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:
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.
Implementación • TicXML Aquí una foto del splash
Ejemplo Video probando todo…
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.
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 - 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.