Skip to content

Flowchart to HTML

In this worksheet, we will look at converting flowchart elements into HTML elements to practice different elements of the YAMTL language. This example has been borrowed from the examples provided for the Epsilon Transformation Language (ETL) and adapted to showcase features of YAMTL.

In the following subsections, you'll find:

  • Source metamodel: to define workflows
  • Source workflow model that we will use in most of the exercises
  • Target metamodel: to define HTML documents
  • Fill-in-the gap exercises
  • Solutions: attempt the exercises first!
graph BT
    B[Source Model] -->|conforms to| A[Flowchart Metamodel];
    C[YAMTL Engine] -->|reads| B;
    C -->|executes| D[YAMTLModule];
    C -->|writes| E[Target Model];
    D -->|uses| A;
    E -->|conforms to| F[HTML Metamodel];
    D -->|uses| F;

These exercises can be solved interactively in the YAMTL playground.

If you prefer to work with them in your IDE of choice, dowload the Gradle project from here.

Source Metamodel

The source metamodel is defined using Emfatic (.emf), which can be converted into an Ecore file. You can then access the flowchart classes as EPackages (Ecore has EClasses which are referenced as EPackage in Groovy) to be used within the MT definition. Let's view the class diagram and code implementation (in Emfatic) of the source metamodel representing the Flowchart domain.

Flowchart Class Diagram

The full metamodel can be read in Emfatic notation here.

Source Model

The flowchart that will be used as source model for most of the exercises is depicted in the diagram below:

graph LR
  A[Begin] -->|Start| B[Wake up];
  B --> C{Is it really too early?};
  C --> |Yes| D[Sleep];
  C --> |No| E[Get up]
  D --> |Some Time Passes| B;

Target Metamodel

Just like before, the target metamodel is also defined using Emfatic. The metamodel script is long because all HTML elements must be defined so that the transformation generates a valid HTML document. Let's check out the class diagram and code implementation (in Emfatic) of the target metamodel representing the HTML domain.

The HTML metamodel is quite large to be viewed as one class diagram, so, let's see different sections of the metamodel for better understanding.

HTML Section

HTML Class Diagram

HEADElement Section

HEADElement Class Diagram

BODYElement Section

A lot of body related elements extend the BODYElement class. To show all of those elements the BODYElement section is further divided into 2 sub-sections with a diagram each.

Sub-section 1: BODYElement Class Diagram 1

Sub-section 2: BODYElement Class Diagram 2

TABLEElement Section

TABLEElement Class Diagram

LISTElement Section

LISTElement Class Diagram

Other Classes

Other Classes Diagram

The full metamodel can be read in Emfatic notation here.

Fill-the-Gap Exercises

These examples allow learners to practice the use of the YAMTL language at different levels of complexity:

  • Exercise 1: creating an additional type of object in an output model within a rule.
  • Exercise 2: specifying conditional application of rules.
  • Exercise 3: practicing with rule inheritance.
  • Exercise 4: defining several output elements in a rule to create a complex graph of objects in the output pattern.
  • Exercise 5: using lazy and non-lazy rules.
  • Exercise 6: using helpers.

To solve these exercises interactively, go to the YAMTL playground.

Solutions

Documentation