Composite Panel

[yamtl]

CompositePanel

The CompositePanel serves as a structural design pattern in the playground UI, employing the concept of composition to enhance modularity. It extends the Panel class and acts as a composite object that can encapsulate multiple sub-panels. This allows for the creation of a hierarchical structure of panels, akin to a tree structure in object-oriented design. There are no inherent restrictions on the number of contained panels, and this includes the possibility of nesting other CompositePanels.

A typical use case is to use a composite panel to couple an editor with a diagram. See an example in YAMTL's playground, where CompositePanels have been used to implemente MetamodelPanel and ModelPanel.

Configuration

A composite panel def needs to be declared in the tool configuration:

  panelDefs:
    - id: composite-panel
      panelclass: CompositePanel
      icon: diagram

A composite panel is wired in an activity and declares childrenPanels, giving some structure to the UI of the playground.

  panels:
    - id: smm-panel-composite
      name: Source Metamodel
      ref: composite-panel
      childrenPanels:
        - id: panel-smm
          name: EMFatic
          ref: emfatic
          file: CD.emf
        - id: panel-smm-diagram
          name: Diagram
         ref: plantuml
      buttons:
        - id: show-editor-button
          icon:  editor
          internal: toggle
          targetPanel: panel-smm
          hint: Toggle editor
        - id: show-diagram-button
          icon:  diagram
          internal: toggle
          targetPanel: panel-smm-diagram
          hint: Toggle diagram

CompositePanel can be regarded as the composition operator of a DSL for defining UIs for the playground.

Internal toggle buttons are now built-in and can be used to toggle contained panels. A toggle button is declared within the section buttons of a composite panel and is defined with id, name, icon and hint. In addition, the internal action must be toggle and the targetPanel must be the panel to be toggled.

Changes that were implemented

• Element creation is now made outside of constructors because we could not use constructor parameters in createElement. Hence, a new operator initialize has been added to Panel and this needs to be overriden by Panel specializations. Once a panel is instantiated, it needs to be explicitly initialized.
• OutputPanel now extends ProgramPanel. ModelPanel can be regarded as an instance of CompositePanel and is therefore not needed explicitly.
• Finding panels now requires traversing the structure created by CompositePanels.

Future work

• Add validation to cover toggle buttons.

[arturboronat]

An example of how it looks like:

[szschaler]

Thanks, @arturboronat . This is quite neat.

One thing it does expose, though, is the fact that panel functionality is currently spread out all over the place in the code base rather than having been integrated into the Panel class and its sub-classes. As a result, you had to change code all over the place. This will become unsustainable in the medium term and I propose that we should clean this up -- either in this PR or by separate issue / PR. I also came across this issue in PR #133 (where my solution actually makes the problem worse rather than improving it, so I will propose a better solution in a bit).

[arturboronat]

Yes, separation of concerns could be improved. At the moment is not a big deal because the codebase is small.

A minimal change that would help is to put all panels in a subfolder panels.

[barnettwilliam]

Moved to PR #151