Manual

Viewpoint

Each viewpoint in Jjodel represents a distinct perspective within a modeling language, enabling users to organize and address specific concerns, such as concrete syntax, validation, generation, or even custom interaction behavior. Viewpoints provide flexibility and adaptability, allowing users to define multiple interpretations or visualizations of the same model depending on the context, stakeholder requirements, or modeling objective.

Core Structure of a Viewpoint

A viewpoint in Jjodel is not merely a static perspective—it is a highly modular and dynamic construct designed to support complex modeling scenarios. Each viewpoint is composed of the following key elements:

 

Collections of Views

Views within a viewpoint are responsible for defining how specific types of model elements are rendered, processed, or interacted with. For instance:

• – In a concrete syntax viewpoint, each view determines the visual representation of a model class, such as rendering a “State” as a circle with labels and a “Transition” as an arrow between states.
• – In a generation viewpoint, views specify how model elements translate into code or other artifacts, such as generating a state machine’s corresponding JavaScript or Python implementation.
• – In a validation viewpoint, views highlight errors or inconsistencies by visually marking or describing problematic elements.

Views ensure that models can be customized and fine-tuned for specific tasks, stakeholders, or technical requirements.

 

Constraints for Element Applicability

To manage which instances each view applies to, Jjodel leverages constraints expressed in OCL (Object Constraint Language) or JavaScript. These constraints filter model elements based on their classes, properties, or relationships, enabling precise control over what is included in a view.

 

For example:

• – An OCL expression might filter all instances of a “State” class where isFinal = true.
• – A JavaScript expression might dynamically select elements based on computed properties or external configurations.

Constraints allow viewpoints to adapt dynamically to changes in the model and support sophisticated filtering mechanisms for rendering, validation, or generation.

 

Customization for Style, Layout, and Interactions

Each view can define bespoke settings to control its visual style (e.g., colors, borders, fonts), layout behavior (e.g., hierarchical vs. freeform arrangement), and interaction rules (e.g., drag-and-drop functionality, click events, or live previews).

• – Style: Views use JSX templates and CSS to specify how elements appear, offering state-of-the-art flexibility powered by React.
• – Layout: The visual arrangement of model elements adapts to the nature of the model. For instance, hierarchical structures like trees or graphs can be auto-aligned, while freeform diagrams support manual placement.
• – Interactions: Views can define custom event handlers for operations like dragging, resizing, or linking elements. This allows for the creation of highly interactive model editors.

These customizations ensure that a modeling language feels intuitive and responsive, catering to diverse user needs