Project Views

Project Views define how your model is presented to the user, including the layout of the editing area, the types of visual representations available, and the navigation options within the project.

By configuring Project Views, you can tailor the editor experience to the specific needs of different metamodels and user workflows.

ProjectViewComponent: Defining Editor Layouts

Project View Components dictate the primary layout of the editor's main editing area. They are activated when a user selects a model element in the project navigation (typically a root element like a program or module). The user can then switch between views provided by the ProjectViewComponents.

Each projectViewComponent targets a specific ElementClass (the type of model element it applies to) and a category (which defines the structural layout of the view).

• ProjectViewComponents are typically designed to target model root elements, such as programs or modules, as they define the overall view for a significant part of the model.
• The editor provides three standard, built-in view categories:
  • tree-detail: This is a two-pane layout, featuring the model's tree view on the left and the details panel of the selected element on the right.
  • 3-pane: This layout offers three panes: the tree view on the left, the element details on the right, and a central pane typically used for a diagrammatic representation of the model.
  • diagram: This view dedicates the entire editing area to a full-size diagram of the model, maximizing the visual workspace.
• If more than one projectViewComponent is applicable to the currently selected model element and view category, the editor will display tabs, allowing the user to easily switch between these different view implementations.
• If autogenerate is enabled, the expandersExpanderA unit of generation that combines a data tree instance (functional M1 model) with a template to generate an artifact. will generate a default implementation for each view.

<editorModelExtension xmlns="https://schemas.normalizedsystems.org/xsd/editorElements/4/0/0">
  <name>application-project</name>
  <projectViewComponents>
    <projectViewComponent>
      <name>ComponentTreeDetail</name>
      <autogenerate>true</autogenerate>
      <category>tree-detail</category>
      <elementClass>elements::Component</elementClass>
    </projectViewComponent>
    <projectViewComponent>
      <name>Component3Pane</name>
      <autogenerate>true</autogenerate>
      <category>3-pane</category>
      <elementClass>elements::Component</elementClass>
    </projectViewComponent>
    <projectViewComponent>
      <name>ComponentDiagram</name>
      <autogenerate>true</autogenerate>
      <category>diagram</category>
      <elementClass>elements::Component</elementClass>
    </projectViewComponent>
  </projectViewComponents>
</editorModelExtension>

In this example, three different view components are defined for the elements::Component element class, each corresponding to a standard view category.

ProjectViewCategory: Defining view layouts

A ProjectViewCategory identifies a distinct kind of view layout — the editor ships three built-in categories (tree-detail, 3-pane, diagram, described above), and you can define your own for a fully custom view.

• name: the internal identifier, referenced by ProjectViewComponent.category and ProjectFacet.views.
• title: the user-facing label shown in the editor.
• options: key/value configuration for the category, e.g. mrp.material.symbols.icon to set a Material Symbols icon.

Custom categories are defined in a settings file, discovered via a settingsDirectory entry in expansionSettings.xml:

conf/expansionSettings.xml

<expansionSettings>
  <settingsDirectories>
    <settingsDirectory>
      <directory>../conf</directory>
    </settingsDirectory>
  </settingsDirectories>
</expansionSettings>

conf/projectViewCategory/build-expand.xml

<projectViewCategory xmlns="https://schemas.normalizedsystems.org/xsd/editorElements/4/0/0">
  <name>build-expand</name>
  <title>Expand</title>
  <options>
    <mrp.material.symbols.icon>construction</mrp.material.symbols.icon>
  </options>
</projectViewCategory>

---