Pyramidion : a framework for Domain-Specific Editor

Talk from IWST 2024: "Pyramidion : a framework for Domain-Specific Editor"

PDF: http://archive.esug.org/ESUG2024/iwst-day2/01-Pyramidion.pdf

1. www.thalesgroup.com
www.univ-brest.fr
www.labsticc.fr
Pyramidion : a frameworkfor
Domain-SpecificEditor
Yann LE GOFF
Pierre LABORDE
Alain PLANTEC
Eric LE PORS
[email protected]
[email protected]
[email protected]
[email protected]
IWST 2024

2. 2
{OPEN}
Contents
Definition
03
Example
04
Architecture
06
Validation
18

3. 3
{OPEN}
Whydo youneeda Domain-SpecificEditor ?
Createa GraphicalUser Interface
Choosea GUI libraryand a GUI language
WrittingCode
–It isslow
–Executethe code to know whatyouare doing
–You needto eitherknow the languageor refereto the
documentation
Usinga GUI editor
–It isfast
–WYSIWYG
–The possible modifications are display in the dedicatedtool
–The possible modifications are limitedby the tool
Pyramidion
A frameworkto createDomain-Specificeditor
Usedto createPyramida GUI Editor.
Domain = objectsmodifiedby
the editor

4. 4
{OPEN}
A Traffic Light example(1/3)
Step1 : Select the element
I needa widget to select the element
I needa selectionsystem
Step2 : Modifythe element
I needa widget to modifythe selectedelement
I needto know wichelementare selected
I needa system thatwilluse the DSL to change the element

5. 5
{OPEN}
A Traffic Light example(2/3)
Treeplugin
To select one element and display the selection
Background plugin
To Display and change the colorof the selectedelements
Plugin = a tooladdedto the
editor

6. 6
{OPEN}
A Traffic Light example(3/3)

7. 7
{OPEN}
Editor
A plugin basedarchitecture
System to addwidgets to the view
View
System
1
Modification
System
1
Selection
System
1
System to select the element
System to modifythe element
Plugins can
Addnew widgetsto the viewof the editor
Modifythe currentselectionof the editor
Addnew propertiesto the modification system
Interractwithotherplugins
Builderto createthe Editor
It uses a listof plugins and installthemon the
editor
Builder
create
*
Plugin *
FrameworkUsers

8. 8
{OPEN}
The installation of the plugins
Builder TreePlugin
Background
Plugin
1: configuration
2: configuration
Phase 1:
Configuration
View
System
4: viewinstallation
5: addingthe treewidget
Phase 2:
View
Selection
System
Modifications
System
9: connecton the editor
12: connecton the editor
11: connectthe treeplugin to the selectionsystem
13: connectthe background plugin to the selectionsystem
14: connectthe background plugin to the modifications system
Phase 3:
Connection

9. 9
{OPEN}
ViewSystem (1/2)
Plugin
Widget
Panel
Displayed
Widget
View
*
*
1
Panel Builder
Manager
Widget
Adpatater
ID
Panel Builder
*
*
Editor

10. 10
{OPEN}
ViewSystem (2/2)
:Panel Builder
Manager
Left
Left: Panel
Builder
TreePlugin
: Widget
Adaptater
treePresenter:
Widget
Left

11. 11
{OPEN}
SelectionSystem (1/2)
+ firstLevelElementchanged:
+ selectionChanged:
Collection
firstLevelElements selection
SelectionSystem
Plugin
change
<<signal>>
FirstLevelElementChanged
<<signal>>
SelectionChanged
reactto
Editor

12. 12
{OPEN}
SelectionSystem (2/2)
SelectionSystem
TreePlugin : Plugin
change
Background Plugin :
Plugin
reactto
<<signal>>
SelectionChanged
emit

13. 13
{OPEN}
Modifications System (1/4)
Properties
Manager
Plugin
define
define
Editor
*
Property
*
Input Builder
Command
1
1
Widget Adaptater
<<signal>>
SelectionChanged
reactto
update

14. 14
{OPEN}
Modifications System (2/4)
GUI Editor:
Editor
Visual Plugin :
Plugin
Visual : Properties
Manager
: Widget
Adaptater
Background
Property: Property
ColorInput Builder
: Input Builder
Background
Command :
Command
Background Plugin
: Plugin
Border Plugin :
Plugin
Border Width
Property: Property
NumberInput
Builder: Input
Builder
Border Width
Command :
Command

15. 15
{OPEN}
Modifications System (3/4)
Visual : Properties
Manager
Background
Property: Property
: Widget
Adaptater
GUI Editor:
Editor
ColorInput Builder
: Input Builder
Background
Command :
Command

16. 16
{OPEN}
Modifications System (4/4)
Visual : Properties
Manager
Background
Property: Property
: Widget
Adaptater
GUI Editor:
Editor
ColorInput Builder
: Input Builder
Background
Command :
Command
: ColorInput
Widget

17. 17
{OPEN}
Multi Selection

18. 18
{OPEN}
Pyramid: a Bloc editor createdwithPyramidion at Thales

19. Merci
www.thalesgroup.com
www.univ-brest.fr
www.labsticc.fr