Para acceder al tutorial completo, en formato PowerPoint, puede pulsar en el siguiente enlace:
Los siguientes ficheros son workspaces de Obeo Designer 7.0 en su versión Community
“The easiest way to get your own Modeling Tool” – Sirius Team
Sirius:
Personales:
Alternativa 1
Alternativa 2
Alternativa 3 (recomendada)
DESARROLLO DE EDITORES VISUALES CON SIRIUS
Lenguaje de dominio específico
Con notación concreta: gráfica y textual.
Con herramientas de soporte: editores y representaciones gráficas, editores textuales y validadores
Entorno de Especificación
Usuario Final – Runtime
Viewpoint (Diagramas, Tablas, Árboles, Secuencia)
DESARROLLO DE EDITORES GRÁFICOS CON SIRIUS
Metamodelo
Sirius Runtime Workbench
DESARROLLO DE EDITORES VISUALES CON SIRIUS
Este tutorial se basa en conceptos simplificados de CBML:
Presentamos el diseño del metamodelado para:
Vamos a usar Obeo Designer
Creamos un nuevo proyecto Ecore Modeling
File -> New -> Other
Ecore Modeling Project
Rellenamos el nombre del proyecto
Establecemos el nombre del modelo de dominio (Main package name - Epackage)
La URI XML del espacio de nombres (Ns URI)
El espacio de nombres del XML del Epackage (Ns Prefix)
Usaremos la vista de diseño gráfico para crear nuestro metamodelo.
Seleccionamos el viewpoint Design
SIRIUS crea un modelo de dominio vacío y una serie de ficheros que gestionan la representación gráfica del modelo asociado.
Al contrario que GMF, se preocupa de tener inicializadas las variables del modelo del dominio.
La validación del proyecto es correcta desde su creación.
Se recomienda crear una clase principal que sea la principal de las clases del dominio.
Simplemente haciendo click en la clase podemos editar el nombre de la misma de manera amigable.
Añadimos un nuevo atributo.
Si no lo inicializamos la ‘caja’ se vuelve de color rojo:
Para inicializar el atributo podemos escribir:
El editor se encarga de interpretarlo y rellenar los datos en las pestaña de propiedades.
Podemos completar los atributos de la clase en la ventana de propiedades.
Si hacemos doble click en la clase para inicializarla, el editor nos proporciona una ventana de propiedades para modificar los datos amigablemente.
Las clases con alguna propiedad particular (como ser abstractas), las enumeraciones, los tipos de datos… se diferencia en el diagrama porque tienen un estilo de presentación diferente.
Para los tipos enumerados hay que rellenar cada uno de los Value de cada elemento.
Como con las clases, el nombre de las relaciones se puede escribir directamente en el editor de diagramas.
Podemos escribir directamente la cardinalidad en la cadena del nombre con el formato:
Una vez completado el metamodelo validamos el resultado.
En el siguiente paso, vamos a probar el metamodelo que hemos creado con datos de test.
Con este fin vamos a generar el código asociado al modelo para que sea usado por las herramientas que vamos a invocar.
Lanzamos, en este orden, sobre el .genmodel
Para probar el metamodelo necesitamos crear instancias de nuestras clases y establecer relaciones entre ellas.
Necesitamos lanzar un nuevo Eclipse para que reconozca nuestro proyecto como candidato a crear nuevo proyecto.
Accedemos al menú Run->Run Configurations.
Creamos nueva Eclipse Application llamada CBMLTest con los argumentos:
Aplicamos los cambios pulsando en Apply y ejecutamos con Run.
Con esto conseguimos abrir una nueva instancia de Eclipse sobre la que vamos a trabajar.
¡ATENCIÓN! Tener siempre muy presente el metamodelo.
Creamos un nuevo proyecto de modelado.
* File->New->Modeling Project
Elegimos el nombre com.aga.iia.cbml.demo y pulsamos en Finish consiguiendo un proyecto vacío.
Creamos el ejemplo basado en nuestro modelo pulsando con el botón derecho sobre nuestro proyecto seleccionando:
Dentro de la carpeta Example EMF Model Creation Wizard seleccionamos Cbml Model.
Usamos el nombre demo.cbml y pulsamos Next.
El elemento raíz de nuestro metamodelo es el Scenario. Lo seleccionamos en la siguiente ventana del asistente y pulsamos Finish.
EMF crea un modelo que contiene una instancia de Scenario y abre un editor en forma de árbol.
Añadimos nodos que cubran todas las relaciones de nuestro metamodelo.
Validamos los datos de prueba.
Tenemos una representación en árbol que es la que ofrece por defecto el editor.
No es la más adecuada para nuestro modelo.
Vamos a crear una Viewpoint de SIRIUS en forma de diagrama para representar nuestros datos.
Vamos a crear un diagrama que permita a los usuarios visualizar y, posteriormente, editar el escenario, sus componentes y las relaciones entre ellos.
Usaremos de punto de partida los datos de prueba creados en el apartado anterior.
Creamos un Viewpoint Specification Project desde
Llamamos al proyecto cbml.design y pulsamos Finish.
Definimos un Viewpoint
Sobre la carpeta cbml pulsamos con el botón derecho
Rellenamos, en las propiedades, los campos
Pulsando con el botón derecho sobre CBML Design -> New Representation -> Diagram Description creamos un nuevo Viewpoint de tipo Diagrama
Rellenamos las propiedades generales del diagrama.
¡IMPORTANTE! Estar atento a la consola de log del Eclipse principal para comprobar que no hayamos metido alguna expresión de manera errónea.
Creamos el layer por defecto sobre el que se dibujará nuestro diagrama. Un diagrama debe de contener, al menos, un layer para mostrar su contenido.
El layer por defecto representa el scenario como contenedor. Lo creamos pulsando sobre el Scenario Diagram con el botón derecho New Diagram Element-> Default Layer.
Vamos a representar los elementos relevantes del modelo en el diagrama.
Un diagrama puede representar los nodos que son instancias del modelo.
Para crear un nodo, pulsamos con el botón derecho sobre el layer creado y seleccionamos
Rellenamos las propiedades del elemento Node:
Tenemos que mapear el nodo con los elementos de nuestra instancia. Para ello rellenamos el campo Semantic Candidate Expression con un comando Acceleo para especificar como recuperar los nodos para mostrarlos en el diagrama.
Los actores son parte del escenario por el atributo cast definido en la relación.
Usamos la sintaxis [/] y el autocompletado (Ctrl + Space) para ayudarnos en esta tarea.
La expresión es evaluada en el objeto asociado al diagrama (en nuestro caso una instancia de un escenario cbml).
Para poder testear esta primera versión del diagrama necesitamos crear una Representación del escenario Ataque a Melilla.
Primero validamos el diagrama, pulsando en el icono de la esquina superior derecha Validar.
Seguidamente seleccionamos en el proyecto demo el viewpoint CBML Design. Pulsamos con el botón derecho sobre el proyecto demo, seleccionamos en el menú Viewpoint Selection
Para crear la Representación, con el botón derecho sobre el proyecto demo, seleccionamos Create a New Representation del Scenario Diagram.
El resultado es un nuevo fichero en el proyecto demo (“new Scenario Diagram”) con el siguiente aspecto:
Seleccionando la imagen podemos ver sus propiedades que fueron definidas en la instanciación del ejemplo.
Completamos la representación gráfica de todos los nodos de manera análoga.
Para el nodo de tipo Objects necesitaremos una representación condicional. Los objetos pueden ser tanques, aviones o barcos. Para ello incluiremos un elemento Conditional Style y una expresión Acceleo nos permitirá evaluar que representación tomar.
Las expresiones Acceleo son:
En el caso de las representaciones gráficas condicionales, si queremos que nuestro .odesign valide, es necesario tener una representación del nodo por defecto.
Dentro de cada condición añadiremos un Workspace Image para cargar la imagen correspondiente según el tipo de objeto.
Aplicando las mismas técnicas añadimos la representación gráfica de los Report.
Para las órdenes (Order) vamos a usar diferentes figuras según sean órdenes de ataque (círculo rojo) o cualquier otra orden (rectángulo verde).
Una vez representados todos los nodos interesantes vamos a reflejar la relación entre ellos.
Con este fin crearemos en el layout Default, a través de pulsar en el botón derecho -> New Diagram Element -> Relation Based Edge para representar las relaciones.
Rellenamos las propiedades de la representación de la relación.
Cambiamos las propiedades de la representación de la relación.
De la misma manera completamos la representación gráfica relacionando los Reports y las Orders con los objetos que las ejecutan.
Hasta este momento hemos creado una representación gráfica de nuestro modelo.
Actualmente la única acción que podemos llevar a cabo es la de reposicionar los elementos en el diagrama.
Para completar el tutorial vamos a crear una paleta de herramientas que permitan al usuario insertar nuevos elementos en el diagrama y se reflejen en el modelo.
Creamos una nueva sección en la capa por defecto pulsando con el botón derecho sobre ella y selecionando New Tool -> Section.
Rellenamos las propiedades de la sección:
Dentro de la sección creada, creamos una sección nueva Tools, de la misma manera para organizar las herramientas.
La primera herramienta que vamos a crear es la que nos permite insertar un nuevo elemento Object.
Para ello pulsamos con el botón derecho New Element Creation -> Node Creation.
Rellenamos las propiedades del Node Creation.
Aparece en la paleta la nueva herramienta aún sin funcionalidad.
Vamos a definir las acciones que se deben llevar a cabo cuando el usuario use la herramienta de creación del nodo.
El primer paso consiste en incluir un cambio de contexto.
Para ello pulsamos con el botón derecho sobre Begin dentro del elemento de creación del nodo, New Operation -> Change Context.
En este caso el contexto viene definido por una sentencia Acceleo que permite a Sirius saber donde debe insertar el nodo en el elemento que sirve de base al diagrama actual (el layer representa el escenario).
Para ello usamos la variable container.
Incluimos la semántica de nuestra acción pulsando con el botón derecho sobre el cambio de contexto New Operation -> Create Instance.
Rellenamos las propiedades de Create Instance.
Para completar la acción incluimos operaciones de tipo Set que nos permiten inicializar valores del elemento creado.
RECORDATORIO
Probamos nuestra nueva herramienta.
Necesitamos poder relacionar nuestro nuevo elemento con los demás componentes del diagrama.
Para ello vamos a crear un nuevo elemento de creación llamado Edge Creation.
Rellenamos las propiedades del Edge Creation:
En los elementos que definen el Edge se definen las variables source y target. Usaremos estas variables para saber qué nodos ha seleccionado el usuario.
En nuestro caso la variable source tendrá que ser un Report o un Order. La variable target será una instancia de Object.
Vamos a definir el comportamiento que tendrá la herramienta al ser usada. Tenemos creada Performer en nuestra paleta de herramientas. Ahora necesitamos situarnos en el contexto de ejecución de la herramienta.:
Para llegar a este punto hemos tenido que ampliar la relación Performer para que tenga en cuenta los nodos Intent.
Los nodos Intent son los que mantienen la relación performerBy y el incluirlos en el .odesign nos va a ayudar en el proceso de depuración.
Los nodos Intent (generalización de Order y Report) no los representamos en el layer principal por no tener interés en nuestro caso.
Creamos un nuevo Layer adicional y creamos el nodo Intent dentro del mismo.
A su vez editamos la acción Performer para que, como origen, pueda tener los nodos Intent.
Para probar nuestra relación tenemos que ampliar el ejemplo de herramientas de creación.
Un Intent (Order o Report) sólo puede ser ejecutado por un Object según nuestro modelo del dominio. De la misma manera que incluimos el objeto Object incluimos el elemento Report.
Una vez incluido el elemento report probamos la herramienta Performer.
Para completar la creación del informe “Sobre volar Ceuta” nos falta que algún Actor la ordene. Creamos la relación Command para completar el ejercicio.
Llegados a este punto tenemos una herramienta que nos permite añadir elementos y relacionarlos entre ellos.
Tenemos una herramienta de usuario final, relativamente completa.
Necesitamos que la herramienta sea más versátil. Para ello, como ejemplo, implementaremos una herramientaa de usabilidad que vimos durante la definición del metamodelo con Sirius:
Para poder editar las etiquetas directamente sobre el diagrama creamos, dentro de una nueva sección de usabilidad, un New Element Edition -> Direct Edit Label.
Rellenamos las propiedades de la edición directa de etiquetas:
Creamos un nuevo cambio de contexto. En este caso el Browse Expression es[self/]. Vamos a cambiar la etiqueta del mismo elemento.
Creamos una operación de Set para establecer el nombre con el argumento capturado (la entrada del usuario).
Ya podemos cambiar la etiqueta, sobre el diagrama, de nuestros nodos de tipo Actor.
Como ejemplo cambiamos Felipe VI por JC I.
Existen otras muchas herramientas de ayuda a la edición:
Sirius es una alternativa real – No es vaporware.
Es muy sencillo crear herramientas personalizadas con Sirius. Tiene una gran potencia y muchas capacidades.
El haber liberado el producto está permitiendo mejorar rápidamente.