SVG-Based Modeling Tools

 

Goal: Describing the concrete syntax of a modeling language using SVG empowered with behavioral features. This project is part of the TopModL initiative which aims at modeling then using languages both at abstract syntax (i.e. metamodel) and concrete syntax level.

Download

Description:

  1. SVG is the most widely accepted open standard for vector images. It has been released by the W3C and as it is an XML dialect, it can be queried and changed using the DOM API. DOM is another W3C standard for querying and modifying XML documents. As a consequence, SVG static images may become dynamic using the DOM API. The purpose is to use the SVG dialect for defining graphical concrete syntaxes. This requires some edition facilities at the SVG level. The aim of this project is to discover and implement a set of basic behaviours that can be added to SVG elements so that an SVG image may become an editing tool. Examples of such behaviours are moving an element by dropping the mouse, selecting an element when clicking on it, editing the content of an SVG text element, etc. We propose to use the DopiDOM framework.
  2. To define a language, it is necessary to describe both its abstract syntax and its concrete syntax. A concrete syntax is a "semantically rich" model whose representation is clearly established. Nevertheless, practice shows that synchronizing the abstract syntax and the concrete syntax, or synchronizing the concrete syntax with its representation, requires a lot of work. This project concentrates on defining a graphical concrete syntax for a language, if the abstract syntax is given. A first problem is to synchronize the concrete syntax, provided as a special kind of model, with its representation given in such extended SVG. An idea is to apply the 3-tier architecture: data is stored in the model, some SVG (extended for describing how those data are shown and updated) is interpreted and sent to the end user, i.e. the user of the language, who can visualize and interact with the graphical representation. A second problem is to synchronize the concrete and the abstract syntax. An idea is to complement the abstract syntax with constructs available in the concrete syntax. Both part can then be kept synchronized using constrains, as could be expressed using OCL.

Additional resources:

  • An overview of the project: [© Springer ; Author-distilled PDF1 ; Presentation] Fondement, F.; Baar, T.: Making Metamodels Aware of Concrete Syntax, Proceedings of the European Conference on Model Driven Architecture - Foundations and Applications (ECMDA-FA), Nuremberg, Germany, November 2005. Lecture Notes in Computer Science, Volume 3748, October 2005, Pages 190 - 204.
  • Some technical insight about use of SVG: [Author-distilled PDF1] Fondement, F.: Graphical Concrete Syntax rendering with SVG, Fourth European Conference on Model Driven Architecture Foundations and Applications - ECMDA-FA (Philippe Desfray, Alan Hartman, Richard Paige, Arend Rensink, Andy Schürr, Regis Vogel, Jos Warmer, eds.), Berlin, Germany, June 9-12, 2008, Lecture Notes in Computer Science, Springer, 2008, to appear.
  • The W3C website where the SVG and DOM specifications can be found
  • A tutorial about SVG (in German)
  • A paper on the DopiDOM framework
  • CSVG that allows to write layout contraints for SVG
  • A tutorial on metamodeling and model repositories like MDR or EMF
  • KerMeta, an action language, that could be used to help in synchronizing SVG elements and model repository
  • Koala DynamicJava is used to interpret Java ; that is used to help in synchronizing SVG elements and a JMI-based model repository (MDR)

Results:

  • A generic language editor (to be run with Java 1.5) is already available here. Its principle is to use SVG templates to describe each modeling element (i.e. token). The SVG description should also include the behaviour description using the above-mentioned technique from DopiDOM. User guide of the work is available in the second part of that document. An example is provided in "/resources/languages/umlsc". Please, note that it is an ongoing project. You can browse sources here and have a look at the evolution. In addition to traditional SVG (1.0) syntax accompanied with predefined DopiDOM components, templates may contain:
    • CSVG constraints to indicate layout (e.g. a container needs to be wide enough to contain its name)
    • Java instructions to be executed on certain events (depending on the used DopiDOM predefined components) thus permitting to update a model repository
  • Fabrice Hong has completed a student project on the above topic in summer semester 2005.
    • The first semester project presentation
    • The second semester project presentation
    • The third (and last) semester project presentation
    • The semester project dissertation
    • Here is the snapshot of the (Eclipse) project at the time of the third presentation
      • To startup the framework, run the ihm04.IHM04 class with the SVG scene as an argument. Available scenes are
        • "probxs/testFab/hand-sample.svg"
        • "probxs/testFab/petri.svg"
        • "probxs/testFab/presentation.svg" (the demo of the third presentation)
  • François Helg and Fabien Rohrer have completed raising synchronization (from editor to model) of phase 2 of the project as a semester project during winter semester 2005.

Next steps:

  • Debugging and adding new behaviours (phase 1)
    • resize
  • Synchronizing the SVG view with a model repository (phase 2). A metamodel should describe the abstract syntax of the language. A model repository can reuse that metamodel to store conforming models (sentence of the language). To create such models form an SVG scene, we need correspondence rules between the SVG view and the model repository. Raising synchronization (reflection actions from the graphical editor to the model) is achieved using a Java interpreter (Koala DynamicJava) exploiting the JMI-based MDR model repository. Nevertheless, this work has to be completed (deletion, ordering on the scene, ... events + loading an existing couple scene/model). Moreover, there is still lacking support for descending synchronization, i.e. how to impact the graphical representation when the model changes.
  • A high-level description of the language concrete syntax. This should result in a metamodel where mapping rules can be stated.

Contact person:


1. This material is presented to ensure timely dissemination of scholarly and technical work. Copyright and all rights therein are retained by authors or by other copyright holders. All persons copying this information are expected to adhere to the terms and constraints invoked by each author's copyright. In most cases, these works may not be reposted without the explicit permission of the copyright holder.

EPFL | IC | LGL