Developing the GMF model to add a new mediator in WSO2 Integration Studio -Part 3
esb.gmfgraph
Let’s move on to esb.gmfgraph modeling. In esb.gmfgraph we have to consider the following three modeling
- Figure Descriptor
- Node
- Label
- Go to the plugin “org.wso2.developerstudio.eclipse.gmf.esb” in the project explorer. Double click on it. Select model → esb.gmfgraph.
2. Double click on “esb.gmfgraph”. Select platform → Canvas esb → Figure Gallery Default.
3. Let's create a Figure Descriptor for Calculator mediator. Right click on “Figure Gallery Default” and select New Child → Figure Descriptor.
4. Right click on the newly created Figure Descriptor and click on “Show Properties View”.
5. Set CalculatorMediatorFigure as the Name property.
6. Add Custom Figure to Figure Descriptor CalculatorMediatorFigure. Right click on CalculatorMediatorFigure figure descriptor and select New Child → Custom Figure.
7. Right click on newly created Custom Figure and click on “Show Properties View”
8. Set CalculatorMediatorGraphicalFigure as the Name property and org.wso2.developerstudio.eclipse.gmf.esb.diagram.custom.EsbGraphicalShape as Qualified Class Name.
9. Add Flow Layout to Custom Figure CalculatorMediatorGraphicalFigure. Right click on CalculatorMediatorGraphicalFigure and select New Child → Flow Layout.
10. Right click on the newly created Flow Layout and click on “Show Properties View”. No need to change the Flow Layout properties unless otherwise required. Keep the default values as it is.
11. Add Background to Custom Figure CalculatorMediatorGraphicalFigure. Right click on CalculatorMediatorGraphicalFigure and select New Child → Background color RGB color.
12. Right click on newly created Background and click on “Show Properties View”. Set the value 230 for Blue, Green and Red color property.
13. Add CalculatorMediatorProperty label to Custom Figure CalculatorMediatorGraphicalFigure. Right click on CalculatorMediatorGraphicalFigure and select New Child → Label.
14. Right click on newly created Label and click on “Show Properties View”. Set “CalculatorMediatorPropertyLabel” as Name property and “<…>” as Text.
15. Similarly, create a label for CalculatorMediatorDescriptionFigure(Follow the previous step).
Set “CalculatorMediatorDescriptionFigure” as Name property and “<…>” as Text.
16. Add getFigureCalculatorMediatorPropertyLabel to Figure Descriptor CalculatorMediatorFigure. Right click on CalculatorMediatorFigure figure descriptor and select New Child → Child Access.
17. Right click on the newly created Child Access and click on “Show Properties View”. Set “getFigureCalculatorMediatorPropertyLabel” as Accessor and select “Label CalculatorMediatorPropertyLabel” as Figure.
18. Similarly create a Child Access for getFigureCalculatorMediatorDescriptionFigure (follow the previous step). Set “getFigureCalculatorMediatorDescriptionFigure” as Accessor and select “Label CalculatorMediatorDescriptionFigure” as Figure.
We have successfully modeled the figure descriptor part for Calculator mediator. Now let’s focus on how to model the Label part.
19. Open esb.gmfgraph → Canvas esb.
Right click on Canvas esb and select New Child → Labels Diagram Label.
20. Right click on the newly created Child Access and click on “Show Properties View”. Set the properties as follows
Accessor — Child Access getFigureCalculatorMediatorPropertyLabel
Content Pane — false
Element Icon — false
External — Figure Descriptor CalculatorMediatorFigure
Name — CalculatorMediatorName
21. Similarly, create another label for “CalculatorMediatorDescription” and set the values as shown below
Accessor — Child Access getFigureCalculatorMediatorDescriptionFigure
Content Pane — false
Element Icon — false
External — Figure Descriptor CalculatorMediatorFigure
Name — CalculatorMediatorDesciption
We have successfully modeled the figure descriptor part and label part for Calculator mediator. Now let’s focus on how to model the Node part.
22. Open esb.gmfgraph → Canvas esb.
Let’s create a new node for Calculator mediator. Right click on Canvas esb and select New Child → Nodes Node
23. Right click on the newly created Node and click on “Show Properties View”. Set the properties as shown below
Affixed Parent Side — NONE
Figure — Figure Descriptor CalculatorMediatorFigure
Name — CalculatorMediator
23. Create a new node for CalculatorMediatorInputConnector. (follow the previous steps to create a node). Set the properties as shown below
Affixed Parent Side — WEST
Figure — Figure Descriptor EastPointerFigure
Name — CalculatorMediatorInputConnector
23. Create a new node for CalculatorMediatorOutputConnector. (follow the previous steps to create a node). Set the properties as shown below
Affixed Parent Side — EAST
Figure — Figure Descriptor EastPointerFigure
Name — CalculatorMediatorOutputConnector
Finally, you should get the three nodes as shown below in Canvas esb
This ends the modeling of esb.gmfgraph.
