Should user interfaces be included in the class diagram and sequence diagram?

Question

I have a project and I\'m required to produce the class and sequence diagram. It is a procurement website. My only problem is that I don\'t know how to associate the web pag

Answer 1

In your class diagram you will normally describe/design the (data) model part of your application, while the user interface (UI) corresponds to the view part within a model-view-controller (MVC) architecture. As a UI cannot be designed with a class diagram, I cannot see any meaning for a "UserInterface" class.

However, there is a new modeling language for modeling user interfaces: the Interaction Flow Modeling Language (IFML), which has been adopted as a standard by the OMG in March 2013. If you are serious about UI modeling, then you should use that language.

Answer 2

There are several levels of abstraction for UI modelling.

• Use cases and state machines. These diagrams are made in human terms.
• Planning on the server/page/frame level. Here UML deployment and component diagrams are useful.
• Planning of the content of UI, defining elements and functonalities and connections between them WITHOUT choosing the concrete components. No standard for this, extremely important, stage. Use diagrams that you like. Class ones are usable, but in not standard reading.
• Planning of the content of screen elements WITH choice of the UI components (frames, buttons and so on) and connecting functionalities to them. On this level you can use class and sequence diagrams.
• Drawings of the planned screenshots. For this level there are no UML diagrams. And a common standard doesn't exist.

These levels require MANY diagrams. The lower the level, the more diagrams it needs. Putting user interfacES into one class diagram is possible for a minuscule project, but you can't say it SHOULD be done so.

Answer 3

Classes of UI can be modeled as ordinary UML classes. You can create stereotype "webpage" if you want of course. If it is needed to define internal structure of UI class use composition. In sequence diagram you can define interaction between instances of UI classes in common way.

Example: