Advice for which elements to use to achieve a design (GNode, GLabel, GCompartment, GPort)

[rileydanejohnston]

I’m trying to get a better understanding of which GShapeElements I should use to achieve a design like the photo below. I can render the parent node & title text by building a GNode then adding a GLabel as a child (is there a better way to do this?). For the incoming/outgoing texts and their GPorts:

• Would I use GCompartment to group the incoming and outgoing text sections? So the parent node would have one GCompartment to hold the incoming section and one for outgoing section?
• What is the best way to implement the incoming text and GPort? Would I need to create a GNode/GCompartment to act as a container, then add a GLabel & GPort as children to that container? Or can I simply create a GPort then move the text over with styles?

Please let me know if you have any questions. Thank you!

[martin-fleck-at]

Hi @rileydanejohnston, as you have probably guessed there is no single, one way to properly represent the UI through the graphical model. In general, however, I'd recommend using compartments to group elements that should be layouted together.

For your use case, I believe that the client auto-layouting (e.g., vbox) may not be able to handle the positioning of the ports out of the box but if you provide the layouting/positioning manually (either from the server or in the client), it should definitely work. Regarding the grouping, it is really up to you but based on your colors and "semantics" a label-port-pairing makes the most sense to me as the positioning of the label depends on the position of the port.

In sprotty the usual way is to have the outgoing/incoming label as a child of the port to consider them as one unit on the port-level. In that case, you would not need a compartment. However, it really comes down to your layouting information. We had a scenario where the data came from an external source and label and port positions were considered separately. In that case, we used a compartment for grouping the label and the port together instead of a parent-child hierarchy. Whether you want to group all outgoing label-port-pairs together is up to you and how you do the layouting but probably it will be sufficient to do the layouting per pair. As you already sketched in your drawing, using a GNode as an overall container that contains the title-label as well as all the label-port pairs is the easiest way.

In general, if you need more "meaningful" model elements or you need custom properties, you may also extend the existing graphical model with your own classes.