Diapositiva 1
Download
Report
Transcript Diapositiva 1
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.
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
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
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
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
El siguiente pasó consistirá
en modificar la especificación
obtenida en GrafiXML.
El objetivo de estas
modificaciones será el de
personalizar el modelo.
Hoja de ruta
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
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
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
* JFrame
Constructor: JFrame(String texto)
Métodos:
setSize(int x,int y)
* JButton
Constructor: JButton()
Métodos:
setText(String text)
setEnabled(boolean op)
* JComboBox
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
* RadioButton
Etiqueta: <input type="radio">
Atributos: disabled, name
* Botón
Etiqueta: <button>“ok"</button>
Atributos: type, disabled
* ComboBox
Etiqueta: <select>
<option>”op”</opction> </select>
Atributos: disabled, name
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
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
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
Ejemplo
Video probando todo…
Conclusiones y trabajos futuros
Conclusiones
Con el trabajo realizado en el presente proyecto final de
carrera se puede concluir que se han conseguido los
objetivos que se marcaron inicialmente:
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.
Seleccionar una propuesta concreta que sirva como base para el
desarrollo del sistema.
Recorriendo las propuestas de lenguajes de especificación de interfaces de
usuario.
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.
Familiarizarse con algún lenguaje de transformación que permita
convertir los modelos en implementaciones.
Desarrollo de técnicas de transformación, ideas reflejadas en las animaciones
de las transparencias del apartado diseño.
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.
Bibliografía
Montero, 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ía
TERESA. 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