1

I was taught UML early on in university but all the examples were always with simple console applications. Now that I have been assigned to develop a project with a graphical interface (using Java) and was required to submit a UML model, I haven't got a clue how to go about representing the graphical frontend aspect of the application in tandem with the non graphical backend classes. I'm not quite sure where to even start.

How would you suggest I go about doing this?

Lucas Zamboulis
  • 2,494
  • 5
  • 24
  • 27
Gilberto Tezcatlicóatl
  • 23
  • 5
  • Similar question has been answered here: [Model GUI in UML][1] [1]: http://stackoverflow.com/questions/21846323/should-user-interfaces-be-included-in-the-class-diagram-and-sequence-diagram/21980725#21980725 – Vladimir Jun 06 '14 at 05:33

3 Answers3

2

I think you need to start by asking what you want to model and then that leads to you work out whether UML is useful and if so, which parts. Start by asking who is going to use this model and for what. Model with a purpose.

If you want to model the class structure of your application, then a UML class model might be useful. But even then, are you trying to illustrate the UI classes or the information (domain) structure, or both?

If you are trying to show how the runtime interactions work, then a sequence diagram might be useful.

If it is modularisation of code and dependencies between modules, a package diagram would do this.

If you have a complex user interface program with a sophisticated component structure which you want to explain, then it's no different to server software and a component diagram would be useful.

Whenever creating a model ask why you are doing it, for whom and what they want from it. That leads you to select something useful rather than just doing "busy work".

Eoin
  • 555
  • 3
  • 9
  • Thanks mate, those are all great things worth considering. Though specifically I wanted to know how would I approach modeling the UI classes in a UML class diagram? – Gilberto Tezcatlicóatl Mar 23 '14 at 20:04
  • 1
    @GilbertoTezcatlicóatl I don't think there is anything very specific about modelling UI classes in UML compared to UML modelling of other class structures. You would have model classes, view classes, controller classes, containers (for example). Are there specific problems you are having? – Eoin Apr 26 '14 at 22:21
2

Usually UI modeling involves 3 things:

  • How the UI looks like: this is not usually done in UML. You need a tool like Visio or Pencil to do that.
  • How the UI is structured: This considers how the UI is structured into classes. How these classes are related to each other (dependencies, navigation, ...). How they are related to domain classes. How they are related to the Use Cases (which ones they implement). This fits naturally in UML structural diagrams: class diagram, package diagram, component diagram, ...
  • How the UI behaves in runtime: How certain actions cause objects to be created and methods to be called to perform the desired actions. This fits naturally in UML behavioral diagrams : sequence diagram, communication/collaboration diagram, activity diagram.

So basically in your UML model, UI classes (Screens, Applets, Pages, ...) will appear like normal classes. This will allow UI structure and behavior to fit in your application view models.

Note that there are tools that make use of UML profiles to provide UI mocking as alternative to graphical tools like Visio. In this custom profile you may find for example stereotyped class called << screen >> and stereotyped dependency called << navigation >> to model how UI elements trigger UI navigation to other screens.

M.Sameer
  • 3,072
  • 1
  • 24
  • 37
  • Yes! Thank You! Specifically I wanted to know how to model the structure, the class diagram if you will. For example if I were to model a JFrame with a JTextField, considering the JTextField is instantiated from a class of its own, would each TextField be modeled as a standalone class linked to the JFrame? Or would it be featured as a variable of type JTextField within the JFrame class? – Gilberto Tezcatlicóatl Mar 23 '14 at 19:54
  • JTextField would be a member variable in the JFrame class. If you inherited JTextField class to make custom text fields, you will need it to appear in the model as well. – M.Sameer Mar 23 '14 at 21:35
  • Excellent, I think I can take it from here. Thank you very much. – Gilberto Tezcatlicóatl Mar 23 '14 at 22:57
1

Asides from the previous answers, a common design for UI is one of model-view-controller (MVC). Some UML tools actually have stereotypes to help you with representing these elements. The model is the data that you want to show, the view is how it is displayed, and the controller links the two, taking the input to the UI and processing it to change the display with the new data from the model.

It is also easy and useful to create sequence diagrams for a MVC system to show the actions and their effects.

CharlesRivet
  • 542
  • 2
  • 7
  • good point@Bltorg:When we talk about stereotypes,we are about creating profile that extends the meta classes but this is not the standard way to model UI concepts .What do you think? – Carlos Mar 24 '14 at 18:48
  • 1
    If your organisation needs to express some elements that are particular to their domain, a profile is an effective way of creating a domain-specific modeling language (DSML) that will simplify the diagrams and the comprehension of the users. DSMLs can provide with a slightly higher level of abstraction over pure UML and improve your productivity. In the case I had in mind, the stereotypes are often only used to change the shape of the element, making them easily recognisable on diagrams. The meta-classes are therefore only extended in a graphical manner - semantics are not affected. – CharlesRivet Mar 24 '14 at 20:38