22/8/2007 22:54 El Bruno

[DSL] Agregar un elemento que represente un Comentario

Buenas

hoy un pequeño post con un ejemplo de una tarea muy trivial cuando trabajamos con Domain Specific Language Tools.

Requerimientos concretos:

- crear nuevas entidades-
- relacionar las mismas con otras entidades
- crear los elementos gráficos para representar las mismas

En este caso he pensado en agregar un nuevo shape que represente un Comentario y que el mismo pueda ser relacionado con entidades ya existentes en el modelo.

 

Tutorial

Estos son los pasos necesarios para realizar esta tarea: 

1. Para comenzar crearemos un nuevo proyecto del tipo Other Project Types // Extensibility // Domain Specific Language Designer, basado en el template Minimal Language. En este caso lo he llamado Dsl15.
Nota: Un ejemplo completo de estos pasos se puede repasar en este post, desde el paso 1 al paso 9.

 

2. El proyecto que crea el asistente, consiste en un modelo con una clase principal ExampleModel que esta relacionada con otra clase ExampleElement. Todos los modelos deben poseer solo una clase root,que engloba a los demás elementos del modelo. Además crea una relación entre ExampleElement con otros ExampleElement.

Para representar nuestro comentario agregamos una nueva Domain Class al modelo. Para esto, desde la Toolbox arrastramos una instancia de Named Domain Class al diagrama.

Nota: La herramientas Domain ClassNamed Domain Class agregan ambas una DomainClass a nuestro modelo; pero la 2da agrega además dentro de la clase una domain property que identifica univocamente a la clase entre las instancias de la misma.

3. Renombramos la clase de DomainClass1 a Comment y la Domain Property Name a Comment Text, esta propiedad será la encargada de almacenar el string que representará a nuestro comentario.

 

4. Utilizando la herramienta Embedding Relationship conectamos la clase ExampleModel a nuestra clase Comment. Este tipo de relación indica que la clase hija (Comment) estará contenida dentro de la definición de la clase padre (ExampleModel). Nuestro diagrama debe quedar como la siguiente imagen.

Nota: si queremos visualizar todo el diagrama completo como si fuese un árbol, y no ver la clase Comment duplicada, seleccionamos la que está relacionada, desplegamos el menú contextual y seleccionamos la opción Bring Tree Here.

 

5. Uno de los objetivos del ejemplo es poder relacionar los comentarios con las clases ExampleElement. Para esto seleccionamos la herramienta Reference Relationship y conectamos la clase ExampleElement con la clase Comment. Nuestro diagrama debe quedar como la siguiente imagen:

 

6. Una vez creados los componentes de nuestro modelo debemos crear los elementos que representarán gráficamente a los mismos y a sus relaciones. Dentro de la plantilla Minimal Language, tenemos las siguientes opciones Geometry Shape, Compartment Shape e Image Shape. Para nuestro comentario utilizaremos un Geometry Shape, que permite representar una figura geometrica con contenido de texto dentro del mismo. Utilizando la herramienta GeometryShape agregamos una nueva Shape al diagrama, este tipo de componentes se agregan en la sección Diagram Elements del Diagrama.

 

7. Renombramos el Shape de GeometryShape1 a CommentShape y modificamos algunas propiedades para personalizar el Look and Feel del Comentario.

Fill Color: 255, 255, 192

Fill Gradient Mode: Vertical

Geometry: Rounded Rectangle

Outline Color: 255, 255, 128

Outline Thickness: 0.01

 

8. A continuación personalizaremos el contenido del Shape para que dentro del mismo posea un título y un contenido que represente el comentario. Para esto seleccionamos el Shape y desplegando el menú contextual seleccionamos la opción Add // Text Decorator, renombramos la propiedad por Title y modificamos las siguientes propiedades:

Default Text: Comment

Font Style: Bold

Name: Title

Position: InnerTopCenter

 

9. Agregamos un nuevo Text Decorator y modificamos las siguientes propiedades:

Default Text:

Font Size: 7

Name: Comment

Position: Center

Nuestro CommentShape debe quedar como en la siguiente imagen.

 

9. Es necesario relacionar la clase Comment con el shape CommentShape para que la clase se represente con la figura que hemos creado. Dentro del panel DSL Explorer, seleccionamos el nodo Diagram, desplegamos el menu contextual y seleccionamos la opcion Add New Shape Map. Dentro del formulario de configuración, seleccionamos la clase Comment y el Shape CommentShape para el mapeo entre ambos.

 

 

10. Este mapeo crea una nueva conexión entre el shape y la clase. Aunque todavía es necesario relacionar la propiedad CommentText de la clase Comment con el Text Decorator Comment del shape CommentShape, para que nuestros cambios en el modo gráfico del comentario se reflejen dentro del modelo que hemos diseñado.

Seleccionamos el mapeo entre ambos elementos y seleccionamos el panel DSL Details. Sobre la pestaña Decorator Maps, marcamos el check sobre el decorator Comment y en el Combo Display Property seleccionamos la propiedad Name.

 

11. Otro componente gráfico que debemos agregar es la linea que una a los comentarios con los elementos del diagrama. Para esto desde la Toolbox agregamos un nuevo elemento del tipo Connector. Renombramos al mismo de Connector1 a ElementCommentConnector y modificamos las siguientes propiedades.

Color: 192, 192, 0

Name: ElementCommentConnector

Thickness: 0.01

 

12. A continuación mapeamos este conector a la relacion ExampleElementReferencescomments que conecta los elementos con los comentarios. Dentro del panel DSL Explorer, seleccionamos el nodo Diagram, desplegamos el menu contextual y seleccionamos la opcion Add New ConnectorMap. Dentro del formulario de configuración, seleccionamos la relación ExampleElementReferencescomments y el Conector ConnectorElementToComment para el mapeo. Debemos ver una nueva línea en nuestro modelo que representa la relación entre ambos.

 

13. Finalmente necesitamos crear las herramientas en la Toolbox que permitirán crear nuevos comentarios y asociarlos a elementos.
Dentro del panel DSL Explorer, seleccionamos el nodo Editor // Toolbox Tabs // Dsl15, desplegamos el menu contextual y seleccionamos la opción Add New Connection Tool. Dentro del nodo Tools por debajo de Dsl15 veremos que se ha creado una nueva herramienta llamada ConnectionTool1 que permite crear relaciones entre elementos. Seleccionando la misma modificamos las siguientes propiedades:

Caption: Reference Comment

Connection Builder: ExampleElementReferencescommentsBuilder

Name: ReferenceComment

ToolBox Icon: Resources\ExampleConnectorToolBitmap.bmp

 

14. Desplegamos nuevamente el menu contextual sobre Dsl15 y seleccionamos la opción Add New Element Tool y veremos que se ha creado una nueva herramienta llamada ElementTool1. Esta herramienta permite crear instancias de las clases de nuestro modelo. Seleccionando la herramienta modificamos las siguientes propiedades:

Caption: Comment

Class: Comment

Name: Comment

Toolbox Icon: Resources\ExampleShapeToolBitmap.bmp

 

15. El modelo y los componetes que lo componen está finalizado. Para probar el modelo primero debemos generar el código que compone el mismo, para esto desde el panel Solution Explorer presionamos el botón Transform All Templates. Una vez que se ha finalizado la generación de código podemos compilar y presionando F5 probar nuestro modelo.
Este es un ejemplo de Visual Studio en Modo Debugging con el modelo y los comentarios que hemos creado.

 

Conclusión

Pues bien que les sea útil y espero que sirva de referencia para aquellos que quieran comenzar a probar con las Domain Specific Language Tools. La creación de los modelos no es una tarea muy complicada pero si es necesario tener un en claro el dominio sobre el que trabajaremos, antes de comenzar. En futuros post, modificaré el shape de Comment para que sea multilínea, personalizaré los nosos del DSL Explorer y otras customizaciones más.

A continuación pequeño video que demuestra las capacidaes del mismo y el código de ejemplo se puede descargar desde aquí (gracias Geeks.ms).

 


Video: DSL - Comment Sample

 

Saludos @ Home

El Bruno

Crossposting from ElBruno.com
Archivado en: ,,
Comparte este post: