User interface diagram to UI - donvadicastro/generator-xmi GitHub Wiki
User interface diagram
Generated screen
| Conrol | Description | Example |
|---|---|---|
| Text | Represents simple editbox |  |
| Text Stereotype="date" |
Represents simple editbox |  |
| Button | Action control represented as clickable button |  |
| Checkbox | Allows to confirm user intention |  |
| Combobox | Allows to select single value from list of proposals |  |
| Panel | Allows to group controls into single container | |
| Table with selection | Allows to represent list data |  |
To be able to populate data into specific controls - this controls need to be linked with diagrams that defines business process to collect data. This linkage can be implemented with using "Information flow" link connector.
As data comes from business process to controls - flow should be properly directed: from process to control.
In this example grid control is linked with diagram, defined some business process. Diagram can be dragged to UI form.
After generation - grid will trigger process execution to bind data. As process is represented with separate API endpoint - result of API call will be used as grid data.
Similar implementation with binding combo list
As each class in class diagrams will be represented with own form to manage data - it's expected that user custom forms also need access to this data. The most common example - allow to select single item from all available items for particular domain entity type.
To add this sort of component into user interface form to get automatic data linkage to domain entity values - class element need to be added to user interface form. How to do:
- Drop any class into user interface model and specify "drop as" parameter to "instance"
- In property window change type of this control to "GUIElement"
- Specify all required attributes (name and alias) and set stereotype to "combobox"
After this actions class element will be represented as native "combobox" and will be linked to defined class entity.
After form generation - control will be bound to data for this class entity.
When you want to link two controls with parent-child relation, so child control will use selected data from parent to update it's content - you need to link dependent controls with "Information flow" link.
The most common use case for this relation - cascading dropdowns (select state after selecting country).