Download Especificación CUI

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